Nastrel nove podoby detailu letu

src/components/flightPlans/FlightPlanRoute.vue

@@ -83,7 +83,7 @@ const allPlacesOptions = computed(() => {
             <q-btn
               v-if="i < model.length - 1"
               text-color="primary"
-              flat dense round icon="arrow_downward"
+              flat dense round icon="`arrow_downward`"
               size="16px"
               @click="swapMarkers(i, i+1)"
 

src/components/flights/FlightsList.vue

@@ -3,6 +3,8 @@ import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useInfiniteScroll} from "src/composables/pagination";
+import {useQuasar} from "quasar";
+import {computed} from "vue";
 
 const props = defineProps({
   items: {
@@ -25,6 +27,8 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
+
+const $q = useQuasar()
 </script>
 
 <template>
@@ -40,16 +44,21 @@ const routeDetail = (flight) => {
         clickable
         :to="routeDetail(flight)"
       >
-        <q-item-section avatar>
+
+
+        <q-item-section avatar class="gt-xs">
           <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
           <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
         </q-item-section>
         <q-item-section>
+          <q-img v-if="flight.titlePhoto" class="lt-sm" :src="flight.titlePhoto.thumbnailUrl"/>
+
           <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
+          <div class="flex justify-between justify-sm-start list-secondary-info">
             <div class="text-secondary" v-if="props.public">
               <q-icon name="support_agent"/>
-            @{{ flight.pilot.publicUsername }}
+              {{ flight.pilot.publicUsername }}
             </div>
 
             <div class="text-secondary" v-if="flight.copilots">
@@ -71,6 +80,7 @@ const routeDetail = (flight) => {
               <q-icon name="event"/>
               {{ flight.event.name }}
             </div>
+          </div>
         </q-item-section>
 
         <q-item-section side top v-if="!props.public">
@@ -92,3 +102,9 @@ const routeDetail = (flight) => {
     </template>
   </q-infinite-scroll>
 </template>
+
+<style>
+.list-secondary-info div {
+  padding: 0 1em;
+}
+</style>

src/components/photos/PhotoGallery.vue

@@ -46,17 +46,6 @@ const initLightbox = () => {
   $lightbox.value.init();
 }
 
-const isCollapsed = ref(true);
-const photosCollapseLimit = computed(() => {
-  if ($q.screen.width <= $q.screen.sizes.sm) return 2;
-  else if ($q.screen.width <= $q.screen.sizes.md) return 3;
-  else return 4;
-});
-
-onMounted(() => {
-  isCollapsed.value = props.photos.length >= photosCollapseLimit.value;
-});
-
 onUnmounted(() => {
   if ($lightbox.value) {
     $lightbox.value.destroy();
@@ -81,7 +70,7 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
 </script>
 
 <template>
-  <div :class="{'photogallery--wrapper': true, collapsed: isCollapsed}" :id="`${galleryId}-wrapper`">
+  <div :class="{'photogallery--wrapper': true}" :id="`${galleryId}-wrapper`">
     <div :id="galleryId" class="row photogallery--content">
       <div
         v-for="photo in photos" :key="photo.id"
@@ -111,9 +100,6 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
       </div>
     </div>
 
-    <a class="photogallery--collapse" v-if="isCollapsed" @click="isCollapsed = false">
-      <q-btn class="q-mt-lg q-mb-md" color="secondary">Rozbalit</q-btn>
-    </a>
   </div>
 
 </template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -1,41 +1,44 @@
 <script>
 import {useFlightsStore} from "stores/Flights";
+import {usePilotsStore} from "stores/Pilots";
 
 export default {
   preFetch({store, currentRoute}) {
-    return useFlightsStore(store).fetchPublicDetail({
+    const promises = [
+      usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username).catch(e => {
+      }),
+      useFlightsStore(store).fetchPublicDetail({
         urlSlug: currentRoute.params.flightSlug,
         username: currentRoute.params.username
       })
+    ]
+    return Promise.all(promises)
   }
 }
 </script>
+
 <script setup>
+import {storeToRefs} from "pinia";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {useAppStore} from "stores/App";
 import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkeleton.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
-import {storeToRefs} from "pinia";
 import {flightName} from "src/composables/flight";
 import {useMeta} from "quasar";
 import {aircraftKeywords, flightEventKeywords, flightKeywords, metaData} from "src/composables/meta";
 import ContentCard from "components/ContentCard.vue";
 import {usePhotosStore} from "stores/Photos";
-import {computed, onMounted} from "vue";
+import {computed, onMounted, ref, useTemplateRef} from "vue";
-import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
 import {useAirspacesStore} from "stores/Airspaces";
 import {useAirportsStore} from "stores/Airports";
 import {useFlightPlansStore} from "stores/FlightPlans";
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
-const props = defineProps({
+const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());
-  pilot: {
-    type: Object,
-    required: true
-  }
-});
 
 onMounted(() => {
   usePhotosStore().fetchPublic({flightId: flight.value.id});
@@ -43,7 +46,7 @@ onMounted(() => {
   useAirportsStore().fetch();
 
   if (flight.value.flightPlanId) {
-    useFlightPlansStore().fetchPublicDetail({username: props.pilot.publicUsername, id: flight.value.flightPlanId});
+    useFlightPlansStore().fetchPublicDetail({username: pilot.value.publicUsername, id: flight.value.flightPlanId});
   }
 })
 const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
@@ -55,13 +58,13 @@ const flightNameFormatted = flightName(flight.value);
 const event = computed(() => flight.value.event);
 
 useAppStore().setPageTitle(flightNameFormatted);
-useAppStore().setBreadcrumbs(publicFlightBreadcrumbs(props.pilot, flight.value, event.value, false));
+useAppStore().setBreadcrumbs([])//publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
 
 useMeta(() => metaData({
-    title: `${flightNameFormatted} - ${props.pilot.name}`,
+    title: `${flightNameFormatted} - ${pilot.value.name}`,
     keywords: [
       ...flightKeywords(flight.value),
-      props.pilot.name,
+      pilot.value.name,
       ...aircraftKeywords(flight.value.aircraft),
       ...flightEventKeywords(event.value)
     ],
@@ -69,15 +72,71 @@ useMeta(() => metaData({
     image: flight.value.socialImageUrl
   }
 ));
+
+
+const contentTabs = ref()
+const scrollToContent = () => {
+  contentTabs.value.$el.scrollIntoView({behavior: "smooth"});
+}
+
+const tab = ref("photos")
 </script>
 
 <template>
+  <q-img :src="flight.titlePhoto.url" style="height: 85vh" fit="cover">
+    <div class="absolute-full flex flex-center text-center">
       <div>
-    <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
+        <h2 class="text-h4">{{ flight.name }}</h2>
 
-    <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
+        <div class="q-my-lg">
-      <template #content>
+          {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
-        <q-card-section>
+        </div>
+
+        <div>
+        <span v-for="(turnPoint, i) in flight.turnPoints">
+          {{ turnPoint.pointOfInterest.name }}
+          <span v-if="i < Object.keys(flight.turnPoints).length - 1" class="q-mx-md"> &bull;</span>
+        </span>
+        </div>
+
+        <div v-if="flight.description !== ''">
+          {{ flight.description }}
+        </div>
+
+        <div>
+          <q-btn dense text icon="arrow_downward" size="lg" class="q-my-lg" @click="scrollToContent">Detail letu</q-btn>
+        </div>
+
+        <div class="absolute-bottom-right">
+          <q-btn class="q-ma-md" :to="{name: 'publicProfileDetail', params: {username: pilot.publicUsername}}">
+            <AvatarFromPhoto :size="32" class="q-mr-sm" :src="pilot.avatarImageUrl"/>
+            {{ pilot.name }}
+          </q-btn>
+        </div>
+      </div>
+    </div>
+
+  </q-img>
+
+
+  <q-tabs
+    ref="contentTabs"
+    v-model="tab"
+    align="justify"
+    class="q-mt-md"
+  >
+    <q-tab :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
+    <q-tab :ripple="false" name="info" icon="alarm" label="Info"/>
+    <q-tab :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
+  </q-tabs>
+
+  <q-tab-panels v-model="tab" style="min-height: 80vh">
+    <q-tab-panel name="photos">
+      <q-inner-loading v-if="arePhotosLoading"/>
+      <PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/>
+    </q-tab-panel>
+
+    <q-tab-panel name="info">
       <FlightBasicInfo
         :flight="flight"
         :poi-detail-route="{name: 'publicPOIDetail'}"
@@ -85,9 +144,28 @@ useMeta(() => metaData({
         :event-detail-route="event && event.isPublic ? {name: 'publicEventDetail', params: {username: pilot.publicUsername, eventSlug: event.urlSlug}} : null"
         :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: pilot.publicUsername}}"
       />
+    </q-tab-panel>
 
-          <article class="q-my-lg" v-html="flight.description"/>
+    <q-tab-panel name="track">
+      <FlightTrackMap
+        :airspaces-data="airspaces"
+        :airports="airports"
+        :key="flight.id"
+        :flight="flight"
+        :flight-plan="flightPlan"
+        :show-info-window="true"
+        :showLayerControls="false"
+        :photos="flightPhotos"/>
+    </q-tab-panel>
+  </q-tab-panels>
 
+
+  <div v-if="false">
+    <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
+
+    <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
+      <template #content>
+        <q-card-section>
           <q-no-ssr>
             <q-inner-loading v-if="arePhotosLoading"/>
             <PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/>

src/pages/public/pilotProfile/FlightDetailPageOld.vue

@@ -0,0 +1,108 @@
+<script>
+import {useFlightsStore} from "stores/Flights";
+
+export default {
+  preFetch({store, currentRoute}) {
+    return useFlightsStore(store).fetchPublicDetail({
+      urlSlug: currentRoute.params.flightSlug,
+      username: currentRoute.params.username
+    })
+  }
+}
+</script>
+<script setup>
+import FlightTrackMap from "components/flights/FlightTrackMap.vue";
+import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
+import {useAppStore} from "stores/App";
+import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkeleton.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {storeToRefs} from "pinia";
+import {flightName} from "src/composables/flight";
+import {useMeta} from "quasar";
+import {aircraftKeywords, flightEventKeywords, flightKeywords, metaData} from "src/composables/meta";
+import ContentCard from "components/ContentCard.vue";
+import {usePhotosStore} from "stores/Photos";
+import {computed, onMounted} from "vue";
+import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
+import {useAirspacesStore} from "stores/Airspaces";
+import {useAirportsStore} from "stores/Airports";
+import {useFlightPlansStore} from "stores/FlightPlans";
+
+const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
+
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: true
+  }
+});
+
+onMounted(() => {
+  usePhotosStore().fetchPublic({flightId: flight.value.id});
+  useAirspacesStore().fetch();
+  useAirportsStore().fetch();
+
+  if (flight.value.flightPlanId) {
+    useFlightPlansStore().fetchPublicDetail({username: props.pilot.publicUsername, id: flight.value.flightPlanId});
+  }
+})
+const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
+const {airspaces} = storeToRefs(useAirspacesStore());
+const {airports} = storeToRefs(useAirportsStore());
+const {flightPlan} = storeToRefs(useFlightPlansStore());
+
+const flightNameFormatted = flightName(flight.value);
+const event = computed(() => flight.value.event);
+
+useAppStore().setPageTitle(flightNameFormatted);
+useAppStore().setBreadcrumbs(publicFlightBreadcrumbs(props.pilot, flight.value, event.value, false));
+
+useMeta(() => metaData({
+    title: `${flightNameFormatted} - ${props.pilot.name}`,
+    keywords: [
+      ...flightKeywords(flight.value),
+      props.pilot.name,
+      ...aircraftKeywords(flight.value.aircraft),
+      ...flightEventKeywords(event.value)
+    ],
+    description: flight.value.description,
+    image: flight.value.socialImageUrl
+  }
+));
+</script>
+
+<template>
+  <div>
+    <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>
+
+    <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="{name: 'publicAircraftDetail'}"
+            :event-detail-route="event && event.isPublic ? {name: 'publicEventDetail', params: {username: pilot.publicUsername, eventSlug: event.urlSlug}} : null"
+            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: pilot.publicUsername}}"
+          />
+
+          <article class="q-my-lg" v-html="flight.description"/>
+
+          <q-no-ssr>
+            <q-inner-loading v-if="arePhotosLoading"/>
+            <PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/>
+            <FlightTrackMap
+              :airspaces-data="airspaces"
+              :airports="airports"
+              :key="flight.id"
+              :flight="flight"
+              :flight-plan="flightPlan"
+              :show-info-window="true"
+              :showLayerControls="false"
+              :photos="flightPhotos"/>
+          </q-no-ssr>
+        </q-card-section>
+      </template>
+    </ContentCard>
+  </div>
+</template>

src/router/routes.js

@@ -33,7 +33,7 @@ const routes = [
         component: () => import('pages/public/PilotProfileWrapper.vue'),
         children: [
           {path: '', name: "publicProfileDetail", component: () => import('pages/public/pilotProfile/FlightsListPage.vue')},
-          {path: ':flightSlug', name: "publicFlightDetail", component: () => import('pages/public/pilotProfile/FlightDetailPage.vue')},
+          {path: ':flightSlug', name: "publicFlightDetail", component: () => import('pages/public/pilotProfile/FlightDetailPageOld.vue')},
           {path: ':flightSlug/nahraj', name: "publicCopilotUploadPhoto", component: () => import('pages/public/pilotProfile/CopilotUploadPhotoPage.vue')},
           {path: 'a/:copilotSlug', name: "publicCopilotDetail", component: () => import('pages/public/pilotProfile/CopilotDetailPage.vue')},
           {path: 'udalosti', name: "publicEventsList", component: () => import('pages/public/pilotProfile/EventsListPage.vue')},
@@ -43,6 +43,12 @@ const routes = [
       },
     ]
   },
+
+        {
+        path: '/:username/new/:flightSlug',
+        name: "publicFlightDetailNew", component: () => import('pages/public/pilotProfile/FlightDetailPage.vue'),
+      },
+
   {
     path: '/moje',
     component: () => import('layouts/ProfileLayout.vue'),