From 4f520a8798201cd6d2fa8966db2808cec80c2e6f Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Mon, 24 Jun 2024 22:15:41 +0300
Subject: [PATCH] webui: consistent settingsMax check

remove leftover manual template merge, idForContainer() should just use template-id data key
group add event now checks that instead, raising alert when number is greater than max

ref. #2610
---
 code/html/src/led.mjs            | 20 ++-----------------
 code/html/src/settings.mjs       | 34 ++++++++++++++++----------------
 code/html/src/template-led.html  |  2 +-
 code/html/src/template-wifi.html |  2 +-
 code/html/src/wifi.mjs           | 28 +++++---------------------
 5 files changed, 26 insertions(+), 60 deletions(-)

diff --git a/code/html/src/led.mjs b/code/html/src/led.mjs
index 9d0bbb02..9989b686 100644
--- a/code/html/src/led.mjs
+++ b/code/html/src/led.mjs
@@ -2,29 +2,13 @@ import {
     addSimpleEnumerables,
     fromSchema,
     groupSettingsOnAdd,
-    idForContainer,
     variableListeners,
 } from './settings.mjs';
 
-import {
-    fillTemplateLineFromCfg,
-    loadConfigTemplate,
-    mergeTemplate,
-} from './template.mjs';
+import { addFromTemplate } from './template.mjs';
 
 function addNode(cfg) {
-    let container = document.getElementById("leds");
-
-    let id = idForContainer(container);
-    if (id < 0) {
-        return;
-    }
-
-    let line = loadConfigTemplate("led-config");
-    line.querySelector("span").textContent = id;
-    fillTemplateLineFromCfg(line, id, cfg);
-
-    mergeTemplate(container, line);
+    addFromTemplate(document.getElementById("leds"), "led-config", cfg);
 }
 
 function listeners() {
diff --git a/code/html/src/settings.mjs b/code/html/src/settings.mjs
index 7431297f..ddb55bbf 100644
--- a/code/html/src/settings.mjs
+++ b/code/html/src/settings.mjs
@@ -174,9 +174,26 @@ function onGroupSettingsEventDel(event) {
 // 'button-add-settings-group' will trigger update on the specified 'data-settings-group' element id, which
 // needs to have 'settings-group-add' event handler attached to it.
 
+function groupSettingsCheckMax(event) {
+    const max = event.target.dataset["settingsMax"];
+    const val = 1 + event.target.children.length;
+
+    if ((max !== undefined) && (parseInt(max, 10) < val)) {
+        alert(`Max number of ${event.target.id} has been reached (${val} out of ${max})`);
+        return false;
+    }
+
+    return true;
+}
+
 export function groupSettingsOnAdd(elementId, listener) {
     document.getElementById(elementId)
         .addEventListener("settings-group-add", (event) => {
+            event.stopPropagation();
+            if (!groupSettingsCheckMax(event)) {
+                return;
+            }
+
             listener(event);
             onGroupSettingsEventAdd(event);
         });
@@ -592,23 +609,6 @@ export function initGenericKeyValueElement(key, value) {
     setOriginalsFromValues(inputs);
 }
 
-export function idForContainer(container) {
-    let id = container.childElementCount;
-
-    let settingsMax = container.dataset["settingsMax"];
-    if (settingsMax === undefined) {
-        return id;
-    }
-
-    let max = parseInt(settingsMax, 10);
-    if (id < max) {
-        return id;
-    }
-
-    alert(`Max number of ${container.id} has been reached (${id} out of ${max})`);
-    return -1;
-}
-
 const Settings = new SettingsBase();
 
 export function onElementChange(event) {
diff --git a/code/html/src/template-led.html b/code/html/src/template-led.html
index 25de377b..5630e67b 100644
--- a/code/html/src/template-led.html
+++ b/code/html/src/template-led.html
@@ -1,7 +1,7 @@
 <template id="template-led-config" >
     <div class="pure-form pure-form-aligned">
         <fieldset>
-            <legend>LED #<span></span></legend>
+            <legend>LED #<span data-key="template-id"></span></legend>
             <div class="pure-control-group">
                 <label>GPIO</label>
                 <select class="pure-input-2-3 enumerable enumerable-gpio-hardware" name="ledGpio" data-action="reboot"></select>
diff --git a/code/html/src/template-wifi.html b/code/html/src/template-wifi.html
index 68823cb0..88510c2a 100644
--- a/code/html/src/template-wifi.html
+++ b/code/html/src/template-wifi.html
@@ -1,7 +1,7 @@
 <template id="template-network-config">
     <div>
         <div class="pure-control-group">
-            <label>SSID</label>
+            <label>SSID #<span data-key="template-id"></span></label>
             <input name="ssid" type="text" value="" data-action="reconnect" required autocomplete="off">
             <button type="button" class="pure-button button-more-parent">...</button>
         </div>
diff --git a/code/html/src/wifi.mjs b/code/html/src/wifi.mjs
index e50c47ff..a5231bb4 100644
--- a/code/html/src/wifi.mjs
+++ b/code/html/src/wifi.mjs
@@ -1,38 +1,20 @@
 import {
     fromSchema,
     groupSettingsOnAdd,
-    idForContainer,
     variableListeners,
 } from './settings.mjs';
 
-import {
-    fillTemplateLineFromCfg,
-    loadConfigTemplate,
-    mergeTemplate,
-} from './template.mjs';
-
+import { addFromTemplate } from './template.mjs';
 import { moreElem } from './core.mjs';
 import { sendAction } from './connection.mjs';
 
 function addNode(cfg, showMore) {
-    let container = document.getElementById("networks");
+    const container = document.getElementById("networks");
+    addFromTemplate(container, "network-config", cfg);
 
-    let id = idForContainer(container);
-    if (id < 0) {
-        return;
+    if ((showMore === undefined) || showMore) {
+        moreElem(container.lastChild)
     }
-
-    if (showMore === undefined) {
-        showMore = true;
-    }
-
-    let line = loadConfigTemplate("network-config");
-    fillTemplateLineFromCfg(line, id, cfg);
-    if (showMore) {
-        moreElem(line);
-    }
-
-    mergeTemplate(container, line);
 }
 
 function scanResult(values) {