minor design corrections

fix onkeyup / onchange event while typing / copying serial number to setup

tools/esp8266/app.cpp

@@ -895,6 +895,7 @@ void app::setupMqtt(void) {
     }
 }
 
+
 //-----------------------------------------------------------------------------
 void app::resetPayload(Inverter<>* iv) {
     DPRINTLN(DBG_INFO, "resetPayload: id: " + String(iv->id));
@@ -907,6 +908,8 @@ void app::resetPayload(Inverter<>* iv) {
     mPayload[iv->id].ts          = mUtcTimestamp;
 }
 
+
+//-----------------------------------------------------------------------------
 void app::calculateSunriseSunset() {
     // Source: https://en.wikipedia.org/wiki/Sunrise_equation#Complete_calculation_on_Earth
 

tools/esp8266/html/api.js

@@ -27,7 +27,7 @@ function parseVersion(obj) {
     );
 }
 
-function toggle(id, hide) {
+function setHide(id, hide) {
     var elm = document.getElementById(id);
     if(hide) {
         if(!elm.classList.contains("hide"))

tools/esp8266/html/setup.html

@@ -62,7 +62,7 @@
                     <fieldset>
                     <legend class="des">Inverter</legend>
                         <div id="inverter"></div><br/>
-                        <input type="button" id="btnAdd" value="Add Inverter"/>
+                        <input type="button" id="btnAdd" class="btn" value="Add Inverter"/>
                         <p class="subdes">General</p>
                         <label for="invInterval">Interval [s]</label>
                         <input type="text" class="text" name="invInterval"/>
@@ -229,13 +229,14 @@
                 var e = document.getElementsByName(id + "Addr")[0];
                 e.value = "";
                 e.dispatchEvent(new Event("keyup"));
+                e.dispatchEvent(new Event("change"));
                 document.getElementsByName(id + "Name")[0].value = "";
             }
 
             function ivHtml(obj, id) {
                 highestId = id;
                 if(highestId == (maxInv - 1))
-                    toggle("btnAdd", true);
+                    setHide("btnAdd", true);
                 iv = document.getElementById("inverter");
                 iv.appendChild(des("Inverter " + id));
                 id = "inv" + id;
@@ -244,28 +245,32 @@
                 iv.appendChild(lbl(id + "Addr", "Address*"));
                 var addr = inp(id + "Addr", obj["serial"], 12)
                 iv.appendChild(addr);
-                addr.addEventListener("keyup", (e) => {
-                    var serial = addr.value.substring(0,4);
-                    var max = 0;
-                    for(var i=0;i<4;i++) {
-                        toggle(id+"ModPwr"+i, true);
-                        toggle(id+"ModName"+i, true);
-                    }
-                    toggle("lbl"+id+"ModPwr", true);
-                    toggle("lbl"+id+"ModName", true);
-
-                    if(serial == "1161") max = 4;
-                    else if(serial == "1141") max = 2;
-                    else if(serial == "1121") max = 1;
-
-                    for(var i=0;i<max;i++) {
-                        toggle(id+"ModPwr"+i, false);
-                        toggle(id+"ModName"+i, false);
-                    }
-                    if(max != 0) {
-                        toggle("lbl"+id+"ModPwr", false);
-                        toggle("lbl"+id+"ModName", false);
-                    }
+                ['keyup', 'change'].forEach(function(evt) {
+
+                    addr.addEventListener(evt, (e) => {
+                        var serial = addr.value.substring(0,4);
+                        var max = 0;
+                        for(var i=0;i<4;i++) {
+                            setHide(id+"ModPwr"+i, true);
+                            setHide(id+"ModName"+i, true);
+                        }
+                        setHide("lbl"+id+"ModPwr", true);
+                        setHide("lbl"+id+"ModName", true);
+
+                        if(serial === "1161") max = 4;
+                        else if(serial === "1141") max = 2;
+                        else if(serial === "1121") max = 1;
+                        else max = 0;
+
+                        if(max != 0) {
+                            for(var i=0;i<max;i++) {
+                                setHide(id+"ModPwr"+i, false);
+                                setHide(id+"ModName"+i, false);
+                            }
+                            setHide("lbl"+id+"ModPwr", false);
+                            setHide("lbl"+id+"ModName", false);
+                        }
+                    })
                 });
 
                 for(var i of [["Name", "name", "Name*", 32]]) {

tools/esp8266/html/style.css

@@ -39,7 +39,7 @@ h2 {
 }
 
 .topnav a:hover {
-    background-color: #555 !important;
+    background-color: #044e86 !important;
     color: #000;
 }
 
@@ -60,13 +60,13 @@ h2 {
 }
 
 .topnav .active {
-    background-color: #00afc1;
+    background-color: #555;
 }
 
 span.seperator {
     width: 100%;
     height: 1px;
-    margin: 10px 0px 10px;
+    margin: 5px 0px 5px;
     background-color: #494949;
     display: block;
 }
@@ -170,7 +170,7 @@ p.lic, p.lic a {
 }
 
 .s_active, .s_collapsible:hover {
-    background-color: #006ec0;
+    background-color: #044e86;
     color: #fff;
 }
 
@@ -180,7 +180,7 @@ p.lic, p.lic a {
 }
 
 .s_collapsible {
-    background-color: #044e86;
+    background-color: #006ec0;
     color: white;
     cursor: pointer;
     padding: 18px;
@@ -222,7 +222,7 @@ a.btn {
 }
 
 a.btn:hover {
-    background-color: #555 !important;
+    background-color: #044e86 !important;
 }
 
 input, select {