From 901c652641906c8d5b156bf50797d6846d41b21c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Sat, 7 Oct 2023 21:37:16 +0200
Subject: [PATCH] Pridani letiste pro mezipristani

---
 src/components/flights/FlightBasicInfo.vue    | 13 ++-
 src/components/flights/FlightTrackMap.vue     |  2 +-
 .../flights/form/FlightFormTrack.vue          | 85 +++++++++++++++----
 src/composables/objects/flight.js             |  2 +-
 src/graphql/fragments/flight.js               |  4 +
 src/graphql/fragments/flight_list.js          |  3 +
 src/pages/profile/flight/EditFlightPage.vue   |  1 +
 7 files changed, 89 insertions(+), 21 deletions(-)

diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
index c51d6ff..f4ba2e2 100644
--- a/src/components/flights/FlightBasicInfo.vue
+++ b/src/components/flights/FlightBasicInfo.vue
@@ -44,7 +44,7 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              <strong>{{flight.takeoffAirport.icaoCode}}</strong> ({{ flight.takeoffAirport.name }}),
+              <strong>{{ flight.takeoffAirport.icaoCode }}</strong> ({{ flight.takeoffAirport.name }}),
               čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
 
               <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
@@ -54,10 +54,17 @@ const props = defineProps({
 
         <q-item v-for="poi in flight.track" :key="poi.id">
           <q-item-section avatar>
-            <q-icon name="place"/>
+            <q-icon name="place" v-if="poi.pointOfInterest" />
+            <q-icon name="local_airport" v-if="poi.airport" />
           </q-item-section>
           <q-item-section>
-            {{ poi.pointOfInterest.name }}
+            <template v-if="poi.pointOfInterest">
+              {{ poi.pointOfInterest.name }}
+            </template>
+            <span v-if="poi.airport">
+              <strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
+              délka mezipřistání {{ minutesToHumanReadable(poi.landingDuration) }}
+            </span>
           </q-item-section>
         </q-item>
 
diff --git a/src/components/flights/FlightTrackMap.vue b/src/components/flights/FlightTrackMap.vue
index a8821c6..07183b4 100644
--- a/src/components/flights/FlightTrackMap.vue
+++ b/src/components/flights/FlightTrackMap.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 
 const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
 const poisWithGPS = computed(() => {
-  return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
+  return flight.value.track.filter(poi => poi.pointOfInterest?.gpsLatitude && poi.pointOfInterest?.gpsLongitude)
 });
 
 const pointsOfInterests = computed(() => {
diff --git a/src/components/flights/form/FlightFormTrack.vue b/src/components/flights/form/FlightFormTrack.vue
index 3744d35..f9562c8 100644
--- a/src/components/flights/form/FlightFormTrack.vue
+++ b/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>
diff --git a/src/composables/objects/flight.js b/src/composables/objects/flight.js
index 59645bb..d280d7b 100644
--- a/src/composables/objects/flight.js
+++ b/src/composables/objects/flight.js
@@ -10,7 +10,7 @@ export const flightName = (flight) => {
   if (flight.name !== '') {
     return `${flight.name} (${date})`
   } else {
-    const track = flight.track ? flight.track.map(t => t.pointOfInterest.name) : [];
+    const track = flight.track ? flight.track.map(t => t.pointOfInterest?.name || t.airport?.icaoCode) : [];
     const trackStr = track.length > 0 ? ` - ${track.join(" - ")} - ` : ' - ';
 
     return `${flight.takeoffAirport.icaoCode} ${trackStr} ${flight.landingAirport.icaoCode} (${date})`;
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 06d34ea..f944e04 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -68,6 +68,10 @@ fragment flightFullInfo on Flight {
     pointOfInterest {
       ...pointOfInterestFullInfo
     }
+    airport {
+      ...airportInfo
+    }
+    landingDuration
   }
 
   landingAirport {
diff --git a/src/graphql/fragments/flight_list.js b/src/graphql/fragments/flight_list.js
index 8f9cf3a..b0a03f4 100644
--- a/src/graphql/fragments/flight_list.js
+++ b/src/graphql/fragments/flight_list.js
@@ -19,6 +19,9 @@ fragment flightListInfo on Flight {
     pointOfInterest {
       name
     }
+    airport {
+      icaoCode
+    }
   }
 
   event {
diff --git a/src/pages/profile/flight/EditFlightPage.vue b/src/pages/profile/flight/EditFlightPage.vue
index 7b9925e..f767e7b 100644
--- a/src/pages/profile/flight/EditFlightPage.vue
+++ b/src/pages/profile/flight/EditFlightPage.vue
@@ -157,6 +157,7 @@ const rotatePhotos = ({photos, angle}) => {
           v-if="locations"
           :flight="flight"
           :locations="locations"
+          :airports="airports"
           @save="handleFlightEdit"
         />
       </q-tab-panel>