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 {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 FlightPlanSideControls from "components/flightPlans/FlightPlanSideControls.vue";
import {useAircraftsStore} from "stores/Aircrafts";
import {successObject} from "src/composables/dialog";
import {useQuasar} from "quasar";
import FlightPlanRouteTable from "components/flightPlans/FlightPlanRouteTable.vue";
import FlightPlanForm from "components/flightPlans/FlightPlanForm.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},
]);

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 aircrafts = computed(() => aircraftsData.value.map(a => ({id: a.id, name: a.callSign})));

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

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

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

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


const $q = useQuasar();
const handleFlightPlanInfoSave = (formData) => {
  useFlightPlansStore().update(flightPlan.value.id, formData).then(() => {
    $q.notify(successObject("Informace úspěšně uloženy"));
  })
}
const insertAtPosition = ref(flightPlanMarkers.value.length);
const fullscreen = ref(false);
</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-tab name="navLog">
      <q-icon name="navigation"/>
      Navigační štítek
    </q-tab>

  </q-tabs>
  <q-tab-panels v-model="openedTab">
    <q-tab-panel name="route">
      <div :class="{row: true, fullscreen}">
        <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 markers-control">
          <FlightPlanSideControls
            :is-fullscreen="fullscreen"
            :insert-position="insertAtPosition"
            :flight-plan="flightPlan"
            @change-insert-position="insertAtPosition = $event"
            @open="flightPlannerDialogOpen=true"
            @fullscreen-toggle="fullscreen = !fullscreen"
          />
        </div>
      </div>
    </q-tab-panel>

    <q-tab-panel name="info">
      <div class="row">
        <div class="col">
          <FlightPlanForm
            :aircrafts="aircrafts"
            :flight-plan="flightPlan"
            @save="handleFlightPlanInfoSave"
          />
        </div>
      </div>
    </q-tab-panel>

    <q-tab-panel name="navLog">
      <FlightPlanRouteTable
        :flight-plan="flightPlan"
        :planned-speed="flightPlan.plannedSpeed"
      />
    </q-tab-panel>
  </q-tab-panels>

  <q-dialog full-width v-model="flightPlannerDialogOpen">
    <q-card>
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">Přidat otočný bod</div>
        <q-space/>
        <q-btn icon="close" flat round dense v-close-popup/>
      </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="Hotovo" v-close-popup/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>


<style lang="scss" scoped>
.fullscreen {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2001;

  .markers-control {
    background: white;
  }
}
</style>