Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

src/components/flights/form/FlightFormBasic.vue

@@ -1,9 +1,10 @@
 <script setup>
-import {onMounted, reactive, ref, watch} from "vue";
+import {computed, onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
-import AirportLocationInput from "components/inputs/AirportLocationInput.vue";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {commonProps} from "src/composables/inputs";
 
 const props = defineProps({
     aircrafts: {
@@ -21,16 +22,14 @@ const props = defineProps({
   }
 )
 const formData = reactive({
-  aircraftId: 43,
-  takeoffAirportId: null,
-  landingAirportId: null,
+  aircraft: null,
+  takeoffAirport: null,
+  landingAirport: null,
   takeoffDatetime: null,
   landingDatetime: null,
   landings: 1,
-  solo: true,
-
   name: "",
-  description: ""
+  description: "",
 })
 
 const recalculateDuration = (data) => {
@@ -47,55 +46,72 @@ const isMounted = ref(false);
 onMounted(() => {
   if (props.flight) {
     setDefaultData(formData, props.flight);
+    formData.aircraft = {id: formData.aircraft.id, name: formData.aircraft.callSign};
+    formData.takeoffAirport = {id: formData.takeoffAirport.id, name: formData.takeoffAirport.name}
+    formData.landingAirport = {id: formData.landingAirport.id, name: formData.landingAirport.name}
   }
   isMounted.value = true;
 });
+
+const aircrafts = computed(() => {
+  return props.aircrafts.map(a => ({id: a.id, name: a.callSign}));
+});
+
+watch(() => formData.takeoffAirport, () => {
+  if (!formData.landingAirport) {
+    formData.landingAirport = {...formData.takeoffAirport};
+  }
+});
+
 </script>
 
 <template>
   <FormWrapper v-model="formData" v-if="isMounted">
     <div class="row">
       <div class="col">
-        <q-select
-          v-model="formData.aircraftId"
-          option-label="callSign"
-          option-value="id"
-          emit-value
-          map-options
-          :rules="rules.aircraft"
+        <ComboboxInput
+          v-bind="commonProps"
           :options="aircrafts"
+          v-model="formData.aircraft"
+          :key="formData.aircraft"
           label="Letadlo"
-        >
-          <template #prepend>
-            <q-icon name="flight" />
-          </template>
-        </q-select>
+        />
       </div>
     </div>
-
-    <template v-if="formData.aircraftId">
-      <div class="row">
-        <div class="col col-12 col-md-6">
-          <h3>Vzlet</h3>
-          <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu: "/>
-          <AirportLocationInput v-model="formData.takeoffAirportId" :airports="airports" label="Letiště vzletu" takeoff/>
-        </div>
-        <div class="col col-12 col-md-6" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
-
-          <h3>Přistání</h3>
-          <DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
-          <AirportLocationInput v-model="formData.landingAirportId" :airports="airports" label="Letiště přistání" landing/>
-        </div>
+    <div class="row">
+      <div class="col col-12 col-md-6">
+        <h3>Vzlet</h3>
+        <DatetimePicker
+          v-model="formData.takeoffDatetime"
+          label="Datum a čas vzletu: "
+          v-bind="commonProps"
+        />
+        <ComboboxInput
+          :options="airports"
+          v-model="formData.takeoffAirport"
+          label="Letiště vzletu"
+          v-bind="commonProps"
+          :enable-new-values="false"
+        />
       </div>
+      <div class="col col-12 col-md-6">
 
-      <div class="row" v-if="formData.landingAirportId">
-        <div class="col">
-          <q-checkbox v-model="formData.solo" label="Solo?"/>
-        </div>
-        <div class="col">
-          <q-input v-model.number="formData.landings" label="Počet přistání" type="number" min="1"/>
-        </div>
+        <h3>Přistání</h3>
+        <DatetimePicker
+          v-model="formData.landingDatetime"
+          :min-date="formData.takeoffDatetime"
+          label="Datum a čas přistání"
+          v-bind="commonProps"
+        />
+
+        <ComboboxInput
+          :options="airports"
+          v-model="formData.landingAirport"
+          label="Letiště přistání"
+          v-bind="commonProps"
+          :enable-new-values="false"
+        />
       </div>
-    </template>
+    </div>
   </FormWrapper>
 </template>