Vylepseni SSR, pridani meta informaci, zatim dost WIP

src/pages/profile/flight/FlightsPage.vue

@@ -8,14 +8,16 @@ import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
 const $q = useQuasar();
 
-useAppStore().setPageTitle("Moje lety")
-onMounted(() => {
-  useFlightsStore().fetch();
-})
+useMeta(() => metaData({
+  title: "Moje lety"
+}));
 
+useFlightsStore().fetch();
 const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 

src/pages/public/IndexPage.vue

@@ -1,8 +1,15 @@
 <script setup>
-</script>
+import {useMeta} from "quasar";
+import {commonKeywords, metaData} from "src/composables/meta";
 
+useMeta(() => metaData({
+  title: "",
+  description: "Polétání.cz je aplikace na ukládání a sdílení fotografií a tras z vyhlídkových letů.",
+  keywords: [...commonKeywords]
+}));
+</script>
 <template>
-  <q-layout view="lHh Lpr lFf" style="background: url('hp/bg.jpg'); background-size: cover;">
+  <q-layout view="lHh Lpr lFf" data-style="background: url('hp/bg.jpg'); background-size: cover;">
 
     <q-header class="bg-semi-transparent text-black" elevated>
       <q-toolbar>
@@ -24,7 +31,7 @@
 
           <div class="col col-md-6">
             <div class="info-box bg-semi-transparent q-mx-lg  q-py-lg q-px-lg rounded-borders">
-              <div class="text-h3 text-center">Pochlub se polétáním</div>
+              <div class="text-h3 text-center">Fotogalerie ze vzduchu</div>
 
               <q-timeline color="primary" class="q-my-lg">
                 <q-timeline-entry title="Zaznamenej si let">
@@ -60,7 +67,7 @@
               </q-timeline>
 
               <div class="text-center q-my-lg">
-                <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
+                <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit účet</q-btn>
               </div>
             </div>
           </div>

src/pages/public/PilotProfilePage.vue

@@ -1,28 +1,28 @@
-<script setup>
-import {useRoute} from "vue-router";
-import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
-import {storeToRefs} from "pinia";
+<script>
 import {useUserStore} from "stores/User";
-import PilotProfileCard from "components/profile/PilotProfileCard.vue";
-import {onMounted} from "vue";
 
-const loggedUser = storeToRefs(useUserStore()).user;
-const username = useRoute().params.username;
+export default {
+  preFetch({currentRoute}) {
+    return useUserStore().fetchPublicUserDetail(currentRoute.params.username);
+  },
+}
+</script>
+
+<script setup>
+import {storeToRefs} from "pinia";
+import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 
 const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
-
-onMounted(() => {
-  useUserStore().fetchPublicUserDetail(username);
-})
 </script>
 
 <template>
   <div class="row">
     <div class="col-12 col-md-8">
-      <router-view :logged-user="loggedUser" :username="username"/>
+      <router-view :pilot="pilot"/>
     </div>
     <div class="col-12 col-md-4">
-      <PublicProfileSkeleton v-if="pilotLoading || !pilot"/>
+      <PublicProfileSkeleton v-if="pilotLoading && !pilot"/>
       <PilotProfileCard v-else :pilot="pilot"/>
     </div>
   </div>

src/pages/public/TestPage.vue

@@ -1,15 +0,0 @@
-<script setup>
-import {useAircraftsStore} from "stores/Aircrafts";
-import {onMounted} from "vue";
-import {storeToRefs} from "pinia";
-
-const {aircraft, isQueryRunning, aircrafts} = storeToRefs(useAircraftsStore());
-onMounted(() => {
-  useAircraftsStore().fetch();
-});
-</script>
-<template>
-
-  <q-spinner v-if="isQueryRunning" />
-  letadlo: {{ aircrafts }}
-</template>

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -1,55 +1,45 @@
+<script>
+import {useCopilotsStore} from "stores/Copilots";
+
+export default {
+  preFetch({currentRoute}) {
+    return useCopilotsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+  }
+}
+</script>
+
 <script setup>
-import {useRoute} from "vue-router";
-import {onMounted} from "vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import {useUserStore} from "stores/User";
-import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
 
-const $route = useRoute();
-const copilotId = parseInt($route.params.id);
-
 const props = defineProps({
-  loggedUser: {
+  pilot: {
     type: Object,
     required: false
   },
-
-  username: {
-    type: String,
-    required: true
-  }
 });
 
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
-const {publicUser, isQueryRunning: isPilotQueryRunning} = storeToRefs(useUserStore());
 
-onMounted(() => {
-  Promise.all([
-    useUserStore().fetchPublicUserDetail(props.username),
-    useCopilotsStore().fetchDetail(copilotId, props.username)
-  ]).then(() => {
-    useAppStore().setPageTitle(`${publicUser.value.name} + ${copilot.value.name}`);
-    useAppStore().setBreadcrumbs([
-      {to: {name: 'homepage'}, label: "Polétání.cz"},
-      {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-      {label: publicUser.value.name}
-    ]);
-  });
-});
+useAppStore().setPageTitle(`${pilot.name} + ${copilot.value.name}`);
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
+  {label: props.pilot.name}
+]);
 
 </script>
 
 <template>
-  <BasicListSkeleton v-if="isQueryRunning || isPilotQueryRunning || !copilot" class="q-mb-md"/>
+  <BasicListSkeleton v-if="isQueryRunning || !copilot" class="q-mb-md"/>
 
   <template v-else>
     <h3>Společné lety</h3>
     <FlightsList
       :items="copilot.flights"
-      :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+      :route-detail="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}"
       class="q-mb-md"
     />
   </template>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -1,19 +1,23 @@
+<script>
+import {useEventsStore} from "stores/Events";
+
+export default {
+  preFetch({currentRoute}) {
+    return useEventsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+  }
+}
+</script>
+
 <script setup>
-import {onMounted, watch} from "vue";
+import {watch} from "vue";
 import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
 import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import FlightsList from "components/flights/FlightsList.vue";
-import {useEventsStore} from "stores/Events";
-import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 
 const routeParams = useRoute().params;
-onMounted(() => {
-  useEventsStore().fetchDetail(routeParams.id, routeParams.username);
-  useUserStore().fetchPublicUserDetail(routeParams.username);
-})
 
 const {isQueryRunning, event} = storeToRefs(useEventsStore());
 
@@ -26,7 +30,6 @@ watch(() => event.value, (newVal) => {
     {label: newVal.name}
   ]);
 });
-
 </script>
 
 <template>

src/pages/public/pilotProfile/EventsListPage.vue

@@ -1,43 +1,39 @@
 <script setup>
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import EventsList from "components/event/EventsList.vue";
-import {onMounted, watch} from "vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
 import {useAppStore} from "stores/App";
 import {useEventsStore} from "stores/Events";
 import {storeToRefs} from "pinia";
+import {useMeta} from "quasar";
+import {commonKeywords, metaData} from "src/composables/meta";
 
 const props = defineProps({
-  loggedUser: {
+  pilot: {
     type: Object,
-    required: false
-  },
-  username: {
-    type: String,
     required: true
   }
 });
 
-watch(() => props.username, () => {
-}, {immediate: true});
+useMeta(() => metaData({
+  title: `${props.pilot.publicUsername} - Události`,
+  keywords: [...commonKeywords, "pilot"],
+  description: "Detail pilota na poletani.cz",
+}));
 
-onMounted(() => {
-    // const eventNameFormatted = eventName(newVal);
-    useAppStore().setPageTitle(`${props.username}`);
-    useAppStore().setBreadcrumbs([
-      {to: {name: 'homepage'}, label: "Polétání.cz"},
-      {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-      {label: "Události"}
-    ]);
-    useEventsStore().fetch(props.username);
-  }
-);
+useAppStore().setPageTitle(`${props.pilot.publicUsername}`);
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {label: "Události"}
+]);
 
+useEventsStore().fetch(props.pilot.publicUsername);
 const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
-  <PublicFlightEventSwitcher :username="username"/>
+  <PublicFlightEventSwitcher :username="pilot.publicUsername"/>
 
   <FlightsListSkeleton v-if="isQueryRunning"/>
 
@@ -48,7 +44,7 @@ const {isQueryRunning, events} = storeToRefs(useEventsStore());
   <template v-else>
     <EventsList
       :items="events"
-      :route-detail="{name: 'publicEventDetail', params: {username: username}}"
+      :route-detail="{name: 'publicEventDetail', params: {username: pilot.publicUsername}}"
       class="q-mb-md"
     />
   </template>

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>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -2,42 +2,40 @@
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import PublicFlightEventSwitcher from "components/navigation/PublicFlightEventSwitcher.vue";
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
-import {useUserStore} from "stores/User";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
+import {commonKeywords, metaData} from "src/composables/meta";
+import {useMeta} from "quasar";
+import {useUserStore} from "stores/User";
 
 const props = defineProps({
-  loggedUser: {
+  pilot: {
     type: Object,
-    required: false
-  },
-
-  username: {
-    type: String,
-    required: true
+    required: true,
   }
 });
 
-onMounted(() => {
-  useUserStore().fetchPublicUserDetail(props.username).then(user => {
-    useAppStore().setPageTitle(user.publicUsername);
-    useAppStore().setBreadcrumbs([
-      {to: {name: 'homepage'}, label: "Polétání.cz"},
-      {label: `@${user.publicUsername}`},
-    ])
-  })
+useMeta(() => metaData({
+  title: `${props.pilot.publicUsername} - Lety`,
+  keywords: [...commonKeywords, "pilot", props.pilot.publicUsername, props.pilot.name],
+  description: `Výlety publikované pilotem ${props.pilot.name}. ${props.pilot.publicUsername}: ${props.pilot.description}`,
+  image: props.pilot.titleImageUrl
+}));
 
-  useFlightsStore().fetch(props.username);
-});
+useAppStore().setPageTitle(props.pilot.publicUsername);
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: `@${props.pilot.publicUsername}`},
+])
 
+useFlightsStore().fetch(props.pilot.publicUsername);
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
-const {publicUser: pilot} = storeToRefs(useUserStore());
+const loggedUser = storeToRefs(useUserStore()).user;
 </script>
 
 <template>
-  <PublicFlightEventSwitcher :username="username" />
+  <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
   <FlightsListSkeleton v-if="areFlightsLoading"/>
 
@@ -48,8 +46,8 @@ const {publicUser: pilot} = storeToRefs(useUserStore());
   <template v-else>
     <FlightsList
       :items="flights"
-      :displayVisibilityInfo="loggedUser.id === pilot.id"
-      :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+      :displayVisibilityInfo="loggedUser?.id === pilot?.id"
+      :route-detail="{name: 'publicFlightDetail', params: {username: pilot?.publicUsername}}"
       class="q-mb-md"
     />
   </template>