78 lines
2.9 KiB
Vue
78 lines
2.9 KiB
Vue
<script>
|
|
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
|
|
|
export default {
|
|
preFetch({currentRoute}) {
|
|
return usePointsOfInterestStore().fetchPublicDetail(currentRoute.params.id);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script setup>
|
|
import {storeToRefs} from "pinia";
|
|
import {usePhotosStore} from "stores/Photos";
|
|
import ContentCard from "components/ContentCard.vue";
|
|
import PhotoGallery from "components/photos/PhotoGallery.vue";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import EmbeddedMap from "components/map/EmbeddedMap.vue";
|
|
import FlightsList from "components/flights/FlightsList.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import {useMeta} from "quasar";
|
|
import {metaData} from "src/composables/meta";
|
|
import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
|
|
import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
|
|
import {onMounted} from "vue";
|
|
import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
|
|
|
|
const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
|
|
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
|
|
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
|
|
|
|
useAppStore().setPageTitle(pointOfInterest.value.name);
|
|
useMeta(() => metaData({
|
|
title: pointOfInterest.value.name,
|
|
image: pointOfInterest.value.titlePhoto?.url,
|
|
description: pointOfInterest.value.description,
|
|
}));
|
|
useAppStore().setBreadcrumbs([
|
|
{to: {name: 'homepage'}, label: "Polétání.cz"},
|
|
{to: {name: 'publicPOIs'}, label: "Místa"},
|
|
{label: pointOfInterest.value.name}
|
|
]);
|
|
|
|
onMounted(() => {
|
|
usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
|
|
useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-spinner v-if="isQueryRunning || !pointOfInterest"/>
|
|
<ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name" v-else>
|
|
<template #content>
|
|
<q-card-section>
|
|
<article v-html="pointOfInterest.description" class="q-my-lg"/>
|
|
|
|
<EmbeddedMap
|
|
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
|
|
:gps-latitude="pointOfInterest.gpsLatitude"
|
|
:gps-longitude="pointOfInterest.gpsLongitude"
|
|
:zoom="13"
|
|
/>
|
|
|
|
<PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest" />
|
|
<PhotoGallery :photos="photos" class="q-my-lg" v-else />
|
|
|
|
<h3>Lety na místo {{ pointOfInterest.name }}</h3>
|
|
|
|
<FlightsListSkeleton v-if="areFlightsLoading && flights.length"/>
|
|
<BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
|
|
Zdá se, že na toto místo ještě nikdo neletěl. Zatím tu nejsou ještě žádné lety.
|
|
</BasicInfoBanner>
|
|
<FlightsList v-else :items="flights" :public="true"/>
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</template>
|