75 lines
2.5 KiB
Vue
75 lines
2.5 KiB
Vue
<script setup>
|
|
import {onMounted, watch} from "vue";
|
|
import {event, fetchEvent, loading} from "src/composables/objects/event";
|
|
import {useRoute} from "vue-router";
|
|
import {useAppStore} from "stores/App";
|
|
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
|
|
import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
|
|
import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
|
|
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
|
|
import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
|
|
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
|
|
import FAB from "components/FAB.vue";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
|
|
const routeParams = useRoute().params;
|
|
onMounted(() => {
|
|
fetchEvent(routeParams.id, routeParams.username);
|
|
fetchUser(routeParams.username)
|
|
})
|
|
|
|
watch(event, (newVal) => {
|
|
// const eventNameFormatted = eventName(newVal);
|
|
useAppStore().setPageTitle(newVal.name);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: 'homepage'}, label: "Polétání.cz"},
|
|
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
|
|
{to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
|
|
{label: newVal.name}
|
|
]);
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<EventDetailSkeleton v-if="loading || !event"/>
|
|
|
|
|
|
<template v-else>
|
|
<q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
|
|
Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
|
|
</q-banner>
|
|
|
|
|
|
<q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
|
|
<q-item>
|
|
<q-item-section>
|
|
Od: {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
Do: {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<article v-html="event.description"/>
|
|
<h3>Lety</h3>
|
|
|
|
<q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
|
|
Zatím tu nemáš uložené žádné lety.
|
|
</q-banner>
|
|
|
|
<FlightsList
|
|
v-else
|
|
:items="event.flights"
|
|
:route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
|
|
/>
|
|
|
|
</template>
|
|
</div>
|
|
</template>
|