From be8966b5c1382f3d0c5634f809e678ad37fa2f21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Thu, 2 May 2024 16:29:17 +0200
Subject: [PATCH] Fullscreen u planovace

---
 ...ersList.vue => FlightPlanSideControls.vue} | 16 +++++++--
 .../flightPlans/FlightPlansList.vue           | 12 ++++++-
 src/components/map/MapWrapper.vue             | 35 ++++++++++---------
 src/graphql/fragments/flightPlan.js           |  4 +++
 .../flightPlanner/FlightPlanEditPage.vue      | 27 +++++++++++---
 5 files changed, 69 insertions(+), 25 deletions(-)
 rename src/components/flightPlans/{FlightPlanMarkersList.vue => FlightPlanSideControls.vue} (89%)

diff --git a/src/components/flightPlans/FlightPlanMarkersList.vue b/src/components/flightPlans/FlightPlanSideControls.vue
similarity index 89%
rename from src/components/flightPlans/FlightPlanMarkersList.vue
rename to src/components/flightPlans/FlightPlanSideControls.vue
index 74c6c73..f6b8150 100644
--- a/src/components/flightPlans/FlightPlanMarkersList.vue
+++ b/src/components/flightPlans/FlightPlanSideControls.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, ref} from "vue";
+import {computed, ref, watch} from "vue";
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {useFlightPlanUtils} from "src/composables/flightPlan";
 
@@ -13,13 +13,17 @@ const props = defineProps({
     required: false,
     default: 150
   },
+  isFullscreen: {
+    type: Boolean,
+    default: false,
+  },
   insertPosition: {
     type: Number,
     required: true
   }
 });
 
-const emits = defineEmits(["open", "change-insert-position"])
+const emits = defineEmits(["open", "change-insert-position", "fullscren-toggle"])
 
 
 const getDuration = (distance, speed) => Math.round(distance / speed * 60)
@@ -42,7 +46,7 @@ const totalTime = computed(() => {
 
     <q-item>
       <q-item-section>
-        <div>
+        <div style="display: flex; justify-content: space-between">
           <q-btn
             @click="emits('change-insert-position', 0)"
             icon="add"
@@ -51,6 +55,12 @@ const totalTime = computed(() => {
           >
             <template v-if="insertPosition === 0">Přidávám na začátek</template>
           </q-btn>
+
+          <q-btn
+            @click='emits("fullscreen-toggle")'
+            size="sm"
+            :icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+          />
         </div>
       </q-item-section>
     </q-item>
diff --git a/src/components/flightPlans/FlightPlansList.vue b/src/components/flightPlans/FlightPlansList.vue
index a4a1510..347e3c3 100644
--- a/src/components/flightPlans/FlightPlansList.vue
+++ b/src/components/flightPlans/FlightPlansList.vue
@@ -1,5 +1,7 @@
 <script setup>
 
+import {formatDatetime} from "../../composables/datetimeUtils";
+
 const props = defineProps({
   items: {
     type: Array,
@@ -20,7 +22,15 @@ const props = defineProps({
         <q-avatar icon="person" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
-        {{ flightPlan.name }}
+        <q-item-label>
+          {{ flightPlan.name }}
+        </q-item-label>
+        <q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
+          {{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
+        </q-item-label>
+        <q-item-label caption v-if="flightPlan.aircraft">
+          {{ flightPlan.aircraft.callSign }}
+        </q-item-label>
       </q-item-section>
     </q-item>
   </q-list>
diff --git a/src/components/map/MapWrapper.vue b/src/components/map/MapWrapper.vue
index eff6942..2157419 100644
--- a/src/components/map/MapWrapper.vue
+++ b/src/components/map/MapWrapper.vue
@@ -83,26 +83,22 @@ const airspaces = computed(() => {
 
   return props.airspacesData
     .filter(airspace => !!colorsMap[airspace.type])
-    .filter(airspace => {
-      if (['TMA'].includes(airspace.type)) return displayAirspaceLayers.value.TMA;
-      if (['TRAGA'].includes(airspace.type)) return displayAirspaceLayers.value.TRAGA;
-      if (airspace.type === 'CTR') return displayAirspaceLayers.value.CTR;
-      if (airspace.type === 'RMZ') return displayAirspaceLayers.value.RMZ;
-      if (airspace.type === 'DANGER') return displayAirspaceLayers.value.DANGER;
-      if (airspace.type === 'PROHIBIT') return displayAirspaceLayers.value.PROHIBIT;
-      if (airspace.type === 'RESTRICT') return displayAirspaceLayers.value.RESTRICT;
-      if (airspace.type === 'PARA') return displayAirspaceLayers.value.PARA;
-      if (airspace.type === 'ATZ') return displayAirspaceLayers.value.ATZ;
-      return true;
-    })
+    .filter(airspace => displayAirspaceLayers.value[airspace.type])
     .map(airspace => {
+
+      let fillOpacity = 0;
+      if (["PROHIBIT", "RESTRICT"].includes(airspace.type))
+        fillOpacity = 0.1;
+      if (highlightedAirspaces.value.includes(airspace.name))
+        fillOpacity = 0.2;
+
       const data = {
         name: airspace.name,
         strokeColor: colorsMap[airspace.type],
-        strokeOpacity: 0.3,
-        strokeWeight: 3,
         fillColor: colorsMap[airspace.type],
-        fillOpacity: ["PROHIBIT", "RESTRICT"].includes(airspace.type) ? 0.1 : 0,
+        strokeOpacity: 0.5,
+        strokeWeight: 1,
+        fillOpacity,
       };
 
       if (airspace.mapBounds.length > 0) {
@@ -125,6 +121,7 @@ const airportsOnMap = computed(() => {
 const {isPointInPolygon, vectorDistanceToKm} = useVectorUtilities();
 const {vectorDistance} = useBasicVectorOperations();
 
+const highlightedAirspaces = ref([]);
 
 const getAirspacesAtCoordinates = (clickCoordinates) => {
   const airspacesUnderClick = []
@@ -144,7 +141,11 @@ const getAirspacesAtCoordinates = (clickCoordinates) => {
 }
 const handleMapClick = (e) => {
   const clickCoordinates = {lat: e.latLng.lat(), lng: e.latLng.lng()}
-  emits("map-click", {airspaces: getAirspacesAtCoordinates(clickCoordinates), clickCoordinates});
+
+  const airspacesUnderClick = getAirspacesAtCoordinates(clickCoordinates);
+  highlightedAirspaces.value = airspacesUnderClick.map(a => a.name);
+
+  emits("map-click", {airspaces: airspacesUnderClick, clickCoordinates});
 }
 
 const handleReportingPointClick = (airport, reportingPoint) => {
@@ -169,7 +170,7 @@ const handleAirportClick = (airport) => {
     ref="mapRef"
   >
     <template v-for="airspace in airspaces" :key="airspace.name">
-      <Polygon :options="airspace" @click="handleMapClick" />
+      <Polygon :options="airspace" @click="handleMapClick"/>
     </template>
 
     <slot/>
diff --git a/src/graphql/fragments/flightPlan.js b/src/graphql/fragments/flightPlan.js
index 8c7fc27..7c62ed3 100644
--- a/src/graphql/fragments/flightPlan.js
+++ b/src/graphql/fragments/flightPlan.js
@@ -44,5 +44,9 @@ export const FRAGMENT_FLIGHT_PLAN_LIST_INFO = gql`
 fragment flightPlanListInfo on FlightPlan {
   id
   name
+  plannedTakeoffDatetime
+  aircraft {
+    callSign
+  }
 }
 `;
diff --git a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
index 1ced4bd..5d26c12 100644
--- a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
+++ b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
@@ -19,7 +19,7 @@ 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 FlightPlanSideControls from "components/flightPlans/FlightPlanSideControls.vue";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
@@ -95,6 +95,7 @@ const handleFlightPlanInfoSave = () => {
   })
 }
 const insertAtPosition = ref(flightPlanMarkers.value.length);
+const fullscreen = ref(false);
 </script>
 
 <template>
@@ -112,7 +113,7 @@ const insertAtPosition = ref(flightPlanMarkers.value.length);
 
   <q-tab-panels v-model="openedTab">
     <q-tab-panel name="route">
-      <div class="row">
+      <div :class="{row: true, fullscreen}">
         <div class="col" style="min-width: 1px">
           <FlightPlanMap
             :insert-position="insertAtPosition"
@@ -124,12 +125,14 @@ const insertAtPosition = ref(flightPlanMarkers.value.length);
             @markers-changed="handleMarkersChanges"
           />
         </div>
-        <div class="col-12 col-md-3 col-lg-2">
-          <FlightPlanMarkersList
+        <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>
@@ -182,3 +185,19 @@ const insertAtPosition = ref(flightPlanMarkers.value.length);
     </q-card>
   </q-dialog>
 </template>
+
+
+<style lang="scss">
+.fullscreen {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 99999;
+
+  .markers-control {
+    background: white;
+  }
+}
+</style>