101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<template>
|
|
<main
|
|
class="flex items-center justify-center min-w-screen min-h-screen gap-4 flex-wrap"
|
|
>
|
|
<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 open = ref(true)
|
|
const locked = ref(true)
|
|
const alert = ref(false)
|
|
|
|
onMounted(() => {
|
|
if (!token.value) {
|
|
return navigateTo("/token")
|
|
}
|
|
console.log(token.value)
|
|
})
|
|
</script>
|