Bugfixing, dotazeni uprav s uvodni fotkou

Dockerfile

@@ -11,6 +11,8 @@ COPY . .
 
 # build stage
 FROM develop-stage as build-stage
+ENV NODE_ENV production
+
 RUN quasar build -m ssr
 
 FROM node:20-alpine as production-stage

src/boot/apollo.js

@@ -12,7 +12,7 @@ const handleRefreshToken = (store, forward, operation) => {
   return fromPromise(useUserStore(store).refreshAccessToken()
     .catch((error) => {
       Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
-      window.location = "/login";
+      if (window) window.location = "/login";
     }))
     .filter((value) => Boolean(value))
     .flatMap((accessToken) => {

src/components/ContentCard.vue

@@ -21,12 +21,14 @@ const props = defineProps({
         :photo="titlePhoto"
         :title="title"
     />
+    <q-card-section v-else-if="title && title !== ''">
+      <h3>{{ title }}</h3>
+    </q-card-section>
 
     <q-card-actions>
       <slot name="actions"/>
     </q-card-actions>
 
     <slot name="content"/>
-
   </q-card>
 </template>

src/components/ContentCardEditButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  to: {
+    type: Object,
+    required: true
+  },
+  label: {
+    type: String,
+    required: false,
+    default: null
+  }
+});
+</script>
+
+<template>
+
+  <div class="text-right">
+    <q-btn flat class="q-my-sm" :to="props.to" icon="edit" color="primary">
+      {{ props.label }}
+    </q-btn>
+  </div>
+</template>

src/components/aircrafts/AircraftsList.vue

@@ -22,7 +22,7 @@ useAppStore().setPageTitle("Letadla");
     >
       <q-item-section avatar>
         <q-avatar v-if="aircraft.titlePhoto">
-          <img :src="aircraft.titlePhoto.url" alt=""/>
+          <img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
         </q-avatar>
         <q-avatar color="teal" text-color="white" icon="flight" v-else/>
       </q-item-section>

src/components/poi/POIList.vue

@@ -10,7 +10,10 @@ const props = defineProps({
   <q-list bordered separator>
     <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="{name: 'poiDetail', params: {id: poi.id}}">
       <q-item-section avatar>
-        <q-avatar :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
+        <q-avatar v-if="poi.titlePhoto">
+          <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
+        </q-avatar>
+        <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
         {{ poi.name }}

src/composables/form/formHandling.js

@@ -1,3 +1,5 @@
+import {successObject} from "src/composables/dialog";
+
 export const setDefaultData = (formData, defaultData) => {
   const ignoredFields = ['__typename'];
 
@@ -10,3 +12,12 @@ export const setDefaultData = (formData, defaultData) => {
     formData[key] = defaultData[key];
   }
 }
+
+export const toggleVisibility = ({store, $q, object}) => {
+  console.log(object);
+  const newVisibility = !object.isPublic;
+  store.update(object.id, {isPublic: newVisibility})
+      .then(() => {
+        $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
+      });
+}

src/graphql/fragments/aircraft.js

@@ -2,6 +2,24 @@ import gql from "graphql-tag";
 import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
+export const FRAGMENT_AIRCRAFT_LIST_INFO = gql`
+fragment aircraftListInfo on Aircraft {
+  id
+  callSign
+  model
+  manufacturer
+  isPublic
+
+  titlePhoto {
+    thumbnailUrl
+  }
+
+  organization {
+    name
+  }
+}
+`;
+
 export const FRAGMENT_AIRCRAFT_FULL_INFO = gql`
 fragment aircraftFullInfo on Aircraft {
   id
@@ -10,7 +28,6 @@ fragment aircraftFullInfo on Aircraft {
   description
   manufacturer
   seats
-
   createdById
   isPublic
 
@@ -29,6 +46,7 @@ fragment aircraftFullInfo on Aircraft {
 export const FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO = gql`
 fragment aircraftFullPrivateInfo on Aircraft {
     ...aircraftFullInfo
+
     photos {
       ...photoFullInfo
 

src/graphql/fragments/poi.js

@@ -8,6 +8,9 @@ fragment pointOfInterestListInfo on PointOfInterest {
   id
   name
   isPublic
+  titlePhoto {
+    thumbnailUrl
+  }
   type {
     id
     name

src/graphql/queries/aircrafts.js

@@ -1,14 +1,14 @@
 import gql from "graphql-tag";
-import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO} from "src/graphql/fragments/aircraft";
+import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO, FRAGMENT_AIRCRAFT_LIST_INFO} from "src/graphql/fragments/aircraft";
 
 export const AIRCRAFTS_LIST = gql`
 query AircraftsList {
   aircrafts {
-    ...aircraftFullInfo
+    ...aircraftListInfo
   }
 }
 
-${FRAGMENT_AIRCRAFT_FULL_INFO}
+${FRAGMENT_AIRCRAFT_LIST_INFO}
 `;
 
 

src/graphql/queries/poi.js

@@ -32,7 +32,7 @@ ${FRAGMENT_POI_FULL_PRIVATE_INFO}
 `;
 
 export const POI_PUBLIC_DETAIL = gql`
-query poiDetail($id: Int!) {
+query publicPOIDetail($id: Int!) {
   pointOfInterest(id: $id, public: true) {
     ...pointOfInterestFullInfo
   }

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {useMeta, useQuasar} from "quasar";
+import {copyToClipboard, useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
@@ -15,6 +15,9 @@ import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
 import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
 import {useUserStore} from "stores/User";
+import {useFlightsStore} from "stores/Flights";
+import {toggleVisibility} from "src/composables/form/formHandling";
+import ContentCardEditButton from "components/ContentCardEditButton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -43,6 +46,22 @@ const deleteAircraft = (id) => {
         });
       });
 };
+
+const togglePublicVisibility = () => toggleVisibility({
+  $q,
+  store: useAircraftsStore(),
+  object: aircraft.value
+});
+
+const copyLinkToClipboard = () => {
+  const url = $router.resolve({
+    name: "publicAircraftDetail",
+    params: {id: aircraftId}
+  });
+  copyToClipboard(window.location.origin + url.href).then(() => {
+    $q.notify(successObject("Odkaz zkopírován"))
+  });
+};
 </script>
 
 <template>
@@ -53,19 +72,34 @@ const deleteAircraft = (id) => {
       <template #actions v-if="aircraft.createdById === loggedUser?.id">
         <div class="col-grow">
           <q-btn
+              @click="togglePublicVisibility"
+              :icon="aircraft.isPublic ? 'visibility_off' : 'visibility'"
               flat
-            :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
+              :label="aircraft.isPublic ? 'Skrýt' : 'Zveřejnit'"
-            icon="edit"
+          />
-            text-color="primary"
+          <q-btn
-            label="Upravit"
+              icon="link"
+              @click="copyLinkToClipboard()"
+              flat
+              v-if="aircraft.isPublic"
+              label="Získat odkaz"
           />
         </div>
         <q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
       </template>
       <template #content>
         <q-card-section>
+
+          <ContentCardEditButton
+              :to='{name: "aircraftEdit", params: {id: aircraft.id, step: "info"}}'
+              label="Upravit informace"
+          />
           <AircraftInfo :aircraft="aircraft"/>
 
+          <ContentCardEditButton
+              :to='{name: "aircraftEdit", params: {id: aircraft.id, step: "photo"}}'
+              label="Titulní fotografie"
+          />
           <PhotoGallery :photos="aircraft.photos"/>
           <h3>Lety</h3>
           <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
@@ -75,8 +109,5 @@ const deleteAircraft = (id) => {
         </q-card-section>
       </template>
     </ContentCard>
-
   </template>
-
-
 </template>

src/pages/profile/flight/FlightDetailPage.vue

@@ -15,22 +15,24 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
+import ContentCardEditButton from "components/ContentCardEditButton.vue";
+import {toggleVisibility} from "src/composables/form/formHandling";
 
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {
 useFlightsStore().fetchDetail(flightId).then(f => {
+  if (!f) return;
+
   const flightNameFormatted = flightName(f);
   useAppStore().setPageTitle(flightNameFormatted);
   useAppStore().setBreadcrumbs([
     {to: {name: "myFlights"}, label: "Moje lety"},
     {label: flightNameFormatted}
   ]);
-  })
+});
-})
 
 const handleDeleteAndRedirect = () => {
   $q.dialog(confirmObject("Opravdu chceš smazat tento let?"))
@@ -42,14 +44,11 @@ const handleDeleteAndRedirect = () => {
       });
 }
 
-const togglePublicVisibility = () => {
+const togglePublicVisibility = () => toggleVisibility({
-  const newVisibility = !flight.value.isPublic;
+  $q,
-  useFlightsStore()
+  store: useFlightsStore(),
-    .update(flightId, {isPublic: newVisibility})
+  object: flight.value
-    .then(() => {
-      $q.notify(successObject(newVisibility ? "Úspěšně publikováno" : "Úspěšně skryto"));
 });
-};
 
 const copyLinkToClipboard = () => {
   const loggedUser = useUserStore().user;
@@ -93,25 +92,29 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
     <template #content>
       <q-card-section>
-        <div class="text-right">
+        <ContentCardEditButton
-          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}"
-        </div>
+            label="Upravit informace"
+        />
         <FlightBasicInfo
             :flight="flight"
             :aircraft-detail-route="{name: 'aircraftDetail'}"
             :copilot-detail-route="{name: 'copilotDetail'}"
         />
 
-        <div class="text-right">
+        <ContentCardEditButton
-          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}" icon="edit" color="primary">Upravit text</q-btn>
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'notes'}}"
-        </div>
+            label="Upravit text"
+        />
         <article class="q-my-lg" v-html="flight.description"/>
+        <BasicInfoBanner v-if="flight.description === ''">Popiš, jaký byl let.</BasicInfoBanner>
 
         <q-separator/>
 
-        <div class="text-right">
+        <ContentCardEditButton
-          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}" icon="edit" color="primary">Upravit fotky</q-btn>
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
-        </div>
+            label="Upravit fotografie"
+        />
         <BasicInfoBanner
             v-if="flight.photos.length === 0"
             :route-add="{name: 'flightEdit', params: {id: flightId, step: 'photos'}}"
@@ -125,9 +128,10 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 
         <q-separator/>
 
-        <div class="text-right">
+        <ContentCardEditButton
-          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}" icon="edit" color="primary">Upravit trasu</q-btn>
+            :to="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
-        </div>
+            label="Upravit trasu"
+        />
         <BasicInfoBanner
             v-if="flight.track.length === 0 && !flight.gpxTrack"
             :route-add="{name: 'flightEdit', params: {id: flightId, step: 'track'}}"
@@ -142,5 +146,4 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
       </q-card-section>
     </template>
   </ContentCard>
-
 </template>

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -1,8 +1,6 @@
 <script setup>
-import {computed, onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
-import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
@@ -11,12 +9,14 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
-import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
+import {toggleVisibility} from "src/composables/form/formHandling";
+import {copyToClipboard, useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+import ContentCardEditButton from "components/ContentCardEditButton.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;
 
-onMounted(() => {
 usePointsOfInterestStore().fetchDetail(useRoute().params.id).then((p) => {
   useAppStore().setPageTitle(`${p.name}`);
   useAppStore().setBreadcrumbs([
@@ -24,15 +24,25 @@ onMounted(() => {
     {label: p.name},
   ])
 });
-});
 
 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
 
-const titlePhoto = computed(() => {
+const $q = useQuasar();
-  if (!pointOfInterest.value || pointOfInterest.value.photos.length === 0) return null;
+const togglePublicVisibility = () => toggleVisibility({
-
+  $q,
-  return pointOfInterest.value.titlePhoto || pointOfInterest.value.photos[0];
+  store: usePointsOfInterestStore(),
+  object: pointOfInterest.value
 });
+
+const copyLinkToClipboard = () => {
+  const url = $router.resolve({
+    name: "publicPOIDetail",
+    params: {id: pointOfInterest.value.id}
+  });
+  copyToClipboard(window.location.origin + url.href).then(() => {
+    $q.notify(successObject("Odkaz zkopírován"))
+  });
+};
 </script>
 
 <template>
@@ -40,21 +50,32 @@ const titlePhoto = computed(() => {
 
   <template v-else>
 
-    <ContentCard :title-photo="titlePhoto" :title="pointOfInterest.name">
+    <ContentCard :title-photo="pointOfInterest.titlePhoto" :title="pointOfInterest.name">
       <template #actions v-if="pointOfInterest.createdById === loggedUser.id">
         <div class="col-grow">
           <q-btn
+              @click="togglePublicVisibility"
+              :icon="pointOfInterest.isPublic ? 'visibility_off' : 'visibility'"
               flat
-            :to="{name: 'poiEdit', params:{id: pointOfInterest.id}}"
+              :label="pointOfInterest.isPublic ? 'Skrýt' : 'Zveřejnit'"
-            icon="edit"
+          />
-            text-color="primary"
+          <q-btn
-            label="Upravit"
+              icon="link"
+              @click="copyLinkToClipboard()"
+              flat
+              v-if="pointOfInterest.isPublic"
+              label="Získat odkaz"
           />
         </div>
       </template>
 
       <template #content>
         <q-card-section>
+
+          <ContentCardEditButton
+              :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'info'}}"
+              label="Upravit informace"
+          />
           <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
           <EmbeddedMap
@@ -67,6 +88,10 @@ const titlePhoto = computed(() => {
             Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
           </BasicInfoBanner>
 
+          <ContentCardEditButton
+              :to="{name: 'poiEdit', params:{id: pointOfInterest.id, step: 'photo'}}"
+              label="Úvodní fotografie"
+          />
           <PhotoGallery
               :photos="pointOfInterest.photos"
               v-if="pointOfInterest.photos.length > 0"
@@ -75,6 +100,9 @@ const titlePhoto = computed(() => {
             Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
           </BasicInfoBanner>
 
+
+          <h3>Tvoje lety do místa {{ pointOfInterest.name }}</h3>
+
           <FlightsList
               :items="pointOfInterest.flights"
               :public="false"

src/pages/public/AircraftDetailPage.vue

@@ -24,6 +24,8 @@ import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
 import {useUserStore} from "stores/User";
 import {usePhotosStore} from "stores/Photos";
 import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -39,13 +41,20 @@ useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
   title: aircraft.value.callSign,
-  image: aircraft.value.titleImage?.url
+  image: aircraft.value.titleImage?.url,
+  keywords: [
+    "letadlo",
+    aircraft.value.callSign,
+    aircraft.value.model,
+    aircraft.value.organization?.name,
+    aircraft.value.manufacturer
+  ],
+  description: aircraft.value.description
 }));
 useAppStore().setBreadcrumbs([
   {label: "Polétání.cz", to: {name: "homepage"}},
   {label: aircraft.value.callSign}
 ]);
-
 </script>
 
 <template>
@@ -61,7 +70,11 @@ useAppStore().setBreadcrumbs([
 
           <h3>Lety</h3>
 
-          <FlightsList :items="flights" :public="true" />
+          <FlightsListSkeleton v-if="areFlightsLoading && flights.length"/>
+          <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
+            U tohoto letadla nejsou publikované žádné lety.
+          </BasicInfoBanner>
+          <FlightsList v-else :items="flights" :public="true"/>
         </q-card-section>
       </template>
     </ContentCard>

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,20 +32,21 @@ 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" class="q-my-lg"/>
-        <article v-html="pointOfInterest.description"/>
 
         <EmbeddedMap
             v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
@@ -52,12 +55,15 @@ useMeta(() => metaData({
             :zoom="13"
         />
 
-        <PhotoGallery :photos="photos"/>
+        <PhotoGallery :photos="photos" class="q-my-lg"/>
 
+        <h3>Lety na místo {{ pointOfInterest.name }}</h3>
 
-        <h3>Lety</h3>
+        <FlightsListSkeleton v-if="areFlightsLoading && flights.length"/>
-
+        <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
-        <FlightsList :public="true" :items="flights" />
+          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>

src/stores/Photos.js

@@ -87,7 +87,6 @@ export const usePhotosStore = defineStore('Photos', () => {
 
   return {
     photo, photos, isMutationRunning, isQueryRunning, fetchDetail, fetchPublic, upload, update,
-    changeOrientation, adjust, destroy,
+    changeOrientation, adjust, destroy, openedPhoto, setOpenedPhoto
-    openedPhoto, setOpenedPhoto
   }
 });