diff --git a/webapp/static/core.css b/webapp/static/core.css index 03092e8a..82cd3552 100644 --- a/webapp/static/core.css +++ b/webapp/static/core.css @@ -6,6 +6,11 @@ font-size: 12px; } +#node-select { + width: 40px; + height: 40px; +} + .navbar-text { color: #fff !important; font-weight: bold; diff --git a/webapp/static/corenetwork.js b/webapp/static/corenetwork.js index 3043a6bf..9cb4ef25 100644 --- a/webapp/static/corenetwork.js +++ b/webapp/static/corenetwork.js @@ -115,8 +115,6 @@ class CoreNode { function setEdgeData(edge, linkId, fromNode, toNode, interfaceOne, interfaceTwo) { edge.core = linkId; - edge.label = 'from: name\nto: name'; - edge.title = 'from: name\nto: name'; edge.nodeOne = fromNode.name; edge.interfaceOne = interfaceOne; edge.nodeTwo = toNode.name; @@ -157,10 +155,20 @@ class CoreNetwork { }; this.network = new vis.Network(this.container, this.networkData, this.networkOptions); this.network.on('doubleClick', this.addNode.bind(this)); + this.network.on('oncontext', this.onContext.bind(this)); this.edges.on('add', this.addEdge.bind(this)); this.nodesEnabled = false; } + async initialSession() { + const session = await this.coreRest.retrieveSession(); + console.log('retrieved session: ', session); + const response = await coreRest.getSession(); + console.log('session info: ', response); + this.joinedSessionNodes(response.nodes); + return session; + } + enableNodeCreation(enabled) { console.log('node created enabled: ', enabled); this.nodesEnabled = enabled; @@ -186,7 +194,7 @@ class CoreNetwork { return this.nodeId; } - joinedSessions(nodes) { + joinedSessionNodes(nodes) { const self = this; const nodeIds = [0]; @@ -284,6 +292,25 @@ class CoreNetwork { return await coreRest.setSessionState(SessionStates.instantiation); } + onContext(properties) { + console.log('context event: ', properties); + properties.event.preventDefault(); + + const location = properties.pointer.DOM; + const nodeId = this.network.getNodeAt(location); + if (nodeId) { + const node = this.nodes.get(nodeId); + console.log('context node: ', node); + + } else { + const edgeId = this.network.getEdgeAt(location); + if (edgeId) { + const edge = this.edges.get(edgeId); + console.log('context edge: ', edge); + } + } + } + addNode(properties) { if (!this.nodesEnabled) { console.log('node creation disabled'); diff --git a/webapp/templates/index.html b/webapp/templates/index.html index 2f4a2b76..693729c7 100644 --- a/webapp/templates/index.html +++ b/webapp/templates/index.html @@ -55,12 +55,15 @@ Session # - Node: Default +
+ Create: + +
-
+
@@ -127,25 +130,19 @@ const $infoCard = $('#info-card'); const $infoCardTable = $('#info-card-table'); const $infoCardHeader = $('#info-card-header'); + const $nodeSelect = $('#node-select'); // initial core setup const coreRest = new CoreRest(); const coreNetwork = new CoreNetwork('core-network', coreRest); - coreRest.retrieveSession() - .then(function (session) { - console.log('get session: ', session); + coreNetwork.initialSession() + .then(function(session) { $sessionId.text(`Session: ${session.id}`); const isStartEnabled = session.state !== SessionStates.runtime; setRunButton(isStartEnabled); - return coreRest.getSession(); - }) - .then(function(response) { - console.log('session: ', response); - const nodes = response.nodes; - coreNetwork.joinedSessions(nodes); }) .catch(function (err) { - console.log('get session error: ', err); + console.log('initial session error: ', err); }); function setRunButton(start) { @@ -253,7 +250,7 @@ } }); - $nodeDisplay.text(`Node: ${coreNetwork.nodeModel}`); + //$nodeDisplay.text(`Node: ${coreNetwork.nodeModel}`); $nodeButtons.click(function () { const $this = $(this); const nodeType = $this.data('node'); @@ -263,11 +260,12 @@ coreNetwork.setNodeMode(nodeType, model); const currentType = CoreNodeHelper.getDisplay(coreNetwork.nodeType); const defaultType = CoreNodeHelper.getDisplay(CoreNodeHelper.defaultNode); - let nodeDisplay = currentType.display; + let nodeName = currentType.name; if (currentType.display === defaultType.display) { - nodeDisplay = coreNetwork.nodeModel; + nodeName = coreNetwork.nodeModel; } - $nodeDisplay.text(`Node: ${nodeDisplay}`); + const icon = CoreNodeHelper.icons[nodeName]; + $nodeSelect.attr('src', icon); }); // show sessions