Prepracovane zobrazeni seznamu fotke

src/components/photos/PhotoCarousel.vue

@@ -22,22 +22,24 @@ const props = defineProps({
   }
 })
 
+const $route = useRoute();
+const photoId = parseInt($route.query.photo);
+
 const displayedPhoto = ref(null);
-const openPhotoDetail = ref(false);
+
-const photoData = ref(null);
+const emits = defineEmits(["open-detail"]);
-const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos};
-}
 
 watch(() => props.photos, (newVal) => {
   if (newVal.length === 0) return;
   displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
 }, {immediate: true});
 
-const $route = useRoute();
+
+const openDetail = ({photo, idx, allPhotos}) => {
+  emits("open-detail", {photo, idx, allPhotos});
+}
+
 onMounted(() => {
-  const photoId = parseInt($route.query.photo);
   const idx = props.photos.findIndex(p => p.id === photoId);
   if (idx >= 0) {
     const photo = props.photos[idx];
@@ -75,13 +77,4 @@ onMounted(() => {
       </q-img>
     </q-carousel-slide>
   </q-carousel>
-
-  <PhotoDetail
-    v-if="photoData"
-    v-model="openPhotoDetail"
-    :default-title="defaultTitle"
-    :photo="photoData.photo"
-    :photos="photoData.allPhotos"
-    :opened-index="photoData.idx"
-  />
 </template>

src/components/photos/PhotoDetail.vue

@@ -182,7 +182,6 @@ const showExtraInfo = () => {
                 :class='{"shadow-5": true, "active-thumbnail": idx === displayedPhotoIndex}'
               />
             </div>
-
           </div>
 
           <div class="row" ref="infoWrapper">

src/components/photos/PhotosList.vue

@@ -23,7 +23,7 @@ onMounted(() => {
   }
 });
 
-const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate", "photo-click"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -33,25 +33,27 @@ const $q = useQuasar();
 
 const confirmPhotoDelete = (id) => {
   $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-    .onOk(() => {
+      .onOk(() => {
-      emits("delete", id);
+        emits("delete", id);
-    });
+      });
 }
 
 const confirmBatchPhotoDelete = () => {
   $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
-    .onOk(() => {
+      .onOk(() => {
-      for (const id in batchEdit.value) {
+        for (const id in batchEdit.value) {
-        if (!batchEdit.value[id]) continue;
+          if (!batchEdit.value[id]) continue;
-        emits("delete", parseInt(id));
+          emits("delete", parseInt(id));
-        batchEdit.value[id] = false;
+          batchEdit.value[id] = false;
-      }
+        }
-    });
+      });
 }
 
 const handleImageClick = (photo, idx) => {
   if (props.showActions) {
     batchEdit.value[photo.id] = !batchEdit.value[photo.id];
+  } else {
+    emits("photo-click", {photo, idx});
   }
 }
 
@@ -120,7 +122,7 @@ const batchOptionsProps = computed(() => ({
   <div class="row">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
-        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)">
+        <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -139,9 +141,9 @@ const batchOptionsProps = computed(() => ({
             <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude"/>
             <q-icon name="gps_off" v-else/>
           </div>
-          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}" />
+          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
-          <q-btn flat icon="info" color="blue" @click="openEdit(photo)" />
+          <q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
-          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)" />
+          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
         </q-card-actions>
       </q-card>
     </div>

src/composables/photos/photo.js

@@ -0,0 +1,12 @@
+import {ref} from "vue";
+import {flight} from "src/composables/objects/flight";
+
+export const openPhotoDetail = ref(false);
+export const photoData = ref(null);
+export const openDetail = ({photo, idx, allPhotos}) => {
+  openPhotoDetail.value = true;
+  photoData.value = {photo, idx, allPhotos};
+}
+export const openPhotoFromList = ({photo, idx}) => {
+  openDetail({photo, idx, allPhotos: flight.value.photos});
+}

src/pages/profile/flight/FlightDetailPage.vue

@@ -12,6 +12,10 @@ import PhotoCarousel from "components/photos/PhotoCarousel.vue";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
+import PhotosList from "components/photos/PhotosList.vue";
+import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -44,11 +48,11 @@ const handleDeleteAndRedirect = () => {
 const togglePublicVisibility = () => {
   const newVisibility = !flight.value.isPublic;
   useFlightsStore()
-    .update(flightId, {isPublic: newVisibility})
+      .update(flightId, {isPublic: newVisibility})
-    .then((updatedFlight) => {
+      .then((updatedFlight) => {
-      flight.value = updatedFlight;
+        flight.value = updatedFlight;
-      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+        $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
-    });
+      });
 };
 
 const copyLinkToClipboard = () => {
@@ -69,46 +73,94 @@ const copyLinkToClipboard = () => {
 
   <q-card class="flight-detail-card" v-else>
     <PhotoCarousel
-      :cover-photo-url="flight.coverPhoto?.url"
+        :cover-photo-url="flight.coverPhoto?.url"
-      :carousel-title="flightName(flight)"
+        :carousel-title="flightName(flight)"
-      :photos="flight.photos"
+        :photos="flight.photos"
+        @open-detail="openDetail"
     />
 
     <q-card-actions class="q-my-md">
       <div class="col-grow">
         <q-btn
-          flat
+            flat
-          :to="{name: 'flightEdit', params:{id: flight.id}}"
+            :to="{name: 'flightEdit', params:{id: flight.id}}"
-          icon="edit"
+            icon="edit"
-          text-color="primary"
+            text-color="primary"
-          label="Upravit"
+            label="Upravit"
         />
 
         <q-btn
-          @click="togglePublicVisibility"
+            @click="togglePublicVisibility"
-          :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+            :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
+            :disable="!loggedUser.publicUsername"
-          flat
+            flat
-          :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
+            :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />
 
         <q-btn
-          icon="link"
+            icon="link"
-          @click="copyLinkToClipboard()"
+            @click="copyLinkToClipboard()"
-          flat
+            flat
-          v-if="flight.isPublic"
+            v-if="flight.isPublic"
-          label="Získat odkaz"
+            label="Získat odkaz"
         />
       </div>
       <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
     </q-card-actions>
 
     <q-card-section>
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+      </div>
       <FlightBasicInfo :flight="flight" :show-copilots="true"/>
 
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+      </div>
       <article class="q-my-lg" v-html="flight.description"/>
 
-      <FlightTrackMap :flight="flight"/>
+      <q-separator />
+
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
+      </div>
+      <BasicInfoBanner
+          v-if="flight.photos.length === 0"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
+      >
+        U tohoto letu nemáš nahrané žádné fotografie.
+      </BasicInfoBanner>
+      <PhotosList
+          v-else
+          :photos="flight.photos"
+          :show-actions="false"
+          @photo-click="openPhotoFromList"
+      />
+
+      <q-separator />
+
+      <div class="text-right">
+        <q-btn class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+      </div>
+      <BasicInfoBanner
+          v-if="flight.track.length === 0 && !flight.gpxTrack"
+          :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
+      >
+        Nemáš nastavenou žádnou trasu.
+      </BasicInfoBanner>
+      <FlightTrackMap
+          v-else
+          :flight="flight"
+      />
     </q-card-section>
   </q-card>
+
+  <PhotoDetail
+      v-if="photoData"
+      v-model="openPhotoDetail"
+      :default-title="flightName(flight)"
+      :photo="photoData.photo"
+      :photos="photoData.allPhotos"
+      :opened-index="photoData.idx"
+  />
 </template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -10,6 +10,9 @@ import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
 import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import PhotosList from "components/photos/PhotosList.vue";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+import {openDetail, openPhotoDetail, openPhotoFromList, photoData} from "src/composables/photos/photo";
 
 const routeParams = useRoute().params;
 onMounted(() => {
@@ -26,7 +29,6 @@ watch(flight, (newVal) => {
     {label: flightNameFormatted}
   ]);
 });
-
 </script>
 
 <template>
@@ -40,18 +42,30 @@ watch(flight, (newVal) => {
 
       <q-card class="q-mx-md q-my-md flight-detail-card">
         <PhotoCarousel
-            :default-title="flightName(flight)"
+          :default-title="flightName(flight)"
           :cover-photo-url="flight.coverPhoto?.url"
           :photos="flight.photos"
+          @open-detail="openDetail"
         />
         <q-card-section>
           <FlightBasicInfo :flight="flight" :show-copilots="false"/>
 
           <article class="q-my-lg" v-html="flight.description"/>
 
+          <PhotosList :photos="flight.photos" :show-actions="false" @photo-click="openPhotoFromList"/>
+
           <FlightTrackMap :flight="flight"/>
         </q-card-section>
       </q-card>
-      </template>
+
+      <PhotoDetail
+        v-if="photoData"
+        v-model="openPhotoDetail"
+        :default-title="flightName(flight)"
+        :photo="photoData.photo"
+        :photos="photoData.allPhotos"
+        :opened-index="photoData.idx"
+      />
+    </template>
   </div>
 </template>