Combobox, POI

src/components/flights/form/FlightFormBasic.vue

@@ -1,10 +1,8 @@
 <script setup>
-import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import {onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {formatDatetime, parseDate} from "src/composables/datetimeUtils";
-import AnotherDatetimePicker from "components/inputs/AnotherDatetimePicker.vue";
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import AirportLocationInput from "components/inputs/AirportLocationInput.vue";
 
 const props = defineProps({
@@ -77,7 +75,7 @@ onMounted(() => {
           label="Letadlo"
         >
           <template #prepend>
-            <q-icon name="flight"></q-icon>
+            <q-icon name="flight" />
           </template>
         </q-select>
       </div>
@@ -87,13 +85,13 @@ onMounted(() => {
       <div class="row">
         <div class="col col-12 col-md-6">
           <h3>Vzlet</h3>
-          <AnotherDatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu: "/>
+          <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>
-          <AnotherDatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
+          <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>

src/components/flights/form/FlightFormCopilot.vue

@@ -1,7 +1,8 @@
 <script setup>
-import {onMounted, reactive} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
   flight: {
@@ -17,7 +18,7 @@ const props = defineProps({
 const formData = reactive({
   solo: true,
   withInstructor: false,
-  copilotId: null,
+  copilot: null,
 })
 
 onMounted(() => {
@@ -25,18 +26,22 @@ onMounted(() => {
     setDefaultData(formData, props.flight);
   }
 })
+
 </script>
 
 <template>
-    <FormWrapper v-model="formData">
+  <FormWrapper v-model="formData">
 
-  <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"/>
+    <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"/>
 
-  <div v-if="!formData.solo">
-    <q-input type="text" v-model="formData.secondPilot" label="Druhý pilot"/>
-    <q-checkbox v-model="formData.withInstructor" v-if="formData.secondPilot !== ''" label="Instruktor"/>
-    <!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
-  </div>
+    {{ formData.copilot }}
 
-    </FormWrapper>
+    <div v-if="!formData.solo">
+      <ComboboxInput :options="copilots" v-model="formData.copilot" :key="formData.copilot" label="Druhy pilot" />
+
+      <q-checkbox v-model="formData.withInstructor" v-if="formData.copilot" label="Instruktor"/>
+      <!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
+    </div>
+
+  </FormWrapper>
 </template>

src/components/flights/form/FlightFormTrack.vue

@@ -0,0 +1,68 @@
+<script setup>
+import FormWrapper from "components/FormWrapper.vue";
+import {onMounted, reactive, ref} from "vue";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, String],
+  },
+  locations: {
+    type: Array,
+    required: true
+  },
+  flight: {
+    type: Object,
+    required: false
+  }
+});
+
+const formData = reactive({
+  track: []
+});
+const removeTrackItem = (index) => {
+  formData.track.splice(index, 1);
+}
+
+const poi = ref(null);
+const addTrackItem = (item) => {
+  formData.track.push(item);
+  poi.value = null;
+}
+
+onMounted(() => {
+  for (const i in props.flight.track) {
+    const poiInfo = props.flight.track[i].pointOfInterest;
+    formData.track.push({
+      id: poiInfo.id,
+      name: poiInfo.name
+    });
+  }
+});
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+
+    {{ flight.track }}
+
+    <q-list>
+      <q-item>{{ flight.takeoffAirport.name }}</q-item>
+
+      <q-item v-for="(item, index) in formData.track" :key="item">
+        {{ index + 1 }}. {{ item.name }}
+
+        <q-btn @click="removeTrackItem(index)" icon="delete" text-color="red"/>
+      </q-item>
+
+      <q-item>{{ flight.landingAirport.name }}</q-item>
+
+    </q-list>
+
+    <ComboboxInput v-model="poi" :options="locations" clearable label="Location">
+      <template #after>
+        <q-btn @click="addTrackItem(poi)" v-if="poi" rounded>+</q-btn>
+      </template>
+    </ComboboxInput>
+  </FormWrapper>
+</template>