Pridana moznost zobrazeni planu v detailu letu

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))
 });