CCCHH/dooris
1
1
Fork 0
Code Issues 1 Pull requests 1 Releases Packages 1 Activity Actions

first attempt at making a UI (clickdummy)

Browse source
This commit is contained in:
kritzl 2026-05-09 21:03:49 +02:00
commit b80e3fe4f0
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
13 changed files with 4775 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/src/components/Alert.astro Normal file
View file

@ -0,0 +1,45 @@
---
import {Check, CircleAlert, Info, TriangleAlert} from "@lucide/astro"
interface Props {
id: string;
classList: string;
color: "info" | "success" | "warning" | "error";
title: string;
description: string;
}
const {id, classList = "", color = "info", title, description} = Astro.props
---
<div
class:list={[
classList,
"alert alert-soft w-full",
color == "info" && "alert-info",
color == "success" && "alert-success",
color == "warning" && "alert-warning",
color == "error" && "alert-error",
]}
id={id}
role="alert">
<slot name="icon">
{color === "info" && (
<Info class="size-7"/>
)}
{color === "success" && (
<Check class="size-7"/>
)}
{color === "warning" && (
<CircleAlert class="size-7"/>
)}
{color === "error" && (
<TriangleAlert class="size-7"/>
)}
</slot>
<div class="flex flex-col gap-2">
<span>{title}</span>
<span class="text-sm opacity-90 mt-1" set:html={description}/>
</div>
</div>

61
app/src/components/DoorTemplate.astro Normal file
View file

@ -0,0 +1,61 @@
---
import {CircleQuestionMark, Lock, LockOpen, TriangleAlert} from "@lucide/astro"
import {getLangFromUrl, useTranslations} from "../i18n/utils"
const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
---
<template id="template-door">
<div
class:list={[
"card flex flex-col w-full group ring",
"data-[state=open]:ring-success data-[state=open]:bg-success/5",
"data-[state=closed]:ring-error data-[state=closed]:bg-error/5",
"data-[state=unknown]:ring-warning data-[state=unknown]:bg-warning/5",
"data-[state=moving]:ring-info data-[state=moving]:bg-info/5",
]}
data-state
data-battery
data-active
data-id
>
<div class="card-body">
<div class="flex max-md:flex-wrap items-center gap-2">
<div class="w-full flex justify-between">
<h2 class="text-xl font-bold" data-label></h2>
<span class="badge badge-error hidden ms-auto group-data-battery:flex whitespace-nowrap">
<TriangleAlert class="size-4"/>
{t("batteryLow")}
</span>
</div>
</div>
<div class="hidden group-data-active:grid grid-cols-2 w-full items-center gap-2 mt-4">
<button class="btn btn-outline btn-error">
{t("button.close")}
</button>
<button class="btn btn-outline btn-success">
{t("button.open")}
</button>
</div>
</div>
<div>
<span class="w-full rounded-t-none badge badge-lg badge-success hidden group-data-[state=open]:flex">
<LockOpen class="size-4"/>
{t("state.open")}
</span>
<span class="w-full rounded-t-none badge badge-lg badge-error hidden group-data-[state=closed]:flex">
<Lock class="size-4"/>
{t("state.closed")}
</span>
<span class="w-full rounded-t-none badge badge-lg badge-warning hidden group-data-[state=unknown]:flex">
<CircleQuestionMark class="size-4"/>
{t("state.unknown")}
</span>
<span class="w-full rounded-t-none badge badge-lg badge-info hidden group-data-[state=moving]:flex">
<span class="loading loading-spinner loading-xs"></span>
{t("state.moving")}
</span>
</div>
</div>
</template>