From 70bc57d3c7a3edc332cd0de9906e30c0a1799dc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 3 Jun 2024 23:07:41 +0200
Subject: [PATCH] Planovac, lepsi social image

---
 src/components/flightPlans/FlightPlanMap.vue  |  2 +-
 .../flightPlans/FlightPlanSideControls.vue    |  6 ++--
 src/components/map/MapWrapper.vue             | 33 +++++++++----------
 src/graphql/fragments/flight.js               |  1 +
 src/graphql/fragments/user.js                 |  1 +
 src/pages/profile/flight/EditFlightPage.vue   |  5 +--
 src/pages/profile/flight/FlightDetailPage.vue |  2 +-
 .../flightPlanner/FlightPlanEditPage.vue      |  2 --
 .../public/pilotProfile/FlightDetailPage.vue  |  8 +++--
 .../public/pilotProfile/FlightsListPage.vue   |  2 +-
 10 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/flightPlans/FlightPlanMap.vue b/src/components/flightPlans/FlightPlanMap.vue
index ee58dcb..e8ed90d 100644
--- a/src/components/flightPlans/FlightPlanMap.vue
+++ b/src/components/flightPlans/FlightPlanMap.vue
@@ -81,7 +81,7 @@ const handleMarkerMove = async (idx, event) => {
 <template>
   <MapWrapper
     ref="mapWrap"
-    style="width: 100%; height: 100%; min-height: 500px"
+    style="width: 100%; height: 65vh; min-height: 500px"
     :center="center"
     :zoom="8"
     :track="{path: track, geodesic: true, strokeColor: '#ff00ff', strokeOpacity: 1, strokeWeight: 3}"
diff --git a/src/components/flightPlans/FlightPlanSideControls.vue b/src/components/flightPlans/FlightPlanSideControls.vue
index 0026227..0981a34 100644
--- a/src/components/flightPlans/FlightPlanSideControls.vue
+++ b/src/components/flightPlans/FlightPlanSideControls.vue
@@ -43,7 +43,7 @@ const totalTime = computed(() => {
 
 <template>
   <q-list bordered class="q-ml-md-md q-pt-md">
-    <q-item>
+    <q-item class="mobile-hide">
       <q-item-section>
         <div style="display: flex; justify-content: space-between">
           <q-btn
@@ -65,7 +65,7 @@ const totalTime = computed(() => {
       </q-item-section>
     </q-item>
 
-    <q-scroll-area style="height: 50vh">
+    <q-scroll-area class="mobile-hide" style="height: 55vh">
       <template v-for="(segment, i) in props.flightPlan.track" :key="segment">
         <q-item dense>
           <q-item-section>
@@ -114,7 +114,7 @@ const totalTime = computed(() => {
     </q-scroll-area>
 
     <template v-if="totalDistance">
-      <q-item>
+      <q-item class="mobile-hide">
         <q-item-section>
           <q-separator/>
         </q-item-section>
diff --git a/src/components/map/MapWrapper.vue b/src/components/map/MapWrapper.vue
index 08476c8..eb759a6 100644
--- a/src/components/map/MapWrapper.vue
+++ b/src/components/map/MapWrapper.vue
@@ -245,7 +245,7 @@ const isControlsOpened = ref(false);
     @click="handleMapClick"
     map-type-id="roadmap"
     gesture-handling="greedy"
-    :max-zoom="13"
+    :max-zoom="11"
     ref="mapRef"
   >
     <AirspaceInfoWindow
@@ -289,24 +289,23 @@ const isControlsOpened = ref(false);
           &#9650;
         </CustomMarker>
       </template>
-
-      <template v-for="poi in pointsOfInterest" :key="poi.name">
-        <CustomMarker
-          v-if="poi.gpsLatitude && poi.gpsLongitude"
-          :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
-          @click.stop="handlePoiClick(poi)"
-        >
-          <div style="padding: 5px; border-radius: 15px; background: #8bdfff">
-            <img style="width: 20px" src="/public/mapIcons/photo-32x32.png" alt="">
-          </div>
-        </CustomMarker>
-      </template>
-
-      <Polyline v-if="track" :options="track"/>
     </template>
 
+    <template v-for="poi in pointsOfInterest" :key="poi.name">
+      <CustomMarker
+        v-if="poi.gpsLatitude && poi.gpsLongitude"
+        :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
+        @click.stop="handlePoiClick(poi)"
+      >
+        <div style="padding: 5px; border-radius: 15px; background: #8bdfff">
+          <img style="width: 20px" src="/mapIcons/photo-32x32.png" alt="">
+        </div>
+      </CustomMarker>
+    </template>
 
-    <CustomControl position="BOTTOM_LEFT" v-if="showLayerControls" style="width: 30%">
+    <Polyline v-if="track" :options="track"/>
+
+    <CustomControl position="BOTTOM" v-if="showLayerControls" style="width: auto; max-width: 200px">
       <q-btn
         @click="isControlsOpened = !isControlsOpened"
         :icon="isControlsOpened ? 'layers_clear' : 'layers'"
@@ -320,8 +319,8 @@ const isControlsOpened = ref(false);
       <q-card
         v-if="isControlsOpened"
         class="q-my-md q-mx-auto q-px-lg"
+        style="max-width: 30%; min-width: 200px;"
       >
-
         <template v-for="(airspaceLayer, key) in airspaceLayers" :key="airspaceLayer">
           <q-checkbox
             v-model="airspaceLayers[key].displayed"
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 78c2a44..9bc1fb1 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -30,6 +30,7 @@ fragment flightFullInfo on Flight {
   durationMinCalculated
   isPublic
 
+  socialImageUrl
   titlePhoto {
     thumbnailUrl
     url
diff --git a/src/graphql/fragments/user.js b/src/graphql/fragments/user.js
index 6363834..f1b4cc9 100644
--- a/src/graphql/fragments/user.js
+++ b/src/graphql/fragments/user.js
@@ -7,6 +7,7 @@ export const FRAGMENT_USER_FULL_INFO = gql`
     email
     avatarImageUrl
     titleImageUrl
+    socialImageUrl
     publicUsername
     description
     createdAt
diff --git a/src/pages/profile/flight/EditFlightPage.vue b/src/pages/profile/flight/EditFlightPage.vue
index 5408228..c27e6a3 100644
--- a/src/pages/profile/flight/EditFlightPage.vue
+++ b/src/pages/profile/flight/EditFlightPage.vue
@@ -112,7 +112,7 @@ const openBatchPhotoForm = (photos) => {
   editBatchPhotos.value = photos;
 }
 
-const handleBatchPhotoEdit = async (flightId, data) => {
+const handleBatchPhotoEdit = async (data) => {
   const photoIds = data.photoIds;
   delete data.photoIds;
   delete data.id;
@@ -122,6 +122,7 @@ const handleBatchPhotoEdit = async (flightId, data) => {
       ...data.pointOfInterest,
       isPublic: false,
       description: "",
+      urlSlug: "",
     }
     await usePointsOfInterestStore().create(poiData).then(poi => data.pointOfInterest = {id: poi.id, name: poi.name});
   }
@@ -223,7 +224,7 @@ const handleBatchPhotoEdit = async (flightId, data) => {
           :photos="editBatchPhotos"
           :copilots="flight.copilots"
           :aircrafts="aircrafts"
-          @save="handleBatchPhotoEdit(flightId, $event)"
+          @save="handleBatchPhotoEdit"
           @delete="deletePhoto"
         />
 
diff --git a/src/pages/profile/flight/FlightDetailPage.vue b/src/pages/profile/flight/FlightDetailPage.vue
index ca589d1..38ee395 100644
--- a/src/pages/profile/flight/FlightDetailPage.vue
+++ b/src/pages/profile/flight/FlightDetailPage.vue
@@ -50,7 +50,7 @@ const handleDeleteAndRedirect = () => {
     .onOk(() => {
       useFlightsStore().destroy(flightId).then(() => {
         $router.push({name: "myFlights"});
-        $q.notify(successObject(`Úspěšně smazáno`));
+        $q.notify(successObject('Úspěšně smazáno'));
       });
     });
 };
diff --git a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
index 179793a..8f03838 100644
--- a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
+++ b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
@@ -106,7 +106,6 @@ const fullscreen = ref(false);
       Informace
     </q-tab>
   </q-tabs>
-
   <q-tab-panels v-model="openedTab">
     <q-tab-panel name="route">
       <div :class="{row: true, fullscreen}">
@@ -137,7 +136,6 @@ const fullscreen = ref(false);
     <q-tab-panel name="info">
       <div class="row">
         <div class="col">
-
           <FormWrapper v-model="formData" @save="handleFlightPlanInfoSave">
             <q-input v-model="formData.name" label="Jméno letu" v-if="!formData.isDefaultName" v-bind="commonProps"/>
 
diff --git a/src/pages/public/pilotProfile/FlightDetailPage.vue b/src/pages/public/pilotProfile/FlightDetailPage.vue
index 922e46e..a7198ed 100644
--- a/src/pages/public/pilotProfile/FlightDetailPage.vue
+++ b/src/pages/public/pilotProfile/FlightDetailPage.vue
@@ -22,7 +22,7 @@ import {useMeta} from "quasar";
 import {aircraftKeywords, flightEventKeywords, flightKeywords, metaData} from "src/composables/meta";
 import ContentCard from "components/ContentCard.vue";
 import {usePhotosStore} from "stores/Photos";
-import {computed} from "vue";
+import {computed, onMounted} from "vue";
 import {publicFlightBreadcrumbs} from "src/composables/breadcrumbs";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
@@ -34,7 +34,9 @@ const props = defineProps({
   }
 });
 
-usePhotosStore().fetchPublic({flightId: flight.value.id});
+onMounted(() => {
+  usePhotosStore().fetchPublic({flightId: flight.value.id});
+})
 const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
 
 const flightNameFormatted = flightName(flight.value);
@@ -52,7 +54,7 @@ useMeta(() => metaData({
       ...flightEventKeywords(event.value)
     ],
     description: flight.value.description,
-    image: flight.value.titlePhoto?.url
+    image: flight.value.socialImageUrl
   }
 ));
 </script>
diff --git a/src/pages/public/pilotProfile/FlightsListPage.vue b/src/pages/public/pilotProfile/FlightsListPage.vue
index 83e2cef..3e1742a 100644
--- a/src/pages/public/pilotProfile/FlightsListPage.vue
+++ b/src/pages/public/pilotProfile/FlightsListPage.vue
@@ -22,7 +22,7 @@ useMeta(() => metaData({
   title: `${props.pilot.publicUsername} - Lety`,
   keywords: [...commonKeywords, "pilot", props.pilot.publicUsername, props.pilot.name],
   description: `Výlety publikované pilotem ${props.pilot.name}. ${props.pilot.publicUsername}: ${props.pilot.description}`,
-  image: props.pilot.titleImageUrl
+  image: props.pilot.socialImageUrl
 }));
 
 useAppStore().setPageTitle(props.pilot.publicUsername);