Streamer272/door-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Adds dashboard ui
All checks were successful
Gitea Build Action / build-go (push) Successful in 25s
Details
Gitea Build Action / build-nuxt (push) Successful in 10m4s
Details

Browse Source
This commit is contained in:
Daniel Svitan 2025-06-06 11:44:47 +02:00
parent 7b99b75def
commit 18a6bef20a
2 changed files with 91 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/pages/index.vue
View File

@ -1,24 +1,100 @@
<template>
<main class="flex items-center justify-center min-w-screen min-h-screen">
<UButton
icon="material-symbols:lock"
size="xl"
color="primary"
variant="solid"
<main
class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
>
Lock
<div class="flex items-center justify-center flex-col gap-y-2 w-32">
<div
:class="`flex items-center justify-center border-solid border-2 border-${open ? (locked ? 'error' : 'secondary') : 'primary'} rounded-lg w-full h-32`"
>
<UIcon
:name="
open
? 'material-symbols:door-open'
: 'material-symbols:door-front'
"
class="size-12 !w-16 !h-16"
/>
</div>
<p
:class="`flex items-center justify-center text-${open ? (locked ? 'error' : 'secondary') : 'primary'} text-xl w-full h-10`"
>
{{ open ? "Opened" : "Closed" }}
</p>
</div>
<div class="flex items-center justify-center flex-col gap-y-2 w-32">
<div
:class="`flex items-center justify-center border-solid border-2 border-${locked ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
>
<UIcon
:name="
locked
? 'material-symbols:lock'
: 'material-symbols:lock-open'
"
class="size-12 !w-16 !h-16"
/>
</div>
<UButton
:icon="
locked
? 'material-symbols:lock-open'
: 'material-symbols:lock'
"
size="xl"
:color="locked ? 'primary' : 'secondary'"
variant="solid"
class="flex items-center justify-center w-full h-10"
@click="() => (locked = !locked)"
>
{{ locked ? "Unlock" : "Lock" }}
</UButton>
</div>
<div class="flex items-center justify-center flex-col gap-y-2 w-32">
<div
:class="`flex items-center justify-center border-solid border-2 border-${alert ? 'primary' : 'secondary'} rounded-lg w-full h-32`"
>
<UIcon
:name="
alert
? 'material-symbols:volume-up'
: 'material-symbols:volume-off'
"
class="size-12 !w-16 !h-16"
/>
</div>
<UButton
:icon="
alert
? 'material-symbols:volume-off'
: 'material-symbols:volume-up'
"
size="xl"
:color="alert ? 'primary' : 'secondary'"
variant="solid"
class="flex items-center justify-center w-full h-10"
@click="() => (alert = !alert)"
>
{{ alert ? "Turn off" : "Turn on" }}
</UButton>
</div>
</main>
</template>
<script lang="ts" setup>
const token = useToken();
const locked = true;
const token = useToken()
const open = ref(true)
const locked = ref(true)
const alert = ref(false)
onMounted(() => {
if (!token.value) {
return navigateTo("/token");
return navigateTo("/token")
}
console.log(token.value);
});
console.log(token.value)
})
</script>