Previous Implemented

2020-09-21 15:58:36 +02:00
1 parent 51d81286cf
commit 3986c9f71a
@@ -55,15 +55,19 @@
                <tr>
                    <td align = "center">
                        <label class="tutorial-font-small tutorial-stop-button" onclick="canvas.tutorialSpace.stop()"
-                            value="">Stop</label>
+                            value="">&nbsp;&nbsp;Stop&nbsp;&nbsp;&nbsp;</label>
                    </td>
                    <td align = "center">
                        <label class="tutorial-font-small tutorial-skip-button" onclick="canvas.tutorialSpace.skip()"
-                            value="">Skip</label>
+                            value="">&nbsp;&nbsp;Skip&nbsp;&nbsp;&nbsp;</label>
                    </td>
                    <td align = "center">
-                        <label class="tutorial-font-small tutorial-done-button" onclick="canvas.tutorialSpace.done()"
-                            value="">Next</label>
+                        <label class="tutorial-font-small tutorial-previous-button" onclick="canvas.tutorialSpace.previous()"
+                            value="">Previous</label>
+                    </td>
+                    <td align = "center">
+                        <label class="tutorial-font-small tutorial-next-button" onclick="canvas.tutorialSpace.next()"
+                            value="">&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;</label>
                    </td>
                </tr>
            </table>
@@ -31,12 +31,6 @@
  background-color: #fdfdfd;
 }

-.tutorial-form {
-  padding: 15px;
-  margin-bottom: 20px;
-  width: 100%;
-}
-
 .tutorial-summary {
  font-size:120%;
  color: #808080;
@@ -208,7 +202,19 @@
  min-width: 100px;
 }

-.tutorial-done-button {
+.tutorial-previous-button {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #c9e2b3;
+  min-width: 100px;
+}
+
+.tutorial-next-button {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
@@ -220,12 +226,21 @@
  min-width: 100px;
 }

+.tutorial-form {
+  padding: 5px;
+  border: solid 0px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
 .tutorial-buttonsTable {
  border-top-color: #a6e1ec;
-  padding: 15px;
-  margin: 20px 0;
  border: solid 0px;
  vertical-align: middle;
  min-width: 100px;
  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
@@ -3,7 +3,8 @@ function newTutorialSpace() {
    let thisObject = {
        stop: stop,
        skip: skip,
-        done: done,
+        previous: previous,
+        next: next,
        playTutorial: playTutorial,
        resumeTutorial: resumeTutorial,
        playTutorialTopic: playTutorialTopic,
@@ -36,6 +37,7 @@ function newTutorialSpace() {
    let tutorialRootNode
    let currentNode
    let currentStatus = 'Stopped'
+    let navigationStack

    let tutorialDiv = document.getElementById('tutorialDiv')
    let tutorialFormDiv = document.getElementById('tutorialFormDiv')
@@ -63,6 +65,7 @@ function newTutorialSpace() {

        tutorialRootNode = undefined
        currentNode = undefined
+        navigationStack = undefined

        tutorialDiv = undefined
        tutorialFormDiv = undefined
@@ -293,29 +296,12 @@ function newTutorialSpace() {
            tutorialFormDiv.style = '   ' +
                'position:fixed; top:' + (tutorialPosition.y + HEIGHT - FORM_HEIGHT) + 'px; ' +
                'left:' + tutorialPosition.x + 'px; ' +
-                'width: ' + WIDTH + 'px;' +
+                'width: ' + (WIDTH + 20) + 'px;' +
                'height: ' + FORM_HEIGHT + 'px;' +
                'z-index:1;'
        }
    }

-    function playTutorial(node) {
-        node.payload.uiObject.isPlaying = true
-        tutorialRootNode = node
-        currentNode = node
-        currentStatus = 'Playing Tutorial'
-        resumeModeActivated = false
-    }
-
-    function resumeTutorial(node) {
-        node.payload.uiObject.isPlaying = true
-        tutorialRootNode = node
-        currentNode = node
-        currentStatus = 'Playing Tutorial'
-        resumeModeActivated = true
-        advance()
-    }
-
    function stop() {
        tutorialRootNode.payload.uiObject.isPlaying = false
        tutorialRootNode = undefined
@@ -330,8 +316,37 @@ function newTutorialSpace() {
        advance()
    }

-    function done() {
-        if (ckeckGoingToAnotherTutorial() === true ) {return}
+    function previous() {
+        if (navigationStack.length > 1) {
+            let previousNode = navigationStack[navigationStack.length - 2]
+            switch (previousNode.type) {
+                case 'Tutorial': {
+                    currentNode = previousNode
+                    findTutorialNode(currentNode)
+                    currentStatus = 'Playing Tutorial'
+                    navigationStack.splice(navigationStack.length - 1) 
+                    break
+                }
+                case 'Tutorial Topic': {
+                    currentNode = previousNode
+                    findTutorialNode(currentNode)
+                    currentStatus = 'Playing Topic'
+                    navigationStack.splice(navigationStack.length - 1) 
+                    break
+                }
+                case 'Tutorial Step': {
+                    currentNode = previousNode
+                    findTutorialNode(currentNode)
+                    currentStatus = 'Playing Step'
+                    navigationStack.splice(navigationStack.length - 1) 
+                    break
+                }
+            }
+        }
+    }
+
+    function next() {
+        if (ckeckGoingToAnotherTutorial() === true) { return }
        let tutorial = {
            status: 'Done'
        }
@@ -343,41 +358,76 @@ function newTutorialSpace() {
        if (currentNode.payload !== undefined) {
            if (currentNode.payload.referenceParent !== undefined) {
                if (currentNode.payload.referenceParent.type === 'Tutorial') {
-                    playTutorial(currentNode.payload.referenceParent)
+                    tutorialRootNode = currentNode.payload.referenceParent
+                    currentNode = currentNode.payload.referenceParent
+                    currentStatus = 'Playing Tutorial'
+                    resumeModeActivated = false
+                    navigationStack.push(currentNode)
+                    findTutorialNode(currentNode)
+                    return true
                }
            }
        }
    }

+    function playTutorial(node) {
+        navigationStack = []
+        node.payload.uiObject.isPlaying = true
+        tutorialRootNode = node
+        currentNode = node
+        currentStatus = 'Playing Tutorial'
+        resumeModeActivated = false
+        navigationStack.push(currentNode)
+    }
+
+    function resumeTutorial(node) {
+        navigationStack = []
+        node.payload.uiObject.isPlaying = true
+        tutorialRootNode = node
+        currentNode = node
+        currentStatus = 'Playing Tutorial'
+        resumeModeActivated = true
+        navigationStack.push(currentNode)
+        advance()
+    }
+
    function playTutorialTopic(node) {
+        navigationStack = []
        currentTopicNode = node
        currentNode = node
        currentStatus = 'Playing Topic'
        resumeModeActivated = false
+        navigationStack.push(currentNode)
        findTutorialNode(node)
    }

    function resumeTutorialTopic(node) {
+        navigationStack = []
        currentTopicNode = node
        currentNode = node
        currentStatus = 'Playing Topic'
        resumeModeActivated = true
+        navigationStack.push(currentNode)
        findTutorialNode(node)
    }

    function playTutorialStep(node) {
+        navigationStack = []
        currentStepNode = node
        currentNode = node
        currentStatus = 'Playing Step'
        resumeModeActivated = false
+        navigationStack.push(currentNode)
        findTutorialNode(node)
    }

    function resumeTutorialStep(node) {
+        navigationStack = []
        currentStepNode = node
        currentNode = node
        currentStatus = 'Playing Step'
        resumeModeActivated = true
+        navigationStack.push(currentNode)
        findTutorialNode(node)
    }

@@ -468,6 +518,8 @@ function newTutorialSpace() {
                        currentNode = tutorialStep
                        currentStatus = 'Playing Step'
                        advanced = true
+                        navigationStack.push(currentNode)
+                        findTutorialNode(currentNode)
                        return
                    } else {
                        let tutorial = {
@@ -478,6 +530,8 @@ function newTutorialSpace() {
                            currentNode = tutorialStep
                            currentStatus = 'Playing Step'
                            advanced = true
+                            navigationStack.push(currentNode)
+                            findTutorialNode(currentNode)
                            return
                        }
                    }
@@ -499,6 +553,8 @@ function newTutorialSpace() {
                        currentNode = tutorialTopic
                        currentStatus = 'Playing Topic'
                        advanced = true
+                        navigationStack.push(currentNode)
+                        findTutorialNode(currentNode)
                        return
                    } else {
                        let tutorial = {
@@ -509,6 +565,8 @@ function newTutorialSpace() {
                            currentNode = tutorialTopic
                            currentStatus = 'Playing Topic'
                            advanced = true
+                            navigationStack.push(currentNode)
+                            findTutorialNode(currentNode)
                            return
                        }
                    }
@@ -593,16 +651,16 @@ function newTutorialSpace() {
            html = html + '<p class="tutorial-font-small">' + nodeConfig.paragraph2 + '</p>'
        }
        if (nodeConfig.note !== undefined && nodeConfig.note !== '') {
-            html = html + '<div class="tutorial-font-bold-small tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> ' + nodeConfig.note + '</div>'
+            html = html + '<div class="tutorial-font-small tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> ' + nodeConfig.note + '</div>'
        }
        if (nodeConfig.tip !== undefined && nodeConfig.tip !== '') {
-            html = html + '<div class="tutorial-font-bold-small tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> ' + nodeConfig.tip + '</div>'
+            html = html + '<div class="tutorial-font-small tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> ' + nodeConfig.tip + '</div>'
        }
        if (nodeConfig.important !== undefined && nodeConfig.important !== '') {
-            html = html + '<div class="tutorial-font-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.important + '</div>'
+            html = html + '<div class="tutorial-font-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.important + '</div>'
        }
        if (nodeConfig.warning !== undefined && nodeConfig.warning !== '') {
-            html = html + '<div class="tutorial-font-bold-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.warning + '</div>'
+            html = html + '<div class="tutorial-font-small tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> ' + nodeConfig.warning + '</div>'
        }
        html = html + '</div>'

@@ -1 +1 @@
-{"type":"Workspace","name":"My Default Workspace","rootNodes":[{"type":"Network","name":"Develoment Network","networkNodes":[{"type":"Network Node","name":"My Computer","config":"{ \n\"host\": \"localhost\", \n\"webPort\": \"34248\", \n\"webSocketsPort\": \"8081\"\n}","dataMining":{"type":"Data Mining","name":"New Data Mining","exchangeDataTasks":[{"type":"Exchange Data Tasks","name":"Binance","marketDataTasks":[{"type":"Market Data Tasks","name":"Binance BTC/USDT","dataMineTasks":[{"type":"Data Mine Tasks","name":"Sparta","taskManagers":[{"type":"Task Manager","name":"Sparta","tasks":[{"type":"Task","name":"SMA","bot":{"type":"Indicator Bot Instance","name":"SMA","config":"{}","processes":[{"type":"Indicator Process Instance","name":"SMA Multi-Period-Market","id":"ee3ba497-dc1b-454d-8ed6-e45c4bfdb13d","savedPayload":{"position":{"x":23226.60177733104,"y":29738.14430203704},"targetPosition":{"x":23536.899756011815,"y":29459.19005941378},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Market","id":"456269f6-9849-4d5f-9c8c-7cd7d1eef297"}}},{"type":"Indicator Process Instance","name":"SMA Multi-Period-Daily","id":"cdd33812-5b8a-4921-9214-0894ca31b4e7","savedPayload":{"position":{"x":23139.752722422458,"y":29330.257336319642},"targetPosition":{"x":23536.899756011815,"y":29459.19005941378},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Daily","id":"333ae5d7-7ec1-4f08-b206-91e3b4f2c99f"}}}],"id":"66dd9467-0c57-48b6-88f2-f07181426ecc","savedPayload":{"position":{"x":23536.899756011815,"y":29459.19005941378},"targetPosition":{"x":23945.17236693493,"y":29372.321746386617},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},"id":"cf134303-e938-4f0c-b9d8-f9a1ff363821","savedPayload":{"position":{"x":23945.17236693493,"y":29372.321746386617},"targetPosition":{"x":24353.29969806294,"y":29284.85157127153},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},{"type":"Task","name":"EMA","bot":{"type":"Indicator Bot Instance","name":"EMA","config":"{}","processes":[{"type":"Indicator Process Instance","name":"EMA Multi-Period-Market","id":"6ad014ba-06a5-4b97-a2ef-091532c489ea","savedPayload":{"position":{"x":23175.18964819871,"y":28989.155493231876},"targetPosition":{"x":23590.500609546707,"y":28946.058693385694},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Market","id":"278c34a7-199d-400e-8a06-087149e3d391"}}},{"type":"Indicator Process Instance","name":"EMA Multi-Period-Daily","id":"b137191e-f484-4791-8f3b-7d3aaf5dcf30","savedPayload":{"position":{"x":23344.79195133523,"y":28608.24877749644},"targetPosition":{"x":23590.500609546707,"y":28946.058693385694},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Daily","id":"943ea24f-ee24-4eae-9b4b-e8a73122b1c2"}}}],"id":"50098ed4-bf26-4cbb-8890-6646bce0a875","savedPayload":{"position":{"x":23590.500609546707,"y":28946.058693385694},"targetPosition":{"x":23971.97432652794,"y":29115.686030416433},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},"id":"1265f3f0-548f-4145-aa79-a68c7cde4d60","savedPayload":{"position":{"x":23971.97432652794,"y":29115.686030416433},"targetPosition":{"x":24353.29969806294,"y":29284.85157127153},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},{"type":"Task","name":"MACD","bot":{"type":"Indicator Bot Instance","name":"MACD","config":"{}","processes":[{"type":"Indicator Process Instance","name":"MACD Multi-Period-Market","id":"9ee07470-5521-4168-ac5c-2e0e1e4aaa4c","savedPayload":{"position":{"x":23573.831727053424,"y":28353.44161739856},"targetPosition":{"x":23935.51279777453,"y":28562.57080283105},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Market","id":"44019efe-950a-4eec-a546-cd2ee26818b9"}}Line truncated
+{"type":"Workspace","name":"My Default Workspace","rootNodes":[{"type":"Network","name":"Develoment Network","networkNodes":[{"type":"Network Node","name":"My Computer","config":"{ \n\"host\": \"localhost\", \n\"webPort\": \"34248\", \n\"webSocketsPort\": \"8081\"\n}","dataMining":{"type":"Data Mining","name":"New Data Mining","exchangeDataTasks":[{"type":"Exchange Data Tasks","name":"Binance","marketDataTasks":[{"type":"Market Data Tasks","name":"Binance BTC/USDT","dataMineTasks":[{"type":"Data Mine Tasks","name":"Masters","taskManagers":[{"type":"Task Manager","name":"Masters","tasks":[{"type":"Task","name":"Exchange Raw Data","bot":{"type":"Sensor Bot Instance","name":"Exchange Raw Data","config":"{ \n\"startDate\": \"2020-01-01\"\n}","processes":[{"type":"Sensor Process Instance","name":"Exchange Raw Data Historic-OHLCVs","id":"d244c564-4e86-43c7-9796-dc3b6294ec8b","savedPayload":{"position":{"x":23600.341957929206,"y":28480.749773964057},"targetPosition":{"x":23972.04991103595,"y":28669.942913134553},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Historic-OHLCVs","id":"5eb11d6a-022e-4f60-97c4-d6cf90b249dc"}}}],"id":"343313ae-5705-484d-8bf8-aed25ba61cfa","savedPayload":{"position":{"x":23972.04991103595,"y":28669.942913134553},"targetPosition":{"x":24343.84666520965,"y":28859.214607624985},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},"id":"a8f38508-1cac-4ab1-815f-d338fc813377","savedPayload":{"position":{"x":24343.84666520965,"y":28859.214607624985},"targetPosition":{"x":24715.69635330805,"y":29048.447729795822},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},{"type":"Task","name":"Candles Volumes","bot":{"type":"Indicator Bot Instance","name":"Candles Volumes","config":"{}","processes":[{"type":"Indicator Process Instance","name":"Candles Volumes Multi-Period-Market","id":"f0ef12ed-f0fd-4b88-8e15-27cf24265a5f","savedPayload":{"position":{"x":24147.889319486,"y":27975.765941107355},"targetPosition":{"x":24457.894897800088,"y":28254.851088651943},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Market","id":"9f683143-a33f-42c1-9fa8-c601f01ee4e1"}}},{"type":"Indicator Process Instance","name":"Candles Volumes Multi-Period-Daily","id":"7c8b312c-09bf-4c59-853f-1592391a9c57","savedPayload":{"position":{"x":24544.506593349703,"y":27846.810842076713},"targetPosition":{"x":24457.894897800088,"y":28254.851088651943},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Daily","id":"980ceb1d-7be6-454f-90d9-01ba1fd4a65d"}}}],"id":"8d58e84b-d7ef-464f-8079-0ec0887e3da3","savedPayload":{"position":{"x":24457.894897800088,"y":28254.851088651943},"targetPosition":{"x":24586.788626116653,"y":28651.631118358073},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},"id":"bf29e3bd-9386-408b-9091-042da0c53e81","savedPayload":{"position":{"x":24586.788626116653,"y":28651.631118358073},"targetPosition":{"x":24715.69635330805,"y":29048.447729795822},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false}}},{"type":"Task","name":"Resistances and Supports","bot":{"type":"Indicator Bot Instance","name":"Resistances and Supports","config":"{}","processes":[{"type":"Indicator Process Instance","name":"Resistances and Supports Multi-Period-Market","id":"a707814e-b81b-4102-9b5b-4e2fe969324f","savedPayload":{"position":{"x":25073.04768820557,"y":27888.577595457282},"targetPosition":{"x":25094.64272974596,"y":28305.131938418137},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToParent":2,"distanceToParent":3,"arrangementStyle":0},"uiObject":{"isRunning":false},"referenceParent":{"type":"Process Definition","name":"Multi-Period-Market","id":"5d9b2729-43fb-4e7e-aa4f-b8477c424e51"}}},{"type":"Indicator Process Instance","name":"Resistances and Supports Multi-Period-Daily","id":"c5395fbe-4b5a-4492-a7fb-e2d259905e27","savedPayload":{"position":{"x":25444.595906868275,"y":28078.054653863655},"targetPosition":{"x":25094.64272974596,"y":28305.131938418137},"floatingObject":{"isPinned":false,"isFrozen":false,"isCollapsed":false,"angleToPareLine truncated