Lepsi verejna cast, ssr, lepsi prace s fotkamaa

src/pages/public/AircraftDetailPage.vue

@@ -0,0 +1,72 @@
+<script>
+import {useAircraftsStore} from "stores/Aircrafts";
+
+export default {
+  preFetch({currentRoute}) {
+    return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
+<script setup>
+import {useRouter} from "vue-router";
+import {useMeta, useQuasar} from "quasar";
+import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
+import {confirmObject, successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import FlightsList from "components/flights/FlightsList.vue";
+import {storeToRefs} from "pinia";
+import {computed, onMounted, watch} from "vue";
+import {metaData} from "src/composables/meta";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import ContentCard from "components/ContentCard.vue";
+import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
+import {useUserStore} from "stores/User";
+import {usePhotosStore} from "stores/Photos";
+import {useFlightsStore} from "stores/Flights";
+
+const $q = useQuasar();
+const $router = useRouter();
+
+const loggedUser = storeToRefs(useUserStore()).user;
+const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
+usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
+useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
+
+useAppStore().setPageTitle(aircraft.value.callSign);
+useMeta(() => metaData({
+  title: aircraft.value.callSign,
+  image: aircraft.value.titleImage?.url
+}));
+useAppStore().setBreadcrumbs([
+  {label: "Polétání.cz", to: {name: "homepage"}},
+  {label: aircraft.value.callSign}
+]);
+
+</script>
+
+<template>
+  <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
+
+  <template v-else>
+    <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
+      <template #content>
+        <q-card-section>
+          <AircraftInfo :aircraft="aircraft"/>
+
+          <PhotoGallery :photos="photos"/>
+
+          <h3>Lety</h3>
+
+          <FlightsList :items="flights" :public="true" />
+        </q-card-section>
+      </template>
+    </ContentCard>
+
+  </template>
+
+
+</template>

src/pages/public/PilotProfilePage.vue

@@ -2,8 +2,8 @@
 import {useUserStore} from "stores/User";
 
 export default {
-  preFetch({currentRoute}) {
-    return useUserStore().fetchPublicUserDetail(currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
   },
 }
 </script>

src/pages/public/PointOfInterestDetailPage.vue

@@ -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>

src/pages/public/PointsOfInterestMapPage.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  poi
+</template>

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -2,8 +2,8 @@
 import {useCopilotsStore} from "stores/Copilots";
 
 export default {
-  preFetch({currentRoute}) {
-    return useCopilotsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
@@ -13,6 +13,14 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {usePhotosStore} from "stores/Photos";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import ContentCard from "components/ContentCard.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
 const props = defineProps({
   pilot: {
@@ -22,25 +30,47 @@ const props = defineProps({
 });
 
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 
-useAppStore().setPageTitle(`${pilot.name} + ${copilot.value.name}`);
+useAppStore().setPageTitle(`${props.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}
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {label: copilot.value.name}
 ]);
 
+useMeta(() => metaData({
+  title: copilot.value.name,
+  keywords: ["kopilot", "výlet", "fotogalerie", copilot.value.name, "létání", "fotografie"],
+  description: `Společné polétání: ${props.pilot.name} + ${copilot.value.name}.`,
+  image: copilot.value.titleImage?.url
+}));
+
+useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 </script>
 
 <template>
-  <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: pilot.publicUsername}}"
-      class="q-mb-md"
-    />
-  </template>
+  <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
+    <template #content>
+      <q-card-section>
+
+        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallery :photos="photos" v-else/>
+
+        <h3>Společné lety</h3>
+        <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
+        <FlightsList
+          v-else
+          :items="flights"
+          :public="true"
+          class="q-mb-md"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
+
+
 </template>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -66,8 +66,8 @@ watch(() => event.value, (newVal) => {
       <FlightsList
         v-else
         :items="event.flights"
+        :public="true"
         class="q-my-lg"
-        :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
       />
 
     </template>

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>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -29,7 +29,7 @@ useAppStore().setBreadcrumbs([
   {label: `@${props.pilot.publicUsername}`},
 ])
 
-useFlightsStore().fetch(props.pilot.publicUsername);
+useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 const loggedUser = storeToRefs(useUserStore()).user;
 </script>
@@ -37,7 +37,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
 <template>
   <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
-  <FlightsListSkeleton v-if="areFlightsLoading"/>
+  <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
 
   <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
     Tento pilot zatím nepublikoval žádný let.
@@ -46,8 +46,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
   <template v-else>
     <FlightsList
       :items="flights"
-      :displayVisibilityInfo="loggedUser?.id === pilot?.id"
-      :route-detail="{name: 'publicFlightDetail', params: {username: pilot?.publicUsername}}"
+      :public="true"
       class="q-mb-md"
     />
   </template>