More UI options, performance improvements

data/src/css/style.scss

@@ -126,4 +126,11 @@ nav {
 
 #toggleTimerArea {
     cursor: pointer;
+}
+
+#system_info {
+    padding: 0;
+    li {
+        list-style: none;
+    }
 }

data/src/index.html

@@ -107,7 +107,6 @@
             </div>
             <footer>
               <button type="submit" class="btn btn-primary">Show Text</button>
-              <button type="button" class="btn btn-secondary" id="restartBtn">Restart</button>
             </footer>
           </form>
           <hr>
@@ -122,7 +121,19 @@
             <button type="button" class="btn btn-secondary" id="turnOffLedsBtn">Turn off</button>
             <button type="submit" class="btn btn-primary">Set color</button>
           </form>
+          <hr>
+          <h2>System info</h2>
+          <ul class="small" id="system_info">
+            <li>Version: <span id="gitRev"></span></li>
+            <li>Build time: <span id="lastBuildTime"></span></li>
+            <li>IP: <span id="ipAddress"></span></li>
+            <li>Hostname: <span id="hostname"></span></li>
+          </ul>
+          <button type="button" class="btn btn-danger" id="restartBtn">Restart</button>
+          <button type="button" class="btn btn-warning" id="forceFullRefresh">Force full refresh</button>
+
         </div>
+        
       </div>
       <div class="col-sm-5">
         <div id="output" class="p-3 border bg-light">Loading, please wait...</div>
@@ -191,6 +202,14 @@
                 <div class="form-text">Short amounts might shorten lifespan.</div>
               </div>
             </div>
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="ledTestOnPower" name="ledTestOnPower" value="1">
+                  <label class="form-check-label" for="ledTestOnPower">LED power-on test</label>
+                </div>
+              </div>
+            </div>
             <div class="row">
               <div class="col-sm-12">
                 <div class="form-check form-switch">
@@ -215,6 +234,21 @@
                 </div>
               </div>
             </div>
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="otaEnabled" name="otaEnabled" value="1">
+                  <label class="form-check-label" for="otaEnabled">OTA updates (restart required)</label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="mdnsEnabled" name="mdnsEnabled" value="1">
+                  <label class="form-check-label" for="mdnsEnabled">mDNS (restart required)</label>
+                </div>
+              </div>
             <div class="row">
               <label class="col-sm-6 col-form-label" for="ledBrightness">LED brightness</label>
               <div class="col-sm-6">
@@ -232,9 +266,10 @@
               {{#each screens }}
               <div class="row">
                 <div class="col-sm-12">
-                <div class="form-check form-switch">
-                  <input class="form-check-input" type="checkbox" id="screen{{id}}" name="screen[{{id}}]" value="1" {{#if enabled}}checked{{/if}}>
-                  <label class="form-check-label" for="screen{{id}}">{{name}}</label>
+                  <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" id="screen{{id}}" name="screen[{{id}}]" value="1" {{#if enabled}}checked{{/if}}>
+                    <label class="form-check-label" for="screen{{id}}">{{name}}</label>
+                  </div>
                 </div>
               </div>
               {{/each}}
@@ -250,10 +285,7 @@
     </div>
   </div>
   <footer>
-    <small>
-      <span id="gitRev"></span>
-      <span id="lastBuildTime"></span>
-    </small>
+   
   </footer>
   <script src="/js/script.js"></script>
 </body>

data/src/js/script.ts

@@ -43,25 +43,38 @@ let processStatusData = (jsonData) => {
 
 
 if (!!window.EventSource) {
-    var source = new EventSource('/events');
+    const connectEventSource = () => {
+        let source = new EventSource('/events');
 
-    source.addEventListener('open', function (e) {
-        console.log("Status EventSource Connected");
-        if (e.data) {
+        source.addEventListener('open', (e)  => {
+            console.log("Status EventSource Connected");
+            if (e.data) {
+                processStatusData(JSON.parse(e.data));
+            }
+        }, false);
+
+        source.addEventListener('error', (e) => {
+            if (e.target.readyState != EventSource.OPEN) {
+                console.log("Status EventSource Disconnected");
+                setTimeout(connectEventSource, 10000);
+            }
+            source.close();
+        }, false);
+
+        source.addEventListener('status', (e) => {
             processStatusData(JSON.parse(e.data));
-        }
-    }, false);
+        }, false);
 
-    source.addEventListener('error', function (e) {
-        if (e.target.readyState != EventSource.OPEN) {
-            console.log("Status EventSource Disconnected");
-        }
-        source.close();
-    }, false);
+        source.addEventListener('message', (e) => {
+            if (e.data == "closing") {
+                console.log("Closing EventSource, trying to reconnect in 10 seconds")
+                source.close();
+                setTimeout(connectEventSource, 10000);
+            }
+        }, false);
+    };
 
-    source.addEventListener('status', function (e) {
-        processStatusData(JSON.parse(e.data));
-    }, false);
+    connectEventSource();
 }
 
 
@@ -106,8 +119,14 @@ fetch('/api/settings', {
         if (jsonData.mcapBigChar)
             document.getElementById('mcapBigChar').checked = true;
 
-        if (jsonData.useBitcoinNode)
-            document.getElementById('useBitcoinNode').checked = true;
+        if (jsonData.mdnsEnabled)
+            document.getElementById('mdnsEnabled').checked = true;
+
+        if (jsonData.otaEnabled)
+            document.getElementById('otaEnabled').checked = true;
+
+        if (jsonData.ledTestOnPower)
+            document.getElementById('ledTestOnPower').checked = true;
 
         // let nodeFields = ["rpcHost", "rpcPort", "rpcUser", "tzOffset"];
 
@@ -123,10 +142,16 @@ fetch('/api/settings', {
         document.getElementById('minSecPriceUpd').value = jsonData.minSecPriceUpd;
 
         if (jsonData.gitRev)
-            document.getElementById('gitRev').innerHTML = "Version: " + jsonData.gitRev;
+            document.getElementById('gitRev').innerHTML = jsonData.gitRev;
+
+        if (jsonData.hostname)
+            document.getElementById('hostname').innerHTML = jsonData.hostname;
+
+        if (jsonData.ip)
+            document.getElementById('ipAddress').innerHTML = jsonData.ip;
 
         if (jsonData.lastBuildTime)
-            document.getElementById('lastBuildTime').innerHTML = " / " + new Date((jsonData.lastBuildTime * 1000)).toLocaleString();
+            document.getElementById('lastBuildTime').innerHTML = new Date((jsonData.lastBuildTime * 1000)).toLocaleString();
 
         var source = document.getElementById("screens-template").innerHTML;
         var template = Handlebars.compile(source);
@@ -160,6 +185,11 @@ document.getElementById('restartBtn').onclick = (event) => {
     return false;
 }
 
+document.getElementById('forceFullRefresh').onclick = (event) => {
+    fetch('/api/full_refresh');
+    return false;
+}
+
 
 var ledsForm = document.querySelector('#ledsForm');
 ledsForm.onsubmit = (event) => {