style web pages

wib100 · Jun 15, 2022 · e06fe5d · e06fe5d
1 parent cd7510d
commit e06fe5d
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 17 deletions.
diff --git a/include/pages.h b/include/pages.h
@@ -7,7 +7,9 @@
     #include "config.h"
 
     void setupPages(AsyncWebServer* server, ModbusClientRTU *rtu, ModbusBridgeWiFi *bridge);
-    void sendResponseHeader(AsyncResponseStream *response, const String &title);
+    void sendResponseHeader(AsyncResponseStream *response, const char *title);
     void sendResponseTrailer(AsyncResponseStream *response);
+    void sendButton(AsyncResponseStream *response, const char *title, const char *action, const char *css = "");
+    void sendTableRow(AsyncResponseStream *response, const char *name, uint32_t value);
 
 #endif /* PAGES_H */
diff --git a/src/pages.cpp b/src/pages.cpp
@@ -2,30 +2,88 @@
 
 void setupPages(AsyncWebServer *server, ModbusClientRTU *rtu, ModbusBridgeWiFi *bridge){
   server->on("/", HTTP_GET, [](AsyncWebServerRequest *request){
-    dbgln("[webserver] request to /");
-    AsyncResponseStream *response = request->beginResponseStream("text/html");
+    dbgln("[webserver] GET /");
+    auto *response = request->beginResponseStream("text/html");
     sendResponseHeader(response, "Main");
-    response->print("ESP32 Modbus Gateway");
+    sendButton(response, "Status", "status");
+    sendButton(response, "Config", "config");
+    sendButton(response, "Reboot", "reboot", "r");
     sendResponseTrailer(response);
     request->send(response);
   });
   server->on("/status", HTTP_GET, [rtu, bridge](AsyncWebServerRequest *request){
-    dbgln("[webserver] request to /status");
-    AsyncResponseStream *response = request->beginResponseStream("text/html");
+    dbgln("[webserver] GET /status");
+    auto *response = request->beginResponseStream("text/html");
     sendResponseHeader(response, "Status");
-    response->printf("RTU Messages: %d<br/>", rtu->getMessageCount());
-    response->printf("RTU Pending Messages: %d<br/>", rtu->pendingRequests());
-    response->printf("Bridge Message: %d</br>", bridge->getMessageCount());
-    response->printf("Bridge Clients: %d</br>", bridge->activeClients());
+    response->print("<table>");
+    sendTableRow(response, "RTU Messages", rtu->getMessageCount());
+    sendTableRow(response, "RTU Pending Messages", rtu->pendingRequests());
+    sendTableRow(response, "Bridge Message", bridge->getMessageCount());
+    sendTableRow(response, "Bridge Clients", bridge->activeClients());
+    response->print("</table><p></p>");
+    sendButton(response, "Back", "/");
     sendResponseTrailer(response);
     request->send(response);
   });
+  server->on("/reboot", HTTP_GET, [](AsyncWebServerRequest *request){
+    dbgln("[webserver] GET /reboot");
+    auto *response = request->beginResponseStream("text/html");
+    sendResponseHeader(response, "Really?");
+    sendButton(response, "Back", "/");
+    response->print("<form method=\"post\">"
+        "<button class=\"r\">Yes, do it!</button>"
+      "</form>");
+    sendResponseTrailer(response);
+    request->send(response);
+  });
+  server->on("/reboot", HTTP_POST, [](AsyncWebServerRequest *request){
+    dbgln("[webserver] POST /reboot");
+    request->redirect("/");
+    dbgln("[webserver] rebooting...")
+    ESP.restart();
+    dbgln("[webserver] rebooted...")
+  });
   server->on("/favicon.ico", [](AsyncWebServerRequest *request){
+    dbgln("[webserver] GET /favicon.ico");
     request->send(204);//TODO add favicon
   });
   server->on("/style.css", [](AsyncWebServerRequest *request){
-    AsyncWebServerResponse *response = request->beginResponse(200, "text/css", "body{"
-    "}");
+    dbgln("[webserver] GET /style.css");
+    auto *response = request->beginResponse(200, "text/css",
+    "body{"    
+      "font-family:sans-serif;"
+	    "text-align: center;"
+      "background: #252525;"
+	    "color: #faffff;"
+    "}"
+    "#content{"
+	    "display: inline-block;"
+	    "min-width: 340px;"
+    "}"
+    "button{"
+	    "width: 100%;"
+	    "line-height: 2.4rem;"
+	    "background: #1fa3ec;"
+	    "border: 0;"
+	    "border-radius: 0.3rem;"
+	    "font-size: 1.2rem;"
+      "-webkit-transition-duration: 0.4s;"
+      "transition-duration: 0.4s;"
+	    "color: #faffff;"
+    "}"
+    "button:hover{"
+	    "background: #0e70a4;"
+    "}"
+    "button.r{"
+	    "background: #d43535;"
+    "}"
+    "button.r:hover{"
+	    "background: #931f1f;"
+    "}"
+    "table{"
+      "text-align:left;"
+    "}"
+    );
     response->addHeader("ETag", __DATE__ "" __TIME__);
     request->send(response);
   });
@@ -35,20 +93,37 @@ void setupPages(AsyncWebServer *server, ModbusClientRTU *rtu, ModbusBridgeWiFi *
   });
 }
 
-void sendResponseHeader(AsyncResponseStream *response, const String &title){
-    response->addHeader("ETag", __DATE__ "" __TIME__);
+void sendResponseHeader(AsyncResponseStream *response, const char *title){
     response->print("<!DOCTYPE html>"
-      "<html lang=\"en\" class="">"
+      "<html lang=\"en\" class=\"\">"
       "<head>"
       "<meta charset='utf-8'>"
       "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=no\"/>");
     response->printf("<title>ESP32 Modbus Gateway - %s</title>", title);
     response->print("<link rel=\"stylesheet\" href=\"style.css\">"
       "</head>"
-      "<body>");
+      "<body>"
+      "<h2>ESP32 Modbus Gateway</h2>");
     response->printf("<h3>%s</h3>", title);
+    response->print("<div id=\"content\">");
 }
 
 void sendResponseTrailer(AsyncResponseStream *response){
-    response->print("</body></html>");
+    response->print("</div></body></html>");
+}
+
+void sendButton(AsyncResponseStream *response, const char *title, const char *action, const char *css){
+    response->printf(
+      "<form method=\"get\" action=\"%s\">"
+        "<button class=\"%s\">%s</button>"
+      "</form>"
+      "<p></p>", action, css, title);
+}
+
+void sendTableRow(AsyncResponseStream *response, const char *name, uint32_t value){
+    response->printf(
+      "<tr>"
+        "<td>%s:</td>"
+        "<td>%d</td>"
+      "</tr>", name, value);
 }