Dalsi iterace planovace, snad jiz kompletni vrstvy mapy

src/components/flightPlans/FlightPlanRoute.vue

@@ -1,23 +1,112 @@
 <script setup>
-import {commonProps} from "src/composables/inputs";
+import {computed, ref, watch} from "vue";
+import FlightPlanPlaceInput from "components/flightPlans/FlightPlanPlaceInput.vue";
+import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
 
 const props = defineProps({
   markers: {
     type: Array,
     required: true
+  },
+  pointsOfInterest: {
+    type: Array,
+    required: true
+  },
+  airports: {
+    type: Array,
+    required: true
   }
 });
 
+const emits = defineEmits(["markers-changed"]);
 
+const model = ref(props.markers);
+const removeMarker = (idx) => {
+  model.value.splice(idx, 1);
+}
 const swapMarkers = (idx1, idx2) => {
-  const tmp = markers.value[idx1];
-  markers.value[idx1] = markers.value[idx2];
-  markers.value[idx2] = tmp;
+  const tmp = model.value[idx1];
+  model.value[idx1] = model.value[idx2];
+  model.value[idx2] = tmp;
 };
+const handlePlaceSelect = (modelVal) => {
+  console.log(modelVal);
+  model.value.push(modelVal);
+}
+
+watch(() => model.value, () => {
+  emits("markers-changed", model.value);
+}, {deep: true});
+
+const {getIcon} = useFlightPlanUtils();
+const {editableNameTypes} = useFlightPlanObjects();
+
+const allPlacesOptions = computed(() => {
+  return [
+    ...props.pointsOfInterest.map(poi => ({...poi, type: "poi"})),
+    ...props.airports.map(airport => ({
+      ...airport,
+      name: `${airport.icaoCode} - ${airport.name}`,
+      type: "airport",
+    }))
+  ].map(i => ({...i, disabled: !i.gpsLatitude || !i.gpsLongitude}));
+});
+
 </script>
 
 <template>
+  <q-scroll-area style="height: 60vh;">
+    <q-list bordered separator class="full-width">
+      <q-item v-for="(marker, i) in model" :key="marker">
+        <q-item-section side>
+          <q-icon :name="getIcon(marker.type)"></q-icon>
+        </q-item-section>
 
-  sem prijde ten modal, ve kterem se edituje cela trasa
+        <q-item-section side>
+          <div>
+            <q-btn
+               v-if="i > 0"
+               text-color="primary"
+               size="16px"
+               flat dense round icon="arrow_upward"
+               @click="swapMarkers(i, i-1)"
+            />
+            <q-btn
+              v-if="i < model.length - 1"
+              text-color="primary"
+              flat dense round icon="arrow_downward"
+              size="16px"
+              @click="swapMarkers(i, i+1)"
 
+            />
+          </div>
+        </q-item-section>
+
+        <q-item-section>
+          <div class="cursor-pointer" v-if="editableNameTypes.includes(marker.type)">
+            {{ marker.name }}
+            <q-icon name="edit"/>
+            <q-popup-edit v-model="marker.name" v-slot="scope">
+              <q-input v-model="scope.value" autofocus @keyup.enter="scope.set">
+                <template #append>
+                  <q-icon name="edit"/>
+                </template>
+              </q-input>
+            </q-popup-edit>
+          </div>
+          <template v-else>
+            {{ marker.name }}
+          </template>
+        </q-item-section>
+        <q-item-section side class="text-right">
+          <q-btn size="12px" @click="removeMarker(i)" flat dense round color="red" icon="delete"/>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-scroll-area>
+
+  <FlightPlanPlaceInput
+    :options="allPlacesOptions"
+    @select="handlePlaceSelect"
+  />
 </template>