Vkladani mista na konkretni pozici

src/components/flightPlans/FlightPlanMap.vue

@@ -22,19 +22,22 @@ const props = defineProps({
   pointsOfInterest: {
     type: Array,
     required: true
+  },
+  insertPosition: {
+    type: Number,
+    required: true
   }
 });
-const emits = defineEmits(["markers-changed"]);
+const emits = defineEmits(["markers-changed", "change-insert-position"]);
 
 const {center} = useGeocode();
 
-const {markerObject, googleMapsCustomMarkerObject, googleMapsMarkerObject, infoWindowObject, editableNameTypes} = useFlightPlanObjects();
-const {getIcon, getMarkersFrom} = useFlightPlanUtils();
+const {markerObject, googleMapsMarkerObject, infoWindowObject, editableNameTypes} = useFlightPlanObjects();
+const {getMarkersFrom} = useFlightPlanUtils();
 
 const infoWindow = ref(infoWindowObject({}));
 
 const handleMapClick = ({clickCoordinates, airspaces, airport}) => {
-  console.log(clickCoordinates, airspaces, airport);
   infoWindow.value = infoWindowObject({active: true, airspaces, position: clickCoordinates, airport})
 }
 
@@ -47,19 +50,23 @@ const handlePoiClick = (poi) => {
 }
 
 const markers = ref([]);
-
 watch(() => props.flightPlan.track, (newVal) => {
   markers.value = getMarkersFrom(props.flightPlan);
 }, {immediate: true, deep: true});
 
 const track = computed(() => markers.value.map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
 
+
 const addMarker = async (point) => {
   if (!point) return;
-  markers.value.push(markerObject({...point}));
+
+  const insertAt = Math.min(markers.value.length, props.insertPosition);
+
+  markers.value.splice(insertAt, 0, markerObject({...point}));
+  infoWindow.value = infoWindowObject({active: false});
 
   emits("markers-changed", markers.value);
-  infoWindow.value = infoWindowObject({active: false});
+  emits("change-insert-position",insertAt + 1);
 }
 
 const {searchPlaceName} = useGeocode();
@@ -74,12 +81,14 @@ const handleMarkerMove = async (idx, event) => {
 </script>
 
 <template>
+  vkladam na pozici {{ insertPosition }}
   <MapWrapper
     style="width: 100%; height: 100%; min-height: 500px"
     :center="center"
     :zoom="8"
     :airspaces-data="airspaceData"
     :airports="airports"
+    v-bind="$attrs"
     @map-click="handleMapClick"
   >
     <AirspaceInfoWindow
@@ -89,7 +98,7 @@ const handleMarkerMove = async (idx, event) => {
       @add-to-route="addMarker"
     />
 
-    <template v-for="poi in pointsOfInterest" :key="poi">
+    <template v-for="poi in pointsOfInterest" :key="poi.name">
       <CustomMarker
         v-if="poi.gpsLatitude && poi.gpsLongitude"
         :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
@@ -100,20 +109,13 @@ const handleMarkerMove = async (idx, event) => {
     </template>
 
 
-    <template v-for="(marker, i) in markers" :key="marker">
+    <template v-for="(marker, i) in markers" :key="marker.name">
       <Marker
         v-if="editableNameTypes.includes(marker.type)"
         :options="googleMapsMarkerObject(marker)"
         @click="handleMarkerClick(marker)"
         @dragend="handleMarkerMove(i, $event.latLng)"
       />
-<!--      <CustomMarker-->
-<!--        v-else-if="['poi', 'airport']marker.type !== 'poi'"-->
-<!--        :options="googleMapsCustomMarkerObject(marker)"-->
-<!--        @click="handleMarkerClick(marker)"-->
-<!--      >-->
-<!--        <q-icon :name="getIcon(marker.type)" style="font-size: 30px;color: #810000"/>-->
-<!--      </CustomMarker>-->
     </template>
     <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0202', strokeOpacity: 0.5, strokeWeight: 5}"/>
   </MapWrapper>