Bugfixing, dotazeni uprav s uvodni fotkou

src/pages/public/PointOfInterestDetailPage.vue

@@ -19,6 +19,8 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
@@ -30,34 +32,38 @@ useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
 useAppStore().setPageTitle(pointOfInterest.value.name);
 useMeta(() => metaData({
   title: pointOfInterest.value.name,
-  image: pointOfInterest.value.titlePhoto.url,
+  image: pointOfInterest.value.titlePhoto?.url,
   description: pointOfInterest.value.description,
-}))
-
+}));
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: pointOfInterest.value.name}
+]);
 </script>
 
 <template>
   <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
   <ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name" v-else>
     <template #content>
-
       <q-card-section>
-
-        <article v-html="pointOfInterest.description"/>
+        <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
         <EmbeddedMap
             v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
             :gps-latitude="pointOfInterest.gpsLatitude"
             :gps-longitude="pointOfInterest.gpsLongitude"
             :zoom="13"
-          />
+        />
 
-        <PhotoGallery :photos="photos"/>
+        <PhotoGallery :photos="photos" class="q-my-lg"/>
 
+        <h3>Lety na místo {{ pointOfInterest.name }}</h3>
 
-        <h3>Lety</h3>
-
-        <FlightsList :public="true" :items="flights" />
+        <FlightsListSkeleton v-if="areFlightsLoading && flights.length"/>
+        <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
+          Zdá se, že na toto místo ještě nikdo neletěl. Zatím tu nejsou ještě žádné lety.
+        </BasicInfoBanner>
+        <FlightsList v-else :items="flights" :public="true"/>
       </q-card-section>
     </template>
   </ContentCard>