63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<script setup>
|
|
import {onMounted, watch} from "vue";
|
|
import {useRoute} from "vue-router";
|
|
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 {useFlightsStore} from "stores/Flights";
|
|
import {flightName} from "src/composables/flight";
|
|
|
|
const routeParams = useRoute().params;
|
|
onMounted(() => {
|
|
useFlightsStore().fetchDetail(routeParams.id, routeParams.username).then(f => {
|
|
const flightNameFormatted = flightName(f);
|
|
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}
|
|
]);
|
|
})
|
|
})
|
|
|
|
const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
|
|
|
|
<template v-else>
|
|
<q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
|
|
Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
|
|
</q-banner>
|
|
|
|
<q-card class="q-mx-md q-my-md flight-detail-card">
|
|
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
|
|
<div class="absolute-bottom custom-caption">
|
|
<div class="text-h5"> {{ flightName(flight) }}</div>
|
|
</div>
|
|
</q-img>
|
|
|
|
<q-card-section>
|
|
<FlightBasicInfo
|
|
:flight="flight"
|
|
:copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
|
|
/>
|
|
|
|
<article class="q-my-lg" v-html="flight.description"/>
|
|
|
|
<PhotoGallery :photos="flight.photos"/>
|
|
|
|
<FlightTrackMap :flight="flight"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
|
|
</template>
|
|
</div>
|
|
</template>
|