Zdockerovani, sjednoceni marginu, drobnejsi upravy

src/boot/axios.js

@@ -19,7 +19,7 @@ api.interceptors.request.use((config) => {
     config.headers['Authorization'] = `Bearer ${token}`
   }
 
-  if (config.url === '/refresh') {
+  if (['/refresh', '/login'].includes(config.url)) {
     delete config.headers['Authorization'];
   }
 
@@ -31,11 +31,9 @@ api.interceptors.response.use((response) => {
   return response
 }, async function (error) {
   const originalRequest = error.config;
-  if (error.response.status === 401 && !originalRequest._retry) {
-    originalRequest._retry = true;
+  if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
     const newToken = await useUserStore().refreshAccessToken().catch(err => {
       console.error(err);
-      useRouter().push({to: "login"});
       return Promise.reject("Logged out");
     })
     api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;

src/components/BasicListSkeleton.vue

@@ -1,10 +1,24 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  itemsCountMin: {
+    type: Number,
+    required:false,
+    default: 2
+  },
+  itemsCountMax: {
+    type: Number,
+    required:false,
+    default: 5
+  }
+})
+
 </script>
 
 <template>
   <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
+    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
       <q-item-section avatar>
         <q-skeleton type="QAvatar" />
       </q-item-section>

src/components/FormWrapper.vue

@@ -42,22 +42,23 @@ const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
   <q-form @submit.prevent="saveForm" ref="form">
     <slot name="default"/>
 
-    <slot name="saveButton" />
+    <div class="text-right">
+      <q-btn
+        color="primary"
+        type="submit"
+        size="lg"
+        :class="{'q-my-lg': true, 'q-mx-lg': true, 'btn--fullwidth': fullwidthBtn}"
+        v-if="saveButton"
+        :icon="props.saveButton.icon"
+        :loading="props.isRequestPending"
+      >
+        {{ props.saveButton.label }}
 
-    <q-btn
-      color="primary"
-      type="submit"
-      :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
-      v-if="saveButton"
-      :icon="props.saveButton.icon"
-      :loading="props.isRequestPending"
-    >
-      {{ props.saveButton.label }}
-
-      <template v-slot:loading>
-        Loading...
-      </template>
-    </q-btn>
+        <template v-slot:loading>
+          Loading...
+        </template>
+      </q-btn>
+    </div>
   </q-form>
 </template>
 

src/components/aircrafts/AircraftForm.vue

@@ -4,12 +4,14 @@ import {onMounted, reactive} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import {defaultValues, isRequestPending} from "src/composables/form/props";
-import {isRequired} from "src/composables/form/rules";
+import {isRequired, maxLength, minLength} from "src/composables/form/rules";
+import {commonProps} from "src/composables/inputs";
 
 const formData = reactive({
   id: null,
   callSign: "",
   model: "",
+  seats: null,
   manufacturer: "",
   description: "",
   photo: null,
@@ -23,8 +25,13 @@ const props = defineProps({
 
 const rules = {
   callSign: [
-    v => isRequired(v)
+    isRequired,
+    minLength(4),
+    maxLength(8)
   ],
+  seats: [
+    isNumber
+  ]
 };
 
 onMounted(() => {
@@ -35,14 +42,49 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
-    <q-input type="text" :rules="rules.callSign" v-model="formData.callSign" label="Volací značka"/>
-    <q-input type="text" v-model="formData.model" label="Model"/>
-    <q-input type="text" v-model="formData.manufacturer" label="Výrobce"/>
-    <q-input type="textarea" v-model="formData.description" label="Popis" />
+    <q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl"/>
 
+    <q-input
+      type="text"
+      :rules="rules.callSign"
+      v-model="formData.callSign"
+      label="Volací značka"
+      v-bind="commonProps"
+    />
 
-    {{ props.defaultValues.photoUrl }}
-    <q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl" />
-    <q-file v-model="formData.photo" label="Fotografie" />
+    <q-input
+      type="text"
+      v-model="formData.manufacturer"
+      label="Výrobce"
+      v-bind="commonProps"
+    />
+    <q-input
+      type="text"
+      v-model="formData.model"
+      label="Model"
+      v-bind="commonProps"
+    />
+
+    <q-input
+      type="number"
+      v-model="formData.seats"
+      label="Počet míst"
+      min="1"
+      :rules="rules.seats"
+      v-bind="commonProps"
+    />
+
+    <q-input
+      type="textarea"
+      v-model="formData.description"
+      label="Popis"
+      v-bind="commonProps"
+    />
+
+    <q-file v-model="formData.photo" label="Fotografie" v-bind="commonProps">
+      <template #prepend>
+        <q-icon name="upload"/>
+      </template>
+    </q-file>
   </FormWrapper>
 </template>

src/components/copilots/CopilotListSkeleton.vue

@@ -1,16 +0,0 @@
-<script setup>
-import {randomInt} from "src/composables/random";
-</script>
-
-<template>
-  <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
-      <q-item-section avatar>
-        <q-skeleton type="QAvatar"/>
-      </q-item-section>
-      <q-item-section>
-        <q-skeleton :width="randomInt(10,25)+'%'"/>
-      </q-item-section>
-    </q-item>
-  </q-list>
-</template>

src/components/flights/FlightsList.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-list bordered separator class="q-mx-md q-my-md">
+  <q-list bordered separator>
     <q-item
       v-for="flight of items" :key="flight"
       ripple

src/components/poi/POIListSkeleton.vue

@@ -1,7 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-  <em>POI list skeleton</em>
-</template>

src/composables/form/rules.js

@@ -1 +1,20 @@
-export const isRequired =  (v) => !!v || "Required"
+export const isRequired = (val) => !!val || "Toto pole je povinné";
+export const isValidEmail = (email) => {
+  const patternEmail = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
+  return !!patternEmail.test(email) || "Tento e-mail není platný";
+};
+export const minLength = (length) => (val) => val.length >= length || `Zadej alespoň ${length} znaky`
+export const maxLength = (length) => (val) => val.length < length || `Zadej maximálně ${length} znaků`
+
+
+export const isEmptyArray = () => (val) => {
+  return (val && val.length !== 0) || "Select item, please";
+};
+
+export const isNumber = () => (val) => {
+  return !isNaN(val) || "Only numbers are allowed";
+};
+
+export const hasNoWhitespace = () => (val) => {
+  return /^\S*$/.test(val) || "Don't use whitespaces";
+};

src/layouts/ProfileLayout.vue

@@ -15,23 +15,23 @@
           {{ pageTitle || "Polétání.cz" }}
         </q-toolbar-title>
 
-          <q-btn flat>
-            <AvatarFromPhoto v-if="loggedUser.avatarImageUrl" :size="32" :src="loggedUser.avatarImageUrl"/>
-            <q-icon name="person" v-else/>
+        <q-btn flat>
+          <AvatarFromPhoto v-if="loggedUser.avatarImageUrl" :size="32" :src="loggedUser.avatarImageUrl"/>
+          <q-icon name="person" v-else/>
 
-            <q-menu auto-close>
-              <q-list style="min-width: 100px">
-                <q-item clickable :to="{name: 'profile'}">
-                  <q-item-section>Osobní nastavení</q-item-section>
-                </q-item>
+          <q-menu auto-close>
+            <q-list>
+              <q-item clickable :to="{name: 'profile'}">
+                <q-item-section>Osobní nastavení</q-item-section>
+              </q-item>
 
-                <q-item clickable @click="logout">
-                  <q-item-section>Odhlásit</q-item-section>
-                </q-item>
+              <q-item clickable @click="logout">
+                <q-item-section>Odhlásit</q-item-section>
+              </q-item>
 
-              </q-list>
-            </q-menu>
-          </q-btn>
+            </q-list>
+          </q-menu>
+        </q-btn>
 
       </q-toolbar>
     </q-header>
@@ -57,9 +57,11 @@
       </q-scroll-area>
     </q-drawer>
 
-    <q-page-container class="q-px-md">
+    <q-page-container>
       <BreadcrumbsNavigation class="q-mx-md q-my-md" :items="breadcrumbs"/>
-      <router-view/>
+      <div class="q-mx-md q-my-md">
+        <router-view/>
+      </div>
     </q-page-container>
   </q-layout>
 </template>
@@ -126,9 +128,9 @@ const $q = useQuasar();
 const $router = useRouter();
 
 const logout = () => {
-useUserStore().logout().then(() => {
-  $q.notify(successObject("Odhlášení bylo úspěšné"));
-  $router.push({name: "homepage"});
-})
+  useUserStore().logout().then(() => {
+    $q.notify(successObject("Odhlášení bylo úspěšné"));
+    $router.push({name: "homepage"});
+  })
 }
 </script>

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>