Kurzy po planovane trase

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>