more fallback fixes

index.js

@@ -44,15 +44,13 @@ currentState = {
   textColors: {},
   srvTime: 0,
   enableColoredText: true,
-  debug: false
+  debug: false,
+  sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), 
 };
 
 const dataToBeWritten = {};
 
 currentState = Object.assign({}, currentState, loadedData);
-
-console.log(currentState)
-
 currentState.textColors = currentState.colorSegments
 
 
@@ -105,6 +103,26 @@ app.get("/api/v1/data", function (req, res) {
   res.json(currentState);
 });
 
+app.get("/api/v1/system", function (req, res) {
+  const systemData = {
+    uptime: process.uptime(),
+    memoryUsage: process.memoryUsage(),
+    cpuUsage: process.cpuUsage(),
+    platform: process.platform,
+    arch: process.arch,
+    nodeVersion: process.version,
+    nodePath: process.execPath,
+    nodeArgv: process.argv,
+    nodeExecArgv: process.execArgv,
+    nodeCwd: process.cwd(),
+    nodeEnv: process.env,
+    nodeConfig: process.config,
+    nodeTitle: process.title,
+  }
+  res.json(systemData);
+});
+
+
 app.get("/api/v1/set/mode", function (req, res) {
   currentState.mode = req.query.mode;
   updatedData()

static/js/interface.js

@@ -4,6 +4,7 @@ function convertTimeOffset(){
 }
 
 
+
 function convertColorSegments(elementId) {
     const raw = document.getElementById(elementId);
     console.log(raw)
@@ -36,6 +37,16 @@ $(document).ready(function () {
         }
     }
 
+    saveOption("/api/v1/system", function systemInfo(event) {
+        const dataSystem = JSON.parse(event.originalTarget.response)
+        document.getElementById("nodejsVers").innerHTML = dataSystem.nodeVersion
+
+        const tree2 = jsonview.create(dataSystem);
+        jsonview.render(tree2, document.getElementById("systemInfo"));
+        jsonview.expand(tree2);
+        // console.log(dataSystem)
+    })
+
     $("#addRow").click(function (event) {
         $("#colors1").append(
             '<tr>' +
@@ -96,7 +107,10 @@ $(document).ready(function () {
             </td></tr>'
 
         const jsonResult = JSON.parse(xmlHttp.response)
-        document.getElementById("responeSnippet").innerHTML = JSON.stringify(jsonResult)
+        //.innerHTML = JSON.stringify(jsonResult, null, 4)
+        const tree = jsonview.create(jsonResult);
+        jsonview.render(tree, document.getElementById("responeSnippet"));
+        jsonview.expand(tree);
         // Restore mode radio
         const currentModeInt = modes.indexOf(jsonResult.mode);
         $("#btnradio" + (currentModeInt + 1))[0].checked = true

static/js/script.js

@@ -6,7 +6,8 @@ websocketFailed = false
 recoveryAttempts = 0;
 
 let socket = new ReconnectingWebSocket("ws://localhost:" + location.port);
-
+let ackdSessionToken = false
+let isFirstPacket = true
 
 socket.onopen = function (e) {
   // alert("[open] Connection established");
@@ -16,8 +17,27 @@ socket.onopen = function (e) {
 
 socket.onmessage = function (event) {
   // alert(`[message] Data received from server: ${event.data}`);
+  let inData = JSON.parse(event.data)
+  if (isFirstPacket) {
+    isFirstPacket = false
     dataFame = JSON.parse(event.data);
     timeDiff = new Date().getTime() - dataFame.srvTime
+  } else {
+    if (inData.sessionToken == dataFame.sessionToken) {
+      dataFame = JSON.parse(event.data);
+      timeDiff = new Date().getTime() - dataFame.srvTime
+    } else {
+      if (ackdSessionToken == false) {
+
+        ackdSessionToken = true
+
+        if (confirm("Session token mismatch, reload the page?")) {
+          location.reload();
+        }
+      }
+    }
+  }
+
 };
 
 socket.onclose = function (event) {
@@ -49,7 +69,7 @@ socket.onclose = function (event) {
 };
 
 socket.onerror = function (error) {
-  alert(`[error] ${error.message}`);
+  // alert(`[error] ${error.message}`);
 };
 
 allowFullscreen = true
@@ -154,17 +174,17 @@ function handleUpdate() {
 
     if (!isSlowed) {
       console.error("Server timeout")
-      clearInterval(updateInter)
-      updateInter = setInterval(handleUpdate, 900)
+      // clearInterval(updateInter)
+      // updateInter = setInterval(handleUpdate, 900)
       document.getElementById("warningBanner").style.display = "block"
       isSlowed = true
-      recoInter = setInterval(handleRecovery, 10000)
+      // recoInter = setInterval(handleRecovery, 10000)
     }
   } else {
     if (isSlowed) {
-      clearInterval(updateInter)
-      clearInterval(recoInter)
-      updateInter = setInterval(handleUpdate, 2)
+      //clearInterval(updateInter)
+      //clearInterval(recoInter)
+      //updateInter = setInterval(handleUpdate, 2)
       document.getElementById("warningBanner").style.display = "none"
       isSlowed = false
     }

templates/newAdminPanel.html

@@ -399,7 +399,7 @@
 
             </page>
 
-            <page id="debug" class="pageC hidden flex-fill">
+            <page id="debug" class="pageC hidden flex-fill overflow-auto">
                 <h1>Debug page</h1>
                 <div class="alert alert-warning" role="alert">
                     <h4 class="alert-heading">Attention</h4>
@@ -414,7 +414,7 @@
                 <button type="button" class="btn btn-outline-success" id="applyDebug">Apply settings</button>
                 <br><br>
                 <h3>Raw server reponse</h3>
-                <code id="responeSnippet" style="width: 40%; display: inline-block;">
+                <code id="responeSnippet" style="width: 40%; display: inline-block;" class="overflow-auto">
 
                 </code>
 
@@ -424,15 +424,18 @@
                 </div>
 
             </page>
-            <page id="about" class="pageC hidden flex-fill">
+            <page id="about" class="pageC hidden flex-fill overflow-auto">
                 <h1>About</h1>
                 Version: 1.0.0<br>
-                NodeJS Version: UNKNOWN<br>
-                Express Version: UNKNOWN<br>
+                NodeJS Version: <i id="nodejsVers"></i><br>
+                <code id="systemInfo" class="overflow-auto">
+
+                </code>
             </page>
         </pages>
     </main>
-    <script src="/js/interface.js"> </script>
+    <script type="text/javascript" src="js/jsonview.js"></script>
+    <script type="text/javascript" src="/js/interface.js"> </script>
 
 
 </body>