Fullscreen u planovace

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>