Drobne upravy ve vizualu, oprava comboboxu, funkcni prakticky cela editace letu

src/components/flights/form/FlightFormBasic.vue

@@ -30,13 +30,9 @@ const formData = reactive({
   landingAirportId: null,
   takeoffDatetime: null,
   landingDatetime: null,
-  durationTotal: null,
   landings: 1,
   solo: true,
 
-  durationPic: 0,
-  withInstructor: false,
-  copilotId: null,
   name: "",
   description: ""
 })
@@ -101,7 +97,7 @@ onMounted(() => {
           <q-checkbox v-model="formData.solo" label="Solo?"/>
         </div>
         <div class="col">
-          <q-input v-model="formData.landings" label="Počet přistání" type="number" min="1"/>
+          <q-input v-model.number="formData.landings" label="Počet přistání" type="number" min="1"/>
         </div>
       </div>
     </template>

src/components/flights/form/FlightFormCopilot.vue

@@ -34,12 +34,19 @@ onMounted(() => {
 
     <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}]"/>
 
-    {{ formData.copilot }}
-
     <div v-if="!formData.solo">
-      <ComboboxInput :options="copilots" v-model="formData.copilot" :key="formData.copilot" label="Druhy pilot" />
+      <ComboboxInput
+        class="q-my-lg"
+        outlined
+        standout
+        :options="copilots"
+        v-model="formData.copilot"
+        :key="formData.copilot"
+        :clearable="true"
+        label="Druhy pilot"
+      />
 
-      <q-checkbox v-model="formData.withInstructor" v-if="formData.copilot" label="Instruktor"/>
+<!--      <q-checkbox v-model="formData.withInstructor" v-if="formData.copilot" label="Instruktor"/>-->
       <!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
     </div>
 

src/components/flights/form/FlightFormTrack.vue

@@ -1,6 +1,6 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
@@ -29,6 +29,11 @@ const addTrackItem = (item) => {
   formData.track.push(item);
   poi.value = null;
 }
+watch(poi, (newVal) => {
+  if (newVal?.name) {
+    addTrackItem(newVal);
+  }
+});
 
 onMounted(() => {
   for (const i in props.flight.track) {
@@ -43,26 +48,56 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData">
+    <ComboboxInput
+      outlined
+      standout
+      class="q-my-lg"
+      v-model="poi"
+      :key="formData.track.length"
+      :options="locations"
+      @select="addTrackItem"
+      clearable
+      label="Otočný bod"
+    />
 
-    {{ 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-list bordered>
+      <q-item-label header>Trasa</q-item-label>
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar color="primary" text-color="white" icon="flight_takeoff"/>
+        </q-item-section>
+        <q-item-section>
+          {{ flight.takeoffAirport.name }}
+        </q-item-section>
       </q-item>
 
-      <q-item>{{ flight.landingAirport.name }}</q-item>
+      <q-item v-for="(item, index) in formData.track" :key="item">
+        <q-item-section avatar>
+          <q-avatar size="32px" color="secondary" text-color="white">{{ index + 1 }}.</q-avatar>
+        </q-item-section>
+        <q-item-section>
+          <span>
+            {{ item.name }}
 
+            <q-badge color="green" v-if="!item.id">
+              <q-icon name="add"/>
+            </q-badge>
+          </span>
+
+        </q-item-section>
+        <q-item-section top side>
+          <q-btn @click="removeTrackItem(index)" flat dense round icon="delete" text-color="red"/>
+        </q-item-section>
+      </q-item>
+
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar color="primary" text-color="white" icon="flight_land"/>
+        </q-item-section>
+        <q-item-section>
+          {{ flight.landingAirport.name }}
+        </q-item-section>
+      </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>