Refaktoring verejneho profilu, pridani zobrazeni udalosti

2023-10-14 22:43:16 +02:00
parent 5b47c56c6f
commit 4c8952117b
12 changed files with 228 additions and 49 deletions
@@ -0,0 +1,57 @@
+<script setup>
+import {onMounted, watch} from "vue";
+import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
+import {useRoute} from "vue-router";
+import PhotoCarousel from "components/photos/PhotoCarousel.vue";
+import FlightTrackMap from "components/flights/FlightTrackMap.vue";
+import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
+import {useAppStore} from "stores/App";
+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";
+
+const routeParams = useRoute().params;
+onMounted(() => {
+  fetchFlight(routeParams.id, routeParams.username);
+  fetchUser(routeParams.username)
+})
+
+watch(flight, (newVal) => {
+  const flightNameFormatted = flightName(newVal);
+  useAppStore().setPageTitle(flightNameFormatted);
+  useAppStore().setBreadcrumbs([
+    {to: {name: 'homepage'}, label: "Polétání.cz"},
+    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+    {label: flightNameFormatted}
+  ]);
+});
+
+</script>
+
+<template>
+  <div>
+    <FlightDetailSkeleton v-if="loading || !flight"/>
+
+    <template v-else>
+      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
+        Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
+      </q-banner>
+
+      <q-card class="q-mx-md q-my-md flight-detail-card">
+        <PhotoCarousel
+            :default-title="flightName(flight)"
+          :cover-photo-url="flight.coverPhoto?.url"
+          :photos="flight.photos"
+        />
+        <q-card-section>
+          <FlightBasicInfo :flight="flight" :show-copilots="false"/>
+
+          <article class="q-my-lg" v-html="flight.description"/>
+
+          <FlightTrackMap :flight="flight"/>
+        </q-card-section>
+      </q-card>
+      </template>
+  </div>
+</template>