Bugfixing infinite scrollu u seznamu letu, novy vzhled detailu letu

src/components/flights/FlightHeaderInfo.vue

@@ -0,0 +1,59 @@
+<script setup>
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  flight: {type: Object, required: true},
+  pilot: {type: Object, required: true},
+  routeDetail: {type: Object, required: true},
+})
+
+</script>
+
+<template>
+  <div class="flight-header-info">
+    <h2 class="text-h4">
+      <router-link :to="routeDetail" v-if="routeDetail">
+        {{ flight.name }}
+      </router-link>
+      <span v-else>{{ flight.name }}</span>
+    </h2>
+
+    <div class="q-my-lg">
+      {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
+    </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 class="q-my-lg">
+      <router-link :to="{name: 'publicAircraftDetail', params: {callSign: flight.aircraft.callSign}}">
+        {{ flight.aircraft.callSign }}
+      </router-link>
+    </div>
+
+    <div class="q-my-lg" v-if="flight.description !== ''">
+      <div v-html="flight.description"></div>
+    </div>
+
+    <slot class="q-my-lg" name="default"></slot>
+  </div>
+</template>
+
+
+<style lang="scss">
+.flight-header-info a {
+
+  &, &:visited {
+    color: #e6f5ff;
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: #c2d2dd;
+  }
+}
+</style>

src/components/flights/FlightsList.vue

@@ -3,8 +3,6 @@ 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: {
@@ -27,8 +25,6 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
-
-const $q = useQuasar()
 </script>
 
 <template>
@@ -44,8 +40,6 @@ const $q = useQuasar()
         clickable
         :to="routeDetail(flight)"
       >
-
-
         <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>

src/components/flights/LatestFlightsSlider.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {ref} from "vue";
-import {flightName} from "src/composables/flight";
+import FlightHeaderInfo from "components/flights/FlightHeaderInfo.vue";
-import LatestFlightSliderInfo from "components/flights/slider/LatestFlightSliderInfo.vue";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 
 const props = defineProps({
   items: {
@@ -37,11 +37,25 @@ const slide = ref(0);
           height="400px"
           v-if="flight.titlePhoto"
         >
-          <div class="absolute-bottom">
+          <div class="absolute-full">
-            <LatestFlightSliderInfo :flight="flight"/>
+            <FlightHeaderInfo
+              :route-detail="{name: 'publicFlightDetailNew', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
+              :pilot="flight.pilot"
+              :flight="flight"
+            >
+
+              <div class="absolute-bottom-right">
+                <router-link
+                  class="q-pa-lg"
+                  :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
+                >
+                  {{ flight.pilot.publicUsername }}
+                </router-link>
+              </div>
+
+            </FlightHeaderInfo>
           </div>
         </q-img>
-        <LatestFlightSliderInfo v-else :flight="flight" text-color="primary"/>
       </q-carousel-slide>
     </q-carousel>
   </div>

src/components/flights/slider/LatestFlightSliderInfo.vue

@@ -1,33 +0,0 @@
-<script setup>
-import {flightName} from "src/composables/flight";
-
-const props = defineProps({
-  flight: {
-    type: Object,
-    required: true
-  },
-  textColor: {
-    type: String,
-    required: false,
-    default: "white"
-  }
-})
-</script>
-
-<template>
-  <div class="text-h4">
-    <router-link
-      :class="`text-${props.textColor}`"
-      :to="{name: 'publicFlightDetail', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
-    >
-      {{ flightName(flight) }}
-    </router-link>
-  </div>
-
-  <router-link
-    :class="`text-${props.textColor}`"
-    :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
-  >
-    @{{ flight.pilot.publicUsername }}
-  </router-link>
-</template>

src/components/photos/PhotoGallery.vue

@@ -75,7 +75,7 @@ watch(() => [openedPhoto.value, $lightbox.value], () => {
       <div
         v-for="photo in photos" :key="photo.id"
         style="min-height: 100px"
-        class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm"
+        class="col-6 col-sm-4 col-md-4 col-lg-2 q-pa-sm"
       >
         <a
           :data-pswp-src="photo.url"

src/composables/meta.js

@@ -13,7 +13,7 @@ export const commonKeywords = [
 
 
 export const aircraftKeywords = (aircraft) => {
-  return [aircraft.organization?.name, aircraft.callSign, aircraft.manufacturer, aircraft.model]
+  return ["letadlo", "letoun", aircraft.organization?.name, aircraft.callSign, aircraft.manufacturer, aircraft.model]
 };
 
 export const flightEventKeywords = (event) => {

src/composables/pagination.js

@@ -11,33 +11,36 @@ export const usePagination = ({fetchFunction, itemsPerPage = 10}) => {
   const filters = ref({});
   const hasMoreData = ref(true)
 
+  const isQueryRunning = ref(false)
+
   const loadFirstPage = () => {
     paginationOffset.value = 0
+    isQueryRunning.value = true
     return fetchFunction({
-      ...filters.value,
+      ...filters.value, limit: paginationLimit.value, offset: 0, appendItems: false
-      limit: paginationLimit.value,
-      offset: 0,
-      appendItems: false
     }).then((data) => {
-      console.log("first page", data, data.length, paginationLimit.value)
       paginationOffset.value += paginationLimit.value;
       hasMoreData.value = data.length === paginationLimit.value;
     })
+      .finally(() => {
+        isQueryRunning.value = false
+      })
   }
 
   const loadPage = (index, done) => {
-    return fetchFunction({
+    if (isQueryRunning.value) return
-      ...filters.value,
-      appendItems: true,
-      limit: paginationLimit.value,
-      offset: paginationOffset.value,
-    }).then((data) => {
-            console.log("load page", data, data.length, paginationOffset.value, paginationLimit.value)
 
+    isQueryRunning.value = true
+    return fetchFunction({
+      ...filters.value, appendItems: true, limit: paginationLimit.value, offset: paginationOffset.value,
+    }).then((data) => {
       paginationOffset.value += paginationLimit.value;
       hasMoreData.value = data.length === paginationLimit.value;
       if (done) done()
     })
+      .finally(() => {
+        isQueryRunning.value = false
+      })
   }
 
   const handleFiltersChanged = (newFilters) => {
@@ -65,9 +68,7 @@ export const useInfiniteScroll = (emits, props) => {
   const emitsDef = ["load-more"]
   const propsDef = {
     hasMoreData: {
-      type: Boolean,
+      type: Boolean, required: false, default: true
-      required: false,
-      default: true
     }
   }
 

src/graphql/fragments/airport.js

@@ -1,5 +1,17 @@
 import gql from "graphql-tag";
 
+export const FRAGMENT_AIRPORT_LIST_INFO = gql`
+  fragment airportListInfo on Airport {
+    id
+    name
+    icaoCode
+    gpsLatitude
+    gpsLongitude
+    elevation
+    iconUrl
+  }
+`;
+
 export const FRAGMENT_AIRPORT_INFO = gql`
   fragment airportInfo on Airport {
     id

src/graphql/fragments/flight_list.js

@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
+import {FRAGMENT_AIRPORT_LIST_INFO} from "src/graphql/fragments/airport";
 import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft_basic";
 
 export const FRAGMENT_FLIGHT_LIST_INFO = gql`
@@ -33,11 +33,11 @@ fragment flightListInfo on Flight {
   }
 
   takeoffAirport {
-    ...airportInfo
+    ...airportListInfo
   }
 
   landingAirport {
-    ...airportInfo
+    ...airportListInfo
   }
 
   aircraft {
@@ -45,7 +45,7 @@ fragment flightListInfo on Flight {
   }
 }
 
-${FRAGMENT_AIRPORT_INFO}
+${FRAGMENT_AIRPORT_LIST_INFO}
 ${FRAGMENT_AIRCRAFT_BASIC_INFO}
 `;
 

src/pages/public/IndexPage.vue

@@ -2,7 +2,7 @@
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import AppFooter from "components/AppFooter.vue";
-import LatestFlightsSlider from "components/flights/slider/LatestFlightsSlider.vue";
+import LatestFlightsSlider from "components/flights/LatestFlightsSlider.vue";
 import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";

src/pages/public/aircraft/AircraftDetailPage.vue

@@ -28,15 +28,13 @@ import {homepageBreadcrumbs} from "src/composables/breadcrumbs";
 
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
-const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
   title: aircraft.value.callSign,
   image: aircraft.value.titleImage?.url,
-  keywords: [
+  keywords: aircraftKeywords(aircraft.value),
-    "letadlo", ...aircraftKeywords(aircraft.value)
-  ],
   description: aircraft.value.description || `Detail letadla ${aircraft.value.callSign}.`
 }));
 useAppStore().setBreadcrumbs([
@@ -45,10 +43,9 @@ useAppStore().setBreadcrumbs([
   {label: aircraft.value.callSign}
 ]);
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
+const {handleFiltersChanged, hasMoreData, loadPage} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {aircraftId: aircraft.value.id};
 onMounted(() => {
-  loadPage(false);
+  handleFiltersChanged({aircraftId: aircraft.value.id})
   usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
 });
 </script>
@@ -74,10 +71,9 @@ onMounted(() => {
           <FlightsList
             v-else
             :items="flights"
-            :total-items-count="totalItemsCount"
             :is-query-running="areFlightsLoading"
-            :items-per-page="paginationLimit"
+            :has-more-data="hasMoreData"
-            @load-more="loadPage(true)"
+            @load-more="loadPage($event.index, $event.done)"
             :public="true"
           />
         </q-card-section>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -39,18 +39,16 @@ useMeta(() => metaData({
   description: event.value.description
 }))
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
+const {loadPage, hasMoreData, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {username: props.pilot.publicUsername, eventId: event.value.id};
 
 onMounted(() => {
-  loadPage(false);
+  handleFiltersChanged({username: props.pilot.publicUsername, eventId: event.value.id})
 })
 
-const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
-  <div>
   <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
   <template v-else>
@@ -59,26 +57,23 @@ const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRef
     <article class="q-my-lg" v-html="event.description"/>
 
     <q-no-ssr>
-        <EventFlightsMap :event-url-slug="event.urlSlug" :only-public="true"/>
+<!--      <EventFlightsMap :event-url-slug="event.urlSlug" :only-public="true"/>-->
     </q-no-ssr>
 
     <h3>Lety</h3>
 
-      <q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
+    <q-banner v-if="flights.length === 0" class="bg-light-blue text-white">
       Zatím tu nemáš uložené žádné lety.
     </q-banner>
 
-      <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+    <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
 
     <FlightsList
       v-else
       :items="flights"
-        :total-items-count="totalItemsCount"
-        :is-query-running="areFlightsLoading"
-        :items-per-page="paginationLimit"
       :public="true"
-        @load-more="loadPage(true)"
+      :has-more-data="hasMoreData"
+      @load-more="loadPage($event.index, $event.done)"
     />
   </template>
-  </div>
 </template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -35,6 +35,8 @@ 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";
+import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
+import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
@@ -58,7 +60,9 @@ const flightNameFormatted = flightName(flight.value);
 const event = computed(() => flight.value.event);
 
 useAppStore().setPageTitle(flightNameFormatted);
-useAppStore().setBreadcrumbs([])//publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
+useAppStore().setBreadcrumbs(publicFlightBreadcrumbs(pilot.value, flight.value, event.value, false));
+const {breadcrumbs} = storeToRefs(useAppStore());
+
 
 useMeta(() => metaData({
     title: `${flightNameFormatted} - ${pilot.value.name}`,
@@ -74,62 +78,58 @@ useMeta(() => metaData({
 ));
 
 
-const contentTabs = ref()
+const titleImageBottomAnchor = ref()
 const scrollToContent = () => {
-  contentTabs.value.$el.scrollIntoView({behavior: "smooth"});
+  console.log(titleImageBottomAnchor.value)
+  if (!titleImageBottomAnchor.value) {
+    console.log("nemam anchor")
+    return
+  }
+
+  titleImageBottomAnchor.value.scrollIntoView({behavior: "smooth"});
 }
 
 const tab = ref("photos")
 </script>
 
 <template>
-  <q-img :src="flight.titlePhoto.url" style="height: 85vh" fit="cover">
+  <q-img :src="flight.titlePhoto.url" style="height: 100vh" fit="cover">
-    <div class="absolute-full flex flex-center text-center">
+    <div class="absolute-full">
+      <div style="height: 20vh; opacity: 0.4">
+        <BreadcrumbsNavigation :items="breadcrumbs || []"/>
+      </div>
+      <div class="flex flex-center text-center">
         <div>
-        <h2 class="text-h4">{{ flight.name }}</h2>
+          <FlightHeaderInfo :pilot="pilot" :flight="flight">
-
+            <div class="absolute-bottom">
-        <div class="q-my-lg">
+            <div class="row">
-          {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
+              <div class="offset-2 col-grow">
+                <q-tabs
+                  v-model="tab"
+                >
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="photos" icon="image" label="Fotky" v-if="flightPhotos.length > 0"/>
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="info" icon="alarm" label="Info"/>
+                  <q-tab @click="scrollToContent" class="q-px-xl" :ripple="false" name="track" icon="route" label="Trasa" v-if="flightPlan || flight.track"/>
+                </q-tabs>
               </div>
-
+              <div class="col-2">
-        <div>
+                <q-btn class="q-ma-md" :to="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}">
-        <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>
+          </FlightHeaderInfo>
+        </div>
+      </div>
+
+      <div class="absolute-bottom" ref="titleImageBottomAnchor"></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"/>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -28,19 +28,18 @@ useMeta(() => metaData({
 useAppStore().setPageTitle(props.pilot.publicUsername);
 useAppStore().setBreadcrumbs(publicProfileBreadcrumbs(props.pilot, false))
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
+const {loadPage, handleFiltersChanged} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {username: props.pilot.publicUsername};
 onMounted(() => {
-  loadPage(false);
+  handleFiltersChanged({username: props.pilot.publicUsername})
 });
 
-const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
-  <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+  <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.
@@ -49,9 +48,6 @@ const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRef
   <FlightsList
     v-else
     :items="flights"
-    :total-items-count="totalItemsCount"
-    :is-query-running="areFlightsLoading"
-    :items-per-page="paginationLimit"
     :public="true"
     @load-more="loadPage(true)"
   />

src/pages/public/poi/PointOfInterestDetailPage.vue

@@ -41,11 +41,11 @@ useAppStore().setBreadcrumbs([
   {label: pointOfInterest.value.name}
 ]);
 
-const {filters, loadPage, paginationLimit} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
+const {loadPage, handleFiltersChanged, hasMoreData} = usePagination({fetchFunction: useFlightsStore().fetchPublic});
-filters.value = {pointOfInterestId: pointOfInterest.value.id};
+
 onMounted(() => {
   usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-  loadPage(false);
+  handleFiltersChanged({pointOfInterestId: pointOfInterest.value.id});
 });
 </script>
 
@@ -79,7 +79,8 @@ onMounted(() => {
           :is-query-running="areFlightsLoading"
           :items-per-page="paginationLimit"
           :public="true"
-          @load-more="loadPage(true)"
+          :has-more-data="hasMoreData"
+          @load-more="loadPage($event.index, $event.done)"
         />
       </q-card-section>
     </template>