165 lines
4.8 KiB
Vue
165 lines
4.8 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="toggleAlert"
|
|
>
|
|
{{ alert ? "Turn off" : "Turn on" }}
|
|
</UButton>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import axios from "axios"
|
|
|
|
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
|
|
axios
|
|
.post(
|
|
useAPI("/lock"),
|
|
{
|
|
locked: desired,
|
|
},
|
|
{
|
|
headers: useHeaders(),
|
|
}
|
|
)
|
|
.then((res) => {
|
|
handleResponse(res, () => {
|
|
toast.add({
|
|
title: `The door was ${desired ? "locked" : "unlocked"}`,
|
|
})
|
|
locked.value = desired
|
|
})
|
|
})
|
|
.catch(handleRequestError)
|
|
}
|
|
|
|
async function toggleAlert() {
|
|
const desired = !alert.value
|
|
axios
|
|
.post(useAPI("/alert"), { alert: desired }, { headers: useHeaders() })
|
|
.then((res) => {
|
|
handleResponse(res, () => {
|
|
toast.add({
|
|
title: `Alerts were turned ${desired ? "on" : "off"}`,
|
|
})
|
|
alert.value = desired
|
|
})
|
|
})
|
|
.catch(handleRequestError)
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!token.value) {
|
|
return navigateTo("/token")
|
|
}
|
|
|
|
axios
|
|
.get<boolean>(useAPI("/lock"), {
|
|
headers: useHeaders(),
|
|
})
|
|
.then((res) => {
|
|
handleResponse(res, (response) => {
|
|
locked.value = response.data
|
|
})
|
|
})
|
|
.catch(handleRequestError)
|
|
|
|
axios
|
|
.get<boolean>(useAPI("/alert"), {
|
|
headers: useHeaders(),
|
|
})
|
|
.then((res) => {
|
|
handleResponse(res, (response) => {
|
|
alert.value = response.data
|
|
})
|
|
})
|
|
.catch(handleRequestError)
|
|
})
|
|
</script>
|