123 lines
3.7 KiB
Vue
123 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
const { loggedIn } = useUserSession();
|
|
const { data, pending, refresh } = await useFetch('/api/home');
|
|
|
|
watch(loggedIn, () => refresh());
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
|
|
<VaButton icon="refresh" @click="refresh" :disabled="pending">{{
|
|
$t('layouts.refresh')
|
|
}}</VaButton>
|
|
|
|
<div v-if="data">
|
|
<div v-if="data.own !== null">
|
|
<h2 class="my-4 text-2xl font-bold">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/${sluggy(hunt)}`)"
|
|
>
|
|
<VaCardTitle>{{ hunt.name }}</VaCardTitle>
|
|
|
|
<ClickableImage
|
|
v-if="hunt.picture"
|
|
:src="hunt.picture?.url"
|
|
:title="hunt.name"
|
|
/>
|
|
<VaCardContent>
|
|
<h3 class="text-xl">{{ hunt.name }}</h3>
|
|
{{ hunt.description }}
|
|
<VaDivider />
|
|
<div class="flex flex-col gap-2">
|
|
<p>{{ hunt._count.quests }} Quests</p>
|
|
<p v-if="hunt.start">
|
|
Start:
|
|
{{
|
|
$d(hunt.start, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium'
|
|
})
|
|
}}
|
|
</p>
|
|
<p v-if="hunt.end">
|
|
End:
|
|
{{
|
|
$d(hunt.end, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium'
|
|
})
|
|
}}
|
|
</p>
|
|
<p>{{ hunt._count.teams }} teams joined!</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard v-if="data.own.length <= 0">
|
|
<VaCardTitle>No hunt joined yet</VaCardTitle>
|
|
<VaCardContent>Click on a hunt below and join them!</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<VaButton color="info" icon="login" :to="$localePath(`/login`)"
|
|
>Login first</VaButton
|
|
>
|
|
</div>
|
|
<div class="mt-8">
|
|
<VaDivider />
|
|
<h2 class="my-4 text-2xl font-bold">Open to join hunts:</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/${sluggy(hunt)}`)"
|
|
>
|
|
<VaCardTitle>{{ hunt.name }}</VaCardTitle>
|
|
<ClickableImage
|
|
v-if="hunt.picture"
|
|
:src="hunt.picture?.url"
|
|
:title="hunt.name"
|
|
/>
|
|
<VaCardContent>
|
|
<h3 class="text-xl">{{ hunt.name }}</h3>
|
|
{{ hunt.description }}
|
|
<VaDivider />
|
|
<div class="flex flex-col gap-2">
|
|
<p>{{ hunt._count.quests }} Quests</p>
|
|
<p v-if="hunt.start">
|
|
Start:
|
|
{{
|
|
$d(hunt.start, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium'
|
|
})
|
|
}}
|
|
</p>
|
|
<p v-if="hunt.end">
|
|
End:
|
|
{{
|
|
$d(hunt.end, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'medium'
|
|
})
|
|
}}
|
|
</p>
|
|
<p>{{ hunt._count.teams }} teams joined!</p>
|
|
</div>
|
|
</VaCardContent>
|
|
</VaCard>
|
|
<VaCard v-if="data.others.length <= 0">
|
|
<VaCardTitle>No hunt created yet</VaCardTitle>
|
|
<VaCardContent>New hunts will appear soon!</VaCardContent>
|
|
</VaCard>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|