Implement Frontend Status Display

2 files changed, 32 insertions, 1 deletions

diff --git a/data/html/index.html b/data/html/index.html
index eddc2b3..268aad9 100644
--- a/data/html/index.html
+++ b/data/html/index.html
@@ -25,6 +25,7 @@
 		<main>
 			<h1>birdscan</h1>
 			<p>A software to take beautiful pictures of birds with a Raspberry Pi Camera.</p>
+			<p id="state"></p>
 			<button onclick="singlePicture()">Take single picture</button>
 		</main>
 
diff --git a/data/js/birdscan.js b/data/js/birdscan.js
index d1bba04..d3a46c3 100644
--- a/data/js/birdscan.js
+++ b/data/js/birdscan.js
@@ -1,7 +1,37 @@
 
+var state = "unknown";
+var updateStatePending = false;
+
 function singlePicture() {
     const xhttp = new XMLHttpRequest();
-    xhttp.open("POST", "./api/single_picture");
+    xhttp.open("POST", "./api/single_picture", true);
     xhttp.send();
 }
 
+function updateState() {
+    if (!updateStatePending) {
+        updateStatePending = true;
+        var state_request = new XMLHttpRequest();
+        state_request.onreadystatechange = updateStateCallback;
+        state_request.open("POST", "./api/state?known_state=" + state, true);
+        state_request.send();
+    }
+}
+
+function updateStateCallback() {
+    if (this.readyState == 4) {  // readyState=DONE
+        updateStatePending = false;
+        if (this.status == 200) {  // status=OK
+            state = this.responseText;
+            document.getElementById("state").innerHTML = "Current state: " + state;
+            setTimeout(updateState, 100);  // restart state poll after short time on success
+        } else {
+            state = "Verbindung abgebrochen!";
+            document.getElementById("state").innerHTML = "Current state: " + state;
+        }
+    }
+}
+
+document.getElementById("state").innerHTML = "Current state: " + state;
+updateState();
+