From 81baba1411d9d50187e280b75037a45f4c7ad376 Mon Sep 17 00:00:00 2001
From: Stefan Bethke <stb@lassitu.de>
Date: Tue, 15 Jul 2025 22:05:05 +0200
Subject: [PATCH] Color state icon

---
 hmdooris/static/main.css | 6 +++---
 hmdooris/static/main.js  | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/hmdooris/static/main.css b/hmdooris/static/main.css
index 1678546..bed6247 100644
--- a/hmdooris/static/main.css
+++ b/hmdooris/static/main.css
@@ -61,15 +61,15 @@ body {
     color: black;
 }
 
-.lock__line button.lock__button__lock {
+.lock__line button.lock__button__lock, .lock__state-icon--locked {
     background-color: #f88;
 }
 
-.lock__line button.lock__button__unlock {
+.lock__line button.lock__button__unlock, .lock__state-icon--unlocked {
     background-color: #8f8;
 }
 
-.lock__line button.lock__button__lock:disabled, .lock__line button.lock__button__unlock:disabled {
+.lock__line button.lock__button__lock:disabled, .lock__line button.lock__button__unlock:disabled, .lock__state-icon--unknown {
     background-color: #ccc;
     color: #444;
 }
diff --git a/hmdooris/static/main.js b/hmdooris/static/main.js
index 4237bf7..4540e2b 100644
--- a/hmdooris/static/main.js
+++ b/hmdooris/static/main.js
@@ -6,16 +6,19 @@
         let button_lock = document.querySelector(`#lock__line__${lock.id} .lock__button__lock`);
         let button_unlock = document.querySelector(`#lock__line__${lock.id} .lock__button__unlock`);
         if (lock.status === "LOCKED") {
+            state_icon.class = "lock__state-icon lock__state-icon--locked";
             state_icon.innerHTML = '<svg class="icon"><use href="static/icons.svg#icon-lock-alt-svgrepo-com"/></svg>';
             state_label.innerText = 'locked';
             button_lock.disabled = true;
             button_unlock.disabled = false;
         } else if (lock.status === "UNLOCKED") {
+            state_icon.class = "lock__state-icon lock__state-icon--unlocked";
             state_icon.innerHTML = '<svg class="icon"><use href="static/icons.svg#icon-unlock-alt-svgrepo-com"/></svg>';
             state_label.innerText = 'unlocked';
             button_lock.disabled = false;
             button_unlock.disabled = true;
         } else {
+            state_icon.class = "lock__state-icon lock__state-icon--unknown";
             state_icon.innerHTML = '<svg class="icon"><use href="static/icons.svg#icon-arrow-spin-svgrepo-com"/></svg>';
             state_label.innerText = 'unknown';
             button_lock.disabled = true;