improved menu (seperators)

added second level for reboot if reboot from menu was selected by mistake

tools/esp8266/defines.h

@@ -13,7 +13,7 @@
 //-------------------------------------
 #define VERSION_MAJOR       0
 #define VERSION_MINOR       5
-#define VERSION_PATCH       23
+#define VERSION_PATCH       24
 
 
 //-------------------------------------

tools/esp8266/html/api.js

@@ -1,3 +1,22 @@
+/**
+ * GENERIC FUNCTIONS
+ */
+
+function topnav() {
+    toggle("topnav");
+}
+
+function parseMenu(obj) {
+    var e = document.getElementById("topnav");
+    e.innerHTML = "";
+    for(var i = 0; i < obj["name"].length; i ++) {
+        if(obj["name"][i] == "-")
+            e.appendChild(span("", ["seperator"]));
+        else
+            e.appendChild(link(obj["link"][i], obj["name"][i], obj["trgt"][i]));
+    }
+}
+
 function toggle(id, hide) {
     var elm = document.getElementById(id);
     if(hide) {
@@ -36,6 +55,10 @@ function getAjax(url, ptr, method="GET", json=null) {
     }
 }
 
+/**
+ * CREATE DOM FUNCTIONS
+ */
+
 function des(val) {
     e = document.createElement('p');
     e.classList.add("subdes");

tools/esp8266/html/index.html

@@ -85,20 +85,6 @@
                 getAjax("/api/setup", apiCb, "POST", JSON.stringify(obj));
             }
 
-            function topnav() {
-                toggle("topnav");
-            }
-
-            function parseMenu(obj) {
-                if(true == exeOnce) {
-                    var e = document.getElementById("topnav");
-                    e.innerHTML = "";
-                    for(var i = 0; i < obj["name"].length; i ++) {
-                        e.appendChild(link(obj["link"][i], obj["name"][i]));
-                    }
-                }
-            }
-
             function parseSys(obj) {
                 // Disclaimer
                 //if(obj["disclaimer"] == false) sessionStorage.setItem("gDisclaimer", promptFunction());
@@ -187,6 +173,7 @@
 
             function parse(obj) {
                 if(null != obj) {
+                    if(true == exeOnce)
                         parseMenu(obj["menu"]);
                     parseSys(obj["system"]);
                     parseStat(obj["statistics"]);

tools/esp8266/html/serial.html

@@ -70,18 +70,6 @@
             var con = document.getElementById("serial");
             var exeOnce = true;
 
-            function topnav() {
-                toggle("topnav");
-            }
-
-            function parseMenu(obj) {
-                var e = document.getElementById("topnav");
-                e.innerHTML = "";
-                for(var i = 0; i < obj["name"].length; i ++) {
-                    e.appendChild(link(obj["link"][i], obj["name"][i]));
-                }
-            }
-
             function parseSys(obj) {
                 var up = obj["ts_uptime"];
                 var days = parseInt(up / 86400) % 365;

tools/esp8266/html/setup.html

@@ -29,7 +29,7 @@
         </div>
         <div id="setup" class="content">
             <div id="content">
-                <a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
+                <a class="btn" href="/erase">ERASE SETTINGS (not WiFi)</a>
 
                 <form method="post" action="/save">
                     <fieldset>
@@ -289,18 +289,6 @@
                     document.getElementsByName(i[0])[0].value = obj[i[1]];
             }
 
-            function topnav() {
-                toggle("topnav");
-            }
-
-            function parseMenu(obj) {
-                var e = document.getElementById("topnav");
-                e.innerHTML = "";
-                for(var i = 0; i < obj["name"].length; i ++) {
-                    e.appendChild(link(obj["link"][i], obj["name"][i]));
-                }
-            }
-
             function parseSys(obj) {
                 for(var i of [["device", "device_name"], ["ssid", "ssid"]])
                     document.getElementsByName(i[0])[0].value = obj[i[1]];

tools/esp8266/html/style.css

@@ -47,7 +47,7 @@ h2 {
     padding-left: 80px !important
 }
 
-.topnav span {
+.topnav .icon span {
     display: block;
     width: 30px;
     height: 3px;
@@ -57,6 +57,14 @@ h2 {
     border-radius: 2px;
 }
 
+span.seperator {
+    width: 100%;
+    height: 1px;
+    margin: 10px 0px 10px;
+    background-color: #444;
+    display: block;
+}
+
 /** old CSS below **/
 
 p {
@@ -125,7 +133,7 @@ a:hover, a:focus {
     color: #f00;
 }
 
-a.erase {
+a.btn {
     background-color: #006ec0;
     color: #fff;
     padding: 7px;

tools/esp8266/html/update.html

@@ -32,19 +32,6 @@
             <p class="right" id="version"></p>
         </div>
         <script type="text/javascript">
-
-            function topnav() {
-                toggle("topnav");
-            }
-
-            function parseMenu(obj) {
-                var e = document.getElementById("topnav");
-                e.innerHTML = "";
-                for(var i = 0; i < obj["name"].length; i ++) {
-                    e.appendChild(link(obj["link"][i], obj["name"][i]));
-                }
-            }
-
             function parseSys(obj) {
                 document.getElementById("version").appendChild(
                     link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")

tools/esp8266/html/visualization.html

@@ -28,20 +28,6 @@
         <script type="text/javascript">
             var exeOnce = true;
 
-            function topnav() {
-                toggle("topnav");
-            }
-
-            function parseMenu(obj) {
-                if(true == exeOnce) {
-                    var e = document.getElementById("topnav");
-                    e.innerHTML = "";
-                    for(var i = 0; i < obj["name"].length; i ++) {
-                        e.appendChild(link(obj["link"][i], obj["name"][i]));
-                    }
-                }
-            }
-
             function parseSys(obj) {
                 if(true == exeOnce) {
                     document.getElementById("version").appendChild(
@@ -133,6 +119,7 @@
 
             function parse(obj) {
                 if(null != obj) {
+                    if(true == exeOnce)
                         parseMenu(obj["menu"]);
                     parseSys(obj["system"]);
                     parseIv(obj["inverter"], obj);

tools/esp8266/web.cpp

@@ -160,8 +160,18 @@ void web::showNotFound(AsyncWebServerRequest *request) {
 
 //-----------------------------------------------------------------------------
 void web::onReboot(AsyncWebServerRequest *request) {
-    request->send(200, F("text/html"), F("<!doctype html><html><head><title>Rebooting ...</title><meta http-equiv=\"refresh\" content=\"10; URL=/\"></head><body>rebooting ... auto reload after 10s</body></html>"));
+    String content = "";
+    int refresh = 120;
+    if(request->args() > 0) {
+        if(request->arg("reboot").toInt() == 1) {
+            refresh = 10;
+            content = F("reboot. Autoreload after 10 seconds");
             mMain->mShouldReboot = true;
+        }
+    }
+    else
+        content = F("<a href=\"/reboot?reboot=1\" class=\"btn\">Reboot</a> <a href=\"/\" class=\"btn\">cancel</a>");
+    request->send(200, F("text/html"), F("<!doctype html><html><head><title>Reboot</title><link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"/><meta http-equiv=\"refresh\" content=\"") + String(refresh) + F("; URL=/\"></head><body>") + content + F("</body></html>"));
 }
 
 

tools/esp8266/webApi.cpp

@@ -250,12 +250,15 @@ void webApi::getMenu(JsonObject obj) {
     obj["link"][1] = "/serial";
     obj["name"][2] = "Setup";
     obj["link"][2] = "/setup";
-    obj["name"][3] = "Update";
-    obj["link"][3] = "/update";
+    obj["name"][3] = "-";
     obj["name"][4] = "REST API";
     obj["link"][4] = "/api";
-    obj["name"][5] = "Reboot";
-    obj["link"][5] = "/reboot";
+    obj["trgt"][4] = "_blank";
+    obj["name"][5] = "-";
+    obj["name"][6] = "Update";
+    obj["link"][6] = "/update";
+    obj["name"][7] = "Reboot";
+    obj["link"][7] = "/reboot";
 }