Vylepseni SSR, pridani meta informaci, zatim dost WIP

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -1,29 +1,45 @@
+<script>
+import {useFlightsStore} from "stores/Flights";
+
+export default {
+  preFetch({currentRoute}) {
+    return useFlightsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username)
+  }
+}
+</script>
 <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}
-    ]);
-  })
-})
+import {useRoute} from "vue-router";
+import {useUserStore} from "stores/User";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
+const routeParams = useRoute().params;
+
+const pilot = storeToRefs(useUserStore()).publicUser;
+
+const flightNameFormatted = flightName(flight.value);
+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}
+]);
+
+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
+  }
+))
 </script>
 
 <template>
@@ -38,14 +54,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
       <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 class="text-h5">{{ flightName(flight) }}</div>
           </div>
         </q-img>
 
         <q-card-section>
           <FlightBasicInfo
-              :flight="flight"
-              :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
+            :flight="flight"
+            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
           />
 
           <article class="q-my-lg" v-html="flight.description"/>
@@ -55,8 +71,6 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
           <FlightTrackMap :flight="flight"/>
         </q-card-section>
       </q-card>
-
-
     </template>
   </div>
 </template>