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
 
 
@@ -80,7 +78,7 @@ function updatedData() {
   currentState.srvTime = new Date().getTime()
   wsServer.broadcast(JSON.stringify(currentState));
   clearTimeout(updatey);
-  setTimeout(updatedData, 5000);
+  setTimeout(updatedData, 5000 );
 }
 
 console.log("Preparing routes...");
@@ -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

@@ -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){
+        saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
-            setTimeout(function(){
+            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/jsonview.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.jsonview=n():e.jsonview=n()}(self,(function(){return(()=>{"use strict";var e={767:(e,n,t)=>{t.d(n,{Z:()=>s});var r=t(81),o=t.n(r),i=t(645),a=t.n(i)()(o());a.push([e.id,'.json-container{font-family:"Open Sans";font-size:16px;background-color:#fff;color:gray;box-sizing:border-box}.json-container .line{margin:4px 0;display:flex;justify-content:flex-start}.json-container .caret-icon{width:18px;text-align:center;cursor:pointer}.json-container .empty-icon{width:18px}.json-container .json-type{margin-right:4px;margin-left:4px}.json-container .json-key{color:#444;margin-right:4px;margin-left:4px}.json-container .json-index{margin-right:4px;margin-left:4px}.json-container .json-value{margin-left:8px}.json-container .json-number{color:#f9ae58}.json-container .json-boolean{color:#ec5f66}.json-container .json-string{color:#86b25c}.json-container .json-size{margin-right:4px;margin-left:4px}.json-container .hidden{display:none}.json-container .fas{display:inline-block;border-style:solid;width:0;height:0}.json-container .fa-caret-down{border-width:6px 5px 0 5px;border-color:gray transparent}.json-container .fa-caret-right{border-width:5px 0 5px 6px;border-color:transparent transparent transparent gray}',""]);const s=a},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",r=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),r&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),r&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(a[c]=!0)}for(var l=0;l<e.length;l++){var d=[].concat(e[l]);r&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),t&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=t):d[2]=t),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),n.push(d))}},n}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var n=[];function t(e){for(var t=-1,r=0;r<n.length;r++)if(n[r].identifier===e){t=r;break}return t}function r(e,r){for(var i={},a=[],s=0;s<e.length;s++){var c=e[s],l=r.base?c[0]+r.base:c[0],d=i[l]||0,p="".concat(l," ").concat(d);i[l]=d+1;var u=t(p),f={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==u)n[u].references++,n[u].updater(f);else{var v=o(f,r);r.byIndex=s,n.splice(s,0,{identifier:p,updater:v,references:1})}a.push(p)}return a}function o(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var s=t(i[a]);n[s].references--}for(var c=r(e,o),l=0;l<i.length;l++){var d=t(i[l]);0===n[d].references&&(n[d].updater(),n.splice(d,1))}i=c}}},569:e=>{var n={};e.exports=function(e,t){var r=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,t)=>{e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var r="";t.supports&&(r+="@supports (".concat(t.supports,") {")),t.media&&(r+="@media ".concat(t.media," {"));var o=void 0!==t.layer;o&&(r+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),r+=t.css,o&&(r+="}"),t.media&&(r+="}"),t.supports&&(r+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(r,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function t(r){var o=n[r];if(void 0!==o)return o.exports;var i=n[r]={id:r,exports:{}};return e[r](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.o=(e,n)=>Object.prototype.Line truncated

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);
+  let inData = JSON.parse(event.data)
-  timeDiff = new Date().getTime() - dataFame.srvTime
+  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)
+      // clearInterval(updateInter)
-      updateInter = setInterval(handleUpdate, 900)
+      // 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(updateInter)
-      clearInterval(recoInter)
+      //clearInterval(recoInter)
-      updateInter = setInterval(handleUpdate, 2)
+      //updateInter = setInterval(handleUpdate, 2)
       document.getElementById("warningBanner").style.display = "none"
       isSlowed = false
     }

templates/newAdminPanel.html

@@ -342,7 +342,7 @@
 
                 <label for="progBarShow">Show progressbar:</label>
                 <input type="checkbox" name="progBarShow" id="progBarShow"><br>
-                
+
                 <details>
                     <summary>Progressbar Colors</summary>
                     <p>
@@ -357,7 +357,7 @@
                                     <th class="text-center">Remove</th>
                                 </tr>
                             </thead>
-                        </tbody>
+                            </tbody>
                         </table>
                     </div>
 
@@ -380,7 +380,7 @@
                                     <th class="text-center">Remove</th>
                                 </tr>
                             </thead>
-                        </tbody>
+                            </tbody>
                         </table>
                     </div>
                     <button type="button" class="btn btn-outline-success" id="copyColors">Copy from progressbar
@@ -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>
+                NodeJS Version: <i id="nodejsVers"></i><br>
-                Express Version: UNKNOWN<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>