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>

src/components/flights/form/FlightFormCopilot.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
@@ -16,14 +16,20 @@ const props = defineProps({
 });
 
 const formData = reactive({
-  solo: true,
-  withInstructor: false,
   copilot: null,
 })
 
+const solo = ref(true);
+watch(() => solo.value, (newVal) => {
+  if (!newVal) {
+    formData.copilot = null;
+  }
+});
+
 onMounted(() => {
   if (props.flight) {
     setDefaultData(formData, props.flight);
+    solo.value = !formData.copilot;
   }
 })
 
@@ -32,9 +38,15 @@ onMounted(() => {
 <template>
   <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="solo"
+      toggle-color="primary"
+      :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"
+    />
 
-    <div v-if="!formData.solo">
+    <div v-if="!solo">
       <ComboboxInput
         class="q-my-lg"
         outlined
@@ -45,9 +57,6 @@ onMounted(() => {
         :clearable="true"
         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>

src/components/flights/form/FlightFormNotes.vue

@@ -3,6 +3,7 @@ import {onMounted, ref} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
+import {commonProps} from "src/composables/inputs";
 
 const props = defineProps({
   flight: {
@@ -28,7 +29,7 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData" v-if="isMounted">
-    <q-input type="text" v-model="formData.name" label="Název"/>
-    <RichTextEditor v-model="formData.description" label="Popis letu, poznámky, ..." />
+    <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps" />
+    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..." />
   </FormWrapper>
 </template>

src/components/flights/form/FlightFormTrack.vue

@@ -2,6 +2,7 @@
 import FormWrapper from "components/FormWrapper.vue";
 import {onMounted, reactive, ref, watch} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {commonProps} from "src/composables/inputs";
 
 const props = defineProps({
   modelValue: {
@@ -18,7 +19,8 @@ const props = defineProps({
 });
 
 const formData = reactive({
-  track: []
+  track: [],
+  gpxTrack: null
 });
 const removeTrackItem = (index) => {
   formData.track.splice(index, 1);
@@ -48,16 +50,22 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData">
+
+    <q-file v-model="formData.gpxTrack" v-bind="commonProps" label="Trasa v GPX" hint="Slouží pro vykreslení kompletní a detailní trasy"/>
+
+    <template v-if="flight.gpxTrackUrl">
+      <q-icon name="check" color="green" /> Trasa nahrána
+    </template>
+
     <ComboboxInput
-      outlined
-      standout
-      class="q-my-lg"
+      v-bind="commonProps"
       v-model="poi"
       :key="formData.track.length"
       :options="locations"
       @select="addTrackItem"
       clearable
       label="Otočný bod"
+      hint="Nastav významné otočné body"
     />
 
     <q-list bordered>