Refactoring and documentation

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/CommonPropertyView.mjs

@@ -1,3 +1,7 @@
+/**
+ * A class that dispalays some common parts of a result
+ */
+
 export default class CommonPropertyView {
   constructor (propList, context, resultManager) {
     this.background = document.createElement('div')
@@ -17,7 +21,9 @@ export default class CommonPropertyView {
   }
 
   /**
-   * Run everytime the tab is opened
+   * Display some common parameters from a result. Run everytime the tab is opened, or a result is recieved
+   * @param {*} result a recieved result
+   * @param {*} propList a list of '.' separated paths to properties in a result
    */
   displayProps (result, propList) {
     this.keys.innerHTML = ''
@@ -43,9 +49,6 @@ export default class CommonPropertyView {
         line2.innerText = value // eslint-disable-line
         this.values.appendChild(line2)
       }
-
-      // const maxes = result.getTaggedValues(8)
-      // console.log(maxes)
     }
   }
 }

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/IJTPropertyView.mjs

@@ -1,3 +1,6 @@
+/**
+ * A class that displays the most important tightening related values of a result
+ */
 export default class IJTPropertyView {
   constructor (context, resultManager) {
     this.background = document.createElement('div')
@@ -23,7 +26,10 @@ export default class IJTPropertyView {
   }
 
   /**
+   * Display some tightening specific values in a result.
    * Run everytime the tab is opened
+   * @param {*} result a result
+   * @returns Nothing
    */
   displayProps (result) {
     function makeHeading (text) {
@@ -44,7 +50,7 @@ export default class IJTPropertyView {
       return
     }
 
-    const finals = content.getTaggedValues(1)
+    const finals = content.getTaggedValues(1) // Get all reported values with ValueTag === 1 (Final)
 
     this.name.appendChild(makeHeading('Value'))
     this.low.appendChild(makeHeading('Low'))

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Demo/USDemo.mjs

@@ -132,8 +132,6 @@ export default class USDemo extends BasicScreen {
       return
     }
 
-    // console.log(this.settings.productId)
-
     const values = [
       {
         value: this.settings.productId,

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Servers/Settings.mjs → OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/GraphicSupport/Settings.mjs

@@ -1,9 +1,9 @@
-import BasicScreen from '../GraphicSupport/BasicScreen.mjs' // Basic functionality application code for the screen functionality
+import BasicScreen from './BasicScreen.mjs' // Basic functionality application code for the screen functionality
 
 /**
- * The purpose of this class is to generate an HTML representation of tightening selection and basic
- * display of a result for OPC UA Industrial Joining Technologies communication
- */
+ * The purpose of this class is to generate an GUI
+ * for editing settings used elsewhere in the app
+ **/
 export default class Settings extends BasicScreen {
   constructor (webSocketManager) {
     super('Settings', 'tighteningsystem')
@@ -68,11 +68,18 @@ export default class Settings extends BasicScreen {
     this.container = editArea
 
     this.createButton('Save', this.displayArea, () => {
-      this.settings.productid = this.productId
-      this.settings.button1selection = this.JoiningProcess1
-      this.settings.button2selection = this.JoiningProcess2
-      this.settings.initialviewlevel = this.initialViewLevel
-
+      if (this.productId) {
+        this.settings.productid = this.productId
+      }
+      if (this.JoiningProcess1) {
+        this.settings.button1selection = this.JoiningProcess1
+      }
+      if (this.JoiningProcess2) {
+        this.settings.button2selection = this.JoiningProcess2
+      }
+      if (this.initialViewLevel) {
+        this.settings.initialviewlevel = this.initialViewLevel
+      }
       this.webSocketManager.send('set settings', null, null, this.settings)
     })
 
@@ -85,11 +92,21 @@ export default class Settings extends BasicScreen {
     if (msg.productid || msg.initialviewlevel
     ) {
       this.settings = msg
-      this.productId = msg.productid
-      this.JoiningProcess1 = msg.button1selection
-      this.JoiningProcess2 = msg.button2selection
-      this.methodDefaults = msg.methoddefaults
-      this.initialViewLevel = msg.initialviewlevel
+      if (msg.productid) {
+        this.productId = msg.productid
+      }
+      if (msg.button1selection) {
+        this.JoiningProcess1 = msg.button1selection
+      }
+      if (msg.button2selection) {
+        this.JoiningProcess2 = msg.button2selection
+      }
+      if (msg.methoddefaults) {
+        this.methodDefaults = msg.methoddefaults
+      }
+      if (msg.initialviewlevel) {
+        this.initialViewLevel = msg.initialviewlevel
+      }
     }
 
     try {

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/GraphicSupport/TabGenerator.mjs

@@ -81,8 +81,10 @@ export default class TabGenerator {
    * @param {Object} content The graphical representation of the content, preferably a descendent of the BasicScreen class
    * @returns
    */
-  generateTab (content, viewLevel) {
-    this.containerList.push(new Tab(this.contentDiv, content, this.selector, viewLevel, this.currentViewLevel))
+  generateTab (content, viewLevel, selected) {
+    const tab = new Tab(this.contentDiv, content, this.selector, viewLevel, this.currentViewLevel)
+    tab.select()
+    this.containerList.push(tab)
     // If it is the first, then show it
     // if (this.containerList.length === 1) {
     //  this.containerList[0].select()

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Methods/MethodGUICreator.mjs

@@ -1,3 +1,6 @@
+/**
+ * The purpose of this class is to display a GUI for filling in arguments and calling a method
+ */
 export default class MethodGUICreator {
   constructor (screen, methodManager, entityManager, settings) {
     this.methodManager = methodManager

OPC_UA_Clients/Release2/IJT_Web_Client/Javascripts/Views/Servers/ServerGraphics.mjs

@@ -1,5 +1,5 @@
 import BasicScreen from '../GraphicSupport/BasicScreen.mjs'
-import EndpointGraphics from './EndpointGraphics.mjs'
+import EndpointGraphics from '../EndpointTab/EndpointGraphics.mjs'
 
 /**
  * The purpose of this class is to generate a webpage that shows a list of OPC UA servers that the user is interested in
@@ -99,7 +99,7 @@ export default class ServerGraphics extends BasicScreen {
     function connect (point, endpointTabGenerator) {
       const newConnection = new EndpointGraphics(point.name, settings)
       newConnection.instantiate(point.address, socket)
-      endpointTabGenerator.generateTab(newConnection, true)
+      endpointTabGenerator.generateTab(newConnection, 1, true)
     }
 
     function disconnect (point, endpointTabGenerator) {

OPC_UA_Clients/Release2/IJT_Web_Client/Resources/settings.json

@@ -2,7 +2,7 @@
   "productid": "www.atlascopco.com/CABLE-B0000000-",
   "button1selection": "ProgramIndex_1",
   "button2selection": "ProgramIndex_2",
-  "initialviewlevel": "4",
+  "initialviewlevel": "1",
   "methoddefaults": {
     "ns=1;s=TighteningSystem/Simulations/SimulateResults/SimulateSingleResult": {
       "arguments": [

OPC_UA_Clients/Release2/IJT_Web_Client/index.html

@@ -35,8 +35,8 @@
 
   import ServerGraphics from 'views/Servers/ServerGraphics.mjs'
   import TabGenerator from 'views/GraphicSupport/TabGenerator.mjs'
-  import EndpointGraphics   from 'views/Servers/EndpointGraphics.mjs' 
-  import Settings from 'views/Servers/Settings.mjs'
+  import EndpointGraphics   from 'views/EndpointTab/EndpointGraphics.mjs' 
+  import Settings from 'views/GraphicSupport/Settings.mjs'
 
 
     let connection = false
@@ -59,6 +59,7 @@
       container.appendChild(label)
 
       container.select = document.createElement('select')
+      container.select.classList.add('mainDropDown')
       container.appendChild(container.select)
 
       const viewLevels = [['Basic', 1], ['Simple', 2], ['Detailed', 3], ['Specialized', 4], ['Settings', 5]]

OPC_UA_Clients/Release2/IJT_Web_Client/nodeStyle.css

@@ -482,7 +482,7 @@ html {
 
 .tabright {
   flex-basis: content;
-  align-self: end;
+  align-self: center;
 }
 
 .topRow {
@@ -1073,3 +1073,7 @@ html {
 .myCheckBox {
   margin-left: 0px;
 }
+
+.mainDropDown {
+  background-color: lightgray;
+}