more fallback fixes

static/js/interface.js

@@ -1,9 +1,10 @@
-function convertTimeOffset(){
+function convertTimeOffset() {
     selTime = new Date().getTime() + document.getElementById('time2').valueAsNumber
     document.getElementById("time").value = selTime
 }
 
 
+
 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>' +
@@ -45,7 +56,7 @@ $(document).ready(function () {
             '</tr>'
         );
         $('.colorPicky').colorpicker();
-        
+
     });
 
     $("#addRow2").click(function (event) {
@@ -61,11 +72,11 @@ $(document).ready(function () {
 
     $("#copyColors").click(function CopyTextColors(event) {
         event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
-        saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event){
-            setTimeout(function(){
+        saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
+            setTimeout(function () {
                 document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
             }, 500)
-            
+
         })
     });
 
@@ -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}`);
-  dataFame = JSON.parse(event.data);
-  timeDiff = new Date().getTime() - dataFame.srvTime
+  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
     }