Lepsi verejna cast, ssr, lepsi prace s fotkamaa

2023-12-04 22:46:23 +01:00
parent 11cc6ad107
commit 3bd4d7ba52
62 changed files with 1331 additions and 619 deletions
@@ -1,28 +1,33 @@
 <script setup>
-import {onMounted, watch} from "vue";
-import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {successObject} from "src/composables/dialog";
+import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
-import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
+import AircraftDetailCard from "components/aircrafts/AircraftInfo.vue";
 import {storeToRefs} from "pinia";
+import {useAircraftsStore} from "stores/Aircrafts";
+import {computed, watch} from "vue";
+import {metaData} from "src/composables/meta";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+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";

 const $q = useQuasar();
 const $router = useRouter();

 const aircraftId = parseInt(useRoute().params.id);
-onMounted(() => {
-  useAircraftsStore().fetchDetail(aircraftId);
-})
-
+useAircraftsStore().fetchDetail(aircraftId);
+const loggedUser = storeToRefs(useUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 watch(() => aircraft.value, (newVal) => {
  if (!newVal) return;

  useAppStore().setPageTitle(newVal.callSign);
+  useMeta(() => metaData({title: newVal.callSign}));
  useAppStore().setBreadcrumbs([
    {label: "Letadla", to: {name: "aircrafts"}},
    {label: newVal.callSign}
@@ -30,29 +35,47 @@ watch(() => aircraft.value, (newVal) => {
 });

 const deleteAircraft = (id) => {
-  useAircraftsStore().destroy(id).then(() => {
-    $router.push({name: "aircrafts"});
-    $q.notify(successObject("Letadlo úspěšně odstraněno"));
-  });
-}
+  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
+    .onOk(() => {
+      useAircraftsStore().destroy(id).then(() => {
+        $router.push({name: "aircrafts"});
+        $q.notify(successObject("Letadlo úspěšně odstraněno"));
+      });
+    });
+};
 </script>

 <template>
  <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>

  <template v-else>
-    <AircraftDetailCard
-      :aircraft="aircraft"
-      @delete="deleteAircraft"
-    />
+    <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
+      <template #actions v-if="aircraft.createdById === loggedUser?.id">
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+        <q-btn @click="deleteAircraft(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
+      </template>
+      <template #content>
+        <q-card-section>
+          <AircraftInfo :aircraft="aircraft"/>
+
+          <PhotoGallery :photos="aircraft.photos"/>
+          <h3>Lety</h3>
+          <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
+            Zatím žádné lety.
+          </q-banner>
+          <FlightsList :items="aircraft.flights" :public="false" v-else/>
+        </q-card-section>
+      </template>
+    </ContentCard>

-    <q-card class="flight-detail-card" flat>
-      <h3>Lety</h3>
-      <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
-        Zatím žádné lety.
-      </q-banner>
-      <FlightsList :items="aircraft.flights" v-else/>
-    </q-card>
  </template>


@@ -3,13 +3,17 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
 import {useUserStore} from "stores/User";
+import POIForm from "components/poi/POIForm.vue";
+import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";


 const $router = useRouter();
@@ -36,25 +40,64 @@ onMounted(() => {
  });
 });

+const setTitlePhoto = (titlePhoto) => {
+  useAircraftsStore().update(aircraftId, {titlePhotoId: titlePhoto.id}).then(() => {
+    $q.notify(successObject("Úvodní fotka nastavena"));
+  })
+}
+
+const formStep = computed(() => useRoute().params.step || "basic");
 </script>

 <template>
  <AircraftEditSkeleton v-if="isQueryRunning || !aircraft"/>

  <AccessDeniedBanner
-    v-else-if="aircraft.createdById !== loggedUser.id"
-    :route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
+      v-else-if="aircraft.createdById !== loggedUser.id"
+      :route-back="{name: 'aircraftDetail', params: {id: aircraftId}}"
  />
-
-  <q-card v-else class="q-mx-md">
-    <q-card-section>
-      <AircraftForm
-        @save="handleSave"
-        :default-values="aircraft"
-        :organizations="loggedUser.organizations"
-        :is-request-pending="isMutationRunning"
+  <template v-else>
+    <q-tabs active-color="primary" class="q-mb-lg" v-if="aircraft.photos.length > 0">
+      <q-route-tab
+          icon="edit"
+          label="Informace"
+          replace
+          :to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'basic'}}"
+          exact
      />
-    </q-card-section>
-  </q-card>
+      <q-route-tab
+          icon="add_a_photo"
+          label="Fotky"
+          replace
+          :to="{name: 'aircraftEdit', params: {id: aircraft?.id, step: 'photo'}}"
+          exact
+      />
+    </q-tabs>

+    <template v-if="formStep === 'basic'">
+      <q-card class="q-mx-md">
+      <q-card-section>
+        <AircraftForm
+            @save="handleSave"
+            :default-values="aircraft"
+            :organizations="loggedUser.organizations"
+            :is-request-pending="isMutationRunning"
+        />
+      </q-card-section>
+    </q-card>
+    </template>
+    <template v-else-if="formStep === 'photo'">
+
+      <q-spinner v-if="isQueryRunning || !aircraft"/>
+
+      <PhotosEditorList
+          v-else
+          :photos="aircraft.photos"
+          :title-photo="aircraft.titlePhoto"
+          :show-actions="false"
+          @set-title-photo="setTitlePhoto"
+      />
+    </template>
+
+  </template>
 </template>
@@ -1,12 +1,15 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import {storeToRefs} from "pinia";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+import ContentCard from "components/ContentCard.vue";

 const copilotId = parseInt(useRoute().params.id);
 onMounted(() => {
@@ -20,20 +23,51 @@ onMounted(() => {
 });

 const {isQueryRunning, copilot} = storeToRefs(useCopilotsStore());
+
+const copilotTitlePhoto = computed(() => {
+  if (!copilot.value || copilot.value.photos.length === 0) return null;
+
+  return copilot.value.photos[0];
+});
+
 </script>

 <template>
  <CopilotDetailSkeleton v-if="isQueryRunning || !copilot"/>

  <template v-else>
-    <h3>Společné lety</h3>

-    <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
-      Zatím tu nemáš uložené žádné společné lety.
-    </q-banner>
+    <ContentCard :title-photo="copilotTitlePhoto" :title="copilot.name">
+      <template #actions>
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to="{name: 'copilotEdit', params: {id: copilotId}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+      </template>
+      <template #content>
+        <q-card-section>
+          <PhotoGallery :photos="copilot.photos" v-if="copilot.photos.length > 0"/>
+          <q-banner v-else class="bg-light-blue text-white">
+            Zatím tu nemáš žádné společné fotky. Po nahrání fotky můžeš označit tuto osobu a takto označené
+            fotografie se zobrazí v galerii.
+          </q-banner>

-    <FlightsList :items="copilot.flights" v-else/>
+          <h3>Společné lety</h3>
+
+          <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
+            Zatím tu nemáš uložené žádné společné lety.
+          </q-banner>
+
+          <FlightsList :items="copilot.flights" :public="false" v-else/>
+        </q-card-section>
+      </template>
+
+    </ContentCard>

-    <FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
  </template>
 </template>
@@ -49,7 +49,7 @@ const {isQueryRunning, event} = storeToRefs(useEventsStore());
      Zatím tu nemáš uložené žádné lety.
    </q-banner>

-    <FlightsList :items="event.flights" v-else/>
+    <FlightsList :items="event.flights" :public="false" v-else/>

    <FAB mode="edit" :router-link="{name: 'eventEdit', params: {id: eventId}}"/>
  </template>
@@ -1,6 +1,6 @@
 <script setup>
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
-import {onMounted, ref, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import {useRoute} from "vue-router";
 import {useFlightsStore} from "stores/Flights";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
@@ -14,8 +14,8 @@ import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
 import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
-import {usePhotosStore} from "stores/Photo";
-import PhotosList from "components/photos/PhotosEditorList.vue";
+import {usePhotosStore} from "stores/Photos";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 import {errorObject, successObject, warningObject} from "src/composables/dialog";
 import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
@@ -67,7 +67,6 @@ const handleFlightEdit = (data) => {
 const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
 const uploadInProgress = ref(false);

-
 const handlePhotosUpload = (data) => {
  // todo udelat batch napr. po 5 requestech
  // TODO: udelat batch i pro rotace a davkove upravy (info)
@@ -101,6 +100,12 @@ const deletePhoto = (id) => {
  });
 }

+const setTitlePhoto = (photo) => {
+  useFlightsStore().update(flight.value.id, {titlePhotoId: photo.id}).then(f => {
+    $q.notify(successObject("Úvodní fotografie úspěšně nastavena"));
+  });
+}
+
 const rotatePhotos = ({photos, direction}) => {
  const promises = [];
  for (const photo of photos) {
@@ -123,11 +128,15 @@ const rotatePhotos = ({photos, direction}) => {
  });
 }

-const updateSinglePhoto = (id, formData) => usePhotosStore().update(id, formData).then((data) => {
-  const idx = _findPhotoIndex(data.id);
-  flight.value.photos[idx] = data;
-  usePointsOfInterestStore().fetch();
-});
+const updateSinglePhoto = (id, formData) => {
+  formData.copilots = formData.copilots.map(c => ({id: c.id, name: c.name}));
+
+  return usePhotosStore().update(id, formData).then((data) => {
+    const idx = _findPhotoIndex(data.id);
+    flight.value.photos[idx] = data;
+    usePointsOfInterestStore().fetch();
+  });
+}

 const handlePhotoUpdate = (flightId, formData) => {
  const photoId = formData.id;
@@ -170,13 +179,14 @@ const handleBatchPhotoEdit = async (flightId, data) => {

  const promises = [];
  for (const id of photoIds) {
-    const updateData = {};
+    const updateData = {
+      isAircraft: data.isAircraft,
+      copilots: data.copilots.map(c => ({id: c.id, name: c.name}))
+    };
    if (data.name !== '') updateData.name = data.name;
    if (data.description !== '') updateData.description = data.description;
    if (data.pointOfInterest) updateData.pointOfInterest = data.pointOfInterest;

-    if (Object.keys(updateData).length === 0) continue;
-
    promises.push(updateSinglePhoto(id, data));
  }

@@ -191,7 +201,6 @@ const handleBatchPhotoEdit = async (flightId, data) => {
    if (error > 0) $q.notify(errorObject(`Nepovedlo se uložit ${error} fotografií`))
  });
 }
-
 </script>

 <template>
@@ -203,11 +212,11 @@ const handleBatchPhotoEdit = async (flightId, data) => {
    <q-tab-panels v-model="formStep">
      <q-tab-panel name="basic">
        <FlightFormBasic
-            @save="handleFlightEdit"
-            :flight="flight"
-            :locations="pointsOfInterest"
-            :airports="airports"
-            :aircrafts="aircrafts"
+          @save="handleFlightEdit"
+          :flight="flight"
+          :locations="pointsOfInterest"
+          :airports="airports"
+          :aircrafts="aircrafts"
        />
      </q-tab-panel>

@@ -217,43 +226,50 @@ const handleBatchPhotoEdit = async (flightId, data) => {

      <q-tab-panel name="track">
        <FlightFormTrack
-            v-if="pointsOfInterest"
-            :flight="flight"
-            :locations="pointsOfInterest"
-            :airports="airports"
-            @save="handleFlightEdit"
+          v-if="pointsOfInterest"
+          :flight="flight"
+          :locations="pointsOfInterest"
+          :airports="airports"
+          @save="handleFlightEdit"
        />
      </q-tab-panel>

      <q-tab-panel name="photos">
        <FlightFormPhotos
-            :flight="flight"
-            :is-request-pending="isRequestPending || uploadInProgress"
-            @save="handlePhotosUpload"
+          :flight="flight"
+          :is-request-pending="isRequestPending || uploadInProgress"
+          @save="handlePhotosUpload"
        />

-        <PhotosList
-            :photos="flight.photos"
-            @edit="openPhotoEdit"
-            @batch-edit="openBatchPhotoForm"
-            @batch-rotate="rotatePhotos"
-            @delete="deletePhoto"
+        <PhotosEditorList
+          :title-photo="flight.titlePhoto"
+          :photos="flight.photos"
+          :show-actions="true"
+          @edit="openPhotoEdit"
+          @batch-edit="openBatchPhotoForm"
+          @batch-rotate="rotatePhotos"
+          @delete="deletePhoto"
+          @set-title-photo="setTitlePhoto"
        />

        <!-- Dialogs for photo edit -->
        <PhotoFormDialog
-            v-model="openEdit"
-            :locations="pointsOfInterest"
-            :photo="editPhoto"
-            @save="handlePhotoUpdate(flightId, $event)"
+          v-model="openEdit"
+          :copilots="flight.copilots"
+          :aircraft="flight.aircraft"
+          :locations="pointsOfInterest"
+          :photo="editPhoto"
+          @save="handlePhotoUpdate(flightId, $event)"
        />

        <BatchPhotoFormDialog
-            v-model="openBatchEdit"
-            :locations="pointsOfInterest"
-            :photos="editBatchPhotos"
-            @save="handleBatchPhotoEdit(flightId, $event)"
-            @delete="deletePhoto"
+          v-model="openBatchEdit"
+          :locations="pointsOfInterest"
+          :photos="editBatchPhotos"
+          :copilots="flight.copilots"
+          :aircraft="flight.aircraft"
+          @save="handleBatchPhotoEdit(flightId, $event)"
+          @delete="deletePhoto"
        />
      </q-tab-panel>

@@ -13,13 +13,15 @@ import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
 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";

 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 const loggedUser = storeToRefs(useUserStore()).user;

-onMounted(() => {flight.value
+onMounted(() => {
  useFlightsStore().fetchDetail(flightId).then(f => {
    const flightNameFormatted = flightName(f);
    useAppStore().setPageTitle(flightNameFormatted);
@@ -40,7 +42,6 @@ const handleDeleteAndRedirect = () => {
    });
 }

-
 const togglePublicVisibility = () => {
  const newVisibility = !flight.value.isPublic;
  useFlightsStore()
@@ -67,19 +68,14 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 <template>
  <FlightDetailSkeleton v-if="isQueryRunning || !flight"/>

-  <q-card class="flight-detail-card" v-else>
-    <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-      <div class="absolute-bottom custom-caption">
-        <div class="text-h5"> {{ flightName(flight) }}</div>
-      </div>
-    </q-img>
+  <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>

-    <q-card-actions class="q-my-md">
+    <template #actions>
      <div class="col-grow">
        <q-btn
          @click="togglePublicVisibility"
          :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
-          :disable="!loggedUser.publicUsername"
+          :disable="!loggedUser?.publicUsername"
          flat
          :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
        />
@@ -93,53 +89,58 @@ const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
        />
      </div>
      <q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
+    </template>

-    <q-card-section>
-      <div class="text-right">
-        <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
-      </div>
-      <FlightBasicInfo
-        :flight="flight"
-        :copilot-detail-route="{name: 'copilotDetail'}"
-      />
+    <template #content>
+      <q-card-section>
+        <div class="text-right">
+          <q-btn flat class="q-my-sm" :to="{name: 'flightEdit', params: {id: flightId, step: 'basic'}}" icon="edit" color="primary">Upravit informace</q-btn>
+        </div>
+        <FlightBasicInfo
+          :flight="flight"
+          :aircraft-detail-route="{name: 'aircraftDetail'}"
+          :copilot-detail-route="{name: 'copilotDetail'}"
+        />

-      <div class="text-right">
-        <q-btn flat 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"/>
+        <div class="text-right">
+          <q-btn flat 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"/>

-      <q-separator/>
+        <q-separator/>

-      <div class="text-right">
-        <q-btn flat 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>
-      <PhotoGallery
-        v-else
-        :photos="flight.photos"
-      />
+        <div class="text-right">
+          <q-btn flat 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>
+        <PhotoGallery
+          v-else
+          :photos="flight.photos"
+        />

-      <q-separator/>
+        <q-separator/>
+
+        <div class="text-right">
+          <q-btn flat 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"
+          :photos="flight.photos"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>

-      <div class="text-right">
-        <q-btn flat 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>
 </template>
@@ -32,7 +32,7 @@ const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
    Nemáš zaznamenaný žádný let.
  </BasicInfoBanner>

-  <FlightsList v-else :items="flights"/>
+  <FlightsList v-else :items="flights" :public="false" />

  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
@@ -1,7 +1,7 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {onMounted, ref, watch} from "vue";
-import {usePhotosStore} from "stores/Photo";
+import {usePhotosStore} from "stores/Photos";
 import {useAppStore} from "stores/App";
 import {flightName} from "src/composables/flight";
 import VuePictureCropper from 'vue-picture-cropper';
@@ -1,6 +1,6 @@
 <script setup>
 import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAppStore} from "stores/App";
@@ -11,6 +11,8 @@ import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
 import {useUserStore} from "stores/User";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
+import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
+import PhotosEditorList from "components/photos/PhotosEditorList.vue";

 const poiId = parseInt(useRoute().params.id);

@@ -27,7 +29,7 @@ onMounted(() => {
  usePointsOfInterestTypeStore().fetch();
 })

-const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
+const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
 const loggedUser = storeToRefs(useUserStore()).user;
 const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());

@@ -39,13 +41,54 @@ const handleSave = (data) => {
    router.push({name: "poiDetail", params: {id: poiId}});
  });
 }
+
+const setTitlePhoto = (titlePhoto) => {
+  usePointsOfInterestStore().update(poiId, {titlePhotoId: titlePhoto.id}).then(() => {
+    $q.notify(successObject("Úvodní fotka nastavena"));
+  })
+}
+
+const formStep = computed(() => useRoute().params.step || "basic");
 </script>

 <template>
-  <POIEditSkeleton v-if="isQueryRunning"/>
+
  <AccessDeniedBanner
-    v-else-if="pointOfInterest.createdById !== loggedUser.id"
+    v-if="pointOfInterest && !isQueryRunning && pointOfInterest.createdById !== loggedUser?.id"
    :route-back="{name: 'poiDetail', params: {id: poiId}}"
  />
-  <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+
+  <q-tabs active-color="primary" class="q-mb-lg">
+    <q-route-tab
+      icon="edit"
+      label="Informace"
+      replace
+      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'basic'}}"
+      exact
+    />
+    <q-route-tab
+      icon="add_a_photo"
+      label="Fotky"
+      replace
+      :to="{name: 'poiEdit', params: {id: pointOfInterest?.id, step: 'photo'}}"
+      exact
+    />
+  </q-tabs>
+
+  <template v-if="formStep === 'basic'">
+    <POIEditSkeleton v-if="isQueryRunning || !pointOfInterest"/>
+    <POIForm :poi="pointOfInterest" :types="poiTypes" v-else @save="handleSave"/>
+  </template>
+  <template v-else-if="formStep === 'photo'">
+
+    <q-spinner v-if="isQueryRunning || !pointOfInterest"/>
+
+    <PhotosEditorList
+      v-else
+      :photos="pointOfInterest.photos"
+      :title-photo="pointOfInterest.titlePhoto"
+      :show-actions="false"
+      @set-title-photo="setTitlePhoto"
+    />
+  </template>
 </template>
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
 import FAB from "components/FAB.vue";
@@ -11,6 +11,8 @@ 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";

 const loggedUser = storeToRefs(useUserStore()).user;

@@ -25,36 +27,61 @@ onMounted(() => {
 });

 const {isQueryRunning, pointOfInterest} = storeToRefs(usePointsOfInterestStore());
+
+const titlePhoto = computed(() => {
+  if (!pointOfInterest.value || pointOfInterest.value.photos.length === 0) return null;
+
+  return pointOfInterest.value.titlePhoto || pointOfInterest.value.photos[0];
+});
 </script>

 <template>
  <POIDetailSkeleton v-if="isQueryRunning || !pointOfInterest"/>

  <template v-else>
-    <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"
-    />
-    <BasicInfoBanner v-else>
-      Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
-    </BasicInfoBanner>
+    <ContentCard :title-photo="titlePhoto" :title="pointOfInterest.name">
+      <template #actions v-if="pointOfInterest.createdById === loggedUser.id">
+        <div class="col-grow">
+          <q-btn
+            flat
+            :to="{name: 'poiEdit', params:{id: pointOfInterest.id}}"
+            icon="edit"
+            text-color="primary"
+            label="Upravit"
+          />
+        </div>
+      </template>

-    <PhotoGallery
-      :photos="pointOfInterest.photos"
-      v-if="pointOfInterest.photos.length > 0"
-    />
+      <template #content>
+        <q-card-section>
+          <article v-html="pointOfInterest.description" class="q-my-lg"/>

-    <BasicInfoBanner v-else>
-      Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
-    </BasicInfoBanner>
+          <EmbeddedMap
+            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+            :gps-latitude="pointOfInterest.gpsLatitude"
+            :gps-longitude="pointOfInterest.gpsLongitude"
+            :zoom="13"
+          />
+          <BasicInfoBanner v-else>
+            Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
+          </BasicInfoBanner>

-    <FlightsList :items="pointOfInterest.flights" v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"/>
+          <PhotoGallery
+            :photos="pointOfInterest.photos"
+            v-if="pointOfInterest.photos.length > 0"
+          />
+          <BasicInfoBanner v-else>
+            Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
+          </BasicInfoBanner>

-    <FAB v-if="pointOfInterest.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: pointOfInterest.id}}" mode="edit"/>
+          <FlightsList
+            :items="pointOfInterest.flights"
+            :public="false"
+            v-if="pointOfInterest.flights.length > 0 && loggedUser.id === pointOfInterest.createdById"
+          />
+        </q-card-section>
+      </template>
+    </ContentCard>
  </template>
-
 </template>
@@ -0,0 +1,72 @@
+<script>
+import {useAircraftsStore} from "stores/Aircrafts";
+
+export default {
+  preFetch({currentRoute}) {
+    return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
+<script setup>
+import {useRouter} from "vue-router";
+import {useMeta, useQuasar} from "quasar";
+import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
+import {confirmObject, successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import FlightsList from "components/flights/FlightsList.vue";
+import {storeToRefs} from "pinia";
+import {computed, onMounted, watch} from "vue";
+import {metaData} from "src/composables/meta";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import ContentCard from "components/ContentCard.vue";
+import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
+import {useUserStore} from "stores/User";
+import {usePhotosStore} from "stores/Photos";
+import {useFlightsStore} from "stores/Flights";
+
+const $q = useQuasar();
+const $router = useRouter();
+
+const loggedUser = storeToRefs(useUserStore()).user;
+const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
+usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
+useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
+
+useAppStore().setPageTitle(aircraft.value.callSign);
+useMeta(() => metaData({
+  title: aircraft.value.callSign,
+  image: aircraft.value.titleImage?.url
+}));
+useAppStore().setBreadcrumbs([
+  {label: "Polétání.cz", to: {name: "homepage"}},
+  {label: aircraft.value.callSign}
+]);
+
+</script>
+
+<template>
+  <AircraftDetailSkeleton v-if="isQueryRunning || !aircraft"/>
+
+  <template v-else>
+    <ContentCard :title-photo="aircraft.titlePhoto" :title="aircraft.callSign">
+      <template #content>
+        <q-card-section>
+          <AircraftInfo :aircraft="aircraft"/>
+
+          <PhotoGallery :photos="photos"/>
+
+          <h3>Lety</h3>
+
+          <FlightsList :items="flights" :public="true" />
+        </q-card-section>
+      </template>
+    </ContentCard>
+
+  </template>
+
+
+</template>
@@ -2,8 +2,8 @@
 import {useUserStore} from "stores/User";

 export default {
-  preFetch({currentRoute}) {
-    return useUserStore().fetchPublicUserDetail(currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
  },
 }
 </script>
@@ -0,0 +1,64 @@
+<script>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+
+export default {
+  preFetch({currentRoute, store}) {
+    return usePointsOfInterestStore(store).fetchPublicDetail(currentRoute.params.id);
+  }
+}
+</script>
+
+<script setup>
+import {storeToRefs} from "pinia";
+import {usePhotosStore} from "stores/Photos";
+import ContentCard from "components/ContentCard.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {useFlightsStore} from "stores/Flights";
+import EmbeddedMap from "components/map/EmbeddedMap.vue";
+import FlightsList from "components/flights/FlightsList.vue";
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+
+const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
+usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+
+useAppStore().setPageTitle(pointOfInterest.value.name);
+useMeta(() => metaData({
+  title: pointOfInterest.value.name,
+  image: pointOfInterest.value.titlePhoto.url,
+  description: pointOfInterest.value.description,
+}))
+
+</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"/>
+
+        <EmbeddedMap
+            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+            :gps-latitude="pointOfInterest.gpsLatitude"
+            :gps-longitude="pointOfInterest.gpsLongitude"
+            :zoom="13"
+          />
+
+        <PhotoGallery :photos="photos"/>
+
+
+        <h3>Lety</h3>
+
+        <FlightsList :public="true" :items="flights" />
+      </q-card-section>
+    </template>
+  </ContentCard>
+</template>
@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  poi
+</template>
@@ -2,8 +2,8 @@
 import {useCopilotsStore} from "stores/Copilots";

 export default {
-  preFetch({currentRoute}) {
-    return useCopilotsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+  preFetch({store, currentRoute}) {
+    return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
  }
 }
 </script>
@@ -13,6 +13,14 @@ import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {usePhotosStore} from "stores/Photos";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import ContentCard from "components/ContentCard.vue";
+import PhotoGallery from "components/photos/PhotoGallery.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";

 const props = defineProps({
  pilot: {
@@ -22,25 +30,47 @@ const props = defineProps({
 });

 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
+const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());

-useAppStore().setPageTitle(`${pilot.name} + ${copilot.value.name}`);
+useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
 useAppStore().setBreadcrumbs([
  {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {to: {name: "publicProfileDetail", params: {username: props.username}}, label: `@${props.username}`},
-  {label: props.pilot.name}
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {label: copilot.value.name}
 ]);

+useMeta(() => metaData({
+  title: copilot.value.name,
+  keywords: ["kopilot", "výlet", "fotogalerie", copilot.value.name, "létání", "fotografie"],
+  description: `Společné polétání: ${props.pilot.name} + ${copilot.value.name}.`,
+  image: copilot.value.titleImage?.url
+}));
+
+useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 </script>

 <template>
-  <BasicListSkeleton v-if="isQueryRunning || !copilot" class="q-mb-md"/>

-  <template v-else>
-    <h3>Společné lety</h3>
-    <FlightsList
-      :items="copilot.flights"
-      :route-detail="{name: 'publicFlightDetail', params: {username: pilot.publicUsername}}"
-      class="q-mb-md"
-    />
-  </template>
+  <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
+    <template #content>
+      <q-card-section>
+
+        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallery :photos="photos" v-else/>
+
+        <h3>Společné lety</h3>
+        <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
+        <FlightsList
+          v-else
+          :items="flights"
+          :public="true"
+          class="q-mb-md"
+        />
+      </q-card-section>
+    </template>
+  </ContentCard>
+
+
 </template>
@@ -66,8 +66,8 @@ watch(() => event.value, (newVal) => {
      <FlightsList
        v-else
        :items="event.flights"
+        :public="true"
        class="q-my-lg"
-        :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
      />

    </template>
@@ -2,8 +2,8 @@
 import {useFlightsStore} from "stores/Flights";

 export default {
-  preFetch({currentRoute}) {
-    return useFlightsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username)
+  preFetch({store, currentRoute}) {
+    return useFlightsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username)
  }
 }
 </script>
@@ -19,12 +19,18 @@ import {useRoute} from "vue-router";
 import {useUserStore} from "stores/User";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
+import ContentCard from "components/ContentCard.vue";
+import {usePhotosStore} from "stores/Photos";
+import {onMounted} from "vue";

 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
 const routeParams = useRoute().params;

 const pilot = storeToRefs(useUserStore()).publicUser;

+usePhotosStore().fetchPublic({flightId: flight.value.id});
+const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
+
 const flightNameFormatted = flightName(flight.value);
 useAppStore().setPageTitle(flightNameFormatted);
 useAppStore().setBreadcrumbs([
@@ -37,40 +43,35 @@ useMeta(() => metaData({
    title: `${flightNameFormatted} - ${pilot.value.name}`,
    keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
    description: flight.description,
-    image: flight.coverPhoto?.url
+    image: flight.titlePhoto?.url
  }
-))
+));
 </script>

 <template>
  <div>
    <FlightDetailSkeleton v-if="isQueryRunning || !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">
-        <q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
-          <div class="absolute-bottom custom-caption">
-            <div class="text-h5">{{ flightName(flight) }}</div>
-          </div>
-        </q-img>
-
+    <ContentCard :title-photo="flight.titlePhoto" :title="flightName(flight)" v-else>
+      <template #content>
        <q-card-section>
          <FlightBasicInfo
            :flight="flight"
+            :poi-detail-route="{name: 'publicPOIDetail'}"
+            :aircraft-detail-route="flight.aircraft.isPublic ? {name: 'publicAircraftDetail'} : null"
            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
          />

          <article class="q-my-lg" v-html="flight.description"/>

-          <PhotoGallery :photos="flight.photos"/>
+          <q-no-ssr>
+            <q-inner-loading v-if="arePhotosLoading"/>
+            <PhotoGallery :photos="flightPhotos" v-else/>
+          </q-no-ssr>

-          <FlightTrackMap :flight="flight"/>
+          <FlightTrackMap :flight="flight" :photos="flightPhotos"/>
        </q-card-section>
-      </q-card>
-    </template>
+      </template>
+    </ContentCard>
  </div>
 </template>
@@ -29,7 +29,7 @@ useAppStore().setBreadcrumbs([
  {label: `@${props.pilot.publicUsername}`},
 ])

-useFlightsStore().fetch(props.pilot.publicUsername);
+useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 const loggedUser = storeToRefs(useUserStore()).user;
 </script>
@@ -37,7 +37,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
 <template>
  <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>

-  <FlightsListSkeleton v-if="areFlightsLoading"/>
+  <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>

  <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
    Tento pilot zatím nepublikoval žádný let.
@@ -46,8 +46,7 @@ const loggedUser = storeToRefs(useUserStore()).user;
  <template v-else>
    <FlightsList
      :items="flights"
-      :displayVisibilityInfo="loggedUser?.id === pilot?.id"
-      :route-detail="{name: 'publicFlightDetail', params: {username: pilot?.publicUsername}}"
+      :public="true"
      class="q-mb-md"
    />
  </template>