From de2f96a7ebdea848210c95af0218ec1abaad487a Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Tue, 30 Jul 2024 01:27:33 +0300
Subject: [PATCH] webui: disallow empty type[number]

...unless necessary, like with magnitude zero threshold
---
 code/html/src/panel-admin.html      |  2 +-
 code/html/src/panel-dcz.html        |  2 +-
 code/html/src/panel-general.html    |  4 ++--
 code/html/src/panel-idb.html        |  2 +-
 code/html/src/panel-light.html      |  6 +++---
 code/html/src/panel-mqtt.html       |  4 ++--
 code/html/src/panel-relay.html      |  2 +-
 code/html/src/panel-rfb.html        |  2 +-
 code/html/src/panel-sch.html        |  2 +-
 code/html/src/panel-sns.html        |  4 ++--
 code/html/src/panel-thermostat.html | 14 +++++++-------
 code/html/src/panel-wifi.html       |  2 +-
 code/html/src/sensor.mjs            | 23 +++++++++++++++--------
 13 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/code/html/src/panel-admin.html b/code/html/src/panel-admin.html
index 6a88096f..93888aff 100644
--- a/code/html/src/panel-admin.html
+++ b/code/html/src/panel-admin.html
@@ -31,7 +31,7 @@
 
                 <div class="pure-control-group">
                     <label>HTTP port</label>
-                    <input name="webPort" type="text" data-action="reboot">
+                    <input name="webPort" type="number" data-action="reboot" min="1" max="65535" required >
                     <span class="pure-form-message">
                         This is the port for the web interface and API requests.
                         If different than 80 (standard HTTP port) you will have to add it explicitly to your requests: http://myip:myport/
diff --git a/code/html/src/panel-dcz.html b/code/html/src/panel-dcz.html
index 0245abc6..5879a73c 100644
--- a/code/html/src/panel-dcz.html
+++ b/code/html/src/panel-dcz.html
@@ -36,7 +36,7 @@
                 <legend>Lights (IN messages only)</legend>
                 <div class="pure-control-group">
                     <label>Light switch</label>
-                    <input name="dczLightIdx" type="number" min="0">
+                    <input name="dczLightIdx" type="number" min="0" required >
                 </div>
             </fieldset>
 
diff --git a/code/html/src/panel-general.html b/code/html/src/panel-general.html
index 4c70fa8c..f30789a3 100644
--- a/code/html/src/panel-general.html
+++ b/code/html/src/panel-general.html
@@ -34,7 +34,7 @@
 
                 <div class="pure-control-group module module-btn">
                     <label>Click repeat delay</label>
-                    <input name="btnRepDel" type="number" data-action="reboot" min="0" step="100" max="1000">
+                    <input name="btnRepDel" type="number" data-action="reboot" min="0" step="100" max="1000" required >
                     <span class="pure-form-message-inline">
                         Delay in milliseconds to detect a double or triple click (from 0 to 1000ms).<br>
                         The lower this number the faster the device will respond to button clicks but the harder it will be to get the expected event.
@@ -78,7 +78,7 @@
 
                 <div class="pure-control-group">
                     <label>Message interval</label>
-                    <input name="hbInterval" type="number" min="1">
+                    <input name="hbInterval" type="number" min="1" required >
                     <span class="pure-form-message-inline">
                         How often the heartbeat messages should be sent (number of <strong>seconds</strong>).
                     </span>
diff --git a/code/html/src/panel-idb.html b/code/html/src/panel-idb.html
index f8acb1a3..e957b712 100644
--- a/code/html/src/panel-idb.html
+++ b/code/html/src/panel-idb.html
@@ -29,7 +29,7 @@
 
                 <div class="pure-control-group">
                     <label>Port</label>
-                    <input name="idbPort" type="text">
+                    <input name="idbPort" type="number" value="1883" min="1" max="65535" required >
                 </div>
 
                 <div class="pure-control-group">
diff --git a/code/html/src/panel-light.html b/code/html/src/panel-light.html
index 6fa4938f..c99ba396 100644
--- a/code/html/src/panel-light.html
+++ b/code/html/src/panel-light.html
@@ -20,7 +20,7 @@
 
                <div class="pure-control-group">
                    <label>Save delay</label>
-                   <input type="number" name="ltSaveDelay" min="5000" max="60000">
+                   <input type="number" name="ltSaveDelay" min="5000" max="60000" required >
                    <span class="pure-form-message-inline">
                        (ms)
                    </span>
@@ -82,7 +82,7 @@
 
                <div class="pure-control-group">
                    <label>Transition time</label>
-                   <input type="number" name="ltTime" min="10" max="5000" data-action="reload">
+                   <input type="number" name="ltTime" min="10" max="5000" data-action="reload" required >
                    <span class="pure-form-message-inline">
                        (ms)
                    </span>
@@ -93,7 +93,7 @@
 
                <div class="pure-control-group">
                    <label>Transition step</label>
-                   <input type="number" name="ltStep" min="10" max="5000" data-action="reload">
+                   <input type="number" name="ltStep" min="10" max="5000" data-action="reload" required >
                    <span class="pure-form-message-inline">
                        (ms)
                    </span>
diff --git a/code/html/src/panel-mqtt.html b/code/html/src/panel-mqtt.html
index 22dcaa07..67554998 100644
--- a/code/html/src/panel-mqtt.html
+++ b/code/html/src/panel-mqtt.html
@@ -23,7 +23,7 @@
 
                 <div class="pure-control-group">
                     <label>Port</label>
-                    <input name="mqttPort" type="text" value="1883">
+                    <input name="mqttPort" type="number" value="1883" min="1" max="65535" required >
                 </div>
 
                 <div class="pure-control-group">
@@ -50,7 +50,7 @@
 
                 <div class="pure-control-group">
                     <label>Keep Alive</label>
-                    <input type="number" name="mqttKeep" min="10" max="3600">
+                    <input type="number" name="mqttKeep" min="10" max="3600" required >
                     <span class="pure-form-message-inline">
                         (seconds)
                     </span>
diff --git a/code/html/src/panel-relay.html b/code/html/src/panel-relay.html
index 34f67b43..2ca7e6e1 100644
--- a/code/html/src/panel-relay.html
+++ b/code/html/src/panel-relay.html
@@ -28,7 +28,7 @@
 
                 <div class="pure-control-group">
                     <label>Interlock delay</label>
-                    <input name="relayIlkDelay" type="number" min="0">
+                    <input name="relayIlkDelay" type="number" min="0" required >
                     <span class="pure-form-message">
                         (ms) Wait for the specified time before applying the relay status, when multiple relays change simultaneously.
                     </span>
diff --git a/code/html/src/panel-rfb.html b/code/html/src/panel-rfb.html
index a2375544..722ac10c 100644
--- a/code/html/src/panel-rfb.html
+++ b/code/html/src/panel-rfb.html
@@ -27,7 +27,7 @@
 
                 <div class="pure-control-group">
                     <label>Repeats</label>
-                    <input name="rfbRepeat" type="number" min="1">
+                    <input name="rfbRepeat" type="number" min="1" required >
                     <span class="pure-form-message">
                         Number of times to repeat the outgoing transmission
                     </span>
diff --git a/code/html/src/panel-sch.html b/code/html/src/panel-sch.html
index ebf59901..4c17e6c2 100644
--- a/code/html/src/panel-sch.html
+++ b/code/html/src/panel-sch.html
@@ -27,7 +27,7 @@
 
                 <div class="pure-control-group">
                     <label>Restore days</label>
-                    <input name="schRstrDays" type="number">
+                    <input name="schRstrDays" type="number" min="0" required >
                     <span class="pure-form-message">
                         Number of days to look back when restoring schedule. Set to zero to only check current day.
                     </span>
diff --git a/code/html/src/panel-sns.html b/code/html/src/panel-sns.html
index 2167898e..49099a81 100644
--- a/code/html/src/panel-sns.html
+++ b/code/html/src/panel-sns.html
@@ -38,7 +38,7 @@
                 <div class="pure-form-aligned">
                     <div class="pure-control-group">
                         <label>Read every</label>
-                        <input name="snsRead" type="number" min="1" list="list:snsRead" class="pure-input-1-4">
+                        <input name="snsRead" type="number" min="1" list="list:snsRead" class="pure-input-1-4" required >
                         <span>second(s)</span>
                         <datalist id="list:snsRead">
                             <option value="1"></option>
@@ -140,7 +140,7 @@
 
             <fieldset>
                 <legend>Zero threshold</legend>
-                <span class="pure-form-message">Report only when the value is above this threshold. Set to <code>NaN</code> (default) to disable.</span>
+                <span class="pure-form-message">Report only when the value is above this threshold. No threshold by default (empty value).</span>
                 <div id="magnitude-zero-thresholds" class="pure-form-aligned settings-group">
                 </div>
             </fieldset>
diff --git a/code/html/src/panel-thermostat.html b/code/html/src/panel-thermostat.html
index d29968ad..b5f1ac76 100644
--- a/code/html/src/panel-thermostat.html
+++ b/code/html/src/panel-thermostat.html
@@ -34,14 +34,14 @@
 
                 <div class="pure-control-group">
                     <label>Maximum</label>
-                    <input id="tempRangeMaxInput" name="tempRangeMax" type="number" min="1" max="100" data="20">
+                    <input id="tempRangeMaxInput" name="tempRangeMax" type="number" min="1" max="100" data="20" required >
                     <span class="pure-form-message-inline" data-key="thermostatTmpUnit">
                     </span>
                 </div>
 
                 <div class="pure-control-group">
                     <label>Minimum</label>
-                    <input id="tempRangeMinInput" name="tempRangeMin" type="number" min="0" max="99" data="10">
+                    <input id="tempRangeMinInput" name="tempRangeMin" type="number" min="0" max="99" data="10" required >
                     <span class="pure-form-message-inline" data-key="thermostatTmpUnit">
                     </span>
                 </div>
@@ -66,7 +66,7 @@
 
                 <div class="pure-control-group">
                     <label for="remoteTempMaxWait">Remote temperature waiting</label>
-                    <input name="remoteTempMaxWait" type="number" min="0" max="1800" data="120">
+                    <input name="remoteTempMaxWait" type="number" min="0" max="1800" data="120" required >
                     <span class="pure-form-message-inline">
                         (seconds)
                     </span>
@@ -80,7 +80,7 @@
 
                 <div class="pure-control-group">
                     <label for="maxOnTime">Max heating time</label>
-                    <input name="maxOnTime" type="number" min="0" max="180" data="30">
+                    <input name="maxOnTime" type="number" min="0" max="180" data="30" required >
                     <span class="pure-form-message-inline">
                         (minutes)
                     </span>
@@ -88,7 +88,7 @@
 
                 <div class="pure-control-group">
                     <label for="minOffTime">Min rest time</label>
-                    <input name="minOffTime" type="number" min="0" max="60" data="10">
+                    <input name="minOffTime" type="number" min="0" max="60" data="10" required >
                     <span class="pure-form-message-inline">
                         (minutes)
                     </span>
@@ -102,7 +102,7 @@
 
                 <div class="pure-control-group">
                     <label for="aloneOnTime">Heating time</label>
-                    <input name="aloneOnTime" type="number" min="0" max="180" data="5">
+                    <input name="aloneOnTime" type="number" min="0" max="180" data="5" required >
                     <span class="pure-form-message-inline">
                         (minutes)
                     </span>
@@ -110,7 +110,7 @@
 
                 <div class="pure-control-group">
                     <label for="aloneOffTime">Rest time</label>
-                    <input name="aloneOffTime" type="number" min="0" max="180" data="55">
+                    <input name="aloneOffTime" type="number" min="0" max="180" data="55" required >
                     <span class="pure-form-message-inline">
                         (minutes)
                     </span>
diff --git a/code/html/src/panel-wifi.html b/code/html/src/panel-wifi.html
index 32504ccb..060b0b81 100644
--- a/code/html/src/panel-wifi.html
+++ b/code/html/src/panel-wifi.html
@@ -41,7 +41,7 @@
 
                 <div class="pure-control-group">
                     <label>RSSI threshold</label>
-                    <div><input type="number" name="wifiScanRssi" min="-128" max="0"></div>
+                    <div><input type="number" name="wifiScanRssi" min="-128" max="0" required ></div>
                     <span class="pure-form-message">
                         When scanning is enabled, also periodically check available networks when the currently connected network RSSI is below this value.
                     </span>
diff --git a/code/html/src/sensor.mjs b/code/html/src/sensor.mjs
index 8c53d82f..dd8cf257 100644
--- a/code/html/src/sensor.mjs
+++ b/code/html/src/sensor.mjs
@@ -324,13 +324,16 @@ function emonRatioInfo(id) {
     return magnitudeSettingInfo(id, "Ratio");
 }
 
+/** @typedef {{required?: boolean, min?: string, max?: string}} MagnitudeNumberOptions */
+
 /**
  * @param {string} containerId
  * @param {number} id
  * @param {string} keySuffix
  * @param {number} value
+ * @param {MagnitudeNumberOptions} options
  */
-function initMagnitudeNumberSetting(containerId, id, keySuffix, value) {
+function initMagnitudeNumberSetting(containerId, id, keySuffix, value, {required = true, min = "", max = ""} = {}) {
     const container = document.getElementById(containerId);
     if (!container) {
         return;
@@ -345,15 +348,19 @@ function initMagnitudeNumberSetting(containerId, id, keySuffix, value) {
 
     const template = new NumberInput();
     mergeTemplate(container, template.with(
-        (label, input) => {
+        (label, input, span) => {
             label.textContent = info.name;
-            label.htmlFor = input.id;
+            label.htmlFor = info.key;
 
             input.id = info.key;
-            input.name = input.id;
+            input.name = info.key;
+            input.required = required;
+            input.min = min;
+            input.max = max;
             input.value = value.toString();
 
-            setOriginalsFromValues([input]);
+            setOriginalFromValue(input);
+            listenEnumerableMagnitudeDescription(span, id);
         }));
 }
 
@@ -478,19 +485,19 @@ function initMagnitudesSettings(values, schema) {
         if (typeof threshold === "number") {
             initMagnitudeNumberSetting(
                 "magnitude-zero-thresholds", id,
-                "ZeroThreshold", threshold);
+                "ZeroThreshold", threshold, {required: false});
         }
 
         if (typeof settings.MinDelta === "number") {
             initMagnitudeNumberSetting(
                 "magnitude-min-deltas", id,
-                "MinDelta", settings.MinDelta);
+                "MinDelta", settings.MinDelta, {min: "0"});
         }
 
         if (typeof settings.MaxDelta === "number") {
             initMagnitudeNumberSetting(
                 "magnitude-max-deltas", id,
-                "MaxDelta", settings.MaxDelta);
+                "MaxDelta", settings.MaxDelta, {min: "0"});
         }
     });
 }