From 2269cc653577dffc58dba4ad5534583f28f224de Mon Sep 17 00:00:00 2001
From: xengineering <mail2xengineering@protonmail.com>
Date: Mon, 14 Jun 2021 11:48:39 +0200
Subject: Implement Frontend Status Display

---
 data/html/index.html |  1 +
 data/js/birdscan.js  | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

(limited to 'data')

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();
+
-- 
cgit v1.2.3-70-g09d2