131 lines
4.1 KiB
Vue
131 lines
4.1 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="toggleLock"
|
|
>
|
|
{{ 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)
|
|
|
|
const toast = useToast()
|
|
|
|
async function toggleLock() {
|
|
const desired = !locked.value
|
|
await $fetch(useAPI("/lock"), {
|
|
method: "POST",
|
|
headers: useHeaders(),
|
|
body: {
|
|
locked: desired,
|
|
},
|
|
onRequestError: handleRequestError,
|
|
onResponse: handleResponse(() => {
|
|
toast.add({
|
|
title: `The door was ${desired ? "locked" : "unlocked"}`,
|
|
color: "success",
|
|
})
|
|
locked.value = desired
|
|
}),
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!token.value) {
|
|
return navigateTo("/token")
|
|
}
|
|
|
|
$fetch(useAPI("/lock"), {
|
|
method: "GET",
|
|
headers: useHeaders(),
|
|
onRequestError: handleRequestError,
|
|
onResponse: handleResponse(async (response) => {
|
|
console.log("god: ", await response.json())
|
|
}),
|
|
})
|
|
})
|
|
</script>
|