135 lines
4.4 KiB
Vue
135 lines
4.4 KiB
Vue
<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>
|