Lepsi verejna cast, ssr, lepsi prace s fotkamaa

2023-12-04 22:46:23 +01:00
parent 11cc6ad107
commit 3bd4d7ba52
62 changed files with 1331 additions and 619 deletions
@@ -0,0 +1,64 @@
+<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>