led: fixup configuration in the webui

Also fix the rogue typos from the scheduler change

code/espurna/led.cpp

@@ -250,18 +250,27 @@ void _ledWebSocketOnVisible(JsonObject& root) {
 }
 
 void _ledWebSocketOnConnected(JsonObject& root) {
-    if (!ledCount()) return;
-    JsonObject& module = root.createNestedObject("led");
+    if (!ledCount()) {
+        return;
+    }
+
+    JsonObject& config = root.createNestedObject("ledConfig");
 
-    JsonArray& schema = module.createNestedArray("schema");
-    schema.add("GPIO");
-    schema.add("Inv");
-    schema.add("Mode");
+    {
+        static constexpr const char* const schema_keys[] PROGMEM = {
+            "ledGpio",
+            "ledInv",
+            "ledMode"
 #if RELAY_SUPPORT
-    schema.add("Relay");
+            ,"ledRelay"
 #endif
+        };
+
+        JsonArray& schema = config.createNestedArray("schema");
+        schema.copyFrom(schema_keys, sizeof(schema_keys) / sizeof(*schema_keys));
+    }
 
-    JsonArray& leds = module.createNestedArray("list");
+    JsonArray& leds = config.createNestedArray("leds");
 
     for (size_t index = 0; index < ledCount(); ++index) {
         JsonArray& led = leds.createNestedArray();

code/html/custom.js

@@ -64,7 +64,7 @@ function followScroll(id, threshold) {
 
 function fromSchema(source, schema) {
     if (schema.length !== source.length) {
-        throw "Schema mismatch!";
+        throw `Schema mismatch! Expected length ${schema.length} vs. ${source.length}`;
     }
 
     var target = {};
@@ -1023,6 +1023,20 @@ function addNetwork(network) {
 // Relays scheduler
 // -----------------------------------------------------------------------------
 
+function addLed(id, cfg, payload) {
+    var line = loadConfigTemplate("ledConfigTemplate");
+
+    fillTemplateLineFromCfg(line, id, cfg);
+    $("span.id", line)
+        .html(id);
+
+    line.appendTo("#ledConfig");
+}
+
+// -----------------------------------------------------------------------------
+// Relays scheduler
+// -----------------------------------------------------------------------------
+
 function numSchedules() {
     return $("#schedules > div").length;
 }
@@ -1862,7 +1876,7 @@ function processData(data) {
 
             let schema = value.schema;
             value["schedules"].forEach((entries, id) => {
-                let cfg = fromSchema(entries, id);
+                let cfg = fromSchema(entries, schema);
                 addSchedule(cfg, value);
             });
 
@@ -1921,28 +1935,14 @@ function processData(data) {
         // LEDs
         // ---------------------------------------------------------------------
 
-        if ("led" === key) {
-            if($("#ledConfig > div").length > 0) return;
-
-            var schema = value["schema"];
-            value["list"].forEach(function(led_data, index) {
-                var line = loadConfigTemplate("ledConfigTemplate");
-
-                $("span.id", line).html(index);
-                $("select", line).attr("data", index);
-                $("input", line).attr("data", index);
-
-                var led = fromSchema(led_data, schema);
-
-                $("select[name='ledGPIO']", line).val(led.GPIO);
-                // XXX: checkbox implementation depends on unique id
-                // $("input[name='ledInv']", line).val(led.Inv);
-                $("select[name='ledMode']", line).val(led.Mode);
-                $("input[name='ledRelay']", line).val(led.Relay);
-
-                setOriginalsFromValues($("input,select", line));
+        if ("ledConfig" === key) {
+            if ($("#ledConfig > div").length > 0) {
+                return;
+            }
 
-                line.appendTo("#ledConfig");
+            let schema = value["schema"];
+            value["leds"].forEach((entries, id) => {
+                addLed(id, fromSchema(entries, schema), value);
             });
 
             return;

code/html/index.html

@@ -1913,7 +1913,7 @@
                 <legend class="pure-u-1 pure-u-lg-1-4">LED #<span class="id"></span></legend>
                 <div class="pure-control-group">
                     <label>GPIO</label>
-                    <select class="pure-input-2-3 gpio-select" name="ledGPIO" action="reboot"></select>
+                    <select class="pure-input-2-3 gpio-select" name="ledGpio" action="reboot"></select>
                 </div>
                 <div class="pure-control-group">
                     <label>Mode</label>
@@ -1930,7 +1930,7 @@
                         <option value="7">Always OFF</option>
                     </select>
                 </div>
-                <div class="pure-control-group">
+                <div class="module-relay pure-control-group">
                     <label>Relay ID</label>
                     <input class="pure-input-2-3" name="ledRelay" type="number" min="0" data="0"></input>
                 </div>