From 16650cc0cb5ac1d69c7e26677e73c4780d08910e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Tue, 25 Jun 2024 22:27:23 +0200
Subject: [PATCH] Fix z-indexu pro navigaci, pridani prostoru do verejne casti
 detialu letu

---
 src/components/flightPlans/FlightPlanMap.vue         |  8 ++++++--
 .../flightPlans/FlightPlanSideControls.vue           |  5 -----
 src/pages/public/pilotProfile/FlightDetailPage.vue   | 12 +++++++++++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/flightPlans/FlightPlanMap.vue b/src/components/flightPlans/FlightPlanMap.vue
index 740390b..6d78f2a 100644
--- a/src/components/flightPlans/FlightPlanMap.vue
+++ b/src/components/flightPlans/FlightPlanMap.vue
@@ -121,7 +121,7 @@ const handleMarkerMove = async (idx, event) => {
 
     <template v-if="displayTrackAids">
       <template v-for="marker in trackAids" :key="marker">
-        <CustomMarker :options="marker">
+        <CustomMarker :options="marker" class="track-info-marker">
           <div class="track-info" :style='`transform: rotate(${marker.bearing}deg)`'>
             {{ marker.bearing }}&deg; <br>
             {{ getDuration(marker.distance, flightPlan.plannedSpeed) }}'
@@ -136,7 +136,7 @@ const handleMarkerMove = async (idx, event) => {
   </MapWrapper>
 </template>
 
-<style scoped>
+<style>
 .track-info {
   background: rgba(128, 128, 128, 0.5);
   color: white;
@@ -147,4 +147,8 @@ const handleMarkerMove = async (idx, event) => {
   font-weight: bold;
   transform-origin: 50% 50%;
 }
+
+.track-info-marker {
+  z-index: 999;
+}
 </style>
diff --git a/src/components/flightPlans/FlightPlanSideControls.vue b/src/components/flightPlans/FlightPlanSideControls.vue
index 1e1a538..b526332 100644
--- a/src/components/flightPlans/FlightPlanSideControls.vue
+++ b/src/components/flightPlans/FlightPlanSideControls.vue
@@ -19,10 +19,8 @@ const props = defineProps({
 });
 
 const emits = defineEmits(["open", "change-insert-position", "fullscreen-toggle"])
-
 const {getDuration, getTotalDistance, getTotalDuration} = useFlightPlanCalculations();
 const totalDistance = computed(() => getTotalDistance(props.flightPlan));
-
 </script>
 
 <template>
@@ -69,9 +67,6 @@ const totalDistance = computed(() => getTotalDistance(props.flightPlan));
                 :color="insertPosition === i+1 ? 'primary' : 'grey'"
               />
             </q-item-label>
-            <q-item-label>
-
-            </q-item-label>
           </q-item-section>
         </q-item>
 
diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue
index a7198ed..bdaf089 100644
--- a/src/pages/public/pilotProfile/FlightDetailPage.vue
+++ b/src/pages/public/pilotProfile/FlightDetailPage.vue
@@ -24,6 +24,8 @@ 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";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
@@ -36,8 +38,13 @@ const props = defineProps({
 
 onMounted(() => {
   usePhotosStore().fetchPublic({flightId: flight.value.id});
+  useAirspacesStore().fetch();
+    useAirportsStore().fetch();
+
 })
 const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
+const {airspaces} = storeToRefs(useAirspacesStore());
+const {airports} = storeToRefs(useAirportsStore());
 
 const flightNameFormatted = flightName(flight.value);
 const event = computed(() => flight.value.event);
@@ -80,8 +87,11 @@ useMeta(() => metaData({
             <q-inner-loading v-if="arePhotosLoading"/>
             <PhotoGallery :photos="flightPhotos" v-else-if="!arePhotosLoading && flightPhotos.length > 0"/>
             <FlightTrackMap
-              :key="flight.id"
+            :airspaces-data="airspaces"
+            :airports="airports"
+            :key="flight.id"
               :flight="flight"
+              :show-info-window="true"
               :showLayerControls="false"
               :photos="flightPhotos"/>
           </q-no-ssr>