additional door states
This commit is contained in:
parent
af3139ed2b
commit
7935c54a60
3 changed files with 75 additions and 32 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue