webui: disallow empty type[number]

...unless necessary, like with magnitude zero threshold
This commit is contained in:
Maxim Prokhorov
2024-07-30 01:27:33 +03:00
parent 8d8d60fb81
commit de2f96a7eb
13 changed files with 38 additions and 31 deletions

View File

@@ -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/

View File

@@ -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>

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"});
}
});
}