Pretty up

hmdooris/__main__.py

@@ -105,7 +105,7 @@ def get_api_lock(id):
 @app.post('/api/lock/<id>')
 @require_authz
 def post_api_lock(id):
-    return ccujack.lock_unlock(request.json["id"], None)
+    return ccujack.lock_unlock(id, request.json["locking"])
 
 if __name__ == '__main__':
     app.run(host='localhost', port=3000, server=GeventWebSocketServer, debug=config.debug, quiet=not config.debug)

hmdooris/static/main.css

@@ -1,3 +1,29 @@
 /*
  * foo
  */
+
+.lock-line {
+    display: flex;
+    background: #ddd;
+    padding: 20px 10px;
+}
+
+.lock-name {
+    min-width: 20em;
+}
+
+.lock-line button {
+    min-width: 10em;
+    margin: 0.1em 0.5em;
+    padding: 0.1em 0.5em;
+}
+
+.lock-line .lock-status {
+    background: black;
+    color: white;
+    border-radius: 1em;
+    padding: 0.5em;
+    margin: 0 1em;
+    font-size: 1.2em;
+    font-weight: bold;
+}

hmdooris/static/main.js

@@ -1,14 +1,40 @@
 (function () {
-    let update_button = function (lock, e) {
-        if (lock.status === "UNKNOWN") {
-            e.innerText = lock.name + " ???";
-            e.disabled = true;
+    let update_button = function (lock) {
+        let state = document.getElementById(`lock__state__${lock.id}`);
+        let button_lock = document.getElementById(`lock__lock__${lock.id}`);
+        let button_unlock = document.getElementById(`lock__unlock__${lock.id}`);
+        if (lock.status === "LOCKED") {
+            state.innerHTML = "&#x1F512";
+            button_lock.disabled = true;
+            button_unlock.disabled = false;
+        } else if (lock.status === "UNLOCKED") {
+            state.innerHTML = "&#x1F513";
+            button_lock.disabled = false;
+            button_unlock.disabled = true;
         } else {
-            e.innerText = (lock.status === "LOCKED" ? "Unlock" : "Lock") + " " + lock.name;
-            e.disabled = false;
+            state.innerText = "?"
+            button_lock.disabled = true;
+            button_unlock.disabled = true;
         }
     }
 
+    let lock_button_add_event_handler = function (e, id, locking) {
+        e.addEventListener("click", (ev) => {
+            ev.target.disabled = true;
+            fetch(`/api/lock/${id}`, {
+                method: "POST",
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    locking: locking,
+                })
+            }).then(res => res.json()).then((data) => {
+                //
+            }).catch(error => console.error('Error:', error));
+        })
+    }
+
     function connect() {
         const ws = new WebSocket("/ws");
         ws.addEventListener("message", (event) => {
@@ -16,7 +42,7 @@
             // console.log(m)
             for (let lock of m.locks) {
                 let e = document.getElementById("lock__" + lock.id);
-                update_button(lock, e);
+                update_button(lock);
             }
         });
         ws.addEventListener("close", (ev) => {
@@ -34,24 +60,36 @@
     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");
+            let div = document.createElement("div");
+            buttons.appendChild(div);
+            div.id = `lock__line__${lock.id}`;
+            div.classList.add("lock-line");
+            let e = document.createElement("div");
+            e.innerText = `${lock.name} `;
+            e.classList.add("lock-name");
+            div.appendChild(e);
+            let state = document.createElement("span");
+            state.id = `lock__state__${lock.id}`;
+            state.classList.add("lock-status");
+            state.innerText = "?";
+            e.prepend(state);
+
+            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);
+            e.id = `lock__lock__${lock.id}`;
+            e.disabled = true;
+            e.innerText = "Lock";
+            lock_button_add_event_handler(e, lock.id, true);
+            div.appendChild(e);
+
+            e = document.createElement("button");
+            e.name = lock.id;
+            e.id = `lock__unlock__${lock.id}`;
+            e.disabled = true;
+            e.innerText = "Unlock";
+            lock_button_add_event_handler(e, lock.id, false);
+            div.appendChild(e);
+            update_button(lock);
         }
     }).catch(error => console.error('Error:', error));