Zdockerovani, sjednoceni marginu, drobnejsi upravy

src/pages/profile/forms/EditAircraftPage.vue

@@ -40,10 +40,14 @@ onMounted(() => {
 <template>
   <AircraftEditSkeleton v-if="loading"/>
 
-  <AircraftForm
-    v-else
-    @save="handleSave"
-    :default-values="aircraft"
-    :is-request-pending="isRequestPending"
-  />
+  <q-card v-else class="q-mx-md">
+    <q-card-section>
+      <AircraftForm
+        @save="handleSave"
+        :default-values="aircraft"
+        :is-request-pending="isRequestPending"
+      />
+    </q-card-section>
+  </q-card>
+
 </template>

src/pages/profile/forms/NewAircraftsPage.vue

@@ -3,8 +3,9 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {onMounted, ref} from "vue";
+import {ref} from "vue";
 import {useAppStore} from "stores/App";
+import {successObject} from "src/composables/dialog";
 
 let isRequestPending = ref(false);
 const $q = useQuasar();
@@ -12,24 +13,25 @@ const router = useRouter();
 const handleSave = (formData) => {
   isRequestPending.value = true;
   useAircraftsStore().create(formData).then(() => {
-    $q.notify({message: "Letadlo úspěšně vytvořeno", position: "top", color: "positive"});
-
+    $q.notify(successObject("Letadlo úspěšně vytvořeno"));
     router.push({name: "aircrafts"});
   }).finally(() => {
-    isRequestPending.value = true;
+    isRequestPending.value = false;
   })
 }
 
 
-onMounted(() => {
-  useAppStore().setPageTitle("Nové letadlo");
-  useAppStore().setBreadcrumbs([
-    {to: {name: "aircrafts"}, label: "Letadla"},
-    {label: "Nové"}
-  ]);
-});
+useAppStore().setPageTitle("Nové letadlo");
+useAppStore().setBreadcrumbs([
+  {to: {name: "aircrafts"}, label: "Letadla"},
+  {label: "Nové"}
+]);
 </script>
 
 <template>
-  <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <q-card class="q-mx-md q-my-md">
+    <q-card-section>
+      <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
+    </q-card-section>
+  </q-card>
 </template>

src/pages/profile/lists/AircraftsPage.vue

@@ -1,19 +1,34 @@
 <script setup>
 import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import AircraftsListSkeleton from "components/aircrafts/AircraftsListSkeleton.vue";
 import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
 import FAB from "components/FAB.vue";
+import BasicListSkeleton from "components/BasicListSkeleton.vue";
 
 onMounted(() => {
- fetchAircrafts();
+  fetchAircrafts();
 })
 </script>
 
 <template>
-  <AircraftsListSkeleton v-if="loading" />
+  <BasicListSkeleton v-if="loading"/>
 
-  <AircraftsList class="q-my-lg" :items="aircrafts" v-else />
+  <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>
+
+  <AircraftsList
+    v-else
+    :items="aircrafts"
+  />
 
   <FAB mode="add" :router-link="{name: 'addAircraft'}"/>
 </template>

src/pages/profile/lists/CopilotsPage.vue

@@ -1,10 +1,11 @@
 <script setup>
 import {onMounted} from "vue";
-import CopilotListSkeleton from "components/copilots/CopilotListSkeleton.vue";
 import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
 import CopilotsList from "components/copilots/CopilotsList.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
+import {aircrafts} from "src/composables/objects/aircraft";
+import BasicListSkeleton from "components/BasicListSkeleton.vue";
 
 onMounted(() => {
   fetchCopilots();
@@ -13,10 +14,21 @@ onMounted(() => {
 </script>
 
 <template>
-  <CopilotListSkeleton v-if="loading"/>
+  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
+
+   <div class="q-pa-md q-gutter-sm" v-else-if="!loading && copilots.length === 0">
+    <q-banner class="bg-light-blue text-white">
+      <template v-slot:avatar>
+        <q-icon name="info"/>
+      </template>
+      Zatím tu není nikdo. Přidej si let s někým nebo kopilota vytvoř ručně tu.
+      <template v-slot:action>
+        <q-btn flat color="white" :to="{name: 'addCopilot'}" label="Přidat"/>
+      </template>
+    </q-banner>
+  </div>
+
+    <CopilotsList :items="copilots" v-else/>
 
-  <template v-else>
-    <CopilotsList class="q-my-lg" :items="copilots"/>
     <FAB :router-link="{name: 'addCopilot'}" mode="add"/>
-  </template>
 </template>

src/pages/profile/lists/FlightsPage.vue

@@ -30,7 +30,7 @@ onMounted(() => {
     </q-banner>
   </div>
 
-  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
+  <FlightsList class="q-mx-md q-my-md" v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/lists/PointsOfInterestPage.vue

@@ -1,10 +1,10 @@
 <script setup>
 import {onMounted} from "vue";
-import POIListSkeleton from "components/poi/POIListSkeleton.vue";
 import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
+import BasicListSkeleton from "components/BasicListSkeleton.vue";
 
 onMounted(() => {
   fetchPOIList();
@@ -14,9 +14,25 @@ useAppStore().setPageTitle("Zajímavá místa")
 </script>
 
 <template>
-  <POIListSkeleton v-if="loading"/>
+  <BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
 
-  <POIList v-else class="q-my-lg" :items="pointsOfInterest"/>
+  <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>
 
-  <FAB :router-link="{name: 'addPOI'}" mode="add" />
+  <POIList
+    v-else
+    :items="pointsOfInterest"
+  />
+
+  <FAB :router-link="{name: 'addPOI'}" mode="add"/>
 </template>