From 1627e3119fe9084398b8e8c0ec794b8ed3a4f6b6 Mon Sep 17 00:00:00 2001 From: Maxim Prokhorov Date: Tue, 2 Mar 2021 18:51:18 +0300 Subject: [PATCH] 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 | 205 +++++++++++++++++-------------------------- code/html/index.html | 12 +-- 2 files changed, 87 insertions(+), 130 deletions(-) diff --git a/code/html/custom.js b/code/html/custom.js index 9ad4c1b1..95dfd218 100644 --- a/code/html/custom.js +++ b/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 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('') + $(this) + .parent().addClass("toggleWrapper"); + $(this) + .after('') }); @@ -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 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 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 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
- - + +
- - + +
@@ -737,10 +737,10 @@
- +
- +