From ff370206384fdbe2c5c0c40e6a3368ea03b2e241 Mon Sep 17 00:00:00 2001
From: Anatole SCHRAMM <schramma@ldlcxl0013.ldl.st.com>
Date: Wed, 12 Oct 2022 14:42:59 +0200
Subject: [PATCH] Improved WEB dashboard, added a new API endpoint to retrieve
 AP information (not finished yet)

---
 sdCard_content/WWW/indexV2.htm | 146 +++++++++++++++++++++------------
 src/app/app.ino                |   1 +
 src/app/webApi.cpp             |  23 ++++--
 3 files changed, 113 insertions(+), 57 deletions(-)

diff --git a/sdCard_content/WWW/indexV2.htm b/sdCard_content/WWW/indexV2.htm
index 2f998e2..2a0b671 100644
--- a/sdCard_content/WWW/indexV2.htm
+++ b/sdCard_content/WWW/indexV2.htm
@@ -28,6 +28,11 @@
 		{
 		  background-color: #f93 !important;
 		}
+
+		table.no-padding-margin tr td
+		{
+			margin:0px;padding:0px;
+		}
 		
 		.mode-img
 		{
@@ -144,21 +149,45 @@
 							<div class="switch center-align">
 								<label class="white-text">
 									Disabled
-									<input type="checkbox">
+									<input type="checkbox" id="ap_enabled_id">
 									<span class="lever"></span>
 									Enabled
 								</label>
 							</div>
 							<div class="row white-text left-align" style="font-size:1.2em;margin-top: 20px;margin-bottom: -40px;">
 								<div class="col m6">
-									Connected dev :
+									Connected devivces :
 								</div>
 								<div class="col m6">
-									3
+									<span id="ap_connected_dev_count_id">0</span>
 								</div>
 							</div>
-							<input placeholder="SSID" id="ssid" type="text" class="validate white-text">
-							<input onmouseleave="showHidePassword('pwd','hide')" onmouseover="showHidePassword('pwd','show');" value="somePassword" placeholder="Password" id="pwd" type="password" class="validate white-text">
+							<div class="row white-text left-align" style="font-size:1.2em;margin-top: 20px;margin-bottom: -40px;">
+								<div class="col m3">
+									AP IP :
+								</div>
+								<div class="col m3">
+									<span id="apIP"></span>
+								</div>
+								<div class="col m3">
+									MAC :
+								</div>
+								<div class="col m3">
+									<span id="ap_mac"></span>
+								</div>
+							</div>
+
+							<table class="no-padding-margin">
+								<tr>
+									<td><label for="ssid" class="white-text" style="font-size:1em;">Advertised SSID :</label></td>
+									<td colspan="2"><input placeholder="SSID" id="ssid" type="text" class="validate white-text"></td>
+								</tr>
+								<tr>
+									<td><label for="ap_password" class="white-text" style="font-size:1em;">Password :</label></td>
+									<td><input placeholder="Password" id="ap_password" type="password" class="validate white-text"></td>
+									<td><img onmouseleave="showHidePassword('ap_password','hide')" onmouseover="showHidePassword('ap_password','show');" style="width:40px;" src="rsrc/show_pass.png"></td>
+								</tr>
+							</table>
 							<hr>
 							<div class="center-align">
 								<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
@@ -187,11 +216,30 @@
 								<div class="col m6">
 									<span id="localIP"></span>
 								</div>
+								<div class="col m6">
+									MAC :
+								</div>
+								<div class="col m6">
+									<span id="sta_mac"></span>
+								</div>
 							</div>
-							<select id="networksSelect">
-								<option value="" disabled selected>Click on scan</option>
-							</select>
-							<input placeholder="Password" id="pwd" type="password" class="validate white-text">
+
+							<table class="no-padding-margin">
+								<tr>
+									<td><label for="networksSelect" class="white-text" style="font-size:1em;">APs :</label></td>
+									<td colspan="2">
+										<select id="networksSelect">
+											<option value="" disabled selected>Click on scan</option>
+										</select>
+									</td>
+								</tr>
+								<tr>
+									<td><label for="sta_password" class="white-text" style="font-size:1em;">Password :</label></td>
+									<td><input placeholder="Password" id="sta_password" type="password" class="validate white-text"></td>
+									<td><img onmouseleave="showHidePassword('sta_password','hide')" onmouseover="showHidePassword('sta_password','show');" style="width:40px;" src="rsrc/show_pass.png"></td>
+								</tr>
+							</table>
+
 							<hr>
 							<div class="row">
 								<div class="col m6">
@@ -288,8 +336,8 @@
 			</tr>
 			<tr>
 				<td colspan="4">
-					<div class="row" style="display:flex;">
-						<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
+					<div class="row" style="display:flex;margin:0;padding:0;">
+						<div class="teal darken-1 col m3" style="margin: 7px 5px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
 							<div class="white-text">
 								<h5 style="font-weight:bold;" class="center-align">DS3231 RTC</h5>
 							</div>
@@ -301,9 +349,9 @@
 							<hr>
 							<div class="row">
 								<div class="col m6 left-align">
-										<button class="btn waves-effect waves-light green darken-3" onclick="setRtcTime();" name="apply">
-											Apply &#10004;
-										</button>
+									<button class="btn waves-effect waves-light green darken-3" onclick="setRtcTime();" name="apply">
+										Apply &#10004;
+									</button>
 								</div>
 								<div class="col m6 right-align">
 									<button class="btn waves-effect waves-light green darken-3 tooltipped" onclick="setRtc2BrowserTime();"  data-position="bottom" data-tooltip="Use the browser time to set the RTC time" name="browserTime">
@@ -312,7 +360,7 @@
 								</div>
 							</div>
 						</div>
-						<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
+						<div class="teal darken-1 col m3" style="margin: 7px 20px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
 							<div class="white-text">
 								<h5 style="font-weight:bold;" class="center-align">SD Card</h5>
 							</div>
@@ -343,7 +391,7 @@
 							</div>
 						</div>
 
-						<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
+						<div class="teal darken-1 col m3" style="margin: 7px 5px 7px 0px;border-radius: 5px;padding-bottom: 15px;">
 							<div class="white-text">
 								<h5 style="font-weight:bold;" class="center-align">WEB Server</h5>
 							</div>
@@ -356,32 +404,25 @@
 									Enabled
 								</label>
 							</div>
-							<table>
+							<table class="no-padding-margin">
 								<tr>
 									<td><label for="web_port" class="white-text" style="font-size:1em;">Port :</label></td>
-									<td><input class="validate white-text" id="web_port" type="number" min="0" max="65535" ></td>
+									<td><input placeholder="WEB Server port" class="validate white-text" id="web_port" type="number" min="0" max="65535" ></td>
 								</tr>
 								<tr>
 									<td><label for="web_root" class="white-text" style="font-size:1em;">Server root :</label></td>
-									<td><input class="validate white-text" id="web_root" type="text" ></td>
+									<td><input placeholder="Server root" class="validate white-text" id="web_root" type="text" ></td>
 								</tr>
 							</table>
 							<hr>
-							<div class="row">
-								<div class="col m6">
-									<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
-										Apply &#10004;
-									</button>
-								</div>
-								<div class="col m6 right-align">
-									<button class="btn waves-effect waves-light  red darken-3"  type="submit" name="cancel">
-										Cancel &#10008;
-									</button>
-								</div>
+							<div class="center-align">
+								<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
+									Apply &#10004;
+								</button>
 							</div>
 						</div>
 
-						<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
+						<div class="teal darken-1 col m3" style="margin: 7px 10px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
 							<div class="white-text">
 								<h5 style="font-weight:bold;" class="center-align">FTP Server</h5>
 							</div>
@@ -394,33 +435,33 @@
 									Enabled
 								</label>
 							</div>
-							<table>
+							<table class="no-padding-margin">
 								<tr>
 									<td><label for="ftp_port" class="white-text" style="font-size:1em;">Port :</label></td>
-									<td><input class="validate white-text" id="ftp_port" type="number" min="0" max="65535" ></td>
+									<td colspan="2"><input placeholder="FTP Server port" class="validate white-text" id="ftp_port" type="number" min="0" max="65535" ></td>
+								</tr>
+								<tr>
+									<td><label for="username" class="white-text" style="font-size:1em;">User :</label></td>
+									<td colspan="2"><input placeholder="Login" id="username" type="text" class="validate white-text"></td>
+								</tr>
+								<tr>
+									<td><label for="user_password" class="white-text" style="font-size:1em;">Password :</label></td>
+									<td><input placeholder="Password" id="user_password" type="password" class="validate white-text"></td>
+									<td><img onmouseleave="showHidePassword('user_password','hide')" onmouseover="showHidePassword('user_password','show');" style="width:40px;" src="rsrc/show_pass.png"></td>
 								</tr>
 							</table>
-							<input placeholder="Login" id="ssid" type="text" class="validate white-text">
-							<input placeholder="Password" id="pwd" type="password" class="validate white-text">
 							<hr>
-							<div class="row">
-								<div class="col m6">
-									<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
-										Apply &#10004;
-									</button>
-								</div>
-								<div class="col m6 right-align">
-									<button class="btn waves-effect waves-light  red darken-3"  type="submit" name="cancel">
-										Cancel &#10008;
-									</button>
-								</div>
+							<div class="center-align">
+								<button class="btn waves-effect waves-light green darken-3"  type="submit" name="apply">
+									Apply &#10004;
+								</button>
 							</div>
 						</div>
 					</div>
 				</td>
 			</tr>
 			<tr>
-				<td colspan="4">
+				<td colspan="4" style="margin:0;padding:0;width:50%;">
 					<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
 						<h5 class="center-align">IO's Mode and State</h5>
 					</div>
@@ -428,11 +469,12 @@
 			</tr>
 			<tr>
 				<td colspan="4">
-					<div class="row" style="display:flex;">
-						<div class="teal darken-1 col m12" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
+					<div class="row" style="display:flex;margin:0;padding:0;">
+						<div class="teal darken-1 col m12" style="margin: 7px 10px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
 							<div class="white-text">
 								<h5 style="font-weight:bold;" class="center-align">IO Expander</h5>
 							</div>
+							<hr>
 							<div class="white-text center-align" style="font-size:1.2em;">
 								<table>
 									<tr>
@@ -541,7 +583,7 @@
 								</table>
 							</div>
 						</div>
-					</div>>
+					</div>
 				</td>
 			</tr>
 		</table>
@@ -557,8 +599,8 @@
 			<h5 class="center-align">General settings</h5>
 		</div>
 	</section>
-	<footer class="page-footer blue-grey darken-4 center-align">
-		<p>Anatole SCHRAMM-HENRY, all right reserved | Hosted by the board itself<br /> 2019-2020</p>
+	<footer style="padding:10px;" class="page-footer blue-grey darken-4 center-align">
+		<p>Anatole SCHRAMM-HENRY, all right reserved | Hosted by the board itself<br /> 2019-2022</p>
 	</footer>
 	<script src="rsrc/scriptV2.js"></script>
   </body>
diff --git a/src/app/app.ino b/src/app/app.ino
index dfe548d..4fb11aa 100644
--- a/src/app/app.ino
+++ b/src/app/app.ino
@@ -87,6 +87,7 @@ void setup()
   sab.getWebServerManager().getWEBServer().addApiRoutine("/esp/restart", &(espRestartApi), &sab, WEBServer<WEBClient>::GET);
   sab.getWebServerManager().getWEBServer().addApiRoutine("/esp/reset", &(espResetApi), &sab, WEBServer<WEBClient>::GET);
   sab.getWebServerManager().getWEBServer().addApiRoutine("/sab/wifi/stainfo", &(staWifiInfoApi), &sab, WEBServer<WEBClient>::GET);
+  sab.getWebServerManager().getWEBServer().addApiRoutine("/sab/wifi/apinfo", &(apWifiInfoApi), &sab, WEBServer<WEBClient>::GET);
   sab.getWebServerManager().getWEBServer().addApiRoutine("/sab/wifi/scanner", &(apScannerApi), NULL, WEBServer<WEBClient>::GET);
   sab.getWebServerManager().getWEBServer().addApiRoutine("/sab/systeminfo", &(systemInfoApi), &sab, WEBServer<WEBClient>::GET);
   sab.getWebServerManager().getWEBServer().addApiRoutine("/sab/power/info", &(powerInfoApi), &sab, WEBServer<WEBClient>::GET);
diff --git a/src/app/webApi.cpp b/src/app/webApi.cpp
index a7061a8..401022a 100644
--- a/src/app/webApi.cpp
+++ b/src/app/webApi.cpp
@@ -226,7 +226,7 @@ boolean staWifiInfoApi(WEBServer<WEBClient>::HttpRequestData &HRD, WiFiClient *w
 	SAB *p = (SAB *)pData;
 	char buffer[300];
   IPAddress IP = p->getConnectivityManager().localIP();
- 
+
   sprintf(buffer,"{\"status\":\"ok\",\"RSSI\":%d,\"RSSI2\":%d,\"local IP\":\"%u.%u.%u.%u\",\"mac\":\"%s\"}", p->getConnectivityManager().RSSI(), p->getConnectivityManager().RSSIPercent(), IP[0], IP[1], IP[2], IP[3], p->getConnectivityManager().macAddress().c_str());
   
   WEBServer<WEBClient>::sendHTTPHeader(wc, HttpConstants::httpMIMETypeToString(HttpConstants::APPLICATION_JSON), strlen(buffer));
@@ -234,19 +234,32 @@ boolean staWifiInfoApi(WEBServer<WEBClient>::HttpRequestData &HRD, WiFiClient *w
 	return true;
 }
 
-/*boolean apWifiInfoApi(WEBServer<WEBClient>::HttpRequestData &HRD, WiFiClient *wc, void *pData)
+boolean apWifiInfoApi(WEBServer<WEBClient>::HttpRequestData &HRD, WiFiClient *wc, void *pData)
 {
   SAB *p = (SAB *)pData;
   char buffer[300];
 
-  p->getSdCardManager().getCFGFile(AP_CFG_FILE);
+  //We check if the AP is enabled
+  boolean apEnabled = p->getConnectivityManager().getMode() == WIFI_AP || p->getConnectivityManager().getMode() == WIFI_AP_STA;
+
+  if(apEnabled)
+  {
+    sprintf(buffer, "{\"status\":\"ok\",\"AP\":\"enabled\",\"AP IP\":\"%u.%u.%u.%u\",\"STA count\":%u,\"SSID\":\"%s\",\"Password\":\"%s\"}",
+    p->getConnectivityManager().softAPSSID().c_str(),
+    p->getConnectivityManager().softAPPSK().c_str());
+  }
+  else
+  {
+    sprintf(buffer, "{\"status\":\"ok\",\"AP\":\"disabled\",\"SSID\":\"%s\",\"Password\":\"%s\"}",
+    p->getConnectivityManager().softAPSSID().c_str(),
+    p->getConnectivityManager().softAPPSK().c_str());
+  }
 
-  sprintf(buffer, "");
   WEBServer<WEBClient>::sendHTTPHeader(wc, HttpConstants::httpMIMETypeToString(HttpConstants::APPLICATION_JSON), strlen(buffer));
   
   wc->print(buffer);
   return true;
-}*/
+}
 
 boolean apScannerApi(WEBServer<WEBClient>::HttpRequestData &HRD, WiFiClient *wc, void *pData)
 {