156 lines
3.8 KiB
Vue
156 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import superjson, { type SuperJSONResult } from 'superjson';
|
|
import { useTitleStore } from '~/stores/title';
|
|
|
|
definePageMeta({
|
|
middleware: ['admin']
|
|
});
|
|
|
|
const app = useNuxtApp();
|
|
const { loggedIn } = useUserSession();
|
|
const localePath = useLocalePath();
|
|
const { t } = useI18n();
|
|
const router = useRouter();
|
|
|
|
const { name, id } = app.$slugData.huntSlug!;
|
|
const titleStore = useTitleStore();
|
|
|
|
const { data, pending, refresh, error } = await useFetch(
|
|
`/api/admin/hunt/${id}`,
|
|
{
|
|
transform: (value) => {
|
|
return superjson.deserialize(
|
|
value as unknown as SuperJSONResult
|
|
) as unknown as typeof value;
|
|
}
|
|
}
|
|
);
|
|
|
|
const formData = useCloned(data, {
|
|
clone: (source) => superjson.deserialize(superjson.serialize(source))
|
|
});
|
|
|
|
useHead({
|
|
title: t('layouts.title', {
|
|
title: data.value?.name || name
|
|
})
|
|
});
|
|
|
|
watch(loggedIn, (isLoggedIn) => {
|
|
if (!isLoggedIn) {
|
|
router.push(localePath('/login'));
|
|
}
|
|
});
|
|
|
|
titleStore.title = data.value?.name;
|
|
|
|
async function submit() {
|
|
await $fetch(`/api/admin/hunt/${data.value?.id || id}`, {
|
|
method: 'POST',
|
|
body: formData.cloned.value
|
|
});
|
|
await refresh();
|
|
formData.sync();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<h1>admin</h1>
|
|
<VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
|
|
<VaInput
|
|
label="Name"
|
|
v-model="formData.cloned.value.name"
|
|
clearable
|
|
:clear-value="data.name"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaTextarea
|
|
label="Description"
|
|
v-model="formData.cloned.value.description"
|
|
clearable
|
|
:clear-value="data.description"
|
|
clearable-icon="replay"
|
|
/>
|
|
<VaCheckbox label="Virtual" v-model="formData.cloned.value.virtual" />
|
|
<VaCheckbox label="Allow Join" v-model="formData.cloned.value.allowJoin" />
|
|
<VaCheckbox
|
|
label="Reveal Quests"
|
|
v-model="formData.cloned.value.revealQuests"
|
|
/>
|
|
<VaCheckbox
|
|
label="Reveal Answers"
|
|
v-model="formData.cloned.value.revealAnswers"
|
|
/>
|
|
<div class="flex flex-row gap-2">
|
|
<VaCheckbox
|
|
label="Start?"
|
|
:model-value="!!formData.cloned.value.start"
|
|
@update:model-value="
|
|
(newVal) =>
|
|
(formData.cloned.value!.start = newVal ? new Date() : null)
|
|
"
|
|
/>
|
|
<VaDateInput
|
|
v-if="formData.cloned.value.start"
|
|
label="Start"
|
|
v-model="formData.cloned.value.start"
|
|
manual-input
|
|
/>
|
|
<VaTimeInput
|
|
v-if="formData.cloned.value.start"
|
|
label="Start"
|
|
v-model="formData.cloned.value.start"
|
|
view="seconds"
|
|
manual-input
|
|
/>
|
|
</div>
|
|
<div class="flex flex-row gap-2">
|
|
<VaCheckbox
|
|
label="End?"
|
|
:model-value="!!formData.cloned.value.end"
|
|
@update:model-value="
|
|
(newVal) => (formData.cloned.value!.end = newVal ? new Date() : null)
|
|
"
|
|
/>
|
|
<VaDateInput
|
|
v-if="formData.cloned.value.end"
|
|
label="End"
|
|
v-model="formData.cloned.value.end"
|
|
manual-input
|
|
/>
|
|
<VaTimeInput
|
|
v-if="formData.cloned.value.end"
|
|
label="End"
|
|
v-model="formData.cloned.value.end"
|
|
view="seconds"
|
|
manual-input
|
|
/>
|
|
</div>
|
|
<p>
|
|
Last update:
|
|
{{
|
|
$d(data.updatedAt, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium'
|
|
})
|
|
}}
|
|
</p>
|
|
<VaButtonGroup :loading="pending" :disabled="pending">
|
|
<VaButton
|
|
icon="replay"
|
|
:disabled="!formData.isModified.value"
|
|
@click.prevent="formData.sync()"
|
|
>Reset all values</VaButton
|
|
>
|
|
<VaButton :disabled="formData.isModified.value" @click.prevent="refresh()"
|
|
>Refresh</VaButton
|
|
>
|
|
<VaButton :disabled="!formData.isModified.value" @click.prevent="submit"
|
|
>Save</VaButton
|
|
>
|
|
</VaButtonGroup>
|
|
</VaForm>
|
|
</template>
|
|
|
|
<style scoped></style>
|