Fullscreen u planovace

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>

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>

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