diff --git a/index.js b/index.js index 80c1e8f..43d2197 100644 --- a/index.js +++ b/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() diff --git a/static/js/interface.js b/static/js/interface.js index 2f5e0a4..2419f23 100644 --- a/static/js/interface.js +++ b/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( '' + @@ -45,7 +56,7 @@ $(document).ready(function () { '' ); $('.colorPicky').colorpicker(); - + }); $("#addRow2").click(function (event) { @@ -61,11 +72,11 @@ $(document).ready(function () { $("#copyColors").click(function CopyTextColors(event) { event.target.innerHTML = '' - 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 () { ' 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 diff --git a/static/js/jsonview.js b/static/js/jsonview.js new file mode 100644 index 0000000..1ac71b4 --- /dev/null +++ b/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;s0?" ".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{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.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{t.r(r),t.d(r,{collapse:()=>$,create:()=>O,default:()=>I,destroy:()=>z,expand:()=>P,render:()=>A,renderJSON:()=>N});var e=t(379),n=t.n(e),o=t(795),i=t.n(o),a=t(569),s=t.n(a),c=t(565),l=t.n(c),d=t(216),p=t.n(d),u=t(589),f=t.n(u),v=t(767),y={};function h(e){return Array.isArray(e)?"array":null===e?"null":typeof e}function m(e){return document.createElement(e)}y.styleTagTransform=f(),y.setAttributes=l(),y.insert=s().bind(null,"head"),y.domAPI=i(),y.insertStyleElement=p(),n()(v.Z,y),v.Z&&v.Z.locals&&v.Z.locals;const x="hidden",g="fa-caret-right",j="fa-caret-down";function b(e){e.children.forEach((e=>{e.el.classList.add(x),e.isExpanded&&b(e)}))}function E(e){e.children.forEach((e=>{e.el.classList.remove(x),e.isExpanded&&E(e)}))}function S(e){if(e.children.length>0){const n=e.el.querySelector(".fas");n&&n.classList.replace(g,j)}}function k(e){if(e.children.length>0){const n=e.el.querySelector(".fas");n&&n.classList.replace(j,g)}}function w(e){e.isExpanded?(e.isExpanded=!1,k(e),b(e)):(e.isExpanded=!0,S(e),E(e))}function L(e,n){n(e),e.children.length>0&&e.children.forEach((e=>{L(e,n)}))}function T(e={}){return{key:e.key||null,parent:e.parent||null,value:e.hasOwnProperty("value")?e.value:null,isExpanded:e.isExpanded||!1,type:e.type||null,children:e.children||[],el:e.el||null,depth:e.depth||0,dispose:null}}function M(e,n){if("object"==typeof e)for(let t in e){const r=T({value:e[t],key:t,depth:n.depth+1,type:h(e[t]),parent:n});n.children.push(r),M(e[t],r)}}function C(e){return"string"==typeof e?JSON.parse(e):e}function O(e){const n=C(e),t=T({value:n,key:h(n),type:h(n)});return M(n,t),t}function N(e,n){const t=C(e),r=createTree(t);return A(r,n),r}function A(e,n){const t=function(){const e=m("div");return e.className="json-container",e}();L(e,(function(e){e.el=function(e){let n=m("div");const t=e=>{const n=e.children.length;return"array"===e.type?`[${n}]`:"object"===e.type?`{${n}}`:null};if(e.children.length>0){n.innerHTML=function(e={}){const{key:n,size:t}=e;return`\n
\n
\n
${n}
\n
${t}
\n
\n `}({key:e.key,size:t(e)});const r=n.querySelector(".caret-icon");e.dispose=function(e,n,t){return e.addEventListener(n,t),()=>e.removeEventListener(n,t)}(r,"click",(()=>w(e)))}else n.innerHTML=function(e={}){const{key:n,value:t,type:r}=e;return`\n
\n
\n
${n}
\n
:
\n
${t}
\n
\n `}({key:e.key,value:e.value,type:typeof e.value});const r=n.children[0];return null!==e.parent&&r.classList.add(x),r.style="margin-left: "+18*e.depth+"px;",r}(e),t.appendChild(e.el)})),n.appendChild(t)}function P(e){L(e,(function(e){e.el.classList.remove(x),e.isExpanded=!0,S(e)}))}function $(e){L(e,(function(n){n.isExpanded=!1,n.depth>e.depth&&n.el.classList.add(x),k(n)}))}function z(e){var n;L(e,(e=>{e.dispose&&e.dispose()})),(n=e.el.parentNode).parentNode.removeChild(n)}const I={render:A,create:O,renderJSON:N,expand:P,collapse:$,traverse:L,destroy:z}})(),r})()})); \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index f4046df..8eb261e 100644 --- a/static/js/script.js +++ b/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 } diff --git a/templates/newAdminPanel.html b/templates/newAdminPanel.html index 62bfb7c..37f93d6 100644 --- a/templates/newAdminPanel.html +++ b/templates/newAdminPanel.html @@ -342,7 +342,7 @@
- +
Progressbar Colors

@@ -357,7 +357,7 @@ Remove - + @@ -380,7 +380,7 @@ Remove - +

Raw server reponse

- + @@ -424,15 +424,18 @@ -