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

104
web/pages/index.vue
View File

@ -1,24 +1,100 @@
<template> <template>
<main class="flex items-center justify-center min-w-screen min-h-screen"> <main
<UButton class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
icon="material-symbols:lock" >
size="xl" <div class="flex items-center justify-center flex-col gap-y-2 w-32">
color="primary" <div
variant="solid" :class="`flex items-center justify-center border-solid border-2 border-${open ? (locked ? 'error' : 'secondary') : 'primary'} rounded-lg w-full h-32`"
> >
Lock <UIcon
</UButton> :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> </main>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const token = useToken(); const token = useToken()
const locked = true; const open = ref(true)
const locked = ref(true)
const alert = ref(false)
onMounted(() => { onMounted(() => {
if (!token.value) { if (!token.value) {
return navigateTo("/token"); return navigateTo("/token")
} }
console.log(token.value); console.log(token.value)
}); })
</script> </script>

2
web/pages/token.vue
View File

@ -14,7 +14,7 @@
/> />
</UFormField> </UFormField>
<UButton type="submit" size="xl"> Submit</UButton> <UButton type="submit" size="xl"> Submit </UButton>
</UForm> </UForm>
</main> </main>
</template> </template>