Pridani letiste pro mezipristani

src/components/flights/form/FlightFormTrack.vue

@@ -1,6 +1,6 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
-import {onMounted, reactive, ref, watch} from "vue";
+import {reactive, ref, watch} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
 
@@ -12,6 +12,10 @@ const props = defineProps({
     type: Array,
     required: true
   },
+  airports: {
+    type: Array,
+    required: true
+  },
   flight: {
     type: Object,
     required: false
@@ -27,25 +31,44 @@ const removeTrackItem = (index) => {
 }
 
 const poi = ref(null);
-const addTrackItem = (item) => {
-  formData.track.push(item);
+const airport = ref(null);
+const landingDuration = ref(null);
+
+const addTrackPOIItem = (item) => {
+  formData.track.push({pointOfInterest: item});
   poi.value = null;
 }
+
+const addAirportToTrack = (airportData, duration) => {
+  formData.track.push({airport: airportData, landingDuration: parseInt(duration)})
+  airport.value = null;
+}
+
 watch(poi, (newVal) => {
   if (newVal?.name) {
-    addTrackItem(newVal);
+    addTrackPOIItem(newVal);
   }
 });
 
-onMounted(() => {
-  for (const i in props.flight.track) {
-    const poiInfo = props.flight.track[i].pointOfInterest;
-    formData.track.push({
-      id: poiInfo.id,
-      name: poiInfo.name
-    });
+watch(() => props.flight.track, (newVal) => {
+  for (const i in newVal) {
+    const trackInfo = newVal[i];
+    const info = {landingDuration: trackInfo.landingDuration};
+    if (trackInfo.pointOfInterest) {
+      info['pointOfInterest'] = {
+        id: trackInfo.pointOfInterest.id,
+        name: trackInfo.pointOfInterest.name,
+      };
+    }
+    if (trackInfo.airport) {
+      info['airport'] = {
+        id: trackInfo.airport.id,
+        name: trackInfo.airport.name,
+      }
+    }
+    formData.track.push(info);
   }
-});
+}, {immediate: true});
 </script>
 
 <template>
@@ -73,12 +96,39 @@ onMounted(() => {
       v-model="poi"
       :key="formData.track.length"
       :options="locations"
-      @select="addTrackItem"
+      @select="addTrackPOIItem"
       clearable
       label="Přidat otočný bod"
       hint="Nastav významné otočné body"
     />
 
+    <div class="row">
+      <div class="col">
+        <ComboboxInput
+          v-bind="commonProps"
+          v-model="airport"
+          :key="formData.track.length"
+          :options="airports"
+          clearable
+          label="Letiště pro mezipřistání"
+          hint="Nastav letiště a dobu mezispřistání"
+        />
+      </div>
+      <div class="col" v-if="airport?.name">
+        <q-input
+          type="number"
+          v-bind="commonProps"
+          v-model="landingDuration"
+          label="Délka mezipřistání (minuty)"
+          class="q-mx-md"
+        >
+          <template #after>
+            <q-btn @click="addAirportToTrack(airport, landingDuration)" color="primary" icon="add"></q-btn>
+          </template>
+        </q-input>
+      </div>
+    </div>
+
     <q-list bordered>
       <q-item-label header>Trasa</q-item-label>
       <q-item>
@@ -95,13 +145,16 @@ onMounted(() => {
           <q-avatar size="32px" color="secondary" text-color="white">{{ index + 1 }}.</q-avatar>
         </q-item-section>
         <q-item-section>
-          <span>
-            {{ item.name }}
+          <span v-if="item.pointOfInterest">
+            {{ item.pointOfInterest.name }}
 
-            <q-badge color="green" v-if="!item.id">
+            <q-badge color="green" v-if="!item.pointOfInterest.id">
               <q-icon name="add"/>
             </q-badge>
           </span>
+          <span v-if="item.airport">
+            {{ item.airport.name }}, mezipřistání: {{ item.landingDuration }} minut
+          </span>
 
         </q-item-section>
         <q-item-section top side>