app/src/pages/profile/flightPlanner/FlightPlanEditPage.vue

<script>
import {useFlightPlansStore} from "stores/FlightPlans";

export default {
  preFetch({currentRoute}) {
    return useFlightPlansStore().fetchDetail(currentRoute.params.id);
  }
}
</script>

<script setup>
import {computed, onMounted, ref} from "vue";
import {usePointsOfInterestStore} from "stores/PointsOfInterest";
import {storeToRefs} from "pinia";
import {useAirspacesStore} from "stores/Airspaces";
import {useAirportsStore} from "stores/Airports";
import {commonProps} from "src/composables/inputs";
import {useAppStore} from "stores/App";
import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
import FlightPlanMap from "components/flightPlans/FlightPlanMap.vue";
import FlightPlanRoute from "components/flightPlans/FlightPlanRoute.vue";
import FlightPlanMarkersList from "components/flightPlans/FlightPlanMarkersList.vue";
import DatetimePicker from "components/inputs/DatetimePicker.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import ComboboxInput from "components/inputs/ComboboxInput.vue";
import FormWrapper from "components/FormWrapper.vue";
import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import {useCopilotsStore} from "stores/Copilots";

const {flightPlan} = storeToRefs(useFlightPlansStore());

const flightPlanName = computed(() => flightPlan.value.name || "Nepojmenovaný plán");
useAppStore().setPageTitle(`${flightPlanName.value} - plánovnání`);
useAppStore().setBreadcrumbs([
  {to: {name: "flightPlans"}, label: "Moje plány"},
  {label: flightPlanName.value},
  {label: "Editace"}
]);

onMounted(() => {
  useAirspacesStore().fetch();
  useAircraftsStore().fetch({});
  usePointsOfInterestStore().fetch({limit: 10000});
  useAirportsStore().fetch();
});

const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airspaces: airspacesData, areAirspacesLoading: isQueryRunning} = storeToRefs(useAirspacesStore())
const {airports} = storeToRefs(useAirportsStore());
const {aircrafts: aircraftsData} = storeToRefs(useAircraftsStore());
const {copilots: copilotsData} = storeToRefs(useCopilotsStore());
const aircrafts = computed(() => aircraftsData.value.map(a => ({id: a.id, name: a.callSign})));


const {getMarkersFrom} = useFlightPlanUtils();
const {markerObject} = useFlightPlanObjects();

const formData = ref({
  name: flightPlan.value?.name || null,
  isDefaultName: flightPlan.value?.isDefaultName || false,
  isEditableByCopilot: flightPlan.value?.isEditableByCopilot || false,
  isPublic: flightPlan.value?.isPublic || false,
  plannedTakeoffDatetime: flightPlan.value?.plannedTakeoffDatetime || null,
  aircraft: flightPlan.value && flightPlan.value.aircraft ? {id: flightPlan.value.aircraft.id, name: flightPlan.value.aircraft.callSign} : null,
  plannedSpeed: flightPlan.value?.plannedSpeed || 150,
})

const openedTab = ref("route");
const flightPlannerDialogOpen = ref(false);
const flightPlanMarkers = ref(getMarkersFrom(flightPlan.value));

const autoFlightName = computed(() => flightPlanMarkers.value.map(m => m.name).join(" - "))


const handleMarkersChanges = (markers) => {
  flightPlanMarkers.value = markers;

  useFlightPlansStore().update(flightPlan.value.id, {
    name: formData.value.name,
    markers: markers.map(m => markerObject({
      name: m.name,
      type: m.type,
      gpsLatitude: m.gpsLatitude,
      gpsLongitude: m.gpsLongitude,
    }))
  });
};


const $q = useQuasar();
const handleFlightPlanInfoSave = () => {
  useFlightPlansStore().update(flightPlan.value.id, formData.value).then(() => {
    $q.notify(successObject("Ulozeno"));
  })
}
const insertAtPosition = ref(flightPlanMarkers.value.length);
</script>

<template>
  <q-tabs v-model="openedTab">
    <q-tab name="route">
      <q-icon name="route"/>
      Trasa
    </q-tab>

    <q-tab name="info">
      <q-icon name="info"/>
      Informace
    </q-tab>
  </q-tabs>

  <q-tab-panels v-model="openedTab">
    <q-tab-panel name="route">
      <div class="row">
        <div class="col" style="min-width: 1px">
          <FlightPlanMap
            :insert-position="insertAtPosition"
            :airspace-data="airspacesData"
            :airports="airports"
            :points-of-interest="pointsOfInterest"
            :flight-plan="flightPlan"
            @change-insert-position="insertAtPosition = $event"
            @markers-changed="handleMarkersChanges"
          />
        </div>
        <div class="col-12 col-md-3 col-lg-2">
          <FlightPlanMarkersList
            :insert-position="insertAtPosition"
            :flight-plan="flightPlan"
            @change-insert-position="insertAtPosition = $event"
            @open="flightPlannerDialogOpen=true"
          />
        </div>
      </div>
    </q-tab-panel>

    <q-tab-panel name="info">
      <div class="row">
        <div class="col">

          <FormWrapper v-model="formData" @save="handleFlightPlanInfoSave">
            <q-input v-model="formData.name" label="Jméno letu" v-if="!formData.isDefaultName" v-bind="commonProps"/>

            <q-checkbox v-model="formData.isDefaultName" label="Použít automatické jméno"/>

            <q-checkbox v-model="formData.isPublic" label="Zveřejnit"/>
            <q-checkbox v-model="formData.isEditableByCopilot" label="Kopilot může upravovat"/>
            <DatetimePicker v-model="formData.plannedTakeoffDatetime" label="Datum a čas vzletu" v-bind="commonProps"/>
            <ComboboxInput v-model="formData.aircraft" :options="aircrafts" label="Letadlo" v-bind="commonProps"/>

            <q-input v-model.number="formData.plannedSpeed" type="number" step="5" label="Plánovaná rychlost" v-bind="commonProps">
              <template #append>km/h</template>
            </q-input>

            <!--            <q-btn @click="handleFlightPlanInfoSave" icon="save">Ulozit</q-btn>-->
          </FormWrapper>
        </div>
      </div>
    </q-tab-panel>
  </q-tab-panels>


  <q-dialog full-width v-model="flightPlannerDialogOpen">
    <q-card>
      <q-card-section>
        <div class="text-h6">Přidat otočný bod</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <FlightPlanRoute
          :markers="flightPlanMarkers"
          :points-of-interest="pointsOfInterest"
          :airports="airports"
          @markers-changed="handleMarkersChanges"
        />
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="Zavřít" v-close-popup/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>