82 lines
2.7 KiB
Vue
82 lines
2.7 KiB
Vue
<script>
|
|
import {useFlightsStore} from "stores/Flights";
|
|
|
|
export default {
|
|
preFetch({store, currentRoute}) {
|
|
return useFlightsStore(store).fetchPublicDetail({
|
|
urlSlug: currentRoute.params.flightSlug,
|
|
username: 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/skeletons/FlightDetailSkeleton.vue";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
import {storeToRefs} from "pinia";
|
|
import {flightName} from "src/composables/flight";
|
|
import {useMeta} from "quasar";
|
|
import {metaData} from "src/composables/meta";
|
|
import ContentCard from "components/ContentCard.vue";
|
|
import {usePhotosStore} from "stores/Photos";
|
|
|
|
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
|
|
|
|
const props = defineProps({
|
|
pilot: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
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: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
|
|
{label: flightNameFormatted}
|
|
]);
|
|
|
|
useMeta(() => metaData({
|
|
title: `${flightNameFormatted} - ${props.pilot.name}`,
|
|
keywords: ["let", "výlet", "letadlo", props.pilot.name, flight.value.aircraft.callSign],
|
|
description: flight.value.description,
|
|
image: flight.value.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: pilot.publicUsername}}"
|
|
/>
|
|
|
|
<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 :key="flight.id" :flight="flight" :photos="flightPhotos"/>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</div>
|
|
</template>
|