🔨 Replaces websockets with interval fetches

web/app.vue

@@ -7,3 +7,9 @@
 <style>
 @import "assets/css/main.css";
 </style>
+
+<script lang="ts" setup>
+useHead({
+    title: "Door alarm",
+})
+</script>

web/composables/useAPI.ts

@@ -1,5 +1,4 @@
-import type { FetchResponse } from "ofetch"
-import { AxiosError, type AxiosResponse } from "axios"
+import { type AxiosResponse } from "axios"
 
 export function useAPI(route: string = "/") {
     return `https://api.door.svitan.dev${route}`

web/pages/index.vue

@@ -4,11 +4,11 @@
     >
         <div class="flex items-center justify-center flex-col gap-y-2 w-32">
             <div
-                :class="`flex items-center justify-center border-solid border-2 border-${open ? (locked ? 'error' : 'secondary') : 'primary'} rounded-lg w-full h-32`"
+                :class="`flex items-center justify-center border-solid border-2 border-${opened ? (locked ? 'error' : 'secondary') : 'primary'} rounded-lg w-full h-32`"
             >
                 <UIcon
                     :name="
-                        open
+                        opened
                             ? 'material-symbols:door-open'
                             : 'material-symbols:door-front'
                     "
@@ -17,9 +17,9 @@
             </div>
 
             <p
-                :class="`flex items-center justify-center text-${open ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
+                :class="`flex items-center justify-center text-${opened ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
             >
-                {{ open ? "Opened" : "Closed" }}
+                {{ opened ? "Opened" : "Closed" }}
             </p>
         </div>
 
@@ -55,11 +55,11 @@
 
         <div class="flex items-center justify-center flex-col gap-y-2 w-32">
             <div
-                :class="`flex items-center justify-center border-solid border-2 border-${alert ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
+                :class="`flex items-center justify-center border-solid border-2 border-${alerts ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
             >
                 <UIcon
                     :name="
-                        alert
+                        alerts
                             ? 'material-symbols:volume-up'
                             : 'material-symbols:volume-off'
                     "
@@ -69,17 +69,17 @@
 
             <UButton
                 :icon="
-                    alert
+                    alerts
                         ? 'material-symbols:volume-off'
                         : 'material-symbols:volume-up'
                 "
                 size="xl"
-                :color="alert ? 'primary' : 'secondary'"
+                :color="alerts ? 'primary' : 'secondary'"
                 variant="solid"
                 class="flex items-center justify-center w-full h-10"
                 @click="toggleAlert"
             >
-                {{ alert ? "Turn off" : "Turn on" }}
+                {{ alerts ? "Turn off" : "Turn on" }}
             </UButton>
         </div>
     </main>
@@ -90,9 +90,9 @@ import axios from "axios"
 
 const token = useToken()
 
-const open = ref(true)
+const opened = ref(true)
 const locked = ref(true)
-const alert = ref(false)
+const alerts = ref(false)
 
 const toast = useToast()
 
@@ -120,7 +120,7 @@ async function toggleLock() {
 }
 
 async function toggleAlert() {
-    const desired = !alert.value
+    const desired = !alerts.value
     axios
         .post(useAPI("/alerts"), { alert: desired }, { headers: useHeaders() })
         .then((res) => {
@@ -128,7 +128,7 @@ async function toggleAlert() {
                 toast.add({
                     title: `Alerts were turned ${desired ? "on" : "off"}`,
                 })
-                alert.value = desired
+                alerts.value = desired
             })
         })
         .catch(handleRequestError)
@@ -139,26 +139,43 @@ onMounted(() => {
         return navigateTo("/token")
     }
 
-    axios
-        .get<boolean>(useAPI("/locked"), {
-            headers: useHeaders(),
-        })
-        .then((res) => {
-            handleResponse(res, (res) => {
-                locked.value = res.data
+    setInterval(() => {
+        axios
+            .get<boolean>(useAPI("/opened"), {
+                headers: useHeaders(),
             })
-        })
-        .catch(handleRequestError)
+            .then((res) => {
+                handleResponse(res, (res) => {
+                    opened.value = res.data
+                })
+            })
+            .catch(handleRequestError)
+    }, 1000)
 
-    axios
-        .get<boolean>(useAPI("/alerts"), {
-            headers: useHeaders(),
-        })
-        .then((res) => {
-            handleResponse(res, (res) => {
-                alert.value = res.data
+    setInterval(() => {
+        axios
+            .get<boolean>(useAPI("/locked"), {
+                headers: useHeaders(),
             })
-        })
-        .catch(handleRequestError)
+            .then((res) => {
+                handleResponse(res, (res) => {
+                    locked.value = res.data
+                })
+            })
+            .catch(handleRequestError)
+    }, 1000)
+
+    setInterval(() => {
+        axios
+            .get<boolean>(useAPI("/alerts"), {
+                headers: useHeaders(),
+            })
+            .then((res) => {
+                handleResponse(res, (res) => {
+                    alerts.value = res.data
+                })
+            })
+            .catch(handleRequestError)
+    }, 1000)
 })
 </script>