78 lines
2.7 KiB
Vue
78 lines
2.7 KiB
Vue
<script>
|
|
import {useFlightsStore} from "stores/Flights";
|
|
|
|
export default {
|
|
preFetch({store, currentRoute}) {
|
|
return useFlightsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username)
|
|
}
|
|
}
|
|
</script>
|
|
<script setup>
|
|
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
|
|
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {flightName} from "src/composables/flight";
|
|
import {useRoute} from "vue-router";
|
|
import {useUserStore} from "stores/User";
|
|
import {useMeta} from "quasar";
|
|
import {metaData} from "src/composables/meta";
|
|
import ContentCard from "components/ContentCard.vue";
|
|
import {usePhotosStore} from "stores/Photos";
|
|
import {onMounted} from "vue";
|
|
|
|
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
|
|
const routeParams = useRoute().params;
|
|
|
|
const pilot = storeToRefs(useUserStore()).publicUser;
|
|
|
|
usePhotosStore().fetchPublic({flightId: flight.value.id});
|
|
const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
|
|
|
|
const flightNameFormatted = flightName(flight.value);
|
|
useAppStore().setPageTitle(flightNameFormatted);
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: 'homepage'}, label: "Polétání.cz"},
|
|
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
|
|
{label: flightNameFormatted}
|
|
]);
|
|
|
|
useMeta(() => metaData({
|
|
title: `${flightNameFormatted} - ${pilot.value.name}`,
|
|
keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
|
|
description: flight.description,
|
|
image: flight.titlePhoto?.url
|
|
}
|
|
));
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
|
|
|
|
<ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
|
|
<template #content>
|
|
<q-card-section>
|
|
<FlightBasicInfo
|
|
:flight="flight"
|
|
:poi-detail-route="{name: 'publicPOIDetail'}"
|
|
:aircraft-detail-route="flight.aircraft.isPublic ? {name: 'publicAircraftDetail'} : null"
|
|
:copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
|
|
/>
|
|
|
|
<article class="q-my-lg" v-html="flight.description"/>
|
|
|
|
<q-no-ssr>
|
|
<q-inner-loading v-if="arePhotosLoading"/>
|
|
<PhotoGallery :photos="flightPhotos" v-else/>
|
|
</q-no-ssr>
|
|
|
|
<FlightTrackMap :flight="flight" :photos="flightPhotos"/>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</div>
|
|
</template>
|