From 12a6a4d87e3e43d8c7590aced020d15e66eb1940 Mon Sep 17 00:00:00 2001
From: Anatole SCHRAMM <AS@isitecc.com>
Date: Wed, 24 Apr 2019 16:58:51 +0200
Subject: [PATCH] Updated web app

---
 sdCard_content/WWW/index.htm      |  22 +--
 sdCard_content/WWW/rsrc/script.js | 276 ++++++++++++++++++++++++++++++
 sdCard_content/WWW/rsrc/style.css |  16 ++
 3 files changed, 304 insertions(+), 10 deletions(-)
diff --git a/sdCard_content/WWW/index.htm b/sdCard_content/WWW/index.htm
index 8104fee..a5a1fb7 100644
--- a/sdCard_content/WWW/index.htm
+++ b/sdCard_content/WWW/index.htm
@@ -4,11 +4,13 @@
 	<meta charset="utf-8" />
 	<link rel="stylesheet" href="rsrc/style.css" />
 	<link rel="shortcut icon" href="rsrc/favicon.ico" type="image/x-icon"/>
+	<script src="rsrc/script.js"></script>
     <title>ESP8266 DASHBOARD</title>
   </head>
-  <body>
+  <body onload="init();">
 	<header>
 		<h1 class ="title">ESP8266 Embedded System Dashboard</h1>
+		<div id="conIcon"><img id="imgConn" src="rsrc/conn.png" alt="connected" style="display:none;"><img id="imgDisco" src="rsrc/disco.png" alt="disconnected"></div>
 	</header>
 	<nav>
 		<div class="menuContainer">
@@ -34,27 +36,27 @@
 					</td>
 					<td>
 						<h2 class="categorie">STA Info</h2>
-						<p>Local IP :</p>
+						<p>Local IP : <span id="localIP"></span></p>
 					</td>
 					<td>
 						<h2 class="categorie">System Info</h2>
-						<p>Free ram :</p>
-						<p>CPU Frequ :</p>
-						<p>Heap frag :</p>
-						<p>Max block :</p>
+						<p>Free ram : <span id="ramInfo"></span> Byte(s)</p>
+						<p>CPU Frequ : <span id="cpuInfo"></span> Mhz</p>
+						<p>Heap frag : <span id="fragInfo"></span> %</p>
+						<p>Max block : <span id="blockInfo"></span> Byte(s)</p>
 					</td>
 				</TR>
 			</table>
 		</div>
 		<div class="subSection">
 			<h2 class="categorie">SdCard</h2>
-			<p>SDCard size :</p>
-			<p>Unmount SDCard : <button>DO IT !</button></p>
-			<p>Mount SDCard : <button>DO IT !</button></p>
+			<p>SDCard size : <span id="cardSize"></span></p>
+			<p>Unmount SDCard : <button onclick="sdCardMountUnmnout('unmount');">DO IT !</button></p>
+			<p>Mount SDCard : <button onclick="sdCardMountUnmnout('mount');">DO IT !</button></p>
 		</div>
 		<div class="subSection">
 			<h2 class="categorie">Real Time Clock</h2>
-			<p>RTC value : </p>
+			<p>RTC value : <span id="rtcValue" ></span></p>
 			<p>
 				Set RTC value : <br />
 				<br />
diff --git a/sdCard_content/WWW/rsrc/script.js b/sdCard_content/WWW/rsrc/script.js
index e69de29..156a5af 100644
--- a/sdCard_content/WWW/rsrc/script.js
+++ b/sdCard_content/WWW/rsrc/script.js
@@ -0,0 +1,276 @@
+/**
+* JavaScript code for the dashboard logic, refresh and other things
+*
+* Anatole SCHRAMM-HENRY - Th3maz1ng
+**/
+
+//Variable needed for the app
+var sigStrenthInter = null;
+var rtcInter = null;
+var sysinfoInter = null;
+
+//This function set the app up
+function init()
+{
+	console.log("Body loaded - starting setup");
+	
+	refreshRtc();
+	rtcClockInter = setInterval(refreshRtc,1000);
+	
+	refreshSysInfo();
+	sysinfoInter = setInterval(refreshSysInfo,10000);
+	
+	refreshSigStrength();
+	sigStrenthInter = setInterval(refreshSigStrength,1000);
+	
+	sdCardSize();
+	
+	console.log("Ending setup");
+}
+
+function onTimeOut(e)
+{
+	console.error("Request timed out");
+	document.getElementById('imgConn').style.display = 'none';
+	document.getElementById('imgDisco').style.display = 'block';
+}
+
+function connectedUpdate()
+{
+	document.getElementById('imgDisco').style.display = 'none';
+	document.getElementById('imgConn').style.display = 'block';
+}
+
+function refreshRtc()
+{
+	console.log("Refreshing RTC");
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status != 0){connectedUpdate();}
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var rtcObj = JSON.parse(this.responseText);
+					console.log(rtcObj);
+					document.getElementById('rtcValue').innerHTML = rtcObj.time + ' ' + rtcObj.date;
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					document.getElementById('rtcValue').innerHTML = 'ERROR';
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/rtc/get/datetime");
+	ajaxReq.send();
+}
+
+function refreshSysInfo()
+{
+	console.log("Refreshing Sys Infos");
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var systemInfoObj = JSON.parse(this.responseText);
+					console.log(systemInfoObj);
+					document.getElementById('ramInfo').innerHTML = systemInfoObj['free RAM'];
+					document.getElementById('cpuInfo').innerHTML = systemInfoObj['CPU freq'];
+					document.getElementById('fragInfo').innerHTML = systemInfoObj['heap frag'];
+					document.getElementById('blockInfo').innerHTML = systemInfoObj['max block'];
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					document.getElementById('ramInfo').innerHTML = 'NaN';
+					document.getElementById('cpuInfo').innerHTML = 'NaN';
+					document.getElementById('fragInfo').innerHTML = 'NaN';
+					document.getElementById('blockInfo').innerHTML = 'NaN';
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/systeminfo");
+	ajaxReq.send();
+}
+
+function refreshSigStrength()
+{
+	console.log("Refreshing Sig Strength");
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var wifiStaObj = JSON.parse(this.responseText);
+					console.log(wifiStaObj);
+					document.getElementById('sigStrength').innerHTML = wifiStaObj.RSSI;
+					document.getElementById('localIP').innerHTML = wifiStaObj['local IP'];
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					document.getElementById('sigStrength').innerHTML = 'NaN';
+					document.getElementById('localIP').innerHTML = 'ERROR';
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/wifi/stainfo");
+	ajaxReq.send();
+}
+
+function sdCardMountUnmnout(action)
+{
+	console.log("Sd card action : "+action);
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var sdCardObj = JSON.parse(this.responseText);
+					console.log(sdCardObj);
+					
+					sdCardSize();
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/sdcard/"+action);
+	ajaxReq.send();
+}
+
+function sdCardSize()
+{
+	console.log("Refreshing SD card size : ");
+	var ajaxReq = new XMLHttpRequest();
+	ajaxReq.timeout = 5000;
+	ajaxReq.onreadystatechange = function()
+	{
+		switch(this.readyState)
+		{
+			case 0:
+				break;
+			case 1:
+				console.log("Connection established");
+				break;
+			case 2:
+				console.log("Request received");
+				break;
+			case 3:
+				console.log("Processing request");
+				break;
+			case 4:
+				console.log("Response is ready");
+				if(this.status == 200)
+				{
+					console.log("Response : " + this.responseText);
+					var sdCardObj = JSON.parse(this.responseText);
+					console.log(sdCardObj);
+					document.getElementById('cardSize').innerHTML = sdCardObj.size == 0 ? 'NO CARD' : sdCardObj.size + ' GByte(s)';
+				}
+				else
+				{
+					console.log("Error, status is : " + this.status);
+					document.getElementById('cardSize').innerHTML = 'NaN GByte(s)';
+				}
+				break;
+			default:
+				console.log("Unknown state");
+				
+		}
+	}
+	ajaxReq.ontimeout = onTimeOut;
+	ajaxReq.open('GET',"/sab/sdcard/size");
+	ajaxReq.send();
+}
\ No newline at end of file
diff --git a/sdCard_content/WWW/rsrc/style.css b/sdCard_content/WWW/rsrc/style.css
index d92cb5d..705991d 100644
--- a/sdCard_content/WWW/rsrc/style.css
+++ b/sdCard_content/WWW/rsrc/style.css
@@ -17,6 +17,22 @@ header > h1
 	margin:0;
 	padding:0;
 }
+header > #conIcon
+{
+	margin-top:-105px;
+	background-color:white;
+	display:inline-block;
+	position:absolute;
+	top:20vh;
+	left:0px;
+	
+}
+header > #conIcon > img
+{
+	width:100px;
+	padding:0;
+	margin:0;
+}
 p
 {
 	font-family: Arial;
