Allowing multiple connections

OPC_UA_Clients/NodeOPCUA_IJT_Client/Javascripts/Views/AddressSpace/AddressSpaceGraphics.mjs

@@ -18,7 +18,7 @@ export default class AddressSpaceGraphics extends ControlMessageSplitScreen {
   }
 
   /**
-   * initiateNodeTree creates the start of the nodetree on the left side of the screen
+   * initiateNodeTree creates the root of the nodetree on the left side of the screen
    */
   initiateNodeTree () {
     // Clean any old stuff

OPC_UA_Clients/NodeOPCUA_IJT_Client/Javascripts/Views/GraphicSupport/BasicScreen.mjs

@@ -2,22 +2,24 @@
  * Basclass for a HTML screen that interact with the tabGenerator to create the backGround and call initiate() everytime the tab is opened
  */
 export default class BasicScreen {
-  constructor (title, activationPhase) {
+  constructor (title, activationPhase, container) {
     this.title = title
     this.activationPhase = activationPhase || 'oncreate'
     this.backGround = document.createElement('div')
     this.backGround.classList.add('basescreen')
     // container.appendChild(this.backGround)
 
-    const serverDiv = document.getElementById('connectedServer') // listen to tab switch
-    serverDiv.addEventListener('tabOpened', (event) => {
+    // const serverDiv = document.getElementById('connectedServer') // listen to tab switch
+    /* container.addEventListener('tabOpened', (event) => {
       if (event.detail.title === title) {
         if (this.initiate) {
           this.initiate()
         }
       }
-    }, false)
+    }, false) */
   }
 
+  initiate () {}
+
   activate () {}
 }

OPC_UA_Clients/NodeOPCUA_IJT_Client/Javascripts/Views/GraphicSupport/ControlMessageSplitScreen.mjs

@@ -9,10 +9,14 @@ export default class ControlMessageSplitScreen extends BasicScreen {
   constructor (title, leftText, rightText, activationPhase) {
     super(title, activationPhase)
 
+    const columnSetter = document.createElement('div')
+    columnSetter.classList.add('columns')
+    this.backGround.appendChild(columnSetter)
+
     const leftHalf = document.createElement('div')
     leftHalf.classList.add('lefthalf')
     leftHalf.classList.add('scrollableInfoArea')
-    this.backGround.appendChild(leftHalf)
+    columnSetter.appendChild(leftHalf)
 
     const nodeDiv = document.createElement('div')
     nodeDiv.classList.add('myHeader')
@@ -27,7 +31,7 @@ export default class ControlMessageSplitScreen extends BasicScreen {
     const rightHalf = document.createElement('div')
     rightHalf.classList.add('righthalf')
     rightHalf.classList.add('scrollableInfoArea')
-    this.backGround.appendChild(rightHalf)
+    columnSetter.appendChild(rightHalf)
 
     const comDiv = document.createElement('div')
     comDiv.classList.add('myHeader')

OPC_UA_Clients/NodeOPCUA_IJT_Client/Javascripts/Views/GraphicSupport/TabGenerator.mjs

@@ -6,16 +6,25 @@
  */
 
 export default class TabGenerator {
-  constructor (container) {
+  constructor (container, identityString = 'topLevel') {
     /**
      * Set up the tabs
      */
     this.container = container
+    this.identityString = identityString
     this.activationSubscriptions = {}
     this.containerList = []
-    this.list = document.createElement('ul')
-    this.list.classList.add('tabs')
-    this.container.appendChild(this.list)
+    this.tabBase = document.createElement('div')
+    this.container.appendChild(this.tabBase)
+    this.tabBase.classList.add('tabGeneratorBase')
+
+    this.selector = document.createElement('div')
+    this.selector.classList.add('tabSelect')
+    this.tabBase.appendChild(this.selector)
+
+    this.contentDiv = document.createElement('div')
+    this.contentDiv.classList.add('tabContent')
+    this.tabBase.appendChild(this.contentDiv)
   }
 
   /**
@@ -28,23 +37,31 @@ export default class TabGenerator {
   setState (state) {
     for (const tab of this.activationSubscriptions[state]) {
       // const title = tab.label.innerText
-      const input = tab.input
-      tab.label.style.color = 'yellow'
+      // const input = tab.input
+      tab.button.style.color = 'yellow'
 
       tab.content.activate(state)
-
-      input.setAttribute('id', 'tab' + tab.number)
     }
   }
 
   /**
    * generateTab creates a new tab and returns its HTML element
-   * @param {Object} content The graphical representation of the content, preferably a decendant of the BasicScreen class
+   * @param {Object} content The graphical representation of the content, preferably a descendent of the BasicScreen class
+   * @param {Boolean} selected Put this to true on the tab that should be oopen at the start
+   * @returns
+   */
+  generateTab (content, selected) {
+    this.containerList.push(new Tab(this.contentDiv, content, this.selector, this.activationSubscriptions, selected))
+  }
+
+  /**
+   * generateTab creates a new tab and returns its HTML element
+   * @param {Object} content The graphical representation of the content, preferably a descendent of the BasicScreen class
    * @param {Boolean} selected Put this to true on the tab that should be oopen at the start
    * @param {String} activationPhase when, during setup, is the tab being activated ['oncreate, 'subscribed', 'tighteningsystem']
    * @returns
    */
-  generateTab (content, selected = false) {
+  generateTab2 (content, selected = false) {
     const nr = this.containerList.length
 
     const activationPhase = content.activationPhase
@@ -62,8 +79,12 @@ export default class TabGenerator {
     if (selected) {
       input.setAttribute('checked', 'true')
     }
+    input.AATitle = content.title
+    input.AAcontainer = this.container
+    this.container.style.border = '3px solid red'
+    input.style.color = 'pink'
 
-    input.onchange = () => {
+    input.onchange = function () {
       const event = new CustomEvent(
         'tabOpened',
         {
@@ -74,8 +95,8 @@ export default class TabGenerator {
           cancelable: true
         }
       )
-      const serverDiv = document.getElementById('connectedServer')
-      serverDiv.dispatchEvent(event)
+      // const serverDiv = document.getElementById('connectedServer')
+      this.AAcontainer.dispatchEvent(event)
     }
 
     listItem.appendChild(input)
@@ -109,6 +130,14 @@ export default class TabGenerator {
 
     contentDiv.appendChild(content.backGround)
 
+    this.container.addEventListener('tabOpened', (event) => {
+      if (event.detail.title === content.title) {
+        if (content.initiate) {
+          content.initiate()
+        }
+      }
+    }, false)
+
     return contentDiv
   }
 
@@ -155,3 +184,39 @@ export default class TabGenerator {
     }, 15000)
   }
 }
+
+class Tab {
+  /**
+   * generateTab creates a new tab and returns its HTML element
+   * @param {Object} content The graphical representation of the content, preferably a descendent of the BasicScreen class
+   * @param {Boolean} selected Put this to true on the tab that should be oopen at the start
+   * @returns
+   */
+  constructor (container, content, selectorArea, activationSubscriptions, selected = false) {
+    this.container = container
+    this.content = content
+    this.selectorArea = selectorArea
+    /*
+    const label = document.createElement('label')
+    label.style.color = 'grey'
+    label.innerText = content.title
+    this.selector.appendChild(label) */
+
+    const button = document.createElement('input')
+    button.type = 'button'
+    button.value = content.title
+    button.classList.add('tabButton')
+    button.onclick = () => {
+      this.container.innerHTML = ''
+      this.container.appendChild(this.content.backGround)
+      this.content.initiate()
+    }
+    this.selectorArea.appendChild(button)
+
+    if (!activationSubscriptions[content.activationPhase]) {
+      activationSubscriptions[content.activationPhase] = [{ button, selected, content }]
+    } else {
+      activationSubscriptions[content.activationPhase].push({ button, selected, content })
+    }
+  }
+}

OPC_UA_Clients/NodeOPCUA_IJT_Client/Javascripts/Views/Servers/EndpointGraphics.mjs

@@ -0,0 +1,146 @@
+/**
+ * EndpointGraphics creates tabs for the different views for a given endpoint connection
+ */
+import {
+  AddressSpace,
+  AssetManager,
+  MethodManager,
+  EventManager,
+  ResultManager,
+  ModelManager,
+  SocketHandler
+} from 'ijt-support/ijt-support.mjs'
+
+import TraceGraphics from 'views/Trace/TraceGraphics.mjs'
+import ServerGraphics from 'views/Servers/ServerGraphics.mjs'
+import AddressSpaceGraphics from 'views/AddressSpace/AddressSpaceGraphics.mjs'
+import EventGraphics from 'views/Events/EventGraphics.mjs'
+import MethodGraphics from 'views/Methods/MethodGraphics.mjs'
+import AssetGraphics from 'views/Assets/AssetGraphics.mjs'
+import TabGenerator from 'views/GraphicSupport/TabGenerator.mjs'
+import BasicScreen from 'views/GraphicSupport/BasicScreen.mjs'
+
+export default class EndpointGraphics extends BasicScreen {
+  constructor (title) {
+    super(title)
+    this.endpointUrl = ''
+    // this.backGround.style.border = '2px solid green'
+  }
+
+  activate (state) {
+
+  }
+
+  instantiate (endpointUrl, socket) {
+    this.socket = socket
+    this.endpointUrl = endpointUrl
+    this.backGround.innerHTML = 'endp: ' + endpointUrl
+    this.socketHandler = new SocketHandler(socket, endpointUrl)
+
+    // mixing background and current tab content here
+
+    const tabGenerator = new TabGenerator(this.backGround, 'TabSelector' + endpointUrl)
+    const modelManager = new ModelManager()
+
+    // Initiate the different tab handlers
+    // var servers = new ServerGraphics(tabGenerator.generateTab('Servers'), socketHandler)
+
+    const servers = new ServerGraphics()
+    tabGenerator.generateTab(servers)
+
+    const addressSpace = new AddressSpace(this.socketHandler)
+    const addressSpaceGraphics = new AddressSpaceGraphics(addressSpace)
+    tabGenerator.generateTab(addressSpaceGraphics, true)
+    const eventManager = new EventManager(this.socketHandler)
+    const eventGraphics = new EventGraphics(eventManager, modelManager)
+    tabGenerator.generateTab(eventGraphics, false)
+    const resultManager = new ResultManager(eventManager)
+    const assets = new AssetManager(addressSpace, this.socketHandler)
+    const asstetGraphics = new AssetGraphics(assets)
+    tabGenerator.generateTab(asstetGraphics)
+    const traceGraphics = new TraceGraphics(['angle', 'torque'], resultManager)
+    tabGenerator.generateTab(traceGraphics)
+    const methodManager = new MethodManager(addressSpace)
+    const methodGraphics = new MethodGraphics(methodManager, addressSpace)
+    tabGenerator.generateTab(methodGraphics)
+
+    /* ****************  Set up socket listeners to handle input from server ******************/
+
+    // Listen to the data from the server regarding the tree of queriable data and display it
+    this.socketHandler.registerMandatory('browseresult', function (msg) { })
+
+    // Listen to result data and convert it into a javascript model then display it
+    this.socketHandler.registerMandatory('readresult', function (msg) { })
+
+    // Listen to pathtoid data and convert it into a javascript model then display it
+    this.socketHandler.registerMandatory('pathtoidresult', function (msg) { })
+
+    // Listen to subscribed events messages
+    this.socketHandler.registerMandatory('subscribed event', function (msg, context) {
+      if (msg && msg.result.SourceName && msg.result.SourceName.value) {
+        console.log('Subscribed event triggered: ' + msg.result.SourceName.value)
+      } else {
+        console.log('Event lacking SourceName received')
+      }
+      eventManager.receivedEvent(msg)
+    })
+
+    // Listen to subscribed events messages
+    this.socketHandler.registerMandatory('callresult', function (msg) { })
+
+    // Listen to status messages from Node-OPCUA
+    this.socketHandler.registerMandatory('status message', function (msg) {
+      servers.messageDisplay(msg)
+    })
+
+    // Listen to the tree of possible connection points (Available OPC UA servers)
+    this.socketHandler.registerMandatory('connection points', function (msg) {
+      servers.connectionPoints(JSON.parse(msg).connectionpoints, socket)
+    })
+
+    // Ask for the currently stored connectionpoints
+    this.socket.emit('get connectionpoints')
+
+    // Listen to connection
+    this.socketHandler.registerMandatory('connection established', function (msg) {
+      servers.messageDisplay('Connection established')
+    })
+
+    // Listen to general subscription start
+    // Here you could add code to actually subscribe to fields
+    this.socketHandler.registerMandatory('subscription created', function (msg) {
+      servers.messageDisplay('Subscription created')
+      tabGenerator.setState('subscribed')
+      eventManager.reset()
+      resultManager.activate()
+      addressSpace.addressSpacePromise().then(() => {
+        tabGenerator.setState('tighteningsystem')
+      })
+    })
+
+    // Listen to session start
+    this.socketHandler.registerMandatory('session established', function (msg) {
+      servers.messageDisplay('Session established')
+      addressSpace.initiate()
+      addressSpaceGraphics.initiateNodeTree()
+    })
+
+    // Listen to session closure
+    this.socketHandler.registerMandatory('session closed', function (msg) {
+      servers.messageDisplay('Session closed')
+    })
+
+    // Listen to error messages
+    this.socketHandler.registerMandatory('error message', function (msg) {
+      console.log(msg.message)
+      servers.messageDisplay(msg.message)
+      tabGenerator.displayError(msg)
+    })
+
+    socket.emit('connect to', endpointUrl)
+
+    window.onbeforeunload = function () {
+      // socket.emit('terminate connection')
+    }
+  }
+}