From 5280f60f34d7ebc480b3fca8e111299c2af8648a 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 07:39:32 +0200
Subject: [PATCH] Kurzy po planovane trase

---
 src/components/flightPlans/FlightPlanMap.vue | 47 ++++++++++++++++++--
 src/components/map/AirspaceInfoWindow.vue    | 14 +++++-
 src/components/map/MapWrapper.vue            | 31 +++++++------
 3 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/components/flightPlans/FlightPlanMap.vue b/src/components/flightPlans/FlightPlanMap.vue
index bb8e6df..740390b 100644
--- a/src/components/flightPlans/FlightPlanMap.vue
+++ b/src/components/flightPlans/FlightPlanMap.vue
@@ -2,7 +2,7 @@
 import {computed, ref, watch} from "vue";
 import {Marker, CustomMarker, Polyline} from "vue3-google-map";
 import MapWrapper from "components/map/MapWrapper.vue";
-import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
+import {useFlightPlanCalculations, useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
 import {useGeocode} from "src/composables/geocoding";
 
 const props = defineProps({
@@ -26,7 +26,7 @@ const props = defineProps({
     type: Number,
     required: false,
     default: null
-  }
+  },
 });
 const emits = defineEmits(["markers-changed", "change-insert-position"]);
 
@@ -34,6 +34,7 @@ const {center} = useGeocode();
 
 const {markerObject, googleMapsMarkerObject, editableNameTypes} = useFlightPlanObjects();
 const {getMarkersFrom} = useFlightPlanUtils();
+const {getDuration} = useFlightPlanCalculations();
 
 const mapWrap = ref(null);
 
@@ -47,7 +48,18 @@ watch(() => props.flightPlan.track, (newVal) => {
 }, {immediate: true, deep: true});
 
 const track = computed(() => markers.value.map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
-
+const trackAids = computed(() => props.flightPlan.track.map(p => ({
+    ...p,
+    anchorPoint: 'CENTER',
+    bearing: p.bearing,
+    distance: p.distance,
+    position: {
+      lat: (p.from.gpsLatitude + p.to.gpsLatitude) / 2,
+      lng: (p.from.gpsLongitude + p.to.gpsLongitude) / 2
+    }
+  }
+)));
+const displayTrackAids = ref(true);
 
 const addMarker = async (point) => {
   if (!point) return;
@@ -98,6 +110,7 @@ const handleMarkerMove = async (idx, event) => {
     @remove-from-route="removeMarker"
   >
     <template v-for="(marker, i) in markers" :key="marker.name">
+      <!-- TODO: ve verejne casti by nemel byt draggable!-->
       <Marker
         v-if="editableNameTypes.includes(marker.type)"
         :options="googleMapsMarkerObject(marker)"
@@ -105,5 +118,33 @@ const handleMarkerMove = async (idx, event) => {
         @dragend="handleMarkerMove(i, $event.latLng)"
       />
     </template>
+
+    <template v-if="displayTrackAids">
+      <template v-for="marker in trackAids" :key="marker">
+        <CustomMarker :options="marker">
+          <div class="track-info" :style='`transform: rotate(${marker.bearing}deg)`'>
+            {{ marker.bearing }}&deg; <br>
+            {{ getDuration(marker.distance, flightPlan.plannedSpeed) }}'
+          </div>
+        </CustomMarker>
+      </template>
+    </template>
+
+    <template #layersControlsEnd>
+      <q-checkbox v-model="displayTrackAids" label="Zobrazovat navigaci po trase?"/>
+    </template>
   </MapWrapper>
 </template>
+
+<style scoped>
+.track-info {
+  background: rgba(128, 128, 128, 0.5);
+  color: white;
+  border: solid 2px rgba(0, 0, 0, 0.87);
+  padding: 5px;
+  margin: 5px;
+  font-size: 12pt;
+  font-weight: bold;
+  transform-origin: 50% 50%;
+}
+</style>
diff --git a/src/components/map/AirspaceInfoWindow.vue b/src/components/map/AirspaceInfoWindow.vue
index edf1651..d4a166a 100644
--- a/src/components/map/AirspaceInfoWindow.vue
+++ b/src/components/map/AirspaceInfoWindow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {InfoWindow} from "vue3-google-map";
+import {CustomMarker, InfoWindow} from "vue3-google-map";
 import {useFlightPlanUtils} from "src/composables/flightPlan";
 import {useGeocode} from "src/composables/geocoding";
 import {computed, ref, watch} from "vue";
@@ -98,7 +98,6 @@ const openedTab = ref("info");
     @close="emits('close')"
     :options="{position: infoWindow.position}"
   >
-
     <q-tabs v-model="openedTab">
       <q-tab name="info">{{ title }}</q-tab>
       <q-tab name="airspaces" v-if="infoWindow.airspaces?.length">Prostory</q-tab>
@@ -204,4 +203,15 @@ const openedTab = ref("info");
 
 
   </InfoWindow>
+  <CustomMarker :options="{position: infoWindow.position, anchorPoint: 'CENTER'}">
+    <div class="info-window-position"></div>
+  </CustomMarker>
 </template>
+
+<style scoped>
+.info-window-position {
+  border: solid 2px orange;
+  border-radius: 50%;
+  padding: 3px;
+}
+</style>
diff --git a/src/components/map/MapWrapper.vue b/src/components/map/MapWrapper.vue
index fd9cf21..8b32a97 100644
--- a/src/components/map/MapWrapper.vue
+++ b/src/components/map/MapWrapper.vue
@@ -250,6 +250,7 @@ const isControlsOpened = ref(false);
     :max-zoom="13"
     ref="mapRef"
   >
+    TODO: pridavani a odebirani z trasy resit pres slot
     <AirspaceInfoWindow
       v-if="showInfoWindow && infoWindow.active"
       :info-window="infoWindow"
@@ -315,7 +316,7 @@ const isControlsOpened = ref(false);
 
     <Polyline v-if="track" :options="track"/>
 
-    <CustomControl position="BOTTOM" v-if="showLayerControls" style="width: auto; max-width: 200px">
+    <CustomControl position="TOP" v-if="showLayerControls" style="width: auto; max-width: 200px">
       <q-btn
         @click="isControlsOpened = !isControlsOpened"
         :icon="isControlsOpened ? 'layers_clear' : 'layers'"
@@ -323,12 +324,12 @@ const isControlsOpened = ref(false);
         text-color="grey-9"
         round
         size="sm"
-        :class="{'q-mb-lg': !isControlsOpened}"
+        class="q-my-md"
       >
       </q-btn>
       <q-card
         v-if="isControlsOpened"
-        class="q-my-md q-mx-auto q-px-lg"
+        class="q-px-lg"
         style="max-width: 30%; min-width: 200px;"
       >
         <template v-for="(airspaceLayer, key) in airspaceLayers" :key="airspaceLayer">
@@ -341,16 +342,20 @@ const isControlsOpened = ref(false);
 
         <br>
 
-        <q-slider
-          class="q-my-md"
-          v-model.number="maxAltitude"
-          :min="1000"
-          :max="15000"
-          label
-          label-always
-          :label-value="altitudeLimitFormatted(maxAltitude, 'ft')"
-          :step="1000"
-        />
+        <div class="q-my-lg">
+          Zobrazit prostory od GND do výšky {{ altitudeLimitFormatted(maxAltitude, 'ft') }}
+          <q-slider
+            v-model.number="maxAltitude"
+            :min="1000"
+            :max="15000"
+            label
+            :label-value="altitudeLimitFormatted(maxAltitude, 'ft')"
+            :step="1000"
+          />
+        </div>
+
+        <slot name="layersControlsEnd"></slot>
+
       </q-card>
     </CustomControl>
   </GoogleMap>