Pridana moznost zobrazeni planu v detailu letu

Dockerfile

@@ -1,5 +1,5 @@
 # develop stage
-FROM node:20-alpine as develop-stage
+FROM node:20-alpine AS develop-stage
 
 ENV TZ=Europe/Prague
 
@@ -12,14 +12,14 @@ RUN npx update-browserslist-db@latest
 COPY . .
 
 # build stage
-FROM develop-stage as build-stage
+FROM develop-stage AS build-stage
 ENV NODE_ENV production
 ENV API_URL "https://api.poletani.cz"
 ENV GOOGLE_MAPS_API_KEY "AIzaSyAfTU1VntF9rp2D9TR4CFXIMALF5GLgsio"
 
 RUN quasar build -m ssr
 
-FROM node:20-alpine as production-stage
+FROM node:20-alpine AS production-stage
 
 ENV NODE_ENV production
 ENV TZ=Europe/Prague

src/components/flights/FlightTrackMap.vue

@@ -2,12 +2,17 @@
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
 import {computed, reactive, ref} from "vue";
 import {Line} from "vue-chartjs"
+import {useFlightPlanUtils} from "src/composables/flightPlan";
 
 const props = defineProps({
   flight: {
     type: Object,
     required: true
   },
+  flightPlan: {
+    type: Object,
+    required: false,
+  },
   photos: {
     type: Array,
     required: false,
@@ -98,15 +103,29 @@ const chartOptions = {
   onClick: drawCurrentPositionMarker,
   onHover: drawCurrentPositionMarker,
 }
+
+const {getMarkersFrom} = useFlightPlanUtils();
+const showPlanTrack = ref(true);
+const tracks = computed(() => {
+  const items = [];
+  if (props.flight.gpxTrack) {
+    items.push(props.flight.gpxTrack.coordinates)
+  }
+  if (showPlanTrack.value && props.flightPlan) {
+    items.push(getMarkersFrom(props.flightPlan).map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
+  }
+  return items;
+})
 </script>
 
 <template>
   <q-no-ssr>
     <q-intersection>
+      <q-checkbox v-model="showPlanTrack" label="Zobrazovat plán?" v-if="flightPlan" />
       <MapWithMarkers
         v-if="displayMap"
         style="width: 100%; height: 500px;"
-        :gpx-track="flight.gpxTrack?.coordinates || []"
+        :tracks="tracks"
         :markers="pointsOfInterests"
         :highlight-position="currentPositionMarker"
         :photos="mapPhotos"

src/graphql/fragments/flight.js

@@ -29,6 +29,7 @@ fragment flightFullInfo on Flight {
   landings
   durationMinCalculated
   isPublic
+  flightPlanId
 
   socialImageUrl
   titlePhoto {

src/pages/profile/flight/FlightDetailPage.vue

@@ -10,7 +10,7 @@ export default {
 
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {computed, onMounted, watch} from "vue";
+import {onMounted} from "vue";
 import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkeleton.vue";
 import {flightName} from "src/composables/flight";
 import {useAppStore} from "stores/App";
@@ -30,7 +30,7 @@ import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
 import {TOGGLE_FLIGHT_PUBLISH} from "src/graphql/mutations/flight";
 import {useAirspacesStore} from "stores/Airspaces";
 import {useAirportsStore} from "stores/Airports";
-import MapWrapper from "components/map/MapWrapper.vue";
+import {useFlightPlansStore} from "stores/FlightPlans";
 
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useLoggedUserStore()).user;
@@ -57,9 +57,15 @@ const handleDeleteAndRedirect = () => {
 
 const {airspaces} = storeToRefs(useAirspacesStore());
 const {airports} = storeToRefs(useAirportsStore());
+const {flightPlan} = storeToRefs(useFlightPlansStore());
+
 onMounted(() => {
   useAirspacesStore().fetch();
   useAirportsStore().fetch();
+
+  if (flight.value.flightPlanId) {
+    useFlightPlansStore().fetchDetail(flight.value.flightPlanId);
+  }
 });
 
 const togglePublicVisibility = (variables) => toggleVisibility({
@@ -156,6 +162,7 @@ const togglePublicVisibility = (variables) => toggleVisibility({
             :show-info-window="true"
             :show-layer-controls="true"
             :flight="flight"
+            :flight-plan="flightPlan"
             :photos="flight.photos"
           />
         </q-no-ssr>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -26,6 +26,7 @@ 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());
 
@@ -39,12 +40,16 @@ const props = defineProps({
 onMounted(() => {
   usePhotosStore().fetchPublic({flightId: flight.value.id});
   useAirspacesStore().fetch();
-    useAirportsStore().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);
@@ -87,10 +92,11 @@ useMeta(() => metaData({
             <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"
+              :airspaces-data="airspaces"
+              :airports="airports"
+              :key="flight.id"
               :flight="flight"
+              :flight-plan="flightPlan"
               :show-info-window="true"
               :showLayerControls="false"
               :photos="flightPhotos"/>

src/pages/public/pilotProfile/FlightPlanDetail.vue

@@ -59,7 +59,7 @@ const {airports} = storeToRefs(useAirportsStore());
 const {getMarkersFrom} = useFlightPlanUtils();
 
 const usedPointsOfInterest = computed(() => {
-  const poisInTrackIds = getMarkersFrom(flightPlan.value).filter(m => !!m.pointOfInterestId).map(poi => poi.id);
+  const poisInTrackIds = getMarkersFrom(flightPlan.value).filter(m => !!m.pointOfInterestId).map(poi => poi.pointOfInterestId);
   return pointsOfInterest.value.filter(poi => poisInTrackIds.includes(poi.id))
 });