app/src/pages/public/pilotProfile/FlightDetailPage.vue

<script>
import {useFlightsStore} from "stores/Flights";
import {usePilotsStore} from "stores/Pilots";

export default {
  preFetch({store, currentRoute}) {
    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 {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, ref, useTemplateRef} from "vue";
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";
import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";

const {isQueryRunning, flight} = storeToRefs(useFlightsStore());

const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());

onMounted(() => {
  usePhotosStore().fetchPublic({flightId: flight.value.id});
  useAirspacesStore().fetch();
  useAirportsStore().fetch();

  if (flight.value.flightPlanId) {
    useFlightPlansStore().fetchPublicDetail({username: pilot.value.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(pilot.value, flight.value, event.value, false));
const {breadcrumbs} = storeToRefs(useAppStore());


useMeta(() => metaData({
    title: `${flightNameFormatted} - ${pilot.value.name}`,
    keywords: [
      ...flightKeywords(flight.value),
      pilot.value.name,
      ...aircraftKeywords(flight.value.aircraft),
      ...flightEventKeywords(event.value)
    ],
    description: flight.value.description,
    image: flight.value.socialImageUrl
  }
));


const titleImageBottomAnchor = ref()
const scrollToContent = () => {
  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: 100vh" fit="cover">
    <div class="absolute-full">
      <div style="height: 20vh; opacity: 0.4">
        <BreadcrumbsNavigation :items="breadcrumbs || []"/>
      </div>
      <div class="flex flex-center text-center">
        <div>
          <FlightHeaderInfo :pilot="pilot" :flight="flight">
            <div class="absolute-bottom">
            <div class="row">
              <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">
                <q-btn class="q-ma-md" :to="{name: 'publicFlightDetail', 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-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'}"
        :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}}"
      />
    </q-tab-panel>

    <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"/>
            <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>