additional door states

This commit is contained in:
kritzl 2026-05-11 11:49:10 +02:00
commit 7935c54a60
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
3 changed files with 75 additions and 32 deletions

View file

@ -10,13 +10,16 @@ const t = useTranslations(lang)
<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=unlocked]:ring-success data-[state=unlocked]:bg-success/5",
"data-[state=locked]:ring-error data-[state=locked]: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=unlocking]:ring-info data-[state=unlocking]:bg-info/5",
"data-[state=locking]:ring-info data-[state=locking]:bg-info/5",
]}
data-state
data-battery
data-unreachable
data-jammed
data-active
data-id
>
@ -24,10 +27,20 @@ const t = useTranslations(lang)
<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 class="ms-auto flex flex-wrap justify-end gap-1">
<span class="badge badge-error hidden group-data-battery:flex whitespace-nowrap">
<TriangleAlert class="size-4"/>
{t("lock.batteryLow")}
</span>
<span class="badge badge-error hidden group-data-unreachable:flex whitespace-nowrap">
<TriangleAlert class="size-4"/>
{t("lock.unreachable")}
</span>
<span class="badge badge-error hidden group-data-jammed:flex whitespace-nowrap">
<TriangleAlert class="size-4"/>
{t("lock.jammed")}
</span>
</div>
</div>
</div>
<div class="hidden group-data-active:grid grid-cols-2 w-full items-center gap-2 mt-4">
@ -40,21 +53,25 @@ const t = useTranslations(lang)
</div>
</div>
<div>
<span class="w-full rounded-t-none badge badge-lg badge-success hidden group-data-[state=open]:flex">
<span class="w-full rounded-t-none badge badge-lg badge-success hidden group-data-[state=unlocked]:flex">
<LockOpen class="size-4"/>
{t("state.open")}
{t("state.unlocked")}
</span>
<span class="w-full rounded-t-none badge badge-lg badge-error hidden group-data-[state=closed]:flex">
<span class="w-full rounded-t-none badge badge-lg badge-error hidden group-data-[state=locked]:flex">
<Lock class="size-4"/>
{t("state.closed")}
{t("state.locked")}
</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="w-full rounded-t-none badge badge-lg badge-info hidden group-data-[state=unlocking]:flex">
<span class="loading loading-spinner loading-xs"></span>
{t("state.moving")}
{t("state.unlocking")}
</span>
<span class="w-full rounded-t-none badge badge-lg badge-info hidden group-data-[state=locking]:flex">
<span class="loading loading-spinner loading-xs"></span>
{t("state.locking")}
</span>
</div>
</div>