OpenEVSE · glynhudson · Aug 15, 2019 · Jul 27, 2019 · Jul 27, 2019 · Jul 27, 2019
diff --git a/gui b/gui
diff --git a/src/config.cpp b/src/config.cpp
@@ -12,6 +12,9 @@ String epass = "";
 String www_username = "";
 String www_password = "";
 
+// Advanced settings
+String esp_hostname = "";
+
 // EMONCMS SERVER strings
 String emoncms_server = "";
 String emoncms_node = "";
@@ -48,6 +51,7 @@ uint32_t flags;
 #define EEPROM_WWW_PASS_SIZE          15
 #define EEPROM_OHM_KEY_SIZE           10
 #define EEPROM_FLAGS_SIZE             4
+#define EEPROM_HOSTNAME_SIZE          32
 #define EEPROM_SIZE                   1024
 
 #define EEPROM_ESID_START             0
@@ -82,7 +86,9 @@ uint32_t flags;
 #define EEPROM_FLAGS_END              (EEPROM_FLAGS_START + EEPROM_FLAGS_SIZE)
 #define EEPROM_EMON_API_KEY_START     EEPROM_FLAGS_END
 #define EEPROM_EMON_API_KEY_END       (EEPROM_EMON_API_KEY_START + EEPROM_EMON_API_KEY_SIZE)
-#define EEPROM_CONFIG_END             EEPROM_EMON_API_KEY_END
+#define EEPROM_HOSTNAME_START         EEPROM_EMON_API_KEY_END
+#define EEPROM_HOSTNAME_END           (EEPROM_HOSTNAME_START + EEPROM_HOSTNAME_SIZE)
+#define EEPROM_CONFIG_END             EEPROM_HOSTNAME_END
 
 #if EEPROM_CONFIG_END > EEPROM_SIZE
 #error EEPROM_SIZE too small
@@ -217,6 +223,10 @@ config_load_settings() {
   EEPROM_read_string(EEPROM_WWW_PASS_START, EEPROM_WWW_PASS_SIZE,
                      www_password, "");
 
+  // Web server credentials
+  EEPROM_read_string(EEPROM_HOSTNAME_START, EEPROM_HOSTNAME_SIZE,
+                     esp_hostname, "openevse");
+
   // Ohm Connect Settings
   EEPROM_read_string(EEPROM_OHM_KEY_START, EEPROM_OHM_KEY_SIZE, ohm);
 
@@ -309,6 +319,17 @@ config_save_admin(String user, String pass) {
   EEPROM.end();
 }
 
+void
+config_save_advanced(String host) {
+  EEPROM.begin(EEPROM_SIZE);
+
+  esp_hostname = host;
+
+  EEPROM_write_string(EEPROM_HOSTNAME_START, EEPROM_HOSTNAME_SIZE, host);
+
+  EEPROM.end();
+}
+
 void
 config_save_wifi(String qsid, String qpass)
 {

diff --git a/src/config.h b/src/config.h
@@ -19,6 +19,9 @@ extern String epass;
 extern String www_username;
 extern String www_password;
 
+// Advanced settings
+extern String esp_hostname;
+
 // EMONCMS SERVER strings
 extern String emoncms_server;
 extern String emoncms_node;
@@ -75,6 +78,11 @@ extern void config_save_mqtt(bool enable, String server, String topic, String us
 // -------------------------------------------------------------------
 extern void config_save_admin(String user, String pass);
 
+// -------------------------------------------------------------------
+// Save advanced settings
+// -------------------------------------------------------------------
+extern void config_save_advanced(String host);
+
 // -------------------------------------------------------------------
 // Save the Wifi details
 // -------------------------------------------------------------------

diff --git a/src/ota.cpp b/src/ota.cpp
@@ -6,13 +6,14 @@
 #include <FS.h>
 
 #include "lcd.h"
+#include "config.h"
 
 static int lastPercent = -1;
 
 void ota_setup()
 {
   // Start local OTA update server
-  ArduinoOTA.setHostname(esp_hostname);
+  ArduinoOTA.setHostname(esp_hostname.c_str());
   ArduinoOTA.begin();
 
   ArduinoOTA.onStart([]() {

diff --git a/src/web_server.cpp b/src/web_server.cpp
@@ -101,7 +101,7 @@ bool requestPreProcess(AsyncWebServerRequest *request, AsyncResponseStream *&res
 
   if(wifi_mode_is_sta() && www_username!="" &&
      false == request->authenticate(www_username.c_str(), www_password.c_str())) {
-    request->requestAuthentication(esp_hostname);
+    request->requestAuthentication(esp_hostname.c_str());
     return false;
   }
 
@@ -390,6 +390,26 @@ handleSaveAdmin(AsyncWebServerRequest *request) {
   request->send(response);
 }
 
+// -------------------------------------------------------------------
+// Save advanced settings
+// url: /saveadvanced
+// -------------------------------------------------------------------
+void
+handleSaveAdvanced(AsyncWebServerRequest *request) {
+  AsyncResponseStream *response;
+  if(false == requestPreProcess(request, response, CONTENT_TYPE_TEXT)) {
+    return;
+  }
+
+  String qhostname = request->arg("hostname");
+
+  config_save_advanced(qhostname);
+
+  response->setCode(200);
+  response->print("saved");
+  request->send(response);
+}
+
 // -------------------------------------------------------------------
 // Save the Ohm keyto EEPROM
 // url: /handleSaveOhmkey
@@ -567,6 +587,7 @@ handleConfig(AsyncWebServerRequest *request) {
     s += dummyPassword;
   }
   s += "\",";
+  s += "\"hostname\":\"" + esp_hostname + "\",";
   s += "\"ohm_enabled\":" + String(config_ohm_enabled() ? "true" : "false");
   s += "}";
 
@@ -935,6 +956,7 @@ web_server_setup() {
   server.on("/saveemoncms", handleSaveEmoncms);
   server.on("/savemqtt", handleSaveMqtt);
   server.on("/saveadmin", handleSaveAdmin);
+  server.on("/saveadvanced", handleSaveAdvanced);
   server.on("/saveohmkey", handleSaveOhmkey);
   server.on("/reset", handleRst);
   server.on("/restart", handleRestart);

diff --git a/src/web_server_static.cpp b/src/web_server_static.cpp
@@ -76,7 +76,7 @@ void StaticFileWebHandler::handleRequest(AsyncWebServerRequest *request)
      _username != "" && _password != "" &&
      false == request->authenticate(_username.c_str(), _password.c_str()))
   {
-    request->requestAuthentication(esp_hostname);
+    request->requestAuthentication(esp_hostname.c_str());
     return;
   }
 

diff --git a/src/web_static/web_server.home.html.h b/src/web_static/web_server.home.html.h
diff --git a/src/web_static/web_server.home.js.h b/src/web_static/web_server.home.js.h
diff --git a/src/web_static/web_server.lib.js.h b/src/web_static/web_server.lib.js.h
diff --git a/src/web_static/web_server.style.css.h b/src/web_static/web_server.style.css.h
@@ -1,2 +1,2 @@
 static const char CONTENT_STYLE_CSS[] PROGMEM = 
-  "body{font-family:sans-serif;color:#333;font:14px Helvetica,sans-serif;box-sizing:border-box}#page,body{background-color:#fff}#page{margin:20px}iframe{max-width:100%}table{width:100%;border-collapse:collapse}th{background-color:#777;color:#fff;border:1px solid #f1f1f1}td,th{padding:8px}td{background-color:#fff;color:#777;border:1px solid #e1e1e1}tr:nth-child(2n+2){background-color:#f3f3f3}.header{padding:20px}.header h1{padding-bottom:.3em;color:teal;font-size:45px;font-weight:400;text-align:left;margin:0}.header h1,.header h1 span{font-family:Garmond,\"sans-serif\"}.header h1 span{font-weight:700;color:#000}h2{padding-bottom:.2em;border-bottom:1px solid #eee;margin-top:2px}.header h3{padding-top:-5px;padding-left:50px;font-weight:700;font-family:Arial,\"sans-serif\";font-size:17px;color:#b6b6b6;margin:-25px 0 -5px}.box{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff;margin-bottom:20px}.box-full{margin:20px;width:840px}.box380,.box-half{margin:20px;width:380px}.box380{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff}.left{float:left;clear:left}.right{float:right;clear:right}@media (max-width:494px){#page{width:inherit;margin:5px auto}#content{padding:1px}.box380,.box-full{margin:8px 8px 12px;padding:10px;width:inherit;float:none}}@media (min-width:494px) and (max-width:980px){#page{width:465px;margin:0 auto}.box-full{width:380px}}@media (min-width:980px){#page{width:930px;margin:0 auto}}button{background-color:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);border:none;color:#fff;padding:10px 28px;text-align:center;text-decoration:none;display:inline-block;font-size:1em;margin:4px 2px;cursor:pointer;outline:none}button:disabled{background-color:#eee;color:#ccc}button.on{background-color:#f1f1f1;color:#000}input[type=date],input[type=file],input[type=password],input[type=text],input[type=time],select{box-sizing:border-box;border:1px solid #ddd;border-radius:4px;margin-top:10px;width:280px;padding:5px}input:optional{border-color:#ddd}input:required{border-color:#19a6ff}input:required:valid{border-color:#249c4a}input:required:valid+.validMessage{display:none}input:required+.validMessage{display:block;margin:5px 0}.setup input[type=time],input[type=time]{width:110px}.setup input[type=date]{width:164px}@media screen and (max-width:420px){input[type=password],input[type=text],select{width:240px}input[type=time]{width:85px}input[type=date]{width:174px}}#update{background-color:red}.container{height:inherit;padding-bottom:20px}.tabs{padding-bottom:4px;overflow:hidden}.tabs:after{content:\" \";display:block;height:0;clear:both}.tabs input[type=radio]{display:none}.tabs label{background:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);color:#fff;cursor:pointer;display:block;float:left;font-size:1em;height:2.5em;line-height:2.5em;margin-right:.25em;padding:0 1.5em;text-align:center}.tabs input:hover+label{background:#e1e1e1;color:#000}.tabs input:checked+label{background:#f1f1f1;color:#000}#content{background:#e1e1e1;border-radius:.5em .5em .5em .5em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);display:block}#content:after{content:\" \";display:block;height:0;clear:both}#footer{font-size:15px;text-align:center;margin-bottom:0}.small-text{font-size:10px;word-wrap:break-word}.saved{border-color:#3c763d!important;border-left-width:5px!important}.warning{border-left-color:#aa6708;border-left-width:5px}.warning h4{color:#aa6708;margin-top:0;margin-bottom:5px}.error{border-left-color:#a94442;border-left-width:5px}.error h4{margin-top:0;margin-bottom:5px}.error h4,.error td{color:#a94442}.error td:first-child{border-left-color:#a94442;border-left-width:5px}.switch{position:relative;display:inline-block;width:40px;height:24px;vertical-align:-40%}.switch input{display:none}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;-webkit-transition:.4s;transition:.4s}.slider:before{content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:teal}input:focus+.slider{box-shadow:0 0 1px teal}input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px)}.slider.round{border-radius:12px}.slider.round:before{border-radius:50%}.info{background-color:teal;border-radius:100%;color:#fff;display:inline-block;font-family:serif;font-size:12px;font-style:italic;height:16px;margin-left:16px;text-align:center;width:16px;vertical-align:20%}.info:before{content:\"i\"}span.selected{color:teal}.ready{border-color:#01c40e;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(1,196,14,.3)}.connected{border-color:#d5ff70;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(213,255,112,.4)}.charging{border-color:#0092f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(0,146,247,.4)}.sleeping{border-color:#9200f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(146,0,247,.4)}hr{height:1px;color:#eee;background-color:#eee;border:none}.updateBad{color:red}.updateGood{color:#32c832}.updateSlow{color:#f0b414}.updateSlower{color:#ff7d14}\n";
+  "body{font-family:sans-serif;color:#333;font:14px Helvetica,sans-serif;box-sizing:border-box}#page,body{background-color:#fff}#page{margin:20px}iframe{max-width:100%}table{width:100%;border-collapse:collapse}th{background-color:#777;color:#fff;border:1px solid #f1f1f1}td,th{padding:8px}td{background-color:#fff;color:#777;border:1px solid #e1e1e1}tr:nth-child(2n+2){background-color:#f3f3f3}.header{padding:20px}.header h1{padding-bottom:.3em;color:teal;font-size:45px;font-weight:400;text-align:left;margin:0}.header h1,.header h1 span{font-family:Garmond,\"sans-serif\"}.header h1 span{font-weight:700;color:#000}h2{padding-bottom:.2em;border-bottom:1px solid #eee;margin-top:2px}.header h3{padding-top:-5px;padding-left:50px;font-weight:700;font-family:Arial,\"sans-serif\";font-size:17px;color:#b6b6b6;margin:-25px 0 -5px}.box{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff;margin-bottom:20px}.box-full{margin:20px;width:840px}.box380,.box-half{margin:20px;width:380px}.box380{padding:20px;border:1px solid #ddd;border-radius:1em 1em 1em 1em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);background:#fff}.left{float:left;clear:left}.right{float:right;clear:right}@media (max-width:494px){#page{width:inherit;margin:5px auto}#content{padding:1px}.box380,.box-full{margin:8px 8px 12px;padding:10px;width:inherit;float:none}}@media (min-width:494px) and (max-width:980px){#page{width:465px;margin:0 auto}.box-full{width:380px}}@media (min-width:980px){#page{width:930px;margin:0 auto}}button{background-color:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);border:none;color:#fff;padding:10px 28px;text-align:center;text-decoration:none;display:inline-block;font-size:1em;margin:4px 2px;cursor:pointer;outline:none}button:disabled{background-color:#eee;color:#ccc}button.on{background-color:#f1f1f1;color:#000}input[type=date],input[type=file],input[type=number],input[type=password],input[type=text],input[type=time],select{box-sizing:border-box;border:1px solid #ddd;border-radius:4px;margin-top:10px;width:280px;padding:5px}input:optional{border-color:#ddd}input:required{border-color:#19a6ff}input:required:valid{border-color:#249c4a}input:required:valid+.validMessage{display:none}input:required+.validMessage{display:block;margin:5px 0}.setup input[type=time],input[type=time]{width:110px}.setup input[type=date]{width:164px}@media screen and (max-width:420px){input[type=number],input[type=password],input[type=text],select{width:240px}input[type=time]{width:85px}input[type=date]{width:174px}}#update{background-color:red}.container{height:inherit;padding-bottom:20px}.tabs{padding-bottom:4px;overflow:hidden}.tabs:after{content:\" \";display:block;height:0;clear:both}.tabs input[type=radio]{display:none}.tabs label{background:teal;border-radius:5px;box-shadow:0 2px 2px 0 rgba(0,0,0,.4);color:#fff;cursor:pointer;display:block;float:left;font-size:1em;height:2.5em;line-height:2.5em;margin-right:.25em;padding:0 1.5em;text-align:center}.tabs input:hover+label{background:#e1e1e1;color:#000}.tabs input:checked+label{background:#f1f1f1;color:#000}#content{background:#e1e1e1;border-radius:.5em .5em .5em .5em;box-shadow:1px 7px 7px 1px rgba(0,0,0,.4);display:block}#content:after{content:\" \";display:block;height:0;clear:both}#footer{font-size:15px;text-align:center;margin-bottom:0}.small-text{font-size:10px;word-wrap:break-word}.saved{border-color:#3c763d!important;border-left-width:5px!important}.warning{border-left-color:#aa6708;border-left-width:5px}.warning h4{color:#aa6708;margin-top:0;margin-bottom:5px}.error{border-left-color:#a94442;border-left-width:5px}.error h4{margin-top:0;margin-bottom:5px}.error h4,.error td{color:#a94442}.error td:first-child{border-left-color:#a94442;border-left-width:5px}.switch{position:relative;display:inline-block;width:40px;height:24px;vertical-align:-40%}.switch input{display:none}.slider{cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc}.slider,.slider:before{position:absolute;-webkit-transition:.4s;transition:.4s}.slider:before{content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff}input:checked+.slider{background-color:teal}input:focus+.slider{box-shadow:0 0 1px teal}input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translateX(16px)}.slider.round{border-radius:12px}.slider.round:before{border-radius:50%}.info{background-color:teal;border-radius:100%;color:#fff;display:inline-block;font-family:serif;font-size:12px;font-style:italic;height:16px;margin-left:16px;text-align:center;width:16px;vertical-align:20%}.info:before{content:\"i\"}span.selected{color:teal}.ready{border-color:#01c40e;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(1,196,14,.3)}.connected{border-color:#d5ff70;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(213,255,112,.4)}.charging{border-color:#0092f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(0,146,247,.4)}.sleeping{border-color:#9200f7;border-left-width:5px;box-shadow:1px 7px 7px 1px rgba(146,0,247,.4)}hr{height:1px;color:#eee;background-color:#eee;border:none}.updateBad{color:red}.updateGood{color:#32c832}.updateSlow{color:#f0b414}.updateSlower{color:#ff7d14}\n";
diff --git a/src/wifi.cpp b/src/wifi.cpp
@@ -17,9 +17,6 @@ IPAddress apIP(192, 168, 4, 1);
 IPAddress netMsk(255, 255, 255, 0);
 int apClients = 0;
 
-// hostname for mDNS. Should work at least on windows. Try http://openevse or http://openevse.local
-const char *esp_hostname = "openevse";
-
 // Wifi Network Strings
 String connected_network = "";
 String ipaddress = "";
@@ -236,7 +233,7 @@ wifi_setup() {
 
   wifi_start();
 
-  if (MDNS.begin(esp_hostname)) {
+  if (MDNS.begin(esp_hostname.c_str())) {
     MDNS.addService("http", "tcp", 80);
   }
 }

diff --git a/src/wifi.h b/src/wifi.h
@@ -11,9 +11,6 @@ extern String rssi;
 // Network state
 extern String ipaddress;
 
-// mDNS hostname
-extern const char *esp_hostname;
-
 extern void wifi_setup();
 extern void wifi_loop();
 extern void wifi_scan();
+2 −1		.eslintrc.json
+4,543 −3,483		package-lock.json
+2 −2		package.json
+51 −12		src/home.htm
+2 −0		src/style.css
+22 −1		src/view_models/ConfigViewModel.js
+34 −0		src/view_models/OpenEvseWiFiViewModel.js
+5 −0		src/view_models/StatusViewModel.js
+1 −1		src/view_models/WiFiConfigViewModel.js