app/src/components/flights/form/FlightFormTrack.vue

<script setup>
import FormWrapper from "components/FormWrapper.vue";
import {reactive, ref, watch} from "vue";
import ComboboxInput from "components/inputs/ComboboxInput.vue";
import {commonProps} from "src/composables/inputs";

const props = defineProps({
  modelValue: {
    type: [Number, String],
  },
  locations: {
    type: Array,
    required: true
  },
  airports: {
    type: Array,
    required: true
  },
  flight: {
    type: Object,
    required: false
  }
});

const formData = reactive({
  track: [],
  gpxTrack: null
});
const removeTrackItem = (index) => {
  formData.track.splice(index, 1);
}

const poi = ref(null);
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) {
    addTrackPOIItem(newVal);
  }
});

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>
  <FormWrapper v-model="formData">

    <q-banner class="bg-green text-white" v-if="flight.gpxTrackUrl">
      <q-icon name="check"/>
      Trasa nahrána
    </q-banner>

    <q-file
      accept=".gpx"
      v-model="formData.gpxTrack"
      v-bind="commonProps"
      label="Nahrát trasu v GPX"
      hint="Slouží pro vykreslení kompletní a detailní trasy"
    >
      <template #prepend>
        <q-icon name="upload"/>
      </template>
    </q-file>

    <ComboboxInput
      v-bind="commonProps"
      v-model="poi"
      :key="formData.track.length"
      :options="locations"
      @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>
        <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 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 v-if="item.pointOfInterest">
            {{ item.pointOfInterest.name }}

            <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>
          <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>
  </FormWrapper>
</template>