first attempt at making a UI (clickdummy)

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>

app/src/pages/index.astro

@@ -0,0 +1,26 @@
+
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width"/>
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+  <link rel="icon" href="/favicon.ico"/>
+  <meta name="generator" content={Astro.generator}/>
+  <title>dooris</title>
+  <script>
+      const userLang = new Intl.Locale(navigator.language).language;
+      const urls: Record<string, string> = {
+          'en': './en',
+          'de': './de',
+      };
+
+      const url = urls[userLang] ?? urls.en;
+      document.location.href = url;
+  </script>
+</head>
+<body>
+</body>
+</html>
+
+