update api, operate doors

app/src/assets/main.ts

@@ -67,7 +67,7 @@ async function checkUser() {
         const {data: userInfo} = await getUserInfo({})
 
         apiError.current = null
-        auth.authenticated = userInfo.is_logged_in
+        auth.authenticated = true
         auth.authorized = userInfo.is_authorized
         auth.until = userInfo.guaranteed_session_until ? new Date(userInfo.guaranteed_session_until) : null
         auth.username = userInfo.username ?? ""
@@ -98,7 +98,9 @@ async function checkUser() {
 }
 
 async function fetchDoors() {
-    loading.doors = true
+    if (doors.length === 0) {
+        loading.doors = true
+    }
     refresh()
     const getDoors = fetcher.path("/api/locks/").method("get").create()
 
@@ -123,7 +125,7 @@ async function fetchDoors() {
             }
 
             doors.push({
-                id: door.name, // TODO: replace by actual ID
+                id: door.id,
                 label: door.name,
                 state: state,
                 batteryLow: door.status.is_low_battery,
@@ -157,9 +159,25 @@ async function fetchDoors() {
     }
 }
 
-function setDoorInfo(doorElement: HTMLDivElement, door: DoorType) {
+async function doorAction(action: "unlock" | "lock", doorId: string) {
+    const operateDoors = fetcher.path("/api/locks/{lock_id}").method("patch").create()
+
+    const stateMap: Record<string, "open" | "closed"> = {
+        unlock: "open",
+        lock: "closed",
+    }
+
+    operateDoors({
+        lock_id: doorId,
+        desired_state: stateMap[action],
+    })
+}
+
+function setDoorInfo(doorElement: HTMLDivElement, door: DoorType, initial: boolean = false) {
     const labelElement: HTMLDivElement = doorElement.querySelector("[data-label]")!
-    const buttonElements: Array<HTMLButtonElement> = Array.from(doorElement.querySelectorAll("button"))
+    const lockButton: HTMLButtonElement = doorElement.querySelector("[data-button='lock']")!
+    const unlockButton: HTMLButtonElement = doorElement.querySelector("[data-button='unlock']")!
+    const buttonElements: Array<HTMLButtonElement> = [lockButton, unlockButton]
 
     doorElement.dataset.id = door.id
     doorElement.dataset.state = door.state
@@ -190,6 +208,16 @@ function setDoorInfo(doorElement: HTMLDivElement, door: DoorType) {
 
     labelElement.innerHTML = door.label
 
+    if (initial) {
+        lockButton.addEventListener("click", () => {
+            doorAction("lock", door.id)
+        })
+
+        unlockButton.addEventListener("click", () => {
+            doorAction("unlock", door.id)
+        })
+    }
+
     buttonElements.forEach(button => {
         button.disabled = ["unlocking", "locking"].includes(door.state) || apiError.current !== null
     })
@@ -205,7 +233,7 @@ function refresh() {
 
         const targetElement = document.importNode(template.content, true)
         doorElement = targetElement.querySelector("[data-state]")!
-        setDoorInfo(doorElement, door)
+        setDoorInfo(doorElement, door, true)
         list.appendChild(targetElement)
     }
 
@@ -233,9 +261,8 @@ function refresh() {
 }
 
 
-
 loadAuthFromLocalStorage()
-fetchDoors()
+setInterval(fetchDoors, 250) // TODO: replace with SSE
 checkUser()
 
 document.addEventListener("loadeddata", () => {