www: periodically update status page contents

esp32/www/max80.css

@@ -86,7 +86,7 @@ form label {
     padding: 0.5ch;
     display: flex;
 }
-form label span {
+form label span:first-child {
     width: 30ch;
 }
 input[type='text'], input[type='password'] {
@@ -147,7 +147,7 @@ output {
     font-weight: bold;
     text-decoration: underline;
 }
-.getstatus input {
+.getstatus input:not(.noinit) {
     font-family: inherit;
     font-size: inherit;
     background: inherit;

esp32/www/max80.js

@@ -55,7 +55,8 @@ function initform(form,map,ro = false) {
     form = getelem(form);
 
     for (var e of form.elements) {
-	if (e.classList.contains('noinit'))
+	if (e.classList.contains('noinit') ||
+	    e instanceof HTMLFieldSetElement)
 	    continue;
 	if (ro && e.disabled != undefined)
 	    e.disabled = true;
@@ -64,8 +65,6 @@ function initform(form,map,ro = false) {
 	    const val = map.get(e.name);
 	    if (val == null)
 		continue;
-	    if (ro && e.disabled != undefined)
-		e.disabled = true;
 	    if (e.type == 'checkbox') {
 		e.checked = cfgbool(val) == cfgbool(e.value);
 	    } else if (e.type == 'radio') {
@@ -82,14 +81,13 @@ function initform(form,map,ro = false) {
 // Load form initialization data
 function loadform(form,url,ro = false) {
     fetchconfig(url)
-	.then((map) => initform(form,map,ro))
+	.then((map) => {initform(form,map,ro); })
 	.catch(() => {});
 }
 
 // Replace the contents of selected HTML elements based on a map with
 // selectors.
-function fillin(map,html = false,top = document)
-{
+function fillin(map,html = false,top = document) {
     for (const [key,val] of map) {
 	try {
 	    const m = key.match(/(.*?)(?:\;([\w.-]*)(\??))?$/);

esp32/www/status.html

@@ -93,7 +93,31 @@
 	  <input type="checkbox" name="net.sntp.sync" />
 	</label>
       </fieldset>
+      <fieldset class="refresh">
+	<legend>Status refresh</legend>
+	<label class="refresh">
+	  <span>Refresh interval:</span>
+	  <input class="noinit" id="refresh_time" type="number"
+		 name="refresh" value="10" step="5" min="5"
+		 onchange="ref_status()" />
+	  &nbsp;<span class="unit">s</span>
+	</label>
+      </fieldset>
     </form>
-    <script>loadform('getstatus','sys/getstatus',true)</script>
+    <script>
+      var ref_tmr = 0;
+      function ref_status() {
+	  clearTimeout(ref_tmr);
+	  fetchconfig('sys/getstatus')
+	      .then((map) => initform('getstatus',map,true))
+	      .catch(err => {})
+	      .finally (() => {
+		  const when = document.getElementById('refresh_time').value
+			* 1000;
+		  ref_tmr = setTimeout(ref_status, when);
+	      });
+      }
+      ref_status();
+    </script>
   </body>
 </html>