65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script>
|
|
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
|
|
|
|
export default {
|
|
preFetch({currentRoute, store}) {
|
|
return usePointsOfInterestStore(store).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";
|
|
|
|
const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
|
|
const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
|
|
const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
|
|
|
|
usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
|
|
useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
|
|
|
|
useAppStore().setPageTitle(pointOfInterest.value.name);
|
|
useMeta(() => metaData({
|
|
title: pointOfInterest.value.name,
|
|
image: pointOfInterest.value.titlePhoto.url,
|
|
description: pointOfInterest.value.description,
|
|
}))
|
|
|
|
</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"/>
|
|
|
|
<EmbeddedMap
|
|
v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
|
|
:gps-latitude="pointOfInterest.gpsLatitude"
|
|
:gps-longitude="pointOfInterest.gpsLongitude"
|
|
:zoom="13"
|
|
/>
|
|
|
|
<PhotoGallery :photos="photos"/>
|
|
|
|
|
|
<h3>Lety</h3>
|
|
|
|
<FlightsList :public="true" :items="flights" />
|
|
</q-card-section>
|
|
</template>
|
|
</ContentCard>
|
|
</template>
|