first attempt at making a UI (clickdummy)

2026-05-09 21:03:49 +02:00 · 2026-05-09 21:03:49 +02:00 · b80e3fe4f0
commit b80e3fe4f0
parent 66c22a915f
13 changed files with 4775 additions and 0 deletions
--- a/app/src/pages/[lang]/index.astro
+++ b/app/src/pages/[lang]/index.astro
@ -0,0 +1,163 @@
+---
+import Layout from "../../layouts/Layout.astro"
+import "../../styles/global.css"
+import Alert from "../../components/Alert.astro"
+import DoorTemplate from "../../components/DoorTemplate.astro"
+import {LogIn, Lock} from "@lucide/astro"
+import {getLangFromUrl, useTranslations} from "../../i18n/utils"
+
+export async function getStaticPaths() {
+    return [
+        {params: {lang: "en"}},
+        {params: {lang: "de"}},
+    ]
+}
+
+
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang)
+---
+
+<Layout username="">
+  <div class="grid place-items-center grid-cols-1 gap-4 max-w-xl mx-auto" id="list">
+    <Alert
+        classList="hidden"
+        id="alert-unauthenticated"
+        color="info"
+        title={t("unauthenticated.title")}
+        description={t("unauthenticated.description")}
+    >
+      <Fragment slot="icon"> <!-- pass table header -->
+        <LogIn class="size-7"/>
+      </Fragment>
+    </Alert>
+    <Alert
+        classList="hidden"
+        id="alert-unauthorized"
+        color="info"
+        title={t("unauthorized.title")}
+        description={t("unauthorized.description")}
+    >
+      <Fragment slot="icon"> <!-- pass table header -->
+        <Lock class="size-7"/>
+      </Fragment>
+    </Alert>
+    <div class="divider w-full my-0" id="alert-divider"></div>
+  </div>
+
+  <DoorTemplate state="unknown"/>
+
+  <script>
+      import user from "@lucide/astro/icons/user"
+
+      const list: HTMLDivElement = document.querySelector("#list")!
+      const template: HTMLTemplateElement = document.querySelector("#template-door")!
+
+      type DoorType = {
+          id: string;
+          label: string;
+          state: "open" | "closed" | "unknown" | "moving";
+          batteryLow: boolean;
+      }
+      type AuthType = {
+          username: string;
+          authorized: boolean;
+          authenticated: boolean;
+      }
+
+      const auth: AuthType = {
+          username: "user",
+          authorized: true,
+          authenticated: false,
+      }
+
+      const doors: Array<DoorType> = [
+          {
+              id: "abcdef",
+              label: "Hauptraum",
+              state: "open",
+              batteryLow: false,
+          },
+          {
+              id: "12345",
+              label: "Werkstatt",
+              state: "closed",
+              batteryLow: true,
+          },
+      ]
+
+      function setDoorInfo(doorElement: HTMLDivElement, door: DoorType) {
+          const labelElement: HTMLDivElement = doorElement.querySelector("[data-label]")!
+          const buttonElements: Array<HTMLButtonElement> = Array.from(doorElement.querySelectorAll("button"))
+
+          doorElement.dataset.id = door.id
+          doorElement.dataset.state = door.state
+
+          if (auth.authenticated && auth.authorized) {
+              doorElement.dataset.active = ""
+          } else {
+              delete doorElement.dataset.active
+          }
+
+          if (door.batteryLow) {
+              doorElement.dataset.battery = ""
+          } else {
+              delete doorElement.dataset.battery
+          }
+
+          labelElement.innerHTML = door.label
+
+          buttonElements.forEach(button => {
+              console.log(button)
+              button.disabled = door.state === "moving"
+          })
+      }
+
+      function refresh() {
+          for (const door of doors) {
+              let doorElement: HTMLDivElement | null = list.querySelector(`[data-id='${door.id}']`)
+              if (doorElement) {
+                  setDoorInfo(doorElement, door)
+                  continue
+              }
+
+              const targetElement = document.importNode(template.content, true)
+              doorElement = targetElement.querySelector("[data-state]")!
+              setDoorInfo(doorElement, door)
+              list.appendChild(targetElement)
+          }
+
+          const alertUnauthenticated: HTMLDivElement = document.querySelector("#alert-unauthenticated")!
+          const alertUnauthorized: HTMLDivElement = document.querySelector("#alert-unauthorized")!
+          const alertDivider: HTMLDivElement = document.querySelector("#alert-divider")!
+          const badgeUsername: HTMLDivElement = document.querySelector("#badge-username")!
+          const buttonLogin: HTMLDivElement = document.querySelector("#button-login")!
+          const usernameElement: HTMLSpanElement = badgeUsername.querySelector('#username')!
+
+          alertUnauthenticated.classList.toggle("hidden", auth.authenticated)
+          alertUnauthorized.classList.toggle("hidden", !auth.authenticated || auth.authorized)
+          alertDivider.classList.toggle("hidden", auth.authenticated && auth.authorized)
+          badgeUsername.classList.toggle("hidden", !auth.authenticated)
+          usernameElement.innerHTML = auth.username
+          buttonLogin.classList.toggle("hidden", auth.authenticated)
+      }
+
+      refresh()
+
+      setTimeout(() => {
+          doors[0] = {
+              id: "abcdef",
+              label: "Hauptraum",
+              state: "unknown",
+              batteryLow: false,
+          }
+          doors[1] = {
+              id: "12345",
+              label: "Werkstatt",
+              state: "moving",
+              batteryLow: true,
+          }
+          refresh()
+      }, 2000)
+  </script>
+</Layout>