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>

src/pages/public/RegisterPage.vue

@@ -1,61 +1,74 @@
 <script setup>
-
-import {ref} from "vue";
+import {reactive, ref} from "vue";
 import {useUserStore} from "stores/User";
 import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-
-const email = ref("");
-const name = ref("");
-const password = ref("");
+import {errorObject, successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
 
 const router = useRouter();
 const $q = useQuasar();
+const form = ref(null);
+
+useAppStore().setPageTitle("Registrace");
+
 const registerUser = () => {
-  useUserStore().register({
-    email: email.value,
-    name: name.value,
-    password: password.value
-  }).then(() => {
-    $q.notify({message: "Registration Ok, now login", position: "top", color: "positive"});
-    router.push({name: 'login'})
+  if (!form.value.validate()) return;
+
+  useUserStore().register(formData).then(() => {
+    useUserStore().login({email: formData.email, password: formData.password}).then(() => {
+      $q.notify(successObject("Registrace úspěšná, vítej!"));
+      router.push({name: "myFlights"});
+    })
+
   }).catch(({response}) => {
-    $q.notify({
-      message: "Registration failed",
-      position: "top",
-      color: "negative",
-      timeout: 0,
-      actions: [
-        {
-          label: "Dismiss", color: "white"
-        }
-      ]
-    });
+    console.log(response.detail);
+    if (response.detail === 'User already exists') {
+      $q.notify(errorObject("Uživatel s tímto e-mailem je již registrovaný. Zkus se přihlásit."));
+    } else {
+      $q.notify(errorObject("Registrace se nepovedla, zkus to prosím znovu za chvíli"));
+    }
   })
 }
 
+const formData = reactive({
+  name: "",
+  email: "",
+  password: ""
+});
+
+
+const rules = {
+  email: [isRequired, isValidEmail],
+  password: [isRequired, minLength(4)]
+}
 </script>
 
 <template>
   <q-page class="row justify-center">
-    <q-card style="width:95%; max-width: 450px; height: 500px" >
+    <q-card style="width:95%; max-width: 450px; height: 500px">
       <q-card-section class="bg-primary">
         <h4 class="text-h5 text-white q-my-md">Registrace</h4>
       </q-card-section>
       <q-card-section>
-        <q-form class="q-px-sm q-pt-xl q-pb-lg" @submit.prevent="registerUser">
-          <q-input square clearable v-model="name" type="text" label="Name">
+        <q-form
+          ref="form"
+          class="q-px-sm q-pt-xl q-pb-lg"
+          @submit.prevent="registerUser"
+        >
+          <q-input square clearable v-model="formData.name" type="text" label="Jméno">
             <template v-slot:prepend>
               <q-icon name="person"/>
             </template>
           </q-input>
 
-          <q-input square clearable v-model="email" type="email" label="E-mail">
+          <q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
             <template v-slot:prepend>
               <q-icon name="email"/>
             </template>
           </q-input>
-          <q-input square clearable v-model="password" type="password" label="Password">
+          <q-input square clearable v-model="formData.password" type="password" label="Heslo" :rules="rules.password">
             <template v-slot:prepend>
               <q-icon name="lock"/>
             </template>
@@ -63,7 +76,13 @@ const registerUser = () => {
         </q-form>
       </q-card-section>
       <q-card-actions class="q-px-lg">
-        <q-btn @click="registerUser" unelevated size="lg" class="full-width" label="Registrovat"/>
+        <q-btn
+          @click="registerUser"
+          unelevated
+          size="lg"
+          class="full-width"
+          label="Registrovat"
+        />
       </q-card-actions>
       <q-card-section class="text-center q-pa-sm">
         <router-link :to="{name: 'login'}" class="text-grey-6">Zpět na login</router-link>