Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -2,8 +2,8 @@
 import {useFlightsStore} from "stores/Flights";
 
 export default {
-  preFetch({currentRoute}) {
-    return useFlightsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username)
+  preFetch({store, currentRoute}) {
+    return useFlightsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username)
   }
 }
 </script>
@@ -19,12 +19,18 @@ import {useRoute} from "vue-router";
 import {useUserStore} from "stores/User";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
+import ContentCard from "components/ContentCard.vue";
+import {usePhotosStore} from "stores/Photos";
+import {onMounted} from "vue";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 const routeParams = useRoute().params;
 
 const pilot = storeToRefs(useUserStore()).publicUser;
 
+usePhotosStore().fetchPublic({flightId: flight.value.id});
+const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
+
 const flightNameFormatted = flightName(flight.value);
 useAppStore().setPageTitle(flightNameFormatted);
 useAppStore().setBreadcrumbs([
@@ -37,40 +43,35 @@ useMeta(() => metaData({
     title: `${flightNameFormatted} - ${pilot.value.name}`,
     keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
     description: flight.description,
-    image: flight.coverPhoto?.url
+    image: flight.titlePhoto?.url
   }
-))
+));
 </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>
-
+    <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: routeParams.username}}"
           />
 
           <article class="q-my-lg" v-html="flight.description"/>
 
-          <PhotoGallery :photos="flight.photos"/>
+          <q-no-ssr>
+            <q-inner-loading v-if="arePhotosLoading"/>
+            <PhotoGallery :photos="flightPhotos" v-else/>
+          </q-no-ssr>
 
-          <FlightTrackMap :flight="flight"/>
+          <FlightTrackMap :flight="flight" :photos="flightPhotos"/>
         </q-card-section>
-      </q-card>
-    </template>
+      </template>
+    </ContentCard>
   </div>
 </template>