add configurable webserver logging to serial

Arduino/CanGrow/CanGrow.ino

@@ -37,19 +37,24 @@
 // * ESP8266 *
 #ifdef ESP8266
 #include <ESP8266WiFi.h>
-#include "ESPAsyncTCP.h"
+#include <ESPAsyncTCP.h>
 #endif
 
 // * ESP32 *
 #ifdef ESP32
 
 #include <WiFi.h>
-#include "AsyncTCP.h"
+#include <AsyncTCP.h>
 #endif
 
 // https://github.com/mathieucarbou/ESPAsyncWebServer
 #include <ESPAsyncWebServer.h>
 
+// LittleFS filesystem
+#include "FS.h"
+// arduino-core for esp8266 and esp32
+#include "LittleFS.h"
+
 // https://github.com/arduino/ArduinoCore-avr/tree/master/libraries/SPI
 #include <SPI.h>
 // https://github.com/arduino/ArduinoCore-avr/tree/master/libraries/Wire
@@ -59,9 +64,7 @@
 #include <ArduinoJson.h>
 // https://github.com/PaulStoffregen/Time
 #include <TimeLib.h>
-#include "FS.h"
+
-// arduino-core for esp8266 and esp32
-#include "LittleFS.h"
 
 
 /*
@@ -147,8 +150,9 @@ bool alrdySaved = false;
 
 void loop() {
   if((digitalRead(PinWIPE) != PinWIPE_default) && (alrdySaved == false)) {
-    Serial.println(":: [LOOP] PinWIPE is triggered, saving config.json");
+    Serial.println(":: [LOOP] PinWIPE is triggered, saving config.json and set configSystem.httpLogSerial to true");
-    SaveConfig();
+    configSystem.httpLogSerial = true;
+    SaveConfig(true);
     alrdySaved = true;
   } else if(  (digitalRead(PinWIPE) != PinWIPE_default) && (alrdySaved == true)    ) {
     alrdySaved = true;

Arduino/CanGrow/include/CanGrow_LittleFS.h

@@ -202,6 +202,7 @@ bool LoadConfig() {
   strlcpy(configSystem.esp32camIp, objSystem["esp32camIp"], sizeof(configSystem.esp32camIp));
   strlcpy(configSystem.httpUser, objSystem["httpUser"], sizeof(configSystem.httpUser));
   strlcpy(configSystem.httpPass, objSystem["httpPass"], sizeof(configSystem.httpPass));
+  configSystem.httpLogSerial = objSystem["httpLogSerial"];
   
   // * Grow *
   JsonObject objGrow = doc["grow"][0];
@@ -271,6 +272,7 @@ void SaveConfig(bool writeToSerial = false) {
   objSystem["esp32camIp"] = configSystem.esp32camIp;
   objSystem["httpUser"] = configSystem.httpUser;
   objSystem["httpPass"] = configSystem.httpPass;
+  objSystem["httpLogSerial"] = configSystem.httpLogSerial;
   
   // * Grow *
   JsonObject objGrow = doc["grow"].add<JsonObject>();

Arduino/CanGrow/include/CanGrow_Webserver.h

@@ -28,6 +28,7 @@
  */
  
 
+
 /*
  * include webpages header files
  */
@@ -44,16 +45,36 @@
  */
 #include "Webserver/File_cangrow_JS.h"
 
+
 AsyncWebServer webserver(80);
+// log incoming requests
+LoggingMiddleware requestLogger;
+
+// https://github.com/mathieucarbou/ESPAsyncWebServer/blob/main/examples/SimpleServer/SimpleServer.ino
+void WebserverNotFound(AsyncWebServerRequest* request) {
+  request->send(404, "text/plain", "Not found");
+}
+
 
 
 /*
  * setup all the webhandlers
  */
 void SetupWebserver() {
-  
+  Serial.println(":: [Webserver] initializing");
   webserver.on("/", HTTP_GET, WebPage_root);
   webserver.on("/cangrow.js", HTTP_GET, WebFile_cangrow_JS);
   
+  requestLogger.setOutput(Serial);
+  // this activates the middleware
+  if(configSystem.httpLogSerial == true) {
+    Serial.println(":: [Webserver] configSystem.httpLogSerial is 'true', enable logging to serial");
+    webserver.addMiddleware(&requestLogger);
+  }
+  
+  webserver.onNotFound(WebserverNotFound);
+
+  webserver.begin();
+  Serial.println(":: [Webserver] ready to serve");
 }
 

Arduino/CanGrow/include/Webserver/File_cangrow_JS.h

@@ -28,10 +28,168 @@
  */
 
 
-const char* File_cangrow_JS PROGMEM = R"(
+const char* File_cangrow_JS PROGMEM = R"(body {
-this is cangrow.js - yay
+  color: #cae0d0;
+  background-color: #1d211e;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.center {
+  width: 100%; 
+  margin: auto;    
+} 
+
+.centered {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1, h2, h3, h4, h5 {
+  text-align: center;
+}
+a:link, a:visited {
+  color: #04AA6D;
+}
+a:hover {
+  color: #64AA6D;
+}
+a:active {
+  color: #04AA6D;
+}
+.infomsg , .warnmsg {
+  color: #fff;
+  border-radius: 3px;
+  padding: 4px;
+  width: fit-content; min-width: 200px; max-width: 420px;
+  margin: auto;
+  margin-bottom: 5px;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+.infomsg {
+  background: #04AA6D;
+}
+.warnmsg {
+  background: #aa4204;
+}
+.inputShort {
+  width: 42px;
+}
+
+.helpbox {
+  font-size: 0.8em;
+}
+.nav {
+  background: #333;
+  width: 100%; 
+  margin: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  position: relative;
+  border-radius: 3px;
+}
+
+.subnav {
+  text-align: center;
+  display: table;
+  margin: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  position: relative;
+  border-radius: 3px;
+}
+
+.nav li {
+  display: inline-block;
+  list-style: none;
+  border-radius: 3px;
+}
+
+.subnav li {
+  background: #026b45;
+  list-style: none;
+  border-radius: 3px;
+  margin-bottom: 3px;
+}
+
+.nav li:first-of-type {
+  background: #026b45;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.nav li a, .nav span, .subnav li a, .subnav span,  .button, .button:link, input[type=button], input[type=submit], input[type=reset] {
+  color: #ddd;
+  display: block;
+  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
+  font-size:0.8em;
+  padding: 10px 20px;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
+.nav li a:hover, .subnav li a:hover, .activeMenu, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+  background: #04AA6D;
+  color: #fff;
+  border-radius: 3px;
+}
+
+.nav li a:active, .subnav li a:active {
+  background: #026b45;
+  color: #cae0d0;
+}
+
+.activeMenu {
+  background: #444;
+}
+
+.MenuTime {
+  background: #292929;
+}
+
+.button, .button:link, .button:visited, input[type=button], input[type=submit], input[type=reset] {
+  background: #026b45;
+  color: #fff;
+  border-radius: 3px;
+  padding: 6px 12px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+}
+
+.button:link:active, .button:visited:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
+  background: #026b45;
+  color: #cae0d0;
+}
+
+input[type=text], input[type=date], input[type=number], input[type=password], select {
+  background: #cae0d0;
+  color: #1d211e;
+  border: 1px solid #026b45;
+  border-radius: 3px;
+}
+
+ @media only screen and (min-width: 1820px) {
+  .center, .nav {
+    width: 60%; min-width: 420px;    
+  }
+  .subnav li {
+    display: '';
+    margin-bottom: 3px;
+   }
+}
+
+@media only screen and (min-width: 640px) {
+  .subnav li {
+    display: inline-block;
+    margin-bottom: 3px;
+  }
+}
 )";
 
 void WebFile_cangrow_JS(AsyncWebServerRequest *request) {
-  request->send_P(200, "text/plain", File_cangrow_JS);
+  request->send_P(200, "text/javascript", File_cangrow_JS);
 }

Arduino/CanGrow/include/Webserver/Page_root.h

@@ -30,5 +30,5 @@
 #include "Page_root_HTML.h"
 
 void WebPage_root(AsyncWebServerRequest *request) {
-  request->send_P(200, "text/plain", Page_root_HTML);
+  request->send_P(200, "text/html", Page_root_HTML);
 }