From 25b1735c87ebd47e51ea1ddaa8d17abb8db9c2c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Tue, 25 Jun 2024 21:14:35 +0200
Subject: [PATCH] Redesign sidebaru v planovaci, fix fullsreenu, zobrazovani
 mista kliku na mape

---
 src/components/flightPlans/FlightPlanForm.vue | 18 +++++++-----
 .../flightPlans/FlightPlanSideControls.vue    | 20 ++++++-------
 src/components/map/AirspaceInfoWindow.vue     | 28 +++++++++++++------
 src/components/map/MapWrapper.vue             |  4 +--
 .../flightPlanner/FlightPlanEditPage.vue      | 11 +++++++-
 5 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/components/flightPlans/FlightPlanForm.vue b/src/components/flightPlans/FlightPlanForm.vue
index 3085067..d85ba8e 100644
--- a/src/components/flightPlans/FlightPlanForm.vue
+++ b/src/components/flightPlans/FlightPlanForm.vue
@@ -33,7 +33,7 @@ const formData = reactive({
     id: props.flightPlan.aircraft.id, name: props.flightPlan.aircraft.callSign
   } : null,
   plannedSpeed: props.flightPlan.plannedSpeed || 150,
-  description: props.flightPlan.description || null,
+  description: props.flightPlan.description || '',
 });
 
 const {user} = storeToRefs(useLoggedUserStore());
@@ -41,19 +41,23 @@ const {user} = storeToRefs(useLoggedUserStore());
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
-    <q-input v-model="formData.name" label="Jméno letu" v-if="!formData.isDefaultName" v-bind="commonProps"/>
-    <q-checkbox v-model="formData.isDefaultName" label="Použít automatické jméno"/>
+
+    <div class="row">
+      <div class="col-sm-8 col-md-10" v-if="!formData.isDefaultName">
+        <q-input v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
+      </div>
+      <div class="col">
+        <q-checkbox v-model="formData.isDefaultName" label="Automatické jméno" v-bind="commonProps"/>
+      </div>
+    </div>
 
     <q-checkbox v-model="formData.isPublic" label="Zveřejnit"/>
-
     <CopyLinkButton
       v-if="flightPlan.isPublic"
       :route="{name: 'publicFlightPlanDetail', params: {username: user.publicUsername, id: flightPlan.id}}"
     />
 
-    <q-editor v-model="formData.description" label="Popis" v-bind="commonProps" />
-
-    <!--            <q-checkbox v-model="formData.isEditableByCopilot" label="Kopilot může upravovat"/>-->
+    <q-editor v-model="formData.description" label="Popis" v-bind="commonProps"/>
     <DatetimePicker v-model="formData.plannedTakeoffDatetime" label="Plánovaný datum a čas vzletu" v-bind="commonProps"/>
     <ComboboxInput v-model="formData.aircraft" :options="aircrafts" label="Letadlo" v-bind="commonProps"/>
 
diff --git a/src/components/flightPlans/FlightPlanSideControls.vue b/src/components/flightPlans/FlightPlanSideControls.vue
index ffe0f16..1e1a538 100644
--- a/src/components/flightPlans/FlightPlanSideControls.vue
+++ b/src/components/flightPlans/FlightPlanSideControls.vue
@@ -18,7 +18,7 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(["open", "change-insert-position", "fullscren-toggle"])
+const emits = defineEmits(["open", "change-insert-position", "fullscreen-toggle"])
 
 const {getDuration, getTotalDistance, getTotalDuration} = useFlightPlanCalculations();
 const totalDistance = computed(() => getTotalDistance(props.flightPlan));
@@ -54,23 +54,23 @@ const totalDistance = computed(() => getTotalDistance(props.flightPlan));
         <q-item dense>
           <q-item-section>
             <q-item-label>{{ segment.from.name }}</q-item-label>
-            <q-item-label caption class="q-py-sm" v-if="segment.distance">
+            <q-item-label caption class="q-pa-sm q-ml-sm" style="border-left: solid 1px" v-if="segment.distance">
+
               {{ segment.bearing }}°,
               {{ segment.distance }} km,
               {{ minutesToHumanReadable(getDuration(segment.distance, props.flightPlan.plannedSpeed)) }}
-            </q-item-label>
-            <q-item-label>
+
               <q-btn
                 @click="emits('change-insert-position', i+1)"
                 icon="add"
                 size="xs"
-                :round="insertPosition !== i+1"
-                outline
-                class="q-ml-lg q-mb-sm"
+                round
+                class="q-ml-sm"
                 :color="insertPosition === i+1 ? 'primary' : 'grey'"
-              >
-                <template v-if="insertPosition === i+1">Přidávám sem</template>
-              </q-btn>
+              />
+            </q-item-label>
+            <q-item-label>
+
             </q-item-label>
           </q-item-section>
         </q-item>
diff --git a/src/components/map/AirspaceInfoWindow.vue b/src/components/map/AirspaceInfoWindow.vue
index d4a166a..8f3205e 100644
--- a/src/components/map/AirspaceInfoWindow.vue
+++ b/src/components/map/AirspaceInfoWindow.vue
@@ -34,7 +34,7 @@ const {getIcon} = useFlightPlanUtils();
 const {searchPlaceName} = useGeocode()
 
 const title = ref(null);
-
+const isOpened = ref(props.infoWindow.active);
 watch(() => props.infoWindow.position, async () => {
   if (props.infoWindow.title) {
     title.value = props.infoWindow.title
@@ -57,7 +57,13 @@ const addPoint = () => {
     gpsLongitude: props.infoWindow.position.lng
   }
   emits("add-to-route", point)
-  emits("close");
+  closeInfoWindow();
+}
+
+const closeInfoWindow = () => {
+  emits('close');
+  isOpened.value = false;
+  console.log("is opened? ", isOpened.value);
 }
 
 const removePoint = () => {
@@ -95,7 +101,8 @@ const openedTab = ref("info");
 
 <template>
   <InfoWindow
-    @close="emits('close')"
+    @close="closeInfoWindow"
+    v-model="isOpened"
     :options="{position: infoWindow.position}"
   >
     <q-tabs v-model="openedTab">
@@ -201,17 +208,20 @@ const openedTab = ref("info");
       </q-btn>
     </template>
 
-
+    <CustomMarker :options="{position: infoWindow.position, anchorPoint: 'CENTER'}" v-if="isOpened">
+      <div class="info-window-position"></div>
+    </CustomMarker>
   </InfoWindow>
-  <CustomMarker :options="{position: infoWindow.position, anchorPoint: 'CENTER'}">
-    <div class="info-window-position"></div>
-  </CustomMarker>
+
 </template>
 
 <style scoped>
 .info-window-position {
-  border: solid 2px orange;
+  border: solid 4px orange;
+  outline: solid 1px black;
   border-radius: 50%;
-  padding: 3px;
+  padding: 4px;
+  position: relative;
+  z-index: 9999;
 }
 </style>
diff --git a/src/components/map/MapWrapper.vue b/src/components/map/MapWrapper.vue
index 8b32a97..907bab1 100644
--- a/src/components/map/MapWrapper.vue
+++ b/src/components/map/MapWrapper.vue
@@ -169,7 +169,7 @@ const getAirspacesAtCoordinates = (clickCoordinates) => {
 }
 
 const {infoWindowObject} = useFlightPlanObjects();
-const infoWindow = ref(infoWindowObject({}));
+const infoWindow = ref({...infoWindowObject({})});
 
 const openInfoWindow = (data) => {
   infoWindow.value = infoWindowObject({active: true, ...data});
@@ -250,7 +250,7 @@ const isControlsOpened = ref(false);
     :max-zoom="13"
     ref="mapRef"
   >
-    TODO: pridavani a odebirani z trasy resit pres slot
+    <!--    TODO: pridavani a odebirani z trasy resit pres slot-->
     <AirspaceInfoWindow
       v-if="showInfoWindow && infoWindow.active"
       :info-window="infoWindow"
diff --git a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
index babf315..f06df10 100644
--- a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
+++ b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
@@ -98,8 +98,9 @@ const fullscreen = ref(false);
   <q-tab-panels v-model="openedTab">
     <q-tab-panel name="route">
       <div :class="{row: true, fullscreen}">
-        <div class="col" style="min-width: 1px">
+        <div class="col map--wrapper" style="min-width: 1px">
           <FlightPlanMap
+            class="map"
             :insert-position="insertAtPosition"
             :airspace-data="airspacesData"
             :airports="airports"
@@ -176,6 +177,14 @@ const fullscreen = ref(false);
   left: 0;
   z-index: 2001;
 
+  .map--wrapper {
+    height: 100%;
+
+    .map {
+      height: 100vh !important;
+    }
+  }
+
   .markers-control {
     background: white;
   }