refactor(hunt): Style hunt admin
This commit is contained in:
@@ -0,0 +1,134 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { fullDate } from '~~/server/utils/date';
|
||||||
|
|
||||||
|
const { loggedIn } = useUserSession();
|
||||||
|
const { data, pending, refresh } = await useFetch('/api/home');
|
||||||
|
const { t, d } = useI18n();
|
||||||
|
const localePath = useLocalePath();
|
||||||
|
const { tKey, tSluggy } = useI18nKey();
|
||||||
|
watch(loggedIn, () => refresh());
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="mx-auto max-w-6xl">
|
||||||
|
<VaButton
|
||||||
|
icon="refresh"
|
||||||
|
:disabled="pending"
|
||||||
|
class="mb-6"
|
||||||
|
@click="refresh"
|
||||||
|
>{{ t('layouts.refresh') }}</VaButton
|
||||||
|
>
|
||||||
|
|
||||||
|
<div v-if="data">
|
||||||
|
<div v-if="data.own !== null">
|
||||||
|
<h2 class="mb-6 text-2xl font-bold">
|
||||||
|
{{ t('page.home.joined_hunts') }}
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<VaCard
|
||||||
|
v-for="hunt in data.own"
|
||||||
|
:key="hunt.id"
|
||||||
|
stripe
|
||||||
|
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||||
|
>
|
||||||
|
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||||
|
|
||||||
|
<ClickableImage
|
||||||
|
v-if="hunt.picture"
|
||||||
|
:src="hunt.picture?.url"
|
||||||
|
:title="tKey(hunt, 'name').value"
|
||||||
|
/>
|
||||||
|
<VaCardContent>
|
||||||
|
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||||
|
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||||
|
<VaDivider />
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||||
|
<p v-if="hunt.start">
|
||||||
|
{{
|
||||||
|
t('page.home.start', {
|
||||||
|
start: d(hunt.start, fullDate)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<p v-if="hunt.end">
|
||||||
|
{{
|
||||||
|
t('page.home.end', {
|
||||||
|
start: d(hunt.end, fullDate)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
|
<VaCard v-if="data.own.length <= 0">
|
||||||
|
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
|
||||||
|
<VaCardContent>{{
|
||||||
|
t('page.home.click_hunt_below_to_join')
|
||||||
|
}}</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="text-center">
|
||||||
|
<p class="text-secondary mb-4">
|
||||||
|
{{ t('page.landing.login_to_see_hunts') }}
|
||||||
|
</p>
|
||||||
|
<VaButton color="info" icon="login" :to="localePath(`/login`)">{{
|
||||||
|
t('page.home.login_first')
|
||||||
|
}}</VaButton>
|
||||||
|
</div>
|
||||||
|
<div class="mt-12">
|
||||||
|
<VaDivider />
|
||||||
|
<h2 class="mb-6 mt-8 text-2xl font-bold">
|
||||||
|
{{ t('page.home.open_to_join') }}
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<VaCard
|
||||||
|
v-for="hunt in data.others"
|
||||||
|
:key="hunt.id"
|
||||||
|
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
||||||
|
>
|
||||||
|
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
||||||
|
<ClickableImage
|
||||||
|
v-if="hunt.picture"
|
||||||
|
:src="hunt.picture?.url"
|
||||||
|
:title="tKey(hunt, 'name').value"
|
||||||
|
/>
|
||||||
|
<VaCardContent>
|
||||||
|
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
||||||
|
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
||||||
|
<VaDivider />
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
||||||
|
<p v-if="hunt.start">
|
||||||
|
{{
|
||||||
|
t('page.home.start', {
|
||||||
|
start: d(hunt.start, fullDate)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<p v-if="hunt.end">
|
||||||
|
{{
|
||||||
|
t('page.home.end', {
|
||||||
|
start: d(hunt.end, fullDate)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
|
<VaCard v-if="data.others.length <= 0">
|
||||||
|
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
|
||||||
|
<VaCardContent>{{ t('page.home.new_hunts_soon') }}</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -96,6 +96,8 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<VaCard stripe stripe-color="info" class="">
|
||||||
|
<VaCardContent>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
|
<h2 class="text-2xl">{{ t('page.quest_admin.quests_title') }}</h2>
|
||||||
<VaButton
|
<VaButton
|
||||||
@@ -119,8 +121,10 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
|
|||||||
:key="quest.id"
|
:key="quest.id"
|
||||||
class="flex items-center"
|
class="flex items-center"
|
||||||
>
|
>
|
||||||
<VaCardContent class="flex w-full items-center gap-2">
|
<VaCardContent
|
||||||
<div class="flex flex-col gap-1">
|
class="flex w-full flex-col items-center gap-2 sm:flex-row"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row gap-1 sm:flex-col">
|
||||||
<VaButton
|
<VaButton
|
||||||
icon="arrow_upward"
|
icon="arrow_upward"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -174,6 +178,7 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
|
|||||||
>Txt!</VaChip
|
>Txt!</VaChip
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-row gap-1 sm:flex-col">
|
||||||
<VaButton
|
<VaButton
|
||||||
icon="edit"
|
icon="edit"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -189,6 +194,7 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
|
|||||||
:disabled="questLoading"
|
:disabled="questLoading"
|
||||||
@click="deleteQuest(quest)"
|
@click="deleteQuest(quest)"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</VaCardContent>
|
</VaCardContent>
|
||||||
</VaCard>
|
</VaCard>
|
||||||
</div>
|
</div>
|
||||||
@@ -203,6 +209,8 @@ async function reorderQuest(quest: QuestListItem, direction: 'up' | 'down') {
|
|||||||
:quest-id="editingQuestId"
|
:quest-id="editingQuestId"
|
||||||
@saved="refreshQuests"
|
@saved="refreshQuests"
|
||||||
/>
|
/>
|
||||||
|
</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
@@ -150,6 +150,7 @@ async function deleteTeam() {
|
|||||||
<template>
|
<template>
|
||||||
<VaCollapse
|
<VaCollapse
|
||||||
:key="team.id"
|
:key="team.id"
|
||||||
|
color="info"
|
||||||
:header="`${team.name} — ${team.members.length} members — ${team._count.answers} answers — ${team.score} points`"
|
:header="`${team.name} — ${team.members.length} members — ${team._count.answers} answers — ${team.score} points`"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
|
|||||||
+3
-1
@@ -139,7 +139,8 @@
|
|||||||
"no_hunt_created": "Bisher wurde kein Hunt erstellt",
|
"no_hunt_created": "Bisher wurde kein Hunt erstellt",
|
||||||
"no_hunt_joined": "Noch keinem Hunt beigetreten!",
|
"no_hunt_joined": "Noch keinem Hunt beigetreten!",
|
||||||
"open_to_join": "Bereit zum Beitreten:",
|
"open_to_join": "Bereit zum Beitreten:",
|
||||||
"start": "Start: {start}"
|
"start": "Start: {start}",
|
||||||
|
"title": "Startseite"
|
||||||
},
|
},
|
||||||
"hunt": {
|
"hunt": {
|
||||||
"admin_unreviewed": "Admin ({count} unbewertet)",
|
"admin_unreviewed": "Admin ({count} unbewertet)",
|
||||||
@@ -162,6 +163,7 @@
|
|||||||
"team_count_joined": "Keine Teams beigetreten, so wie du! | Ein Team ist beigetreten, du auch! | {count} Teams sind beigetreten, du auch!",
|
"team_count_joined": "Keine Teams beigetreten, so wie du! | Ein Team ist beigetreten, du auch! | {count} Teams sind beigetreten, du auch!",
|
||||||
"team_settings": "Team-Einstellungen",
|
"team_settings": "Team-Einstellungen",
|
||||||
"teams": "Teams",
|
"teams": "Teams",
|
||||||
|
"title": "Hunts",
|
||||||
"total_points": "Punktestand: {score}",
|
"total_points": "Punktestand: {score}",
|
||||||
"your_team": "Dein Team:"
|
"your_team": "Dein Team:"
|
||||||
},
|
},
|
||||||
|
|||||||
+3
-1
@@ -139,7 +139,8 @@
|
|||||||
"no_hunt_created": "No hunt created yet",
|
"no_hunt_created": "No hunt created yet",
|
||||||
"no_hunt_joined": "No hunt joined yet!",
|
"no_hunt_joined": "No hunt joined yet!",
|
||||||
"open_to_join": "Open to join hunts:",
|
"open_to_join": "Open to join hunts:",
|
||||||
"start": "Start: {start}"
|
"start": "Start: {start}",
|
||||||
|
"title": "Home"
|
||||||
},
|
},
|
||||||
"hunt": {
|
"hunt": {
|
||||||
"admin_unreviewed": "Admin ({count} unreviewed)",
|
"admin_unreviewed": "Admin ({count} unreviewed)",
|
||||||
@@ -162,6 +163,7 @@
|
|||||||
"team_count_joined": "No teams joined, just like you! | One team joined, just like you! | {count} teams joined, just like you!",
|
"team_count_joined": "No teams joined, just like you! | One team joined, just like you! | {count} teams joined, just like you!",
|
||||||
"team_settings": "Team settings",
|
"team_settings": "Team settings",
|
||||||
"teams": "Teams",
|
"teams": "Teams",
|
||||||
|
"title": "Hunts",
|
||||||
"total_points": "Total points: {score}",
|
"total_points": "Total points: {score}",
|
||||||
"your_team": "Your team:"
|
"your_team": "Your team:"
|
||||||
},
|
},
|
||||||
|
|||||||
+25
-13
@@ -58,11 +58,23 @@ const isHuntAdmin = computed(
|
|||||||
>
|
>
|
||||||
<VaSidebarItemContent>
|
<VaSidebarItemContent>
|
||||||
<VaIcon name="home" />
|
<VaIcon name="home" />
|
||||||
<VaSidebarItemTitle>Home</VaSidebarItemTitle>
|
<VaSidebarItemTitle>{{ t('page.home.title') }}</VaSidebarItemTitle>
|
||||||
|
</VaSidebarItemContent>
|
||||||
|
</VaSidebarItem>
|
||||||
|
<VaSidebarItem
|
||||||
|
:to="localePath('/hunt')"
|
||||||
|
:active="localePath('/hunt') === route.path"
|
||||||
|
>
|
||||||
|
<VaSidebarItemContent>
|
||||||
|
<VaIcon name="cases" />
|
||||||
|
<VaSidebarItemTitle>{{ t('page.hunt.title') }}</VaSidebarItemTitle>
|
||||||
</VaSidebarItemContent>
|
</VaSidebarItemContent>
|
||||||
</VaSidebarItem>
|
</VaSidebarItem>
|
||||||
<VaSidebarItem
|
<VaSidebarItem
|
||||||
v-if="user?.role === 'CREATOR' || user?.role === 'ADMIN'"
|
v-if="user?.role === 'CREATOR' || user?.role === 'ADMIN'"
|
||||||
|
text-color="success"
|
||||||
|
hover-color="success"
|
||||||
|
active-color="onSuccess"
|
||||||
:to="localePath('/admin/hunt/create')"
|
:to="localePath('/admin/hunt/create')"
|
||||||
:active="localePath('/admin/hunt/create') === route.path"
|
:active="localePath('/admin/hunt/create') === route.path"
|
||||||
>
|
>
|
||||||
@@ -73,24 +85,13 @@ const isHuntAdmin = computed(
|
|||||||
}}</VaSidebarItemTitle>
|
}}</VaSidebarItemTitle>
|
||||||
</VaSidebarItemContent>
|
</VaSidebarItemContent>
|
||||||
</VaSidebarItem>
|
</VaSidebarItem>
|
||||||
<VaSidebarItem
|
|
||||||
:to="localePath('/impressum')"
|
|
||||||
:active="localePath('/impressum') === route.path"
|
|
||||||
>
|
|
||||||
<VaSidebarItemContent>
|
|
||||||
<VaIcon name="balance" />
|
|
||||||
<VaSidebarItemTitle>{{
|
|
||||||
t('page.imprint.title')
|
|
||||||
}}</VaSidebarItemTitle>
|
|
||||||
</VaSidebarItemContent>
|
|
||||||
</VaSidebarItem>
|
|
||||||
<VaSidebarItem
|
<VaSidebarItem
|
||||||
v-if="slugs?.huntSlug"
|
v-if="slugs?.huntSlug"
|
||||||
:to="localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
|
:to="localePath(`/hunt/${sluggy(slugs.huntSlug)}`)"
|
||||||
:active="localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path"
|
:active="localePath(`/hunt/${sluggy(slugs.huntSlug)}`) === route.path"
|
||||||
>
|
>
|
||||||
<VaSidebarItemContent>
|
<VaSidebarItemContent>
|
||||||
<VaIcon name="camera_indoor" />
|
<VaIcon name="camera" />
|
||||||
<VaSidebarItemTitle>{{
|
<VaSidebarItemTitle>{{
|
||||||
slugs.huntSlug.name || 'Hunt'
|
slugs.huntSlug.name || 'Hunt'
|
||||||
}}</VaSidebarItemTitle>
|
}}</VaSidebarItemTitle>
|
||||||
@@ -168,6 +169,17 @@ const isHuntAdmin = computed(
|
|||||||
</VaSidebarItemContent>
|
</VaSidebarItemContent>
|
||||||
</VaSidebarItem>
|
</VaSidebarItem>
|
||||||
<VaSpacer />
|
<VaSpacer />
|
||||||
|
<VaSidebarItem
|
||||||
|
:to="localePath('/impressum')"
|
||||||
|
:active="localePath('/impressum') === route.path"
|
||||||
|
>
|
||||||
|
<VaSidebarItemContent>
|
||||||
|
<VaIcon name="balance" />
|
||||||
|
<VaSidebarItemTitle>{{
|
||||||
|
t('page.imprint.title')
|
||||||
|
}}</VaSidebarItemTitle>
|
||||||
|
</VaSidebarItemContent>
|
||||||
|
</VaSidebarItem>
|
||||||
<VaSidebarItem
|
<VaSidebarItem
|
||||||
v-if="user"
|
v-if="user"
|
||||||
:to="localePath('/profile')"
|
:to="localePath('/profile')"
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ definePageMeta({
|
|||||||
|
|
||||||
const app = useNuxtApp();
|
const app = useNuxtApp();
|
||||||
const { loggedIn } = useUserSession();
|
const { loggedIn } = useUserSession();
|
||||||
|
const validation = useValidation();
|
||||||
const localePath = useLocalePath();
|
const localePath = useLocalePath();
|
||||||
const { t, d } = useI18n();
|
const { t, d } = useI18n();
|
||||||
const { tKey, hasKey } = useI18nKey();
|
const { tKey, hasKey } = useI18nKey();
|
||||||
@@ -221,53 +222,89 @@ async function deleteImage() {
|
|||||||
>{{ t('page.common.back_to_hunt') }}</VaButton
|
>{{ t('page.common.back_to_hunt') }}</VaButton
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||||
<VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
|
<VaCard stripe stripe-color="success">
|
||||||
|
<VaCardTitle>Edit this Hunt</VaCardTitle>
|
||||||
|
<VaCardContent>
|
||||||
|
<VaForm
|
||||||
|
v-if="formData.cloned.value && data"
|
||||||
|
class="flex flex-col gap-4"
|
||||||
|
>
|
||||||
|
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
|
||||||
|
<h3 class="hidden text-center md:block">
|
||||||
|
{{ t('page.create_hunt.de') }}
|
||||||
|
</h3>
|
||||||
|
<h3 class="hidden text-center md:block">
|
||||||
|
{{ t('page.create_hunt.en') }}
|
||||||
|
</h3>
|
||||||
<VaInput
|
<VaInput
|
||||||
v-model="formData.cloned.value.name_de"
|
v-model="formData.cloned.value.name_de"
|
||||||
label="Name DE"
|
:label="t('page.create_hunt.name_de')"
|
||||||
|
:rules="[
|
||||||
|
validation.required(t('page.create_hunt.name_de')),
|
||||||
|
validation.max(t('page.create_hunt.name_de'), 256)
|
||||||
|
]"
|
||||||
|
counter
|
||||||
|
max-length="256"
|
||||||
clearable
|
clearable
|
||||||
:clear-value="data.name_de"
|
:clear-value="data.name_de"
|
||||||
clearable-icon="replay"
|
clearable-icon="replay"
|
||||||
/>
|
/>
|
||||||
<VaInput
|
<VaInput
|
||||||
v-model="formData.cloned.value.name_en"
|
v-model="formData.cloned.value.name_en"
|
||||||
label="Name EN"
|
:label="t('page.create_hunt.name_en')"
|
||||||
|
:rules="[
|
||||||
|
validation.required(t('page.create_hunt.name_en')),
|
||||||
|
validation.max(t('page.create_hunt.name_en'), 256)
|
||||||
|
]"
|
||||||
|
counter
|
||||||
|
max-length="256"
|
||||||
clearable
|
clearable
|
||||||
:clear-value="data.name_en"
|
:clear-value="data.name_en"
|
||||||
clearable-icon="replay"
|
clearable-icon="replay"
|
||||||
/>
|
/>
|
||||||
<VaTextarea
|
<VaTextarea
|
||||||
v-model="formData.cloned.value.description_de"
|
v-model="formData.cloned.value.description_de"
|
||||||
label="Description DE"
|
:label="t('page.create_hunt.description_de')"
|
||||||
|
max-length="1000"
|
||||||
|
counter
|
||||||
clearable
|
clearable
|
||||||
:clear-value="data.description_de"
|
:clear-value="data.description_de"
|
||||||
clearable-icon="replay"
|
clearable-icon="replay"
|
||||||
/>
|
/>
|
||||||
<VaTextarea
|
<VaTextarea
|
||||||
v-model="formData.cloned.value.description_en"
|
v-model="formData.cloned.value.description_en"
|
||||||
label="Description EN"
|
:label="t('page.create_hunt.description_en')"
|
||||||
|
max-length="1000"
|
||||||
|
counter
|
||||||
clearable
|
clearable
|
||||||
:clear-value="data.description_en"
|
:clear-value="data.description_en"
|
||||||
clearable-icon="replay"
|
clearable-icon="replay"
|
||||||
/>
|
/>
|
||||||
<VaCheckbox v-model="formData.cloned.value.virtual" label="Virtual" />
|
</div>
|
||||||
<VaCheckbox v-model="formData.cloned.value.public" label="Public" />
|
<VaCheckbox
|
||||||
|
v-model="formData.cloned.value.virtual"
|
||||||
|
:label="t('page.create_hunt.virtual')"
|
||||||
|
/>
|
||||||
|
<VaCheckbox
|
||||||
|
v-model="formData.cloned.value.public"
|
||||||
|
:label="t('page.create_hunt.public')"
|
||||||
|
/>
|
||||||
<VaCheckbox
|
<VaCheckbox
|
||||||
v-model="formData.cloned.value.allowJoin"
|
v-model="formData.cloned.value.allowJoin"
|
||||||
label="Allow Join"
|
:label="t('page.create_hunt.allow_join')"
|
||||||
/>
|
/>
|
||||||
<VaCheckbox
|
<VaCheckbox
|
||||||
v-model="formData.cloned.value.revealQuests"
|
v-model="formData.cloned.value.revealQuests"
|
||||||
label="Reveal Quests"
|
:label="t('page.create_hunt.reveal_quests')"
|
||||||
/>
|
/>
|
||||||
<VaCheckbox
|
<VaCheckbox
|
||||||
v-model="formData.cloned.value.revealAnswers"
|
v-model="formData.cloned.value.revealAnswers"
|
||||||
label="Reveal Answers"
|
:label="t('page.create_hunt.reveal_answers')"
|
||||||
/>
|
/>
|
||||||
<div class="flex flex-row gap-2">
|
<div class="date-holder">
|
||||||
<VaCheckbox
|
<VaCheckbox
|
||||||
label="Start?"
|
:label="t('page.create_hunt.has_start')"
|
||||||
:model-value="!!formData.cloned.value.start"
|
:model-value="!!formData.cloned.value.start"
|
||||||
@update:model-value="
|
@update:model-value="
|
||||||
(newVal: boolean) =>
|
(newVal: boolean) =>
|
||||||
@@ -277,20 +314,20 @@ async function deleteImage() {
|
|||||||
<VaDateInput
|
<VaDateInput
|
||||||
v-if="formData.cloned.value.start"
|
v-if="formData.cloned.value.start"
|
||||||
v-model="formData.cloned.value.start"
|
v-model="formData.cloned.value.start"
|
||||||
label="Start"
|
:label="t('page.create_hunt.start')"
|
||||||
manual-input
|
manual-input
|
||||||
/>
|
/>
|
||||||
<VaTimeInput
|
<VaTimeInput
|
||||||
v-if="formData.cloned.value.start"
|
v-if="formData.cloned.value.start"
|
||||||
v-model="formData.cloned.value.start"
|
v-model="formData.cloned.value.start"
|
||||||
label="Start"
|
:label="t('page.create_hunt.start')"
|
||||||
view="seconds"
|
view="seconds"
|
||||||
manual-input
|
manual-input
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row gap-2">
|
<div class="date-holder">
|
||||||
<VaCheckbox
|
<VaCheckbox
|
||||||
label="End?"
|
:label="t('page.create_hunt.has_end')"
|
||||||
:model-value="!!formData.cloned.value.end"
|
:model-value="!!formData.cloned.value.end"
|
||||||
@update:model-value="
|
@update:model-value="
|
||||||
(newVal: boolean) =>
|
(newVal: boolean) =>
|
||||||
@@ -300,17 +337,18 @@ async function deleteImage() {
|
|||||||
<VaDateInput
|
<VaDateInput
|
||||||
v-if="formData.cloned.value.end"
|
v-if="formData.cloned.value.end"
|
||||||
v-model="formData.cloned.value.end"
|
v-model="formData.cloned.value.end"
|
||||||
label="End"
|
:label="t('page.create_hunt.end')"
|
||||||
manual-input
|
manual-input
|
||||||
/>
|
/>
|
||||||
<VaTimeInput
|
<VaTimeInput
|
||||||
v-if="formData.cloned.value.end"
|
v-if="formData.cloned.value.end"
|
||||||
v-model="formData.cloned.value.end"
|
v-model="formData.cloned.value.end"
|
||||||
label="End"
|
:label="t('page.create_hunt.end')"
|
||||||
view="seconds"
|
view="seconds"
|
||||||
manual-input
|
manual-input
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<VaDivider />
|
||||||
<p>
|
<p>
|
||||||
Last update:
|
Last update:
|
||||||
{{ d(data.updatedAt, fullDate) }}
|
{{ d(data.updatedAt, fullDate) }}
|
||||||
@@ -334,7 +372,10 @@ async function deleteImage() {
|
|||||||
>
|
>
|
||||||
</VaButtonGroup>
|
</VaButtonGroup>
|
||||||
</VaForm>
|
</VaForm>
|
||||||
<VaDivider />
|
</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
|
<VaCard stripe stripe-color="success">
|
||||||
|
<VaCardContent>
|
||||||
<h2 class="text-2xl">Image</h2>
|
<h2 class="text-2xl">Image</h2>
|
||||||
<div>
|
<div>
|
||||||
<VaImage
|
<VaImage
|
||||||
@@ -366,7 +407,11 @@ async function deleteImage() {
|
|||||||
>{{ t(imageError) }}</VaAlert
|
>{{ t(imageError) }}</VaAlert
|
||||||
>
|
>
|
||||||
<VaButtonGroup :disabled="uploading || pending">
|
<VaButtonGroup :disabled="uploading || pending">
|
||||||
<VaButton color="success" :disabled="!newImage" @click="updateImage">
|
<VaButton
|
||||||
|
color="success"
|
||||||
|
:disabled="!newImage"
|
||||||
|
@click="updateImage"
|
||||||
|
>
|
||||||
Upload new image
|
Upload new image
|
||||||
</VaButton>
|
</VaButton>
|
||||||
<VaButton
|
<VaButton
|
||||||
@@ -378,15 +423,11 @@ async function deleteImage() {
|
|||||||
>
|
>
|
||||||
</VaButtonGroup>
|
</VaButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<VaDivider />
|
|
||||||
<AdminQuestList :hunt-id="id" />
|
|
||||||
|
|
||||||
<VaDivider />
|
<VaDivider />
|
||||||
<h2 class="text-2xl">Hunt admin members:</h2>
|
<h2 class="text-2xl">Hunt admin members:</h2>
|
||||||
<div
|
<div
|
||||||
v-if="data"
|
v-if="data"
|
||||||
class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-3 lg:grid-cols-5"
|
class="mt-8 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3"
|
||||||
>
|
>
|
||||||
<VaButton
|
<VaButton
|
||||||
v-for="member in data.members"
|
v-for="member in data.members"
|
||||||
@@ -395,7 +436,9 @@ async function deleteImage() {
|
|||||||
:disabled="loading"
|
:disabled="loading"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@click="kick(member)"
|
@click="kick(member)"
|
||||||
>Kick {{ member.member.name }} ({{ member.member.email }})</VaButton
|
>Kick {{ member.member.name }} ({{
|
||||||
|
member.member.email
|
||||||
|
}})</VaButton
|
||||||
>
|
>
|
||||||
<VaChip v-if="data.members.length <= 0">No members yet</VaChip>
|
<VaChip v-if="data.members.length <= 0">No members yet</VaChip>
|
||||||
</div>
|
</div>
|
||||||
@@ -420,8 +463,16 @@ async function deleteImage() {
|
|||||||
>Add admin</VaButton
|
>Add admin</VaButton
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</VaCardContent>
|
||||||
|
</VaCard>
|
||||||
|
|
||||||
|
<AdminQuestList :hunt-id="id" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
.date-holder {
|
||||||
|
@apply flex flex-col gap-2 sm:flex-row sm:items-center md:flex-col md:items-start lg:flex-row lg:items-center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -54,11 +54,14 @@ export type Team = Data['teams'][number];
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<h1>teams</h1>
|
<h1 class="mb-4 text-3xl">
|
||||||
|
Teams
|
||||||
<VaButton color="success" icon="replay" @click="refresh"
|
<VaButton color="success" icon="replay" @click="refresh"
|
||||||
>Refresh</VaButton
|
>Refresh</VaButton
|
||||||
>
|
>
|
||||||
<VaAccordion v-if="data" stateful>
|
</h1>
|
||||||
|
|
||||||
|
<VaAccordion v-if="data" stateful inset>
|
||||||
<Team
|
<Team
|
||||||
v-for="team in data.teams"
|
v-for="team in data.teams"
|
||||||
:key="team.id"
|
:key="team.id"
|
||||||
@@ -70,5 +73,3 @@ export type Team = Data['teams'][number];
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<HuntList />
|
||||||
|
</template>
|
||||||
+6
-132
@@ -1,18 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useI18nKey } from '~/composables/useI18nKey';
|
|
||||||
import { fullDate } from '~~/server/utils/date';
|
|
||||||
|
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
layout: 'landing'
|
layout: 'landing'
|
||||||
});
|
});
|
||||||
|
|
||||||
const { loggedIn } = useUserSession();
|
const { t } = useI18n();
|
||||||
const { data, pending, refresh } = await useFetch('/api/home');
|
|
||||||
const { t, d } = useI18n();
|
|
||||||
const localePath = useLocalePath();
|
const localePath = useLocalePath();
|
||||||
const { tKey, tSluggy } = useI18nKey();
|
|
||||||
watch(loggedIn, () => refresh());
|
|
||||||
|
|
||||||
const steps = [
|
const steps = [
|
||||||
{ icon: 'login', key: 'step_register' },
|
{ icon: 'login', key: 'step_register' },
|
||||||
{ icon: 'groups', key: 'step_team' },
|
{ icon: 'groups', key: 'step_team' },
|
||||||
@@ -48,6 +40,8 @@ useHead({
|
|||||||
{{ t('page.landing.hero_subtitle') }}
|
{{ t('page.landing.hero_subtitle') }}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-wrap justify-center gap-4">
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
|
<AuthState>
|
||||||
|
<template #default="{ loggedIn }">
|
||||||
<VaButton
|
<VaButton
|
||||||
v-if="!loggedIn"
|
v-if="!loggedIn"
|
||||||
size="large"
|
size="large"
|
||||||
@@ -56,6 +50,8 @@ useHead({
|
|||||||
>
|
>
|
||||||
{{ t('page.landing.get_started') }}
|
{{ t('page.landing.get_started') }}
|
||||||
</VaButton>
|
</VaButton>
|
||||||
|
</template>
|
||||||
|
</AuthState>
|
||||||
<VaButton
|
<VaButton
|
||||||
size="large"
|
size="large"
|
||||||
preset="secondary"
|
preset="secondary"
|
||||||
@@ -99,129 +95,7 @@ useHead({
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="bg-background-element px-4 py-16">
|
<section class="bg-background-element px-4 py-16">
|
||||||
<div class="mx-auto max-w-6xl">
|
<HuntList />
|
||||||
<VaButton
|
|
||||||
icon="refresh"
|
|
||||||
:disabled="pending"
|
|
||||||
class="mb-6"
|
|
||||||
@click="refresh"
|
|
||||||
>{{ t('layouts.refresh') }}</VaButton
|
|
||||||
>
|
|
||||||
|
|
||||||
<div v-if="data">
|
|
||||||
<div v-if="data.own !== null">
|
|
||||||
<h2 class="mb-6 text-2xl font-bold">
|
|
||||||
{{ t('page.home.joined_hunts') }}
|
|
||||||
</h2>
|
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
||||||
<VaCard
|
|
||||||
v-for="hunt in data.own"
|
|
||||||
:key="hunt.id"
|
|
||||||
stripe
|
|
||||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
|
||||||
>
|
|
||||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
|
||||||
|
|
||||||
<ClickableImage
|
|
||||||
v-if="hunt.picture"
|
|
||||||
:src="hunt.picture?.url"
|
|
||||||
:title="tKey(hunt, 'name').value"
|
|
||||||
/>
|
|
||||||
<VaCardContent>
|
|
||||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
|
||||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
|
||||||
<VaDivider />
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
|
||||||
<p v-if="hunt.start">
|
|
||||||
{{
|
|
||||||
t('page.home.start', {
|
|
||||||
start: d(hunt.start, fullDate)
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
<p v-if="hunt.end">
|
|
||||||
{{
|
|
||||||
t('page.home.end', {
|
|
||||||
start: d(hunt.end, fullDate)
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</VaCardContent>
|
|
||||||
</VaCard>
|
|
||||||
<VaCard v-if="data.own.length <= 0">
|
|
||||||
<VaCardTitle>{{ t('page.home.no_hunt_joined') }}</VaCardTitle>
|
|
||||||
<VaCardContent>{{
|
|
||||||
t('page.home.click_hunt_below_to_join')
|
|
||||||
}}</VaCardContent>
|
|
||||||
</VaCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-center">
|
|
||||||
<p class="text-secondary mb-4">
|
|
||||||
{{ t('page.landing.login_to_see_hunts') }}
|
|
||||||
</p>
|
|
||||||
<VaButton color="info" icon="login" :to="localePath(`/login`)">{{
|
|
||||||
t('page.home.login_first')
|
|
||||||
}}</VaButton>
|
|
||||||
</div>
|
|
||||||
<div class="mt-12">
|
|
||||||
<VaDivider />
|
|
||||||
<h2 class="mb-6 mt-8 text-2xl font-bold">
|
|
||||||
{{ t('page.home.open_to_join') }}
|
|
||||||
</h2>
|
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
||||||
<VaCard
|
|
||||||
v-for="hunt in data.others"
|
|
||||||
:key="hunt.id"
|
|
||||||
:to="localePath(`/hunt/${tSluggy(hunt).value}`)"
|
|
||||||
>
|
|
||||||
<VaCardTitle>{{ tKey(hunt, 'name') }}</VaCardTitle>
|
|
||||||
<ClickableImage
|
|
||||||
v-if="hunt.picture"
|
|
||||||
:src="hunt.picture?.url"
|
|
||||||
:title="tKey(hunt, 'name').value"
|
|
||||||
/>
|
|
||||||
<VaCardContent>
|
|
||||||
<h3 class="text-xl">{{ tKey(hunt, 'name') }}</h3>
|
|
||||||
<p class="line-clamp-4">{{ tKey(hunt, 'description') }}</p>
|
|
||||||
<VaDivider />
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<p>{{ t('page.home.n_quests', hunt._count.quests) }}</p>
|
|
||||||
<p v-if="hunt.start">
|
|
||||||
{{
|
|
||||||
t('page.home.start', {
|
|
||||||
start: d(hunt.start, fullDate)
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
<p v-if="hunt.end">
|
|
||||||
{{
|
|
||||||
t('page.home.end', {
|
|
||||||
start: d(hunt.end, fullDate)
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{{ t('page.home.n_teams_joined', hunt._count.teams) }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</VaCardContent>
|
|
||||||
</VaCard>
|
|
||||||
<VaCard v-if="data.others.length <= 0">
|
|
||||||
<VaCardTitle>{{ t('page.home.no_hunt_created') }}</VaCardTitle>
|
|
||||||
<VaCardContent>{{
|
|
||||||
t('page.home.new_hunts_soon')
|
|
||||||
}}</VaCardContent>
|
|
||||||
</VaCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer class="px-4 py-8 text-center">
|
<footer class="px-4 py-8 text-center">
|
||||||
|
|||||||
@@ -6,6 +6,11 @@ export default defineNuxtConfig({
|
|||||||
app: {
|
app: {
|
||||||
keepalive: true
|
keepalive: true
|
||||||
},
|
},
|
||||||
|
vite: {
|
||||||
|
optimizeDeps: {
|
||||||
|
holdUntilCrawlEnd: true
|
||||||
|
}
|
||||||
|
},
|
||||||
modules: [
|
modules: [
|
||||||
'@nuxt/devtools',
|
'@nuxt/devtools',
|
||||||
'nuxt-auth-utils',
|
'nuxt-auth-utils',
|
||||||
|
|||||||
Reference in New Issue
Block a user