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";

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();
  usePointsOfInterestStore().fetch({limit: 10000});
  useAirportsStore().fetch();
});

const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
const {airspaces: airspacesData, areAirspacesLoading: isQueryRunning} = storeToRefs(useAirspacesStore())
const {airports} = storeToRefs(useAirportsStore());

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

const formData = ref({
  name: flightPlan.value?.name || null,
  isPublic: flightPlan.value?.isPublic || false,
  takeoffTime: flightPlan.value?.takeoffTime || null,
  aircraft: flightPlan.value?.aircraft || null,
  plannedSpeed: flightPlan.value?.plannedSpeed || 150
})

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

const updateFlightPlanName = () => {
  formData.value.name = 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 handleFlightPlanInfoSave = () => useFlightPlansStore().update(flightPlan.value.id, formData.value);
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-5 col-lg-3">
          <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">
          <q-form @submit.prevent="handleFlightPlanInfoSave">
            <q-input v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
            <q-btn @click="updateFlightPlanName()">Jmeno automaticky</q-btn>

            <q-checkbox v-model="formData.isPublic" label="Zveřejnit"/>
            <DatetimePicker v-model="formData.takeoffTime" label="Datum a čas vzletu" v-bind="commonProps"/>
            <q-select v-model="formData.aircraft" :options="[]" label="Letadlo" v-bind="commonProps"/>

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

            <q-btn @click="handleFlightPlanInfoSave" icon="save">Ulozit</q-btn>

          </q-form>
        </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>