webui: remove hard-coded group key list

Custom attribute for key inputs to send them as lists.
Template proxy function to make sure we don't have to type that out each time.

code/html/custom.js

@@ -112,7 +112,7 @@ function validatePassword(password) {
 }
 
 function validateFormPasswords(form) {
-    var passwords = $("input[name='adminPass1'],input[name='adminPass2']", form);
+    var passwords = $("input[name='adminPass0'],input[name='adminPass1']", form);
     var adminPass1 = passwords.first().val(),
         adminPass2 = passwords.last().val();
 
@@ -206,23 +206,6 @@ var groupSettingsObserver = new MutationObserver(function(mutations) {
     });
 });
 
-// These fields will always be a list of values
-function isGroupValue(value) {
-    var names = [
-        "ssid", "pass", "gw", "mask", "ip", "dns",
-        "schEnabled", "schSwitch","schAction","schType","schHour","schMinute","schWDs","schUTC",
-        "relayBoot", "relayPulse", "relayTime", "relayLastSch",
-        "mqttGroup", "mqttGroupSync", "relayOnDisc",
-        "dczRelayIdx", "dczMagnitude",
-        "tspkRelay", "tspkMagnitude",
-        "ledGPIO", "ledMode", "ledRelay",
-        "adminPass",
-        "node", "key", "topic",
-        "rpnRule", "rpnTopic", "rpnName"
-    ];
-    return names.indexOf(value) >= 0;
-}
-
 function bitsetToValues(bitset) {
     var values = [];
     for (var index = 0; index < 31; ++index) {
@@ -259,21 +242,6 @@ function getValue(element) {
 
 }
 
-function addValue(data, name, value) {
-
-    if (name in data) {
-        if (!Array.isArray(data[name])) {
-            data[name] = [data[name]];
-        }
-        data[name].push(value);
-    } else if (isGroupValue(name)) {
-        data[name] = [value];
-    } else {
-        data[name] = value;
-    }
-
-}
-
 function getData(form, changed, cleanup) {
 
     // Populate two sets of data, ones that had been changed and ones that stayed the same
@@ -293,6 +261,9 @@ function getData(form, changed, cleanup) {
         }
 
         var name = $(this).attr("name");
+        if (name === undefined) {
+            return;
+        }
 
         var real_name = $(this).attr("data-settings-real-name");
         if (real_name !== undefined) {
@@ -308,7 +279,17 @@ function getData(form, changed, cleanup) {
                 changed_data.push(name);
             }
 
-            addValue(data, name, value);
+            // make sure to group keys from templates (or, manually flagged as such)
+            var is_group = $(this).attr("data-settings-group") !== undefined;
+            if (is_group) {
+                if (name in data) {
+                    data[name].push(value);
+                } else {
+                    data[name] = [value];
+                }
+            } else {
+                data[name] = value;
+            }
         }
     });
 
@@ -408,14 +389,6 @@ function doGeneratePassword() {
     return false;
 }
 
-function getJson(str) {
-    try {
-        return JSON.parse(str);
-    } catch (e) {
-        return false;
-    }
-}
-
 function moduleVisible(module) {
     if (module == "sch") {
         $("li.module-" + module).css("display", "inherit");
@@ -748,11 +721,11 @@ function onFileUpload(event) {
 
     var reader = new FileReader();
     reader.onload = function(e) {
-        var data = getJson(e.target.result);
-        if (data) {
+        try {
+            var data = JSON.parse(e.target.result);
             sendAction("restore", data);
-        } else {
-            window.alert(messages[4]);
+        } catch (e) {
+            window.alert(e);
         }
     };
     reader.readAsText(inputFile);
@@ -878,6 +851,19 @@ function showPanel() {
     $("#" + $(this).attr("data")).show();
 }
 
+function loadTemplate(name) {
+    let template = $(`#${name}.template`);
+    let clone = $(template).clone();
+    return clone.children();
+}
+
+function loadConfigTemplate(name) {
+    let template = loadTemplate(name);
+    $("input,select", template)
+        .attr("data-settings-group", "");
+    return template;
+}
+
 // -----------------------------------------------------------------------------
 // Relays & magnitudes mapping
 // -----------------------------------------------------------------------------
@@ -887,11 +873,10 @@ function createRelayList(data, container, template_name) {
     var current = $("#" + container + " > div").length;
     if (current > 0) { return; }
 
-    var template = $("#" + template_name + " .pure-g")[0];
+    var template = loadConfigTemplate(template_name);
     for (var i in data) {
         var line = $(template).clone();
         $("label", line).html("Switch #" + i);
-        $("input", line).attr("tabindex", 40 + i).val(data[i]);
         setOriginalsFromValues($("input", line));
         line.appendTo("#" + container);
     }
@@ -904,14 +889,13 @@ function createMagnitudeList(data, container, template_name) {
     var current = $("#" + container + " > div").length;
     if (current > 0) { return; }
 
-    var template = $("#" + template_name + " .pure-g")[0];
+    var template = loadConfigTemplate(template_name);
     var size = data.size;
 
     for (var i=0; i<size; ++i) {
         var line = $(template).clone();
         $("label", line).html(MagnitudeNames[data.type[i]] + " #" + parseInt(data.index[i], 10));
         $("div.hint", line).html(Magnitudes[i].description);
-        $("input", line).attr("tabindex", 40 + i).val(data.idx[i]);
         setOriginalsFromValues($("input", line));
         line.appendTo("#" + container);
     }
@@ -919,32 +903,24 @@ function createMagnitudeList(data, container, template_name) {
 }
 //endRemoveIf(!sensor)
 
+function addFromTemplate(template, target) {
+    var line = loadConfigTemplate(template);
+    $("button", line)
+        .on('click', delParent);
+    setOriginalsFromValues($("input", line));
+    line.appendTo("#" + target);
+}
+
 // -----------------------------------------------------------------------------
 // RPN Rules
 // -----------------------------------------------------------------------------
 
 function addRPNRule() {
-    var template = $("#rpnRuleTemplate .pure-g")[0];
-    var line = $(template).clone();
-    var tabindex = $("#rpnRules > div").length + 100;
-    $(line).find("input").each(function() {
-        $(this).attr("tabindex", tabindex++);
-    });
-    $(line).find("button").on('click', delParent);
-    setOriginalsFromValues($("input", line));
-    line.appendTo("#rpnRules");
+    addFromTemplate("rpnRuleTemplate", "rpnRules");
 }
 
 function addRPNTopic() {
-    var template = $("#rpnTopicTemplate .pure-g")[0];
-    var line = $(template).clone();
-    var tabindex = $("#rpnTopics > div").length + 120;
-    $(line).find("input").each(function() {
-        $(this).attr("tabindex", tabindex++);
-    });
-    $(line).find("button").on('click', delParent);
-    setOriginalsFromValues($("input", line));
-    line.appendTo("#rpnTopics");
+    addFromTemplate("rpnRuleTemplate", "rpnTopics");
 }
 
 // -----------------------------------------------------------------------------
@@ -954,15 +930,7 @@ function addRPNTopic() {
 //removeIf(!rfm69)
 
 function addMapping() {
-    var template = $("#nodeTemplate .pure-g")[0];
-    var line = $(template).clone();
-    var tabindex = $("#mapping > div").length * 3 + 50;
-    $(line).find("input").each(function() {
-        $(this).attr("tabindex", tabindex++);
-    });
-    $(line).find("button").on('click', delParent);
-    setOriginalsFromValues($("input", line));
-    line.appendTo("#mapping");
+    addFromTemplate("nodeTemplate", "mapping");
 }
 
 //endRemoveIf(!rfm69)
@@ -997,13 +965,7 @@ function addNetwork(network) {
         network = {};
     }
 
-    var tabindex = 200 + number * 10;
-    var template = $("#networkTemplate").children();
-    var line = $(template).clone();
-    $(line).find("input").each(function() {
-        $(this).attr("tabindex", tabindex);
-        tabindex++;
-    });
+    var line = loadConfigTemplate("networkTemplate");
     $(".password-reveal", line).on("click", toggleVisiblePassword);
     $(line).find(".button-del-network").on("click", delNetwork);
     $(line).find(".button-more-network").on("click", moreNetwork);
@@ -1061,9 +1023,7 @@ function addSchedule(values) {
         values = {};
     }
 
-    var tabindex = 200 + schedules * 10;
-    var template = $("#scheduleTemplate").children();
-    var line = $(template).clone();
+    var line = loadConfigTemplate("scheduleTemplate");
 
     var type = "none";
     switch(values.schType) {
@@ -1078,13 +1038,9 @@ function addSchedule(values) {
             break;
     }
 
-    template = $("#" + type + "ActionTemplate").children();
-    $(line).find("#schActionDiv").append(template.clone());
+    var actions = $("#" + type + "ActionTemplate").children();
+    $(line).find("#schActionDiv").append(actions.clone());
 
-    $(line).find("input").each(function() {
-        $(this).attr("tabindex", tabindex);
-        tabindex++;
-    });
     $(line).find(".button-del-schedule").on("click", delSchedule);
     $(line).find(".button-more-schedule").on("click", moreSchedule);
 
@@ -1127,24 +1083,23 @@ function initRelays(data) {
     if (current > 0) { return; }
 
     var schema = data.schema;
-    var template = $("#relayTemplate .pure-g")[0];
 
     data["relays"].forEach(function(relay, id) {
         var _relay = initRelayFromSchema(id, relay, schema);
 
-        var line = $(template).clone();
+        var line = loadConfigTemplate("relayTemplate");
 
         $("span.relay-name", line)
             .text(_relay.name)
-            .attr("data", id);
+            .attr("data-id", id);
 
         $("input[type='checkbox']", line)
             .prop('checked', false)
             .prop('disabled', true)
-            .attr("data", id)
+            .attr("data-id", id)
             .prop("id", "relay" + id)
             .on("change", function (event) {
-                var target= parseInt($(event.target).attr("data"), 10);
+                var target= parseInt($(event.target).attr("data-id"), 10);
                 var status = $(event.target).prop("checked");
                 doToggle(target, status);
             });
@@ -1175,10 +1130,15 @@ function updateRelays(data) {
 function createCheckboxes() {
 
     $("input[type='checkbox']").each(function() {
+        let name = $(this).prop("name")
+        if ($(this).prop("name")) {
+            $(this).prop("id", $(this).prop("name"));
+        }
 
-        if($(this).prop("name"))$(this).prop("id", $(this).prop("name"));
-        $(this).parent().addClass("toggleWrapper");
-        $(this).after('<label for="' + $(this).prop("name") + '" class="toggle"><span class="toggle__handler"></span></label>')
+        $(this)
+            .parent().addClass("toggleWrapper");
+        $(this)
+            .after('<label for="' + $(this).prop("name") + '" class="toggle"><span class="toggle__handler"></span></label>')
 
     });
 
@@ -1189,12 +1149,11 @@ function initRelayConfig(data) {
     var current = $("#relayConfig > legend").length; // there is a legend per relay
     if (current > 0) { return; }
 
-    var template = $("#relayConfigTemplate").children();
     var schema = data.schema;
 
     data["relays"].forEach(function(relay, id) {
         var _relay = initRelayFromSchema(id, relay, schema);
-        var line = $(template).clone();
+        var line = loadConfigTemplate("relayConfigTemplate");
 
         $("span.name", line).html(_relay.name);
         $("span.prov", line).html(_relay.prov);
@@ -1248,9 +1207,6 @@ function initMagnitudes(data) {
 
     var size = data.size;
 
-    // add templates
-    var template = $("#magnitudeTemplate").children();
-
     for (var i=0; i<size; ++i) {
         var magnitude = {
             "name": MagnitudeNames[data.type[i]] + " #" + parseInt(data.index[i], 10),
@@ -1259,7 +1215,7 @@ function initMagnitudes(data) {
         };
         Magnitudes.push(magnitude);
 
-        var line = $(template).clone();
+        var line = loadConfigTemplate("magnitudeTemplate");
         $("label", line).html(magnitude.name);
         $("input", line).attr("data", i);
         $("div.sns-desc", line).html(magnitude.description);
@@ -1283,10 +1239,8 @@ function initCurtain(data) {
     var current = $("#curtains > div").length;
     if (current > 0) { return; }
 
-    // add curtain template (prepare multi switches)
-    var template = $("#curtainTemplate").children();
-    var line = $(template).clone();
-    // init curtain button
+    // add and init curtain template, prepare multi switches
+    var line = loadConfigTemplate("curtainTemplate");
     $(line).find(".button-curtain-open").on("click", function() {
         sendAction("curtainAction", {button: 1});
         $(this).css('background', 'red');
@@ -1441,11 +1395,10 @@ function initChannels(num) {
 
     // add channel templates
     var i = 0;
-    var template = $("#channelTemplate").children();
     for (i=0; i<max; i++) {
 
         var channel_id = start + i;
-        var line = $(template).clone();
+        var line = loadTemplate("channelTemplate");
         $("span.slider", line).attr("data", channel_id);
         $("input.slider", line).attr("data", channel_id).on("change", onChannelSliderChange);
         $("label", line).html("Channel #" + channel_id);
@@ -1461,8 +1414,7 @@ function initChannels(num) {
     }
 
     // add brightness template
-    var template = $("#brightnessTemplate").children();
-    var line = $(template).clone();
+    var line = loadTemplate("brightnessTemplate");
     line.appendTo("#channels");
 
     // init bright slider
@@ -1504,8 +1456,7 @@ function addRfbNode() {
 
     var numNodes = $("#rfbNodes > legend").length;
 
-    var template = $("#rfbNodeTemplate").children();
-    var line = $(template).clone();
+    var line = loadTemplate("rfbNodeTemplate");
     $("span", line).html(numNodes);
     $(line).find("input").each(function() {
         this.dataset["id"] = numNodes;
@@ -1537,11 +1488,9 @@ function initLightfox(data, relayCount) {
 
     var numNodes = data.length;
 
-    var template = $("#lightfoxNodeTemplate").children();
-
     var i, j;
     for (i=0; i<numNodes; i++) {
-        var $line = $(template).clone();
+        var $line = loadTemplate("lightfoxNodeTemplate");
         $line.find("label > span").text(data[i]["id"]);
         $line.find("select").each(function() {
             $(this).attr("name", "btnRelay" + data[i]["id"]);
@@ -1629,9 +1578,17 @@ function processData(data) {
             var processOn = ((rfb.on !== undefined) && (rfb.on.length > 0));
             var processOff = ((rfb.off !== undefined) && (rfb.off.length > 0));
 
-            for (var i=0; i<size; ++i) {
-                if (processOn) $("input[name='rfbcode'][data-id='" + (i + start) + "'][data-status='1']").val(rfb.on[i]);
-                if (processOff) $("input[name='rfbcode'][data-id='" + (i + start) + "'][data-status='0']").val(rfb.off[i]);
+            for (let i = 0; i < size; ++i) {
+                let selector = template`input[name='rfbcode'][data-id='${id}'][data-status='${status}']`;
+                let id = i + start;
+                if (processOn) {
+                    $(selector({"id": id, "status": 1}))
+                        .val(rfb.on[i]);
+                }
+                if (processOff) {
+                    $(selector({"id": id, "status": 0}))
+                        .val(rfb.off[i]);
+                }
             }
 
             return;
@@ -1984,7 +1941,7 @@ function processData(data) {
 
             var schema = value["schema"];
             value["list"].forEach(function(led_data, index) {
-                var line = $($("#ledConfigTemplate").children()).clone();
+                var line = loadConfigTemplate("ledConfigTemplate");
 
                 $("span.id", line).html(index);
                 $("select", line).attr("data", index);

code/html/index.html

@@ -39,14 +39,14 @@
 
                             <fieldset>
                                 <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass1">New Password</label>
-                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass1" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" tabindex="1" autocomplete="false" spellcheck="false" required />
+                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass0">New Password</label>
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass0" data-settings-group="" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" autocomplete="false" spellcheck="false" required />
                                     <span class="no-select password-reveal"></span>
                                 </div>
 
                                 <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass2">Repeat password</label>
-                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass2" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" tabindex="2" autocomplete="false" spellcheck="false" required />
+                                    <label class="pure-u-1 pure-u-lg-1-4" for="adminPass1">Repeat password</label>
+                                    <input class="pure-u-1 pure-u-lg-3-4" name="adminPass1" data-settings-group="" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" autocomplete="false" spellcheck="false" required />
                                     <span class="no-select password-reveal"></span>
                                 </div>
                             </fieldset>
@@ -737,10 +737,10 @@
 
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Admin password</label>
-                                    <input name="adminPass1" class="pure-u-1 pure-u-lg-3-4" placeholder="New password" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" action="reboot" tabindex="11" autocomplete="false" spellcheck="false" />
+                                    <input name="adminPass1" class="pure-u-1 pure-u-lg-3-4" placeholder="New password" data-settings-group="" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" action="reboot" autocomplete="false" spellcheck="false" />
                                     <span class="no-select password-reveal"></span>
                                     <div class="pure-u-1 pure-u-lg-1-4"></div>
-                                    <input name="adminPass2" class="pure-u-1 pure-u-lg-3-4" placeholder="Repeat password" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" action="reboot" tabindex="12" autocomplete="false" spellcheck="false" />
+                                    <input name="adminPass2" class="pure-u-1 pure-u-lg-3-4" placeholder="Repeat password" data-settings-group="" data-settings-real-name="adminPass" minlength="8" maxlength="63" type="password" action="reboot" autocomplete="false" spellcheck="false" />
                                     <span class="no-select password-reveal"></span>
 
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>