Upravy UI, refaktoring, davkove upravy a mazani fotek

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -4,29 +4,26 @@ import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {confirmObject, successObject} from "src/composables/dialog";
+import {successObject} from "src/composables/dialog";
 import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
-import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
-import {copilot} from "src/composables/objects/copilot";
-import {flight} from "src/composables/objects/flight";
+import AircraftDetailCard from "components/aircrafts/AircraftDetailCard.vue";
+
+const $q = useQuasar();
+const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
   fetchAircraft(aircraftId);
 })
 
-const $q = useQuasar();
-const confirmDelete = (id) => {
-  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
-    .onOk(() => {
-      useAircraftsStore().delete(id).then(() => {
-        useRouter().push({name: "aircrafts"});
-        $q.notify(successObject("Letadlo uspesne odstraneno"));
-      });
-    })
-};
+const deleteAircraft = (id) => {
+  useAircraftsStore().delete(id).then(() => {
+    $router.push({name: "aircrafts"});
+    $q.notify(successObject("Letadlo úspěšně odstraněno"));
+  });
+}
 
 watch(aircraft, (newVal) => {
   useAppStore().setPageTitle(newVal.callSign);
@@ -35,57 +32,20 @@ watch(aircraft, (newVal) => {
     {label: newVal.callSign}
   ])
 });
-
 </script>
 
 <template>
   <AircraftDetailSkeleton v-if="loading || !aircraft"/>
   <template v-else>
-
-    <q-card class="q-mx-md q-my-md flight-detail-card">
-      <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl" />
-
-       <q-card-actions class="q-my-md">
-      <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="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
-
-      <q-card-section>
-        <q-list>
-          <q-item v-if="aircraft.manufacturer">
-            Výrobce: {{ aircraft.manufacturer }}
-          </q-item>
-          <q-item v-if="aircraft.model">
-            Model: {{ aircraft.model }}
-          </q-item>
-        </q-list>
-      </q-card-section>
-
-<!--      <q-card-actions align="right">-->
-<!--        <q-btn :to='{name: "aircraftEdit", params: {id: aircraft.id}}' icon="edit" text-color="primary" rounded flat/>-->
-<!--        <q-btn @click="confirmDelete(aircraft.id)" icon="delete" text-color="red" rounded flat/>-->
-<!--      </q-card-actions>-->
-    </q-card>
+    <AircraftDetailCard :aircraft="aircraft" @delete="deleteAircraft" />
 
     <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-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>
-
-<!--    <FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>-->
   </template>
 
 

src/pages/profile/aircraft/AircraftsPage.vue

@@ -4,6 +4,7 @@ import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 onMounted(() => {
   fetchAircrafts();
@@ -13,17 +14,13 @@ onMounted(() => {
 <template>
   <BasicListSkeleton v-if="loading"/>
 
-  <div class="q-pa-md q-gutter-sm" v-else-if="!loading && aircrafts.length === 0">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
-      </template>
-      Aktuálně nemáš přidané žádné letadlo.
-      <template v-slot:action>
-        <q-btn flat color="white" :to="{name: 'addAircraft'}" label="Vytvořit letadlo"/>
-      </template>
-    </q-banner>
-  </div>
+  <BasicInfoBanner
+    v-if="!loading && aircrafts.length === 0"
+    :route-add="{name: 'addAircraft'}"
+    label-add="Vytvořit letadlo"
+  >
+    Aktuálně nemáš přidané žádné letadlo.
+  </BasicInfoBanner>
 
   <AircraftsList
     v-else

src/pages/profile/aircraft/EditAircraftPage.vue

@@ -3,26 +3,21 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {onMounted, ref} from "vue";
+import {onMounted} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
-import {aircraft, fetchAircraft, loading} from "src/composables/objects/aircraft";
+import {aircraft, fetchAircraft, loading, isRequestPending} from "src/composables/objects/aircraft";
 import {useAppStore} from "stores/App";
-import {copilot} from "src/composables/objects/copilot";
 
 
-const isRequestPending = ref(false);
 const $router = useRouter();
 const $q = useQuasar();
 const aircraftId = parseInt(useRoute().params.id);
 
 const handleSave = (formData) => {
-  isRequestPending.value = true;
   useAircraftsStore().update(aircraftId, formData).then(() => {
     $q.notify(successObject("Letadlo úspěšně upraveno"));
-    $router.push({name: "aircrafts"});
-  }).finally(() => {
-    isRequestPending.value = false;
+    $router.push({name: "aircraftDetail", params: {id: aircraftId}});
   })
 }
 

src/pages/profile/aircraft/NewAircraftsPage.vue

@@ -6,21 +6,17 @@ import {useQuasar} from "quasar";
 import {ref} from "vue";
 import {useAppStore} from "stores/App";
 import {successObject} from "src/composables/dialog";
+import {isRequestPending} from "src/composables/objects/aircraft";
 
 const $q = useQuasar();
 const router = useRouter();
 
-let isRequestPending = ref(false);
 const handleSave = (formData) => {
-  isRequestPending.value = true;
   useAircraftsStore().create(formData).then(() => {
     $q.notify(successObject("Letadlo úspěšně vytvořeno"));
     router.push({name: "aircrafts"});
-  }).finally(() => {
-    isRequestPending.value = false;
-  })
-}
-
+  });
+};
 
 useAppStore().setPageTitle("Nové letadlo");
 useAppStore().setBreadcrumbs([

src/pages/profile/copilot/CopilotDetailPage.vue

@@ -24,9 +24,11 @@ onMounted(() => {
 
   <template v-else>
     <h3>Společné lety</h3>
+
     <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
-      Zatím žádné společné lety
+      Zatím tu nemáš uložené žádné společné lety.
     </q-banner>
+
     <FlightsList :items="copilot.flights" v-else/>
 
     <FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>

src/pages/profile/copilot/CopilotsPage.vue

@@ -5,7 +5,7 @@ import CopilotsList from "components/copilots/CopilotsList.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import BasicInfoBanner from "components/BasicInfoBanner.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 onMounted(() => {
   fetchCopilots();
@@ -16,7 +16,10 @@ onMounted(() => {
 <template>
   <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
 
-  <BasicInfoBanner v-else-if="!loading && copilots.length === 0" :router-add="{name: 'addCopilot'}">
+  <BasicInfoBanner
+    v-else-if="!loading && copilots.length === 0"
+    :router-add="{name: 'addCopilot'}"
+  >
     Zatím tu není nikdo. Přidej si let s někým nebo kopilota vytvoř ručně tu.
   </BasicInfoBanner>
 

src/pages/profile/copilot/EditCopilotPage.vue

@@ -1,10 +1,10 @@
 <script setup>
 import {onMounted} from "vue";
-import {loading, copilot, fetchCopilot} from "src/composables/objects/copilot";
+import {loading, copilot, fetchCopilot, isRequestPending} from "src/composables/objects/copilot";
 import {useAppStore} from "stores/App";
 import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
 import CopilotEditForm from "components/copilots/CopilotForm.vue";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import {useCopilotsStore} from "stores/Copilots";
 import {successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
@@ -23,19 +23,23 @@ onMounted(() => {
 });
 
 const $q = useQuasar();
+const $router = useRouter();
 
 const handleSave = (formData) => {
   useCopilotsStore().update(copilotId, formData).then(() => {
     $q.notify(successObject("Kopilot úspěšně upraven"));
-
-    // useRouter().push({name: "copilots"});
-    // TODO: ^^ hazi error
-  })
+    $router.push({name: "copilotDetail", params: {id: copilotId}});
+  });
 }
 </script>
 
 <template>
   <CopilotEditSkeleton v-if="loading"/>
 
-  <CopilotEditForm v-else :copilot="copilot" @save="handleSave"/>
+  <CopilotEditForm
+    v-else
+    :copilot="copilot"
+    :is-request-pending="isRequestPending"
+    @save="handleSave"
+  />
 </template>

src/pages/profile/copilot/NewCopilotPage.vue

@@ -1,24 +1,20 @@
 <script setup>
 import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {ref} from "vue";
 import {successObject} from "src/composables/dialog";
 import {useCopilotsStore} from "stores/Copilots";
 import CopilotForm from "components/copilots/CopilotForm.vue";
 import {useAppStore} from "stores/App";
+import {isRequestPending} from "src/composables/objects/copilot";
 
-let isRequestPending = ref(false);
 const $q = useQuasar();
 const router = useRouter();
 const handleSave = (formData) => {
-  isRequestPending.value = true;
   useCopilotsStore().create(formData).then(() => {
     $q.notify(successObject("Kopilot úspěšně vytvořen"));
     router.push({name: "copilots"});
-  }).finally(() => {
-    isRequestPending.value = false;
-  })
-}
+  });
+};
 
 useAppStore().setPageTitle("Nový spolucestující");
 useAppStore().setBreadcrumbs([

src/pages/profile/flight/EditFlightPage.vue

@@ -1,13 +1,13 @@
 <script setup>
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
-import {computed, onMounted, reactive, ref, watch} from "vue";
+import {onMounted, ref, watch} from "vue";
 import {useRoute} from "vue-router";
 import {useFlightsStore} from "stores/Flights";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAirportsStore} from "stores/Airports";
-import {useMeta, useQuasar} from "quasar";
+import {useQuasar} from "quasar";
 import {storeToRefs} from "pinia";
 import {flightName} from "src/composables/objects/flight";
 import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
@@ -16,17 +16,19 @@ 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/PhotosList.vue";
-import {confirmObject, successObject} from "src/composables/dialog";
-import PhotoForm from "components/photos/PhotoForm.vue";
+import {successObject} from "src/composables/dialog";
+import PhotoFormDialog from "components/photos/PhotoFormDialog.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
 import {fetchFlight, flight, loading} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
-
-useMeta({title: "Editace letu"});
+import BatchPhotoFormDialog from "components/photos/BatchPhotoFormDialog.vue";
+import {useAppStore} from "stores/App";
+import {editBatchPhotos, handleBatchPhotoEdit, openBatchEdit, openBatchPhotoForm} from "src/composables/photos/batchEdit";
+import {editPhoto, handlePhotoUpdate, openEdit, openPhotoEdit} from "src/composables/photos/simpleEdit";
 
 const $q = useQuasar();
-const route = useRoute();
-const flightId = parseInt(route.params.id);
+const $route = useRoute();
+const flightId = parseInt($route.params.id);
 
 const aircrafts = storeToRefs(useAircraftsStore()).items;
 const locations = storeToRefs(usePointsOfInterestStore()).items;
@@ -34,17 +36,26 @@ const airports = storeToRefs(useAirportsStore()).items;
 const copilots = storeToRefs(useCopilotsStore()).items;
 
 const formStep = ref("");
-watch(() => route.params.step, (val) => formStep.value = val);
+watch(() => $route.params.step, (val) => formStep.value = val);
 
 onMounted(() => {
-  formStep.value = route.params.step || "basic";
+  formStep.value = $route.params.step || "basic";
 
   useAircraftsStore().fetch();
   usePointsOfInterestStore().fetch();
   useAirportsStore().fetch();
   useCopilotsStore().fetch();
 
-  fetchFlight(flightId);
+  fetchFlight(flightId).then(() => {
+    const flightNameFormatted = flightName(flight.value);
+
+    useAppStore().setPageTitle(`Editace - ${flightNameFormatted}`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "myFlights"}, label: "Moje lety"},
+      {to: {name: "flightDetail", params: {id: flightId}}, label: flightNameFormatted},
+      {label: "Editace"}
+    ]);
+  })
 });
 
 const handleFlightEdit = (data) => {
@@ -56,9 +67,11 @@ const handleFlightEdit = (data) => {
 }
 
 const isRequestPending = storeToRefs(useFlightsStore()).isMutationRunning;
+const uploadInProgress = ref(false);
 
 const handlePhotosUpload = (data) => {
   const promises = [];
+  uploadInProgress.value = true;
   for (const photo of data.photos) {
     promises.push(usePhotosStore().upload(flightId, {photo}));
   }
@@ -66,57 +79,33 @@ const handlePhotosUpload = (data) => {
   Promise.all(promises).then(() => {
     $q.notify(successObject("Úspěšně nahráno"));
     fetchFlight(flightId);
-  });
+  }).finally(() => uploadInProgress.value = false);
 }
 
 const _findPhotoIndex = (photoId) => flight.value.photos.findIndex((object) => object.id === photoId);
-const confirmPhotoDelete = (id) => {
-  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-    .onOk(() => {
-      usePhotosStore().delete(id).then((data) => {
-        flight.value.photos.splice(_findPhotoIndex(data.id), 1);
-      });
-    });
+const deletePhoto = (id) => {
+  usePhotosStore().delete(id).then((data) => {
+    flight.value.photos.splice(_findPhotoIndex(data.id), 1);
+  });
 }
 
-const handlePhotoUpdate = (formData) => {
-  const photoId = formData.id;
-  delete formData.id;
 
-  usePhotosStore().update(photoId, formData).then((data) => {
-    const idx = _findPhotoIndex(data.id);
-    flight.value.photos[idx] = data;
-  })
-}
-
-const openEdit = ref(false);
-const editPhoto = ref(null);
-const openPhotoEdit = (photo) => {
-  openEdit.value = true;
-  editPhoto.value = photo;
-}
 </script>
 
 <template>
   <FlightEditSkeleton v-if="loading"/>
 
   <template v-else>
-    <q-breadcrumbs :key="loading">
-      <q-breadcrumbs-el :to="{name: 'myFlights'}">Moje lety</q-breadcrumbs-el>
-      <q-breadcrumbs-el :to="{name: 'flightDetail', params: {id: flightId}}">{{ flightName(flight) }}</q-breadcrumbs-el>
-      <q-breadcrumbs-el>Editace</q-breadcrumbs-el>
-    </q-breadcrumbs>
-
-    <FlightFormSteps :router-edit-mode="true" :flightId="flightId" />
+    <FlightFormSteps :router-edit-mode="true" :flightId="flightId"/>
 
     <q-tab-panels v-model="formStep">
       <q-tab-panel name="basic">
         <FlightFormBasic
-          @save="handleFlightEdit"
-          :flight="flight"
-          :locations="locations"
-          :airports="airports"
-          :aircrafts="aircrafts"
+            @save="handleFlightEdit"
+            :flight="flight"
+            :locations="locations"
+            :airports="airports"
+            :aircrafts="aircrafts"
         />
       </q-tab-panel>
 
@@ -126,33 +115,41 @@ const openPhotoEdit = (photo) => {
 
       <q-tab-panel name="track">
         <FlightFormTrack
-          v-if="locations"
-          :flight="flight"
-          :locations="locations"
-          @save="handleFlightEdit"
+            v-if="locations"
+            :flight="flight"
+            :locations="locations"
+            @save="handleFlightEdit"
         />
       </q-tab-panel>
 
       <q-tab-panel name="photos">
         <FlightFormPhotos
-          :flight="flight"
-          :is-request-pending="isRequestPending"
-          @save="handlePhotosUpload"
+            :flight="flight"
+            :is-request-pending="isRequestPending || uploadInProgress"
+            @save="handlePhotosUpload"
         />
 
-        <PhotoForm
-          v-model="openEdit"
-          :locations="locations"
-          :photo="editPhoto"
-          @save="handlePhotoUpdate"
-        />
-
-        Tu nejsou videt fotky po nahrani
-
         <PhotosList
-          :photos="flight.photos"
-          @edit="openPhotoEdit"
-          @delete="confirmPhotoDelete"
+            :photos="flight.photos"
+            @edit="openPhotoEdit"
+            @batch-edit="openBatchPhotoForm"
+            @delete="deletePhoto"
+        />
+
+        <!-- Dialogs for photo edit -->
+        <PhotoFormDialog
+            v-model="openEdit"
+            :locations="locations"
+            :photo="editPhoto"
+            @save="handlePhotoUpdate(flightId, $event)"
+        />
+
+        <BatchPhotoFormDialog
+            v-model="openBatchEdit"
+            :locations="locations"
+            :photos="editBatchPhotos"
+            @save="handleBatchPhotoEdit(flightId, $event)"
+            @delete="deletePhoto"
         />
       </q-tab-panel>
 

src/pages/profile/flight/FlightDetailPage.vue

@@ -11,11 +11,14 @@ import {useFlightsStore} from "stores/Flights";
 import PhotoCarousel from "components/flights/PhotoCarousel.vue";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
 import {useUserStore} from "stores/User";
+import {storeToRefs} from "pinia";
 
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
 
+const loggedUser = storeToRefs(useUserStore()).user;
+
 onMounted(() => {
   fetchFlight(flightId);
 })
@@ -59,7 +62,6 @@ const copyLinkToClipboard = () => {
     $q.notify(successObject("Odkaz zkopírován"))
   });
 };
-
 </script>
 
 
@@ -82,6 +84,7 @@ const copyLinkToClipboard = () => {
         <q-btn
           @click="togglePublicVisibility"
           :icon="flight.isPublic ? 'visibility_off' : 'visibility'"
+          :disable="!loggedUser.publicUsername"
           flat
           :label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
         />

src/pages/profile/flight/FlightsPage.vue

@@ -6,6 +6,7 @@ import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FAB from "components/FAB.vue";
 import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const $q = useQuasar();
 
@@ -18,19 +19,15 @@ onMounted(() => {
 <template>
   <FlightsListSkeleton v-if="loading"/>
 
-  <div class="q-pa-md q-gutter-sm" v-else-if="!loading && flights.length === 0">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
-      </template>
-      Nemáš zaznamenaný žádný let.
-      <template v-slot:action>
-        <q-btn flat color="white" :to="{name: 'addFlight'}" label="Přidat let"/>
-      </template>
-    </q-banner>
-  </div>
+  <BasicInfoBanner
+    v-else-if="!loading && flights.length === 0"
+    :route-add="{name: 'addFlight'}"
+    label-add="Přidat let"
+  >
+    Nemáš zaznamenaný žádný let.
+  </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
+  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)"/>
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/flight/NewFlightPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted} from "vue";
+import {onMounted, ref} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
@@ -9,13 +9,20 @@ import {useAirportsStore} from "stores/Airports";
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
 import {useAppStore} from "stores/App";
+import {isRequestPending} from "src/composables/objects/flight";
+import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
 
-
+const loading = ref(true);
 onMounted(() => {
-  useAircraftsStore().fetch();
-  usePointsOfInterestStore().fetch();
-  useFlightsStore().fetch();
-  useAirportsStore().fetch();
+  const promises = [
+    useAircraftsStore().fetch(),
+    usePointsOfInterestStore().fetch(),
+    useFlightsStore().fetch(),
+    useAirportsStore().fetch(),
+  ];
+
+  loading.value = true;
+  Promise.all(promises).finally(() => loading.value = false);
 
   useAppStore().setPageTitle("Nový let");
   useAppStore().setBreadcrumbs([
@@ -38,10 +45,15 @@ const handleSave = (formData) => {
 
 <template>
   <FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
-  <FlightFormBasic
-    @save="handleSave"
-    :aircrafts="aircrafts"
-    :airports="airports"
-    :locations="locations"
-  />
+
+  <FlightEditSkeleton v-if="loading"/>
+  <template v-else>
+    <FlightFormBasic
+      @save="handleSave"
+      :is-request-pending="isRequestPending"
+      :aircrafts="aircrafts"
+      :airports="airports"
+      :locations="locations"
+    />
+  </template>
 </template>

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -11,7 +11,7 @@ import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
 import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
 import {useUserStore} from "stores/User";
-import AccessDeniedBanner from "components/AccessDeniedBanner.vue";
+import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 
 const poiId = parseInt(useRoute().params.id);
 
@@ -43,6 +43,9 @@ const handleSave = (data) => {
 
 <template>
   <POIEditSkeleton v-if="loading"/>
-  <AccessDeniedBanner v-else-if="poi.createdbyId !== loggedUser.id" :route-back="{name: 'poiDetail', params: {id: poiId}}"/>
+  <AccessDeniedBanner
+    v-else-if="poi.createdById !== loggedUser.id"
+    :route-back="{name: 'poiDetail', params: {id: poiId}}"
+  />
   <POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
 </template>

src/pages/profile/poi/NewPointOfInterestPage.vue

@@ -1,7 +1,6 @@
 <script setup>
 import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {ref} from "vue";
 import POIForm from "components/poi/POIForm.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {successObject} from "src/composables/dialog";
@@ -17,7 +16,6 @@ const handleSave = (formData) => {
     router.push({name: "poi"});
   })
 }
-
 const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
 
 useAppStore().setPageTitle("Nové zajímavé místo");

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -9,7 +9,7 @@ import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
-import BasicInfoBanner from "components/BasicInfoBanner.vue";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 
 const loggedUser = storeToRefs(useUserStore()).user;

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -5,6 +5,8 @@ import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {flights} from "src/composables/objects/flight";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 onMounted(() => {
   fetchPOIList();
@@ -15,19 +17,14 @@ useAppStore().setPageTitle("Zajímavá místa")
 
 <template>
   <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
-
-  <div class="q-pa-md q-gutter-sm" v-else-if="!loading && pointsOfInterest.length === 0">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
-      </template>
-      Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
-      i v tomto seznamu.
-      <template v-slot:action>
-        <q-btn flat color="white" :to="{name: 'addPoi'}" label="Přidat"/>
-      </template>
-    </q-banner>
-  </div>
+  <BasicInfoBanner
+    v-else-if="!loading && pointsOfInterest.length === 0"
+    :route-add="{name: 'addPoi'}"
+    label-add="Přidat"
+  >
+    Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
+    i v tomto seznamu.
+  </BasicInfoBanner>
 
   <POIList
     v-else