Verejna cast, hezci 404ka, refaktoring

src/pages/profile/details/FlightDetailPage.vue

@@ -1,28 +1,24 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {computed, onMounted, ref, watch} from "vue";
+import {onMounted, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
-import {useQuasar} from "quasar";
+import {copyToClipboard, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
-import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import FAB from "components/FAB.vue";
-import PhotoDetail from "components/photos/PhotoDetail.vue";
 import {useFlightsStore} from "stores/Flights";
+import PhotoCarousel from "components/flights/PhotoCarousel.vue";
+import FlightTrackMap from "components/flights/FlightTrackMap.vue";
+import {useUserStore} from "stores/User";
 
 
 const $q = useQuasar();
 const $router = useRouter();
-const displayedPhoto = ref(null);
 const flightId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchFlight(flightId).then(() => {
-    if (flight.value.photos.length === 0) return;
-    displayedPhoto.value = flight.value.coverPhoto.url || flight.value.photos[0].url;
-  })
+  fetchFlight(flightId);
 })
 
 watch(flight, (newVal) => {
@@ -43,62 +39,29 @@ const handleDeleteAndRedirect = () => {
   })
 }
 
-const trackWithGPS = computed(() => {
-  return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
-});
-
-const pointsOfInterests = computed(() => {
-  const path = [{
-    label: flight.value.takeoffAirport.name,
-    position:
-      {
-        lat: flight.value.takeoffAirport.gpsLatitude,
-        lng: flight.value.takeoffAirport.gpsLongitude
-      }
-  }];
-
-  for (const poi of trackWithGPS.value) {
-    path.push({
-      label: poi.pointOfInterest.name,
-      position: {lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude}
-    });
-  }
-
-  path.push({
-    label: flight.value.takeoffAirport.name,
-    position: {
-      lat: flight.value.landingAirport.gpsLatitude,
-      lng: flight.value.landingAirport.gpsLongitude
-    }
-  });
-
-  return path;
-});
-
-const openPhotoDetail = ref(false);
-const photoData = ref(null);
-const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos}
-}
-const mapPhotos = computed(() => {
-  return flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude)
-});
-
-const displayMap = computed(() => {
-  return (
-    !!flight.value.gpsTrackUrl ||
-    mapPhotos.value.length > 0 ||
-    trackWithGPS.value.length > 0 ||
-    flight.value.landingAirport.id !== flight.value.takeoffAirport.id
-  )
-});
 
 const togglePublicVisibility = () => {
-  useFlightsStore().update(flightId, {isPublic: !flight.value.isPublic}).then(() => {
-    $q.notify(successObject("Uspesne nastaveno"));
-  })
-}
+  const newVisibility = !flight.value.isPublic;
+  useFlightsStore()
+    .update(flightId, {isPublic: newVisibility})
+    .then((updatedFlight) => {
+      flight.value = updatedFlight;
+      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+    });
+};
+
+const copyLinkToClipboard = () => {
+  const loggedUser = useUserStore().user;
+  const url = $router.resolve({
+    name: "publicFlightDetail",
+    params: {id: flightId, username: loggedUser.publicUsername}
+  });
+  copyToClipboard(window.location.origin + url.href).then(() => {
+    $q.notify(successObject("Odkaz zkopírován"))
+  });
+  ;
+};
+
 </script>
 
 
@@ -107,63 +70,43 @@ const togglePublicVisibility = () => {
 
   <template v-else>
     <q-card class="q-mx-md q-my-md flight-detail-card">
-      <q-carousel
-        v-if="flight.photos.length > 0"
-        animated
-        v-model="displayedPhoto"
-        arrows
-        swipeable
-        height="auto"
-        infinite
-      >
-        <q-carousel-slide style="padding: 0" v-for="(photo, idx) in flight.photos" :key="photo.url" :name="photo.url">
-          <q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: flight.photos})"/>
-        </q-carousel-slide>
-      </q-carousel>
+      <PhotoCarousel :cover-photo-url="flight.coverPhoto?.url" :photos="flight.photos"/>
+
+      <q-card-actions class="q-my-md">
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to="{name: 'flightEdit', params:{id: flight.id}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+
+          <q-btn
+            @click="togglePublicVisibility"
+            :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+            flat
+            :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
+          />
+
+          <q-btn
+            icon="link"
+            @click="copyLinkToClipboard()"
+            flat
+            v-if="flight.isPublic"
+            label="Získat odkaz"
+          />
+        </div>
+        <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
+      </q-card-actions>
 
       <q-card-section>
         <FlightBasicInfo :flight="flight"/>
 
         <article class="q-my-lg" v-html="flight.description"/>
 
-        <MapWithMarkers
-          v-if="displayMap"
-          style="width: 100%; height: 500px;"
-          :gpx-track-url="flight.gpxTrackUrl"
-          :markers="pointsOfInterests"
-          :photos="mapPhotos"
-        />
+        <FlightTrackMap :flight="flight"/>
       </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn @click="togglePublicVisibility" :icon="flight.isPublic ? 'visibility' : 'visibility_off'" rounded flat text-color="primary">
-          <q-tooltip>
-
-            {{ flight.isPublic ? 'je verejny' : 'neni verejny'}}
-
-          </q-tooltip>
-        </q-btn>
-
-        <q-btn @click="handleDeleteAndRedirect" icon="delete" rounded flat text-color="red"/>
-      </q-card-actions>
     </q-card>
-
-    <PhotoDetail
-      v-if="photoData"
-      v-model="openPhotoDetail"
-      :photo="photoData.photo"
-      :photos="photoData.allPhotos"
-      :opened-index="photoData.idx"
-    />
-
-    <FAB :router-link="{name: 'flightEdit', params:{id: flight.id}}" mode="edit"/>
   </template>
 </template>
-
-<style>
-.flight-detail-card {
-  width: 100%;
-  max-width: 700px;
-  margin: 0 auto;
-}
-</style>