Refactor to use Bottle && implment core functions

hmdooris/static/main.js

@@ -1,26 +1,59 @@
 (function () {
-    setInterval(function () {
-        fetch("/api").then(function (response) {
-            return response.json();
-        }).then(function (json) {
-            let e = document.getElementById("lock-status");
-            e.innerText = JSON.stringify(json.locks);
-        })
-    }, 10000)
-
-    for (let e of document.querySelectorAll("button.lock-unlock")) {
-        e.onclick = function () {
-            fetch("/api", {
-                method: "POST",
-                body: JSON.stringify({
-                    name: e.name,
-                    contentType: "application/json",
-                })
-            }).then(function (response) {
-                //
-            })
+    let update_button = function (lock, e) {
+        if (lock.status === "UNKNOWN") {
+            e.innerText = lock.name + " ???";
+            e.disabled = true;
+        } else {
+            e.innerText = (lock.status === "LOCKED" ? "Unlock" : "Lock") + " " + lock.name;
+            e.disabled = false;
         }
     }
 
+    function connect() {
+        const ws = new WebSocket("/ws");
+        ws.addEventListener("message", (event) => {
+            m = JSON.parse(event.data)
+            // console.log(m)
+            for (let lock of m.locks) {
+                let e = document.getElementById("lock__" + lock.id);
+                update_button(lock, e);
+            }
+        });
+        ws.addEventListener("close", (ev) => {
+            setTimeout(function () {
+                connect();
+            }, 1000)
+        });
+        ws.addEventListener("error", (ev) => {
+            ws.close();
+        });
+    }
+
+    connect();
+
+    fetch("/api/lock").then((res) => res.json()).then((data) => {
+        let buttons = document.getElementById("locks");
+        for (let lock of data.locks) {
+            let e = document.createElement("button");
+            e.name = lock.id;
+            e.id = "lock__" + lock.id;
+            update_button(lock, e);
+            e.addEventListener("click", (e) => {
+                fetch(`/api/lock/${lock.id}`, {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        id: lock.id,
+                    })
+                }).then(res => res.json()).then((data) => {
+                    //
+                }).catch(error => console.error('Error:', error));
+            })
+            buttons.appendChild(e);
+        }
+    }).catch(error => console.error('Error:', error));
+
     console.log("Setup complete")
 })();