Aktualizace balicku, strnakovani, uprava hlavni stranky

docker-compose.yml

@@ -24,7 +24,7 @@ services:
 ##    command: ls -l /app
 
   app:
-    network_mode: host
+#    network_mode: host
     build:
       context: .
       target: "develop-stage"
@@ -33,11 +33,12 @@ services:
       - "9001:9100"
     volumes:
       - ./src:/app/src
+      - ./src-ssr:/app/src-ssr
       - ./public:/app/public
-      - ./node_modules:/app/node_modules:delegated
+#      - ./node_modules:/app/node_modules:delegated
     command: quasar dev -m ssr
     environment:
-      API_URL: "http://localhost:8000"
+      API_URL: "http://127.0.0.1:8000"
 
 #  nginx:
 #    image:

package.json

@@ -15,28 +15,28 @@
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0-beta.5",
     "apollo-upload-client": "^17.0.0",
-    "axios": "^1.4.0",
-    "chart.js": "^4.4.0",
+    "axios": "^1.6.2",
+    "chart.js": "^4.4.1",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",
     "photoswipe": "^5.4.2",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
     "pinia": "^2.0.33",
     "quasar": "^2.14.1",
-    "vue": "^3.2.47",
+    "vue": "^3.3.11",
     "vue-chartjs": "^5.2.0",
     "vue-picture-cropper": "^0.7.0",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.2.5",
     "vue3-google-map": "^0.15.0"
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.7.1",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-vue": "^9.19.2",
     "postcss": "^8.4.14",
-    "prettier": "^2.5.1"
+    "prettier": "^2.8.8"
   },
   "engines": {
     "npm": ">= 6.13.4",

public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /login/
+Disallow: /moje/

src/boot/apollo.js

@@ -1,17 +1,17 @@
 import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
 import {onError} from "@apollo/client/link/error";
-import {useUserStore} from "stores/User";
 import {useAppStore} from "stores/App";
 import {Notify} from "quasar";
 import {errorObject, warningObject} from "src/composables/dialog";
 import {createUploadLink} from "apollo-upload-client";
+import {useAuthStore} from "stores/Auth";
 // import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
 const handleRefreshToken = (store, router, forward, operation) => {
   if (!operation.query?._refreshUnauthorizedUser) return;
 
   console.log("refreshing token, ", operation.query);
-  return fromPromise(useUserStore(store).refreshAccessToken()
+  return fromPromise(useAuthStore(store).refreshAccessToken()
     .catch((error) => {
       Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
       router.push({name: "login"})
@@ -39,8 +39,7 @@ export default (({store, router}) => {
   })
 
   const authLink = new ApolloLink((operation, forward) => {
-    const accessToken = useUserStore(store).getAccessToken();
-
+    const accessToken = useAuthStore(store).getAccessToken();
     if (accessToken) {
       operation.setContext({
         headers: {"Authorization": `Bearer ${accessToken}`},
@@ -50,7 +49,6 @@ export default (({store, router}) => {
   });
 
   const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
-    console.log(networkError, graphQLErrors);
     if (networkError?.statusCode === 401) {
       return handleRefreshToken(store, router, forward, operation);
     }

src/boot/axios.js

@@ -1,6 +1,6 @@
 import {boot} from 'quasar/wrappers'
 import axios from 'axios'
-import {useUserStore} from "stores/User";
+import {useAuthStore} from "stores/Auth";
 
 
 const api = axios.create({
@@ -15,7 +15,7 @@ const api = axios.create({
 
 export default boot(({store}) => {
     api.interceptors.request.use((config) => {
-        const token = useUserStore(store).getAccessToken();
+        const token = useAuthStore(store).getAccessToken();
         if (token) {
             config.headers['Authorization'] = `Bearer ${token}`
         }
@@ -33,8 +33,7 @@ export default boot(({store}) => {
         async function (error) {
             const originalRequest = error.config;
             if (error.response.status === 401 && !['/refresh', '/login'].includes(originalRequest.url)) {
-                const newToken = await useUserStore(store).refreshAccessToken().catch(err => {
-                    console.error(err);
+                const newToken = await useAuthStore(store).refreshAccessToken().catch(err => {
                     return Promise.reject("Logged out");
                 })
                 api.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;

src/components/AppFooter.vue

@@ -0,0 +1,38 @@
+<script setup></script>
+
+<template>
+  <q-footer>
+    <div class="row justify-between">
+      <div class="col-4">
+        <q-list>
+          <q-item><router-link :to="{name: 'about'}">O projektu</router-link></q-item>
+          <q-item><router-link :to="{name: 'contact'}">Kontakt</router-link></q-item>
+          <q-item><router-link :to="{name: 'login'}">Login</router-link></q-item>
+          <q-item><router-link :to="{name: 'registration'}">Registrace</router-link></q-item>
+        </q-list>
+      </div>
+      <div class="col-4">
+        <q-list>
+          <q-item><router-link :to="{name: 'about'}">Podmínky použití</router-link></q-item>
+          <q-item><router-link :to="{name: 'about'}">Správa osobních údajů</router-link></q-item>
+        </q-list>
+      </div>
+<!--      <div class="col">-->
+<!--        &copy; 2023 Polétání.cz-->
+<!--      </div>-->
+    </div>
+    <div class="row">
+      <div class="col text-center q-my-lg">
+        Vytvořeno s &hearts; s využitím následujících technologií: Quasar, GraphQL, Strawberry, FastAPI
+      </div>
+    </div>
+  </q-footer>
+</template>
+
+
+<style scoped>
+a {
+  color: white;
+  font-size: 110%;
+}
+</style>

src/components/LoadMoreList.vue

@@ -0,0 +1,41 @@
+<script setup>
+const props = defineProps({
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsLength: {
+    type: Number,
+    required: true,
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+
+const emits = defineEmits(["load-more"]);
+const loadMore = () => {
+  emits("load-more", props.itemsPerPage);
+}
+</script>
+
+<template>
+  <div>
+    <slot name="items"/>
+    <slot name="skeleton" v-if="isQueryRunning"/>
+
+    <div class="text-center q-my-md">
+      <q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
+        <slot name="loadMoreText"/>
+      </q-btn>
+    </div>
+  </div>
+</template>

src/components/aircrafts/AircraftsList.vue

@@ -1,46 +1,68 @@
 <script setup>
-
-import {useAppStore} from "stores/App";
+import LoadMoreList from "components/LoadMoreList.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 const props = defineProps({
   items: {
     type: Array,
     required: true
+  },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 });
-
-useAppStore().setPageTitle("Letadla");
 </script>
 
 <template>
-  <q-list bordered separator>
-    <q-item
-      clickable
-      v-ripple
-      :to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
-      v-for="aircraft of props.items" :key="aircraft"
-    >
-      <q-item-section avatar>
-        <q-avatar v-if="aircraft.titlePhoto">
-          <img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
-        </q-avatar>
-        <q-avatar color="teal" text-color="white" icon="flight" v-else/>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label label>
-          {{ aircraft.callSign }}
-        </q-item-label>
-        <q-item-label caption>
-          {{ aircraft.model }}
-          <template v-if="aircraft.manufacturer">
-            ({{ aircraft.manufacturer }})
-          </template>
-        </q-item-label>
-        <q-item-label caption v-if="aircraft.organization">
-          Provozovatel: {{ aircraft.organization.name }}
-        </q-item-label>
-      </q-item-section>
-
-    </q-item>
-  </q-list>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
+      <q-list bordered separator>
+        <q-item
+          clickable
+          v-ripple
+          :to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
+          v-for="aircraft of props.items" :key="aircraft"
+        >
+          <q-item-section avatar>
+            <q-avatar v-if="aircraft.titlePhoto">
+              <img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
+            </q-avatar>
+            <q-avatar color="teal" text-color="white" icon="flight" v-else/>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label label>
+              {{ aircraft.callSign }}
+            </q-item-label>
+            <q-item-label caption>
+              {{ aircraft.model }}
+              <template v-if="aircraft.manufacturer">
+                ({{ aircraft.manufacturer }})
+              </template>
+            </q-item-label>
+            <q-item-label caption v-if="aircraft.organization">
+              Provozovatel: {{ aircraft.organization.name }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </template>
+    <template #skeleton>
+      <BasicListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Další
+    </template>
+  </LoadMoreList>
 </template>

src/components/flights/FlightsList.vue

@@ -2,6 +2,9 @@
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {computed} from "vue";
+import LoadMoreList from "components/LoadMoreList.vue";
 
 const props = defineProps({
   items: {
@@ -12,6 +15,20 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
 });
 
 const routeDetail = (flight) => {
@@ -20,52 +37,75 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
+
+const pluralize = (count, singular, plural, pluralMore) => {
+  if (count === 1) return singular;
+  else if (count < 5) return plural;
+  else return pluralMore;
+}
+const loadMoreCount = computed(() => {
+  const remaining = props.totalItemsCount - props.items.length;
+
+  return Math.min(props.itemsPerPage, remaining);
+});
+
 </script>
 
 <template>
-  <q-list bordered separator>
-    <q-item
-      v-for="flight of items" :key="flight"
-      ripple
-      clickable
-      :to="routeDetail(flight)"
-    >
-      <q-item-section avatar>
-        <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
-      </q-item-section>
-      <q-item-section>
-        <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
+      <q-list bordered separator>
+        <q-item
+          v-for="flight of items" :key="flight"
+          ripple
+          clickable
+          :to="routeDetail(flight)"
+        >
+          <q-item-section avatar>
+            <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
+          </q-item-section>
+          <q-item-section>
+            <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
-        <div class="text-secondary" v-if="props.public">
-          <q-icon name="support_agent"/>
-          @{{flight.pilot.publicUsername}}
-        </div>
+            <div class="text-secondary" v-if="props.public">
+              <q-icon name="support_agent"/>
+              @{{ flight.pilot.publicUsername }}
+            </div>
 
-        <div class="text-secondary" v-if="flight.copilot">
-          <q-icon name="person"/>
-          {{ flight.pilot.name }}
-          {{ flight.copilot.name }}
-        </div>
+            <div class="text-secondary" v-if="flight.copilots">
+              <q-icon name="person"/>
+              {{ flight.pilot.name }}
+              {{ flight.copilots }}
+            </div>
 
-        <div class="text-secondary">
-          <q-icon name="schedule"/>
-          {{ minutesToHumanReadable(flight.durationMinCalculated) }}
-        </div>
-        <div class="text-secondary">
-          <q-icon name="flight"/>
-          {{ flight.aircraft.callSign }}
-        </div>
+            <div class="text-secondary">
+              <q-icon name="schedule"/>
+              {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+            </div>
+            <div class="text-secondary">
+              <q-icon name="flight"/>
+              {{ flight.aircraft.callSign }}
+            </div>
 
-        <div class="text-secondary" v-if="flight.event">
-          <q-icon name="event"/>
-          {{ flight.event.name }}
-        </div>
-      </q-item-section>
+            <div class="text-secondary" v-if="flight.event">
+              <q-icon name="event"/>
+              {{ flight.event.name }}
+            </div>
+          </q-item-section>
+
+          <q-item-section side top v-if="flight.isPublic && !props.public">
+            <!-- Zobraz jen v adminu -->
+            <q-icon name="visibility"></q-icon>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </template>
+    <template #skeleton>
+      <FlightsListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
+    </template>
+  </LoadMoreList>
 
-      <q-item-section side top v-if="flight.isPublic && !props.public">
-        <!-- Zobraz jen v adminu -->
-        <q-icon name="visibility"></q-icon>
-      </q-item-section>
-    </q-item>
-  </q-list>
 </template>

src/components/flights/skeletons/FlightsListSkeleton.vue

@@ -1,10 +1,18 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  items: {
+    type: Number,
+    required: false,
+    default: 10,
+  }
+})
 </script>
 
 <template>
   <q-list bordered separator>
-    <q-item v-for="i in 10" :key="i" ripple>
+    <q-item v-for="i in items" :key="i" ripple>
       <q-item-section avatar>
         <q-avatar size="100px">
           <q-skeleton type="QAvatar" size="100px"></q-skeleton>
@@ -12,9 +20,9 @@ import {randomInt} from "src/composables/random";
       </q-item-section>
       <q-item-section>
         <q-skeleton :width="randomInt(30,50)+'%'"/>
-          <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
-          <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
-          <q-skeleton type="text" width="8%"/>
+        <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
+        <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
+        <q-skeleton type="text" width="8%"/>
       </q-item-section>
     </q-item>
   </q-list>

src/components/flights/slider/LatestFlightSliderInfo.vue

@@ -0,0 +1,26 @@
+<script setup>
+import {flightName} from "src/composables/flight";
+
+const props = defineProps({
+  flight: {
+    type: Object,
+    required: true
+  },
+  textColor: {
+    type: String,
+    required: false,
+    default: "white"
+  }
+})
+</script>
+
+<template>
+  <div class="text-h4">
+    <router-link :class="`text-${props.textColor}`" :to="{name: 'publicFlightDetail', params: {username: flight.pilot.publicUsername, id: flight.id}}">
+      {{ flightName(flight) }}
+    </router-link>
+  </div>
+  <router-link :class="`text-${props.textColor}`" :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}">
+    @{{ flight.pilot.publicUsername }}
+  </router-link>
+</template>

src/components/flights/slider/LatestFlightsSlider.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {ref} from "vue";
+import {flightName} from "src/composables/flight";
+import LatestFlightSliderInfo from "components/flights/slider/LatestFlightSliderInfo.vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const slide = ref(0);
+</script>
+
+<template>
+  <q-carousel
+    v-model="slide"
+    transition-prev="scale"
+    transition-next="scale"
+    swipeable
+    animated
+    control-color="primary"
+    navigation
+    padding
+    arrows
+    infinite
+    height="500px"
+    class="bg-blue-1 text-white shadow-1 "
+  >
+    <q-carousel-slide :name="idx" v-for="(flight, idx) in items" :key="idx" class="column no-wrap flex-center text-center">
+      <q-img :src="flight.titlePhoto.url" fit="cover" ratio="16/9" height="400px" v-if="flight.titlePhoto">
+        <div class="absolute-bottom">
+          <LatestFlightSliderInfo :flight="flight"/>
+        </div>
+      </q-img>
+        <LatestFlightSliderInfo v-else :flight="flight" text-color="primary"/>
+    </q-carousel-slide>
+  </q-carousel>
+</template>

src/components/indexPage/TimelineDescription.vue

@@ -0,0 +1,36 @@
+<script setup></script>
+
+<template>
+  <q-timeline color="primary" class="q-my-lg">
+    <q-timeline-entry title="Zaznamenej si let">
+      <div>
+        Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
+      </div>
+    </q-timeline-entry>
+
+
+    <q-timeline-entry title="Vyber a nahraj fotky">
+      <div>
+        Máš nějaké fotky z letu? Nahraj je ke svému letu! A pokud mají v sobě uloženou informaci o poloze, polétání.cz ti zobrazí i místo kde fotka vznikla.
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Ulož trasu">
+      <div>
+        Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Popiš zážitek">
+      <div>
+        Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Sdílej">
+      <div>
+        Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a sdílet odkaz kde chceš. Třeba s tvým kopilotem.
+      </div>
+    </q-timeline-entry>
+  </q-timeline>
+</template>

src/components/poi/POIList.vue

@@ -1,4 +1,8 @@
 <script setup>
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import LoadMoreList from "components/LoadMoreList.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+
 const props = defineProps({
   items: {
     type: Array,
@@ -7,6 +11,20 @@ const props = defineProps({
   public: {
     type: Boolean,
     required: true
+  },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 });
 
@@ -18,23 +36,33 @@ const getRoute = (item) => {
 }
 </script>
 <template>
-  <q-list bordered separator>
-    <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
-      <q-item-section avatar>
-        <q-avatar v-if="poi.titlePhoto">
-          <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
-        </q-avatar>
-        <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
-      </q-item-section>
-      <q-item-section>
-        {{ poi.name }}
-        <div class="text-secondary" v-if="poi.type">
-          {{ poi.type.name }}
-        </div>
-      </q-item-section>
-      <q-item-section side top v-if="poi.isPublic">
-        <q-icon name="visibility"></q-icon>
-      </q-item-section>
-    </q-item>
-  </q-list>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
+      <q-list bordered separator>
+        <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
+          <q-item-section avatar>
+            <q-avatar v-if="poi.titlePhoto">
+              <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>
+            </q-avatar>
+            <q-avatar v-else :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
+          </q-item-section>
+          <q-item-section>
+            {{ poi.name }}
+            <div class="text-secondary" v-if="poi.type">
+              {{ poi.type.name }}
+            </div>
+          </q-item-section>
+          <q-item-section side top v-if="!props.public && poi.isPublic">
+            <q-icon name="visibility"></q-icon>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </template>
+    <template #skeleton>
+      <BasicListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Další
+    </template>
+  </LoadMoreList>
 </template>

src/components/profile/PublicProfileInfo.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {onMounted, reactive, watch} from "vue";
 import {useRoute} from "vue-router";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {commonProps} from "src/composables/inputs";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import FormWrapper from "components/FormWrapper.vue";

src/composables/meta.js

@@ -18,9 +18,9 @@ export const metaData = ({title, description, keywords, image}) => {
     const filteredDescription = stripHtml(description);
 
     return {
-        title: title || "",
+        title: title,
         titleTemplate(title) {
-            return title !== '' ? `${title} - Polétání.cz` : 'Polétání.cz'
+            return title !== '' ? `${title} - Polétání.cz: fotogalerie ze vzduchu` : 'Polétání.cz'
         },
         meta: {
             description: {name: "description", content: filteredDescription || ""},

src/composables/pagination.js

@@ -0,0 +1,16 @@
+import {ref} from "vue";
+
+
+export const paginationLimit = ref(10);
+export const paginationOffset = ref(0);
+
+export const loadPage = ({fetchFunc, filters, appendItems}) => {
+  return fetchFunc({
+    ...filters,
+    limit: paginationLimit.value,
+    offset: paginationOffset.value,
+    appendItems
+  }).then(() => {
+    paginationOffset.value += paginationLimit.value;
+  })
+}

src/graphql/fragments/flight_list.js

@@ -13,6 +13,7 @@ fragment flightListInfo on Flight {
 
   titlePhoto {
     thumbnailUrl
+    url
   }
 
   track {

src/graphql/queries/aircrafts.js

@@ -2,11 +2,14 @@ import gql from "graphql-tag";
 import {FRAGMENT_AIRCRAFT_FULL_INFO, FRAGMENT_AIRCRAFT_FULL_PRIVATE_INFO, FRAGMENT_AIRCRAFT_LIST_INFO} from "src/graphql/fragments/aircraft";
 
 export const AIRCRAFTS_LIST = gql`
-query AircraftsList {
-  aircrafts {
-    ...aircraftListInfo
+query AircraftsList ($limit: Int!, $offset: Int) {
+    aircrafts(limit: $limit, offset: $offset) {
+      totalItemsCount
+      items {
+        ...aircraftListInfo
+      }
+    }
   }
-}
 
 ${FRAGMENT_AIRCRAFT_LIST_INFO}
 `;

src/graphql/queries/event.js

@@ -3,13 +3,33 @@ import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 import {FRAGMENT_EVENT_FULL_INFO, FRAGMENT_EVENT_LIST_INFO} from "src/graphql/fragments/event";
 
 export const EVENTS_LIST = gql`
-query eventsList($username: String) {
-  events(username: $username) {
-    ...eventListInfo
+query eventsList($limit: Int!, $offset: Int) {
+  events(limit: $limit, offset: $offset) {
+    items {
+      ...eventListInfo
 
-    flights {
-      titlePhoto {
-        thumbnailUrl
+      flights {
+        titlePhoto {
+          thumbnailUrl
+        }
+      }
+    }
+  }
+}
+
+${FRAGMENT_EVENT_LIST_INFO}
+`;
+
+export const EVENTS_PUBLIC_LIST = gql`
+query eventsPublicList($username: String, $limit: Int!, $offset: Int) {
+  events(username: $username, limit: $limit, offset: $offset, public: true) {
+    items {
+      ...eventListInfo
+
+      flights {
+        titlePhoto {
+          thumbnailUrl
+        }
       }
     }
   }
@@ -19,16 +39,34 @@ ${FRAGMENT_EVENT_LIST_INFO}
 `;
 
 export const EVENT_DETAIL = gql`
-query event($id: Int!, $username: String) {
-  event(id: $id, username: $username) {
+query event($id: Int!) {
+  event(id: $id) {
     ...eventFullInfo
 
     flights {
-      ...flightListInfo
+      titlePhoto {
+        thumbnailUrl
+      }
     }
   }
 }
 
 ${FRAGMENT_EVENT_FULL_INFO}
-${FRAGMENT_FLIGHT_LIST_INFO}
 `;
+
+export const EVENT_PUBLIC_DETAIL = gql`
+query eventPublicDetail($id: Int!, $username: String) {
+  event(id: $id, username: $username, public: true) {
+    ...eventFullInfo
+
+   flights {
+      titlePhoto {
+        thumbnailUrl
+      }
+    }
+  }
+}
+
+${FRAGMENT_EVENT_FULL_INFO}
+`;
+

src/graphql/queries/flights.js

@@ -4,22 +4,35 @@ import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
 
 export const FLIGHTS_LIST = gql`
-query FlightsList {
-  flights {
-    ...flightListInfo
+query FlightsList($limit: Int!, $offset: Int) {
+  flights(limit: $limit, offset: $offset) {
+   totalItemsCount
+    items {
+      ...flightListInfo
+    }
   }
 }
 ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
 
 export const FLIGHTS_PUBLIC_LIST = gql`
-query FlightsPublicList($username: String, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int) {
-  flights(username: $username, aircraftId: $aircraftId, copilotId: $copilotId, pointOfInterestId: $pointOfInterestId, public: true) {
-    ...flightListInfo
-
-    pilot {
-      id
-      publicUsername
+query FlightsPublicList($username: String, $aircraftId: Int, $copilotId: Int, $pointOfInterestId: Int, $limit: Int!, $offset: Int) {
+  flights(
+    username: $username,
+    aircraftId: $aircraftId,
+    copilotId: $copilotId,
+    pointOfInterestId: $pointOfInterestId,
+    limit: $limit,
+    offset: $offset,
+    public: true
+  ) {
+    totalItemsCount
+    items {
+      ...flightListInfo
+      pilot {
+        id
+        publicUsername
+      }
     }
   }
 }

src/graphql/queries/poi.js

@@ -2,9 +2,12 @@ import gql from "graphql-tag";
 import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_FULL_PRIVATE_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
 
 export const POI_LIST = gql`
-query poiList {
-  pointsOfInterest {
-    ...pointOfInterestListInfo
+query poiList($limit: Int!, $offset: Int) {
+  pointsOfInterest (limit: $limit, offset: $offset) {
+    totalItemsCount
+    items {
+      ...pointOfInterestListInfo
+    }
   }
 }
 
@@ -12,9 +15,12 @@ ${FRAGMENT_POI_LIST_INFO}
 `;
 
 export const POI_PUBLIC_LIST = gql`
-query poiList {
-  pointsOfInterest(public: true) {
-    ...pointOfInterestListInfo
+query poiList($limit: Int!, $offset: Int) {
+  pointsOfInterest(limit: $limit, offset: $offset, public: true) {
+    totalItemsCount
+    items {
+      ...pointOfInterestListInfo
+    }
   }
 }
 

src/layouts/ProfileLayout.vue

@@ -3,12 +3,12 @@
     <q-header reveal elevated class="bg-primary text-white">
       <q-toolbar>
         <q-btn
-            flat
-            dense
-            round
-            icon="menu"
-            aria-label="Menu"
-            @click="toggleLeftDrawer"
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
         />
 
         <q-toolbar-title>
@@ -21,9 +21,9 @@
     </q-header>
 
     <q-drawer
-        v-model="leftDrawerOpen"
-        show-if-above
-        bordered
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
     >
       <q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px"/>
       <q-spinner v-else/>
@@ -41,15 +41,20 @@
     </q-page-container>
   </q-layout>
 </template>
+
 <script>
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 export default {
-  preFetch() {
-    return useUserStore().fetchLoggedUserDetail({refresh: true});
+  preFetch({redirect, currentRoute}) {
+    // nelze udelat refresh tokenu, protoze refreshToken je ulozeny v HTTP-only cookie a neposila se!
+    return useLoggedUserStore().fetchLoggedUserDetail({refresh: false}).catch(() => {
+      redirect({name: "profileRefresh", query: {url: currentRoute.href}})
+    })
   }
 }
 </script>
+
 <script setup>
 import {ref} from 'vue'
 import {storeToRefs} from "pinia";
@@ -75,10 +80,10 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 };
 
-const {isQueryRunning, user} = storeToRefs(useUserStore());
+const {isQueryRunning, user} = storeToRefs(useLoggedUserStore());
 
 const logout = () => {
-  useUserStore().logout().then(() => {
+  useLoggedUserStore().logout().then(() => {
     $q.notify(successObject("Odhlášení bylo úspěšné"));
     $router.push({name: "homepage"});
   })

src/layouts/PublicLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="lHh Lpr lff">
     <q-header>
       <q-toolbar>
         <q-toolbar-title>
@@ -29,16 +29,17 @@
 
       <router-view class="q-my-lg q-mx-lg"/>
     </q-page-container>
+<!--    <AppFooter />-->
   </q-layout>
 </template>
 
 <script>
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 export default {
   preFetch() {
     // todo: nevim proc tu nefunguje refresh, neposila se credentials
-    return useUserStore().fetchLoggedUserDetail({refresh: false});
+    return useLoggedUserStore().fetchLoggedUserDetail({refresh: false});
   }
 }
 </script>
@@ -48,7 +49,8 @@ import {useAppStore} from "stores/App";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
+import AppFooter from "components/AppFooter.vue";
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 </script>

src/pages/ContactPage.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  contact form
+</template>

src/pages/profile/ProfilePage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import ProfileImagesForm from "components/profile/ProfileForm.vue";
 import {useAppStore} from "stores/App";
 import {storeToRefs} from "pinia";
@@ -10,14 +10,14 @@ import ChangePasswordForm from "components/profile/ChangePasswordForm.vue";
 import PublicProfileInfo from "components/profile/PublicProfileInfo.vue";
 
 useAppStore().setPageTitle("Profil");
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 const $q = useQuasar();
 const handleSave = async (formData) => {
-  await useUserStore().update(formData);
+  await useLoggedUserStore().update(formData);
   $q.notify(successObject("Úspěšně uloženo"));
 };
-const isRequestPending = storeToRefs(useUserStore()).isMutationRunning;
+const isRequestPending = storeToRefs(useLoggedUserStore()).isMutationRunning;
 const openedTab = ref("profile");
 </script>
 

src/pages/profile/ProfileRefreshPage.vue

@@ -0,0 +1,24 @@
+<script setup>
+
+import {useRoute, useRouter} from "vue-router";
+import {computed, onMounted} from "vue";
+import {useLoggedUserStore} from "stores/LoggedUser";
+import {useAuthStore} from "stores/Auth";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const url = computed(() => $route.query.url);
+
+onMounted(() => {
+  useAuthStore().refreshAccessToken().then(() => {
+    console.log("refreshnuto", $route.query.url);
+    $router.push($route.query.url)
+  });
+});
+
+</script>
+
+<template>
+  {{ url }}
+</template>

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -14,7 +14,7 @@ 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";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {useFlightsStore} from "stores/Flights";
 import {toggleVisibility} from "src/composables/form/formHandling";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
@@ -24,7 +24,7 @@ const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
 useAircraftsStore().fetchDetail(aircraftId);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 watch(() => aircraft.value, (newVal) => {
   if (!newVal) return;

src/pages/profile/aircraft/AircraftsPage.vue

@@ -6,18 +6,27 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";
+import FlightsList from "components/flights/FlightsList.vue";
+import {ref} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
-useAircraftsStore().fetch();
-const {aircrafts, isQueryRunning} = storeToRefs(useAircraftsStore());
 useAppStore().setPageTitle("Letadla");
 
+const loadNextAircraftsPage = (appendItems) => loadPage({
+  fetchFunc: useAircraftsStore().fetch,
+  appendItems
+});
+loadNextAircraftsPage(false);
+
+const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
 </script>
 
 <template>
-  <BasicListSkeleton v-if="isQueryRunning || !aircrafts.length"/>
+  <BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !totalItemsCount"/>
 
   <BasicInfoBanner
-    v-if="!isQueryRunning && aircrafts.length === 0"
+    v-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addAircraft'}"
     label-add="Vytvořit letadlo"
   >
@@ -29,6 +38,12 @@ useAppStore().setPageTitle("Letadla");
   <AircraftsList
     v-else
     :items="aircrafts"
+    :total-items-count="totalItemsCount"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    :public="true"
+    class="q-mb-xl"
+    @load-more="loadNextAircraftsPage(true)"
   />
 
   <FAB mode="add" :router-link="{name: 'addAircraft'}"/>

src/pages/profile/aircraft/EditAircraftPage.vue

@@ -9,7 +9,7 @@ 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 {useLoggedUserStore} from "stores/LoggedUser";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
@@ -17,7 +17,7 @@ import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkelet
 const $router = useRouter();
 const $q = useQuasar();
 const aircraftId = parseInt(useRoute().params.id);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
 

src/pages/profile/flight/EditFlightPage.vue

@@ -42,11 +42,11 @@ watch(() => $route.params.step, (val) => formStep.value = val);
 onMounted(() => {
   formStep.value = $route.params.step || "basic";
 
-  useAircraftsStore().fetch();
-  usePointsOfInterestStore().fetch();
+  useAircraftsStore().fetch({});
+  usePointsOfInterestStore().fetch({});
   useAirportsStore().fetch();
   useCopilotsStore().fetch();
-  useEventsStore().fetch();
+  useEventsStore().fetch({});
 
   useFlightsStore().fetchDetail(flightId).then((f) => {
     const flightNameFormatted = flightName(f);
@@ -133,7 +133,7 @@ const updateSinglePhoto = (id, formData) => {
   return usePhotosStore().update(id, formData).then((data) => {
     const idx = _findPhotoIndex(data.id);
     flight.value.photos[idx] = data;
-    usePointsOfInterestStore().fetch();
+    usePointsOfInterestStore().fetch({});
   });
 }
 

src/pages/profile/flight/FlightDetailPage.vue

@@ -9,7 +9,7 @@ import {copyToClipboard, useQuasar} from "quasar";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
@@ -21,7 +21,7 @@ import {toggleVisibility} from "src/composables/form/formHandling";
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 useFlightsStore().fetchDetail(flightId);
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
@@ -52,7 +52,7 @@ const togglePublicVisibility = () => toggleVisibility({
 });
 
 const copyLinkToClipboard = () => {
-  const loggedUser = useUserStore().user;
+  const loggedUser = useLoggedUserStore().user;
   const url = $router.resolve({
     name: "publicFlightDetail",
     params: {id: flightId, username: loggedUser.publicUsername}

src/pages/profile/flight/FlightsPage.vue

@@ -6,24 +6,48 @@ import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
+import {ref} from "vue";
 
 useAppStore().setPageTitle("Moje lety");
-useFlightsStore().fetch({});
-const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
+
+const paginationLimit = ref(10);
+const paginationOffset = ref(0);
+
+const loadNextPage = (appendItems) => {
+  return useFlightsStore().fetch({
+    limit: paginationLimit.value,
+    offset: paginationOffset.value,
+    appendItems
+  }).then(() => {
+    paginationOffset.value += paginationLimit.value;
+  })
+}
+
+loadNextPage(false);
+const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <FlightsListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && flights.length === 0"
+    v-else-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights" :public="false" />
+  <FlightsList
+    v-else
+    :items="flights"
+    :public="false"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    :total-items-count="totalItemsCount"
+    @load-more="loadNextPage(true)"
+
+  />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/flight/NewFlightPage.vue

@@ -12,9 +12,9 @@ import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
 import FlightEditSkeleton from "components/flights/skeletons/FlightEditSkeleton.vue";
 
 onMounted(() => {
-  useAircraftsStore().fetch()
-  usePointsOfInterestStore().fetch()
-  useFlightsStore().fetch()
+  useAircraftsStore().fetch({})
+  usePointsOfInterestStore().fetch({})
+  useFlightsStore().fetch({})
   useAirportsStore().fetch()
 
   useAppStore().setPageTitle("Nový let");

src/pages/profile/organization/OrganizationDetailPage.vue

@@ -4,7 +4,7 @@ import {computed, onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
@@ -13,7 +13,7 @@ import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useOrganizationsStore} from "stores/Organizations";
 
 const organizationId = parseInt(useRoute().params.id);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const $q = useQuasar();
 
 onMounted(() => {

src/pages/profile/organization/OrganizationsPage.vue

@@ -7,12 +7,12 @@ import OrganizationsList from "components/organizations/OrganizationsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useOrganizationsStore} from "stores/Organizations";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 useOrganizationsStore().fetch();
 useAppStore().setPageTitle("Organizace");
 
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
 
 const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -9,7 +9,7 @@ import {successObject} from "src/composables/dialog";
 import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
 import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
@@ -32,7 +32,7 @@ usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
 usePointsOfInterestTypeStore().fetch();
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
 const $q = useQuasar();

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -3,7 +3,7 @@ import {useRoute, useRouter} from "vue-router";
 import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
@@ -17,7 +17,7 @@ import ContentCardEditButton from "components/ContentCardEditButton.vue";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const poiId = parseInt(useRoute().params.id);
 
 usePointsOfInterestStore().fetchDetail(poiId).then((p) => {

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -6,28 +6,38 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
-usePointsOfInterestStore().fetch();
 useAppStore().setPageTitle("Zajímavá místa");
 
-const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const loadNextPage = (appendItems) => loadPage({
+  fetchFunc: usePointsOfInterestStore().fetch,
+  appendItems
+});
+loadNextPage(false);
+
+const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
   <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
-      v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
-      :route-add="{name: 'addPoi'}"
-      label-add="Přidat"
+    v-else-if="!isQueryRunning && 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
-      :public="false"
-      :items="pointsOfInterest"
+    v-else
+    :public="false"
+    :items="pointsOfInterest"
+    :total-items-count="totalItemsCount"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    @load-more="loadNextPage(true)"
   />
 
   <FAB :router-link="{name: 'addPOI'}" mode="add"/>

src/pages/public/AboutPage.vue

@@ -1,5 +1,48 @@
-<script setup></script>
+<script setup>
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+import ContentCard from "components/ContentCard.vue";
+
+useAppStore().setPageTitle("O projektu");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "O projektu"}
+]);
+useMeta(() => metaData({
+  title: "O projektu",
+}));
+</script>
 
 <template>
-  about
+  <ContentCard title="Polétání.cz">
+    <template #content>
+      <q-card-section>
+
+        <p>
+          Polétání.cz je fotogalerie určená pilotům malých letadel. Nesnaží se být leteckým zápisníkem, nabízí ale
+          možnosti uložení fotografií pořízených během letu. Posláním aplikace je vytvořit vizuálně příjemnou prezentaci
+          tvých zážitků ze vzduchu a umožnit sdílet detaily o letu se svým kamarádem (kopilotem).
+        </p>
+
+        <h3>Externí data</h3>
+
+        Pro obohacení informací používá Polétání.cz data z následujících zdrojů:
+
+        <ul>
+          <li>Open Meteo API - pro stahování informací o počasí při vzletu a přistání</li>
+          <li>Elevation API - pro stažení informací o výšce terénu. Tato informace se používá u fotografií a trasy letu</li>
+          <li>VFR příručka - pro aktualizaci informací o letištích</li>
+        </ul>
+
+        <h3>O autorovi</h3>
+
+        <p>
+          Jmenuji se Michal a posledních pár let trávím čas nejradši pár stovek metrů nad zemí. Kromě létání mě baví i
+          fotografie. A zároveň se živím jako programátor. Původně Polétání.cz mělo být jen malý proof-of-concept projekt,
+          abych si vyzkoušel nové technologie. Po pár týdnech práce jsem ale zjistil, že se úplně o malý projekt nejedná :).
+        </p>
+      </q-card-section>
+    </template>
+  </ContentCard>
 </template>

src/pages/public/IndexPage.vue

@@ -1,15 +1,25 @@
 <script setup>
 import {useMeta} from "quasar";
-import {commonKeywords, metaData} from "src/composables/meta";
+import {metaData} from "src/composables/meta";
+import AppFooter from "components/AppFooter.vue";
+import LatestFlightsSlider from "components/flights/slider/LatestFlightsSlider.vue";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";
+import TimelineDescription from "components/indexPage/TimelineDescription.vue";
 
 useMeta(() => metaData({
-  title: "",
+  title: "Polétání.cz",
   description: "Polétání.cz je aplikace na ukládání a sdílení fotografií a tras z vyhlídkových letů.",
-  keywords: [...commonKeywords]
 }));
+
+onMounted(() => {
+  useFlightsStore().fetchPublic({limit: 5});
+});
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 <template>
-  <q-layout view="lHh Lpr lFf" data-style="background: url('hp/bg.jpg'); background-size: cover;">
+  <q-layout view="lHh Lpr fff">
 
     <q-header class="bg-semi-transparent text-black" elevated>
       <q-toolbar>
@@ -25,56 +35,35 @@ useMeta(() => metaData({
     <q-page-container class="q-py-none">
       <q-page>
         <div class="row q-mx-md">
-          <div class="xs-hide sm-hide col-md-6 text-center">
-            <q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
-          </div>
-
           <div class="col col-md-6">
             <div class="info-box bg-semi-transparent q-mx-lg  q-py-lg q-px-lg rounded-borders">
-              <div class="text-h3 text-center">Fotogalerie ze vzduchu</div>
+              <div class="text-h3 text-center q-my-lg">Fotogalerie ze vzduchu</div>
 
-              <q-timeline color="primary" class="q-my-lg">
-                <q-timeline-entry title="Zaznamenej si let">
-                  <div>
-                    Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
-                  </div>
-                </q-timeline-entry>
-
-
-                <q-timeline-entry title="Vyber a nahraj fotky">
-                  <div>
-                    Máš nějaké fotky z letu? Nahraj je ke svému letu! A pokud mají v sobě uloženou informaci o poloze, polétání.cz ti zobrazí i místo kde fotka vznikla.
-                  </div>
-                </q-timeline-entry>
-
-                <q-timeline-entry title="Ulož trasu">
-                  <div>
-                    Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
-                  </div>
-                </q-timeline-entry>
-
-                <q-timeline-entry title="Popiš zážitek">
-                  <div>
-                    Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
-                  </div>
-                </q-timeline-entry>
-
-                <q-timeline-entry title="Sdílej">
-                  <div>
-                    Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a sdílet odkaz kde chceš. Třeba s tvým kopilotem.
-                  </div>
-                </q-timeline-entry>
-              </q-timeline>
+              <p>Polétání.cz je aplikace pro piloty, kteří si chtějí spravovat fotografie ze svých výletů, zobrazovat je na mapě a ukládat si trasy svých výletů.</p>
 
               <div class="text-center q-my-lg">
                 <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit účet</q-btn>
               </div>
             </div>
           </div>
+          <div class="col-md-6 text-center">
+            <q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
+          </div>
         </div>
 
+        <h3 class="text-center">Poslední lety</h3>
+        <LatestFlightsSlider :items="flights"/>
+
+        <div class="row justify-center">
+          <div class="col-md-6 q-px-lg">
+            <TimelineDescription/>
+          </div>
+        </div>
+
+
       </q-page>
     </q-page-container>
+        <AppFooter />
   </q-layout>
 </template>
 

src/pages/public/PilotProfileWrapper.vue

@@ -1,9 +1,9 @@
 <script>
-import {useUserStore} from "stores/User";
+import {usePilotsStore} from "stores/Pilots";
 
 export default {
   preFetch({store, currentRoute}) {
-    return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
+    return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username);
   },
 }
 </script>
@@ -13,13 +13,13 @@ import {storeToRefs} from "pinia";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 import PublicProfileSkeleton from "components/profile/skeletons/PublicProfileSkeleton.vue";
 
-const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
+const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());
 </script>
 
 <template>
   <div class="row">
     <div class="col-12 col-md-8">
-      <router-view :pilot="pilot"/>
+      <router-view :pilot="pilot" />
     </div>
     <div class="col-12 col-md-4">
       <PublicProfileSkeleton v-if="pilotLoading && !pilot"/>

src/pages/public/PointsOfInterestPage.vue

@@ -1,31 +0,0 @@
-<script setup>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {storeToRefs} from "pinia";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import POIList from "components/poi/POIList.vue";
-import {useAppStore} from "stores/App";
-import {useMeta} from "quasar";
-import {metaData} from "src/composables/meta";
-
-usePointsOfInterestStore().fetchPublic();
-
-useAppStore().setPageTitle("Místa");
-useAppStore().setBreadcrumbs([
-  {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {label: "Místa"},
-]);
-useMeta(() => metaData({
-  title: "Místa"
-}))
-
-const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
-</script>
-
-<template>
-  <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
-  <POIList
-      v-else
-      :public="true"
-      :items="pointsOfInterest"
-  />
-</template>

src/pages/public/aircraft/AircraftDetailPage.vue

@@ -19,20 +19,19 @@ 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";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 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());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
@@ -52,9 +51,16 @@ useAppStore().setBreadcrumbs([
   {label: aircraft.value.callSign}
 ]);
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {aircraftId: aircraft.value.id},
+  appendItems
+});
+
 onMounted(() => {
+  loadNextFlightsPage(false);
   usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
-  useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
 });
 </script>
 
@@ -76,12 +82,17 @@ onMounted(() => {
           <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
             U tohoto letadla nejsou publikované žádné lety.
           </BasicInfoBanner>
-          <FlightsList v-else :items="flights" :public="true"/>
+          <FlightsList
+            v-else
+            :items="flights"
+            :total-items-count="totalItemsCount"
+            :is-query-running="areFlightsLoading"
+            :items-per-page="paginationLimit"
+            :public="true"
+            @load-more="loadNextFlightsPage(true)"
+          />
         </q-card-section>
       </template>
     </ContentCard>
-
   </template>
-
-
 </template>

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -10,9 +10,8 @@ export default {
 <script setup>
 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, onServerPrefetch} from "vue";
+import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {usePhotosStore} from "stores/Photos";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
@@ -20,8 +19,8 @@ import ContentCard from "components/ContentCard.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
-// import {useCopilotsStore} from "stores/Copilots";
-// import {useRoute} from "vue-router";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
@@ -30,14 +29,8 @@ const props = defineProps({
   },
 })
 
-// const currentRoute = useRoute();
-//
-// onServerPrefetch(() => {
-//
-// })
-
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 
 useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
@@ -54,32 +47,39 @@ useMeta(() => metaData({
   image: copilot.value.titleImage?.url
 }));
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {copilotId: copilot.value.id},
+  appendItems
+});
+
 onMounted(() => {
-  useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+  loadNextFlightsPage(false);
+
   usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 })
 </script>
 
 <template>
-
   <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
     <template #content>
       <q-card-section>
-
-        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallerySkeleton 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"
+          v-else
+          :items="flights"
+          :total-items-count="totalItemsCount"
+          :is-query-running="areFlightsLoading"
+          :items-per-page="paginationLimit"
+          :public="true"
+          @load-more="loadNextFlightsPage(true)"
         />
       </q-card-section>
     </template>
   </ContentCard>
-
-
 </template>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -3,33 +3,53 @@ import {useEventsStore} from "stores/Events";
 
 export default {
   preFetch({currentRoute}) {
-    return useEventsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+    return useEventsStore().fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
 
 <script setup>
-import {watch} from "vue";
-import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
 import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
-const routeParams = useRoute().params;
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: false
+  },
+})
 
 const {isQueryRunning, event} = storeToRefs(useEventsStore());
 
-watch(() => event.value, (newVal) => {
-  useAppStore().setPageTitle(newVal.name);
-  useAppStore().setBreadcrumbs([
-    {to: {name: 'homepage'}, label: "Polétání.cz"},
-    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
-    {to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
-    {label: newVal.name}
-  ]);
+useAppStore().setPageTitle(event.value.name);
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {to: {name: "publicEventsList", params: {username: props.pilot.publicUsername}}, label: "Události"},
+  {label: event.value.name}
+]);
+useMeta(() => metaData({
+  title: event.value.name,
+  description: event.value.description
+}))
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {username: props.pilot.publicUsername},
+  appendItems
 });
+loadNextFlightsPage(false);
+
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
 </script>
 
 <template>
@@ -37,11 +57,6 @@ watch(() => event.value, (newVal) => {
     <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
     <template v-else>
-      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
-        Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
-      </q-banner>
-
-
       <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
         <q-item>
           <q-item-section>
@@ -63,11 +78,16 @@ watch(() => event.value, (newVal) => {
         Zatím tu nemáš uložené žádné lety.
       </q-banner>
 
+      <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+
       <FlightsList
         v-else
-        :items="event.flights"
+        :items="flights"
+        :total-items-count="totalItemsCount"
+        :is-query-running="areFlightsLoading"
+        :items-per-page="paginationLimit"
         :public="true"
-        class="q-my-lg"
+        @load-more="loadNextFlightsPage(true)"
       />
 
     </template>

src/pages/public/pilotProfile/EventsListPage.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 
 useMeta(() => metaData({
   title: `${props.pilot.publicUsername} - Události`,
-  keywords: [...commonKeywords, "pilot"],
+  keywords: [...commonKeywords, "události", "letecký den",],
   description: "Detail pilota na poletani.cz",
 }));
 
@@ -28,24 +28,24 @@ useAppStore().setBreadcrumbs([
   {label: "Události"}
 ]);
 
-useEventsStore().fetch(props.pilot.publicUsername);
+useEventsStore().fetchPublic(props.pilot.publicUsername);
 const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="pilot.publicUsername"/>
 
-  <FlightsListSkeleton v-if="isQueryRunning"/>
+  <div class="q-mb-md">
+    <FlightsListSkeleton v-if="isQueryRunning"/>
 
-  <q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
-    Tento pilot zatím nepublikoval žádnou udalost.
-  </q-banner>
+    <q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
+      Tento pilot zatím nepublikoval žádnou udalost.
+    </q-banner>
 
-  <template v-else>
     <EventsList
       :items="events"
       :route-detail="{name: 'publicEventDetail', params: {username: pilot.publicUsername}}"
-      class="q-mb-md"
+      v-else
     />
-  </template>
+  </div>
 </template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -15,16 +15,19 @@ import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkele
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {storeToRefs} from "pinia";
 import {flightName} from "src/composables/flight";
-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";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
-const routeParams = useRoute().params;
-const pilot = storeToRefs(useUserStore()).publicUser;
+
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: true
+  }
+});
 
 usePhotosStore().fetchPublic({flightId: flight.value.id});
 const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
@@ -33,13 +36,13 @@ const flightNameFormatted = flightName(flight.value);
 useAppStore().setPageTitle(flightNameFormatted);
 useAppStore().setBreadcrumbs([
   {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
   {label: flightNameFormatted}
 ]);
 
 useMeta(() => metaData({
-    title: `${flightNameFormatted} - ${pilot.value.name}`,
-    keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
+    title: `${flightNameFormatted} - ${props.pilot.name}`,
+    keywords: ["let", "výlet", "letadlo", props.pilot.name, flight.value.aircraft.callSign],
     description: flight.description,
     image: flight.titlePhoto?.url
   }
@@ -57,7 +60,7 @@ useMeta(() => metaData({
             :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}}"
+            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: pilot.publicUsername}}"
           />
 
           <article class="q-my-lg" v-html="flight.description"/>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -7,12 +7,12 @@ import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
 import {commonKeywords, metaData} from "src/composables/meta";
 import {useMeta} from "quasar";
-import {useUserStore} from "stores/User";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
     type: Object,
-    required: true,
+    required: true
   }
 });
 
@@ -29,24 +29,32 @@ useAppStore().setBreadcrumbs([
   {label: `@${props.pilot.publicUsername}`},
 ])
 
-useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
-const loggedUser = storeToRefs(useUserStore()).user;
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {username: props.pilot.publicUsername},
+  appendItems
+});
+loadNextFlightsPage(false);
+
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
-  <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
+  <FlightsListSkeleton :items="paginationLimit" 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.
   </q-banner>
 
   <FlightsList
-      v-else
-      :items="flights"
-      :public="true"
-      class="q-mb-md"
+    v-else
+    :items="flights"
+    :total-items-count="totalItemsCount"
+    :is-query-running="areFlightsLoading"
+    :items-per-page="paginationLimit"
+    :public="true"
+    @load-more="loadNextFlightsPage(true)"
   />
 </template>

src/pages/public/poi/PointOfInterestDetailPage.vue

@@ -23,10 +23,11 @@ import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleto
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {onMounted} from "vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
 useAppStore().setPageTitle(pointOfInterest.value.name);
 useMeta(() => metaData({
@@ -40,9 +41,16 @@ useAppStore().setBreadcrumbs([
   {label: pointOfInterest.value.name}
 ]);
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {pointOfInterestId: pointOfInterest.value.id},
+  appendItems
+});
+
 onMounted(() => {
   usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-  useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+  loadNextFlightsPage(false);
 });
 
 </script>
@@ -55,14 +63,14 @@ onMounted(() => {
         <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"
+          v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+          :gps-latitude="pointOfInterest.gpsLatitude"
+          :gps-longitude="pointOfInterest.gpsLongitude"
+          :zoom="13"
         />
 
-        <PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest" />
-        <PhotoGallery :photos="photos" class="q-my-lg" v-else />
+        <PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest"/>
+        <PhotoGallery :photos="photos" class="q-my-lg" v-else/>
 
         <h3>Lety na místo {{ pointOfInterest.name }}</h3>
 
@@ -70,7 +78,15 @@ onMounted(() => {
         <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
           Zdá se, že na toto místo ještě nikdo neletěl. Zatím tu nejsou ještě žádné lety.
         </BasicInfoBanner>
-        <FlightsList v-else :items="flights" :public="true"/>
+        <FlightsList
+          v-else
+          :items="flights"
+          :total-items-count="totalItemsCount"
+          :is-query-running="areFlightsLoading"
+          :items-per-page="paginationLimit"
+          :public="true"
+          @load-more="loadNextFlightsPage(true)"
+        />
       </q-card-section>
     </template>
   </ContentCard>

src/pages/public/poi/PointsOfInterestPage.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import POIList from "components/poi/POIList.vue";
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+
+
+useAppStore().setPageTitle("Místa");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "Místa"},
+]);
+useMeta(() => metaData({
+  title: "Místa"
+}))
+
+const loadNextPage = (appendItems) => loadPage({
+  fetchFunc: usePointsOfInterestStore().fetchPublic,
+  appendItems
+});
+loadNextPage(false);
+
+const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
+</script>
+
+<template>
+  <BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !pointsOfInterest.length"/>
+  <POIList
+    v-else
+    :public="true"
+    :items="pointsOfInterest"
+    :total-items-count="totalItemsCount"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    @load-more="loadNextPage(true)"
+  />
+</template>

src/pages/public/user/LoginPage.vue

@@ -1,18 +1,16 @@
 <script setup>
-import {ref} from "vue";
-import {useUserStore} from "stores/User";
+import {reactive} from "vue";
 import {useRouter} from "vue-router";
 import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
 import {useQuasar} from "quasar";
 import {errorObject} from "src/composables/dialog";
+import {useAuthStore} from "stores/Auth";
 
-const email = ref("");
-const password = ref("");
 const $router = useRouter();
 const $q = useQuasar();
 
 const logUser = () => {
-  useUserStore().login({email: email.value, password: password.value}).then(() => {
+  useAuthStore().login(formData).then(() => {
     $router.push({name: "myFlights"});
   }).catch((err) => {
     $q.notify(errorObject("Přihlášení se nezdařilo."))
@@ -23,6 +21,10 @@ const rules = {
   email: [isRequired, isValidEmail],
   password: [isRequired, minLength(4)]
 }
+const formData = reactive({
+  email: "",
+  password: ""
+})
 </script>
 
 <template>
@@ -36,12 +38,12 @@ const rules = {
           </q-card-section>
           <q-card-section>
             <q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
-              <q-input square clearable v-model="email" :rules="rules.email" type="email" label="E-mail">
+              <q-input square clearable v-model="formData.email" :rules="rules.email" type="email" label="E-mail">
                 <template v-slot:prepend>
                   <q-icon name="email"/>
                 </template>
               </q-input>
-              <q-input square clearable v-model="password" :rules="rules.password" type="password" label="Password">
+              <q-input square clearable v-model="formData.password" :rules="rules.password" type="password" label="Password">
                 <template v-slot:prepend>
                   <q-icon name="lock"/>
                 </template>

src/pages/public/user/RegisterPage.vue

@@ -1,23 +1,27 @@
 <script setup>
 import {reactive, ref} from "vue";
-import {useUserStore} from "stores/User";
 import {useRouter} from "vue-router";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import {errorObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
+import {api} from "boot/axios";
+import {useAuthStore} from "stores/Auth";
+import {metaData} from "src/composables/meta";
 
 const router = useRouter();
 const $q = useQuasar();
-const form = ref(null);
 
 useAppStore().setPageTitle("Registrace");
+useMeta(() => metaData({
+  title: "Registrace",
+}));
 
 const registerUser = () => {
   if (!form.value.validate()) return;
 
-  useUserStore().register(formData).then(() => {
-    useUserStore().login({email: formData.email, password: formData.password}).then(() => {
+  return api.post('/registration', formData).then(response => {
+    useAuthStore().login({email: formData.email, password: formData.password}).then(() => {
       $q.notify(successObject("Registrace úspěšná, vítej!"));
       router.push({name: "myFlights"});
     })
@@ -31,6 +35,7 @@ const registerUser = () => {
   })
 }
 
+const form = ref(null);
 const formData = reactive({
   name: "",
   email: "",

src/router/index.js

@@ -1,15 +1,9 @@
 import {route} from 'quasar/wrappers'
-import {createRouter, createMemoryHistory, createWebHistory, createWebHashHistory} from 'vue-router'
+import {createRouter, createMemoryHistory, createWebHistory} from 'vue-router'
 import routes from './routes'
 import {useAppStore} from "stores/App";
 
 export default route(function ({ store }) {
-  // const createHistory = process.env.SERVER
-  //   ? createMemoryHistory
-  //   : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
-
-  console.log(process.env.SERVER);
-
   const createHistory = process.env.SERVER ? createMemoryHistory : createWebHistory;
 
   const Router = createRouter({

src/router/routes.js

@@ -1,9 +1,9 @@
 import PlainLayout from "layouts/PlainLayout.vue";
 
 const routes = [
-  {path: '/login', name: "login", component: () => import('pages/public/LoginPage.vue'), meta: {layout: PlainLayout}},
-  {path: '/registrace', name: "registration", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
-  {path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/RegisterPage.vue'), meta: {layout: PlainLayout}},
+  {path: '/login', name: "login", component: () => import('pages/public/user/LoginPage.vue'), meta: {layout: PlainLayout}},
+  {path: '/registrace', name: "registration", component: () => import('pages/public/user/RegisterPage.vue'), meta: {layout: PlainLayout}},
+  {path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/user/RegisterPage.vue'), meta: {layout: PlainLayout}},
 
   {path: '', name: "homepage", component: () => import('pages/public/IndexPage.vue'), meta: {layout: PlainLayout}},
 
@@ -11,10 +11,11 @@ const routes = [
     path: '/',
     component: () => import('layouts/PublicLayout.vue'),
     children: [
-      {path: 'about', name: "about", component: () => import('pages/public/AboutPage.vue')},
+      {path: 'o-projektu', name: "about", component: () => import('pages/public/AboutPage.vue')},
+      {path: 'kontakt', name: "contact", component: () => import('pages/public/ContactPage.vue')},
       {
         path: ':username',
-        component: () => import('pages/public/PilotProfilePage.vue'),
+        component: () => import('pages/public/PilotProfileWrapper.vue'),
         children: [
           {path: '', name: "publicProfileDetail", component: () => import('pages/public/pilotProfile/FlightsListPage.vue')},
           {path: ':id', name: "publicFlightDetail", component: () => import('pages/public/pilotProfile/FlightDetailPage.vue')},
@@ -23,9 +24,9 @@ const routes = [
           {path: 'udalosti/:id', name: "publicEventDetail", component: () => import('pages/public/pilotProfile/EventDetailPage.vue')},
         ]
       },
-      {path: 'letadlo/:id', name: "publicAircraftDetail", component: () => import('pages/public/AircraftDetailPage.vue')},
-      {path: 'mista', name: "publicPOIs", component: () => import('pages/public/PointsOfInterestPage.vue')},
-      {path: 'mista/:id', name: "publicPOIDetail", component: () => import('pages/public/PointOfInterestDetailPage.vue')},
+      {path: 'letadlo/:id', name: "publicAircraftDetail", component: () => import('pages/public/aircraft/AircraftDetailPage.vue')},
+      {path: 'mista', name: "publicPOIs", component: () => import('pages/public/poi/PointsOfInterestPage.vue')},
+      {path: 'mista/:id', name: "publicPOIDetail", component: () => import('pages/public/poi/PointOfInterestDetailPage.vue')},
 
     ]
   },
@@ -65,8 +66,11 @@ const routes = [
       {path: 'organizace/nova', name: "addOrganization", component: () => import('pages/profile/organization/NewOrganizationPage.vue')},
       {path: 'organizace/:id', name: "organizationDetail", component: () => import('pages/profile/organization/OrganizationDetailPage.vue')},
       {path: 'organizace/:id/edit', name: "organizationEdit", component: () => import('pages/profile/organization/EditOrganizationPage.vue')},
+
     ]
   },
+        {path: '/refresh', name: "profileRefresh", component: () => import('pages/profile/ProfileRefreshPage.vue')},
+
 
 
   // Always leave this as last one,

src/stores/Aircrafts.js

@@ -1,67 +1,67 @@
 import {defineStore} from "pinia";
 import {ref} from "vue";
 import {AIRCRAFT_DETAIL, AIRCRAFT_PUBLIC_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
-import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
+import {deleteFromItems, mutate, query, setItems, updateInItems} from "stores/helpers";
 import {CREATE_AIRCRAFT, EDIT_AIRCRAFT, DELETE_AIRCRAFT} from "src/graphql/mutations/aircrafts";
 
 export const useAircraftsStore = defineStore('Aircrafts', () => {
-    const aircraft = ref(null);
-    const aircrafts = ref([]);
-    const isMutationRunning = ref(false);
-    const isQueryRunning = ref(false);
+  const aircraft = ref(null);
+  const aircrafts = ref([]);
+  const totalItemsCount = ref(0);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-    const fetchDetail = (id) => query({
-        isQueryRunning,
-        query: AIRCRAFT_DETAIL,
-        variables: {id},
-    }).then(item => {
-        aircraft.value = item;
-        return item
-    });
+  const fetchDetail = (id) => query({
+    isQueryRunning,
+    query: AIRCRAFT_DETAIL,
+    variables: {id},
+  }).then(item => {
+    aircraft.value = item;
+    return item
+  });
 
-    const fetchPublicDetail = (id) => query({
-        isQueryRunning,
-        query: AIRCRAFT_PUBLIC_DETAIL,
-        variables: {id},
-    }).then(item => {
-        aircraft.value = item;
-        return item;
-    });
+  const fetchPublicDetail = (id) => query({
+    isQueryRunning,
+    query: AIRCRAFT_PUBLIC_DETAIL,
+    variables: {id},
+  }).then(item => {
+    aircraft.value = item;
+    return item;
+  });
 
-    const fetch = () => query({
-        isQueryRunning,
-        query: AIRCRAFTS_LIST
-    }).then(items => {
-        aircrafts.value = items;
-        return items;
-    });
+  const fetch = ({appendItems, limit = 100, offset = 0}) => query({
+    isQueryRunning,
+    query: AIRCRAFTS_LIST,
+    variables: {limit, offset}
+  }).then(data => setItems(data, appendItems, aircrafts, totalItemsCount));
 
-    const create = (input) => mutate({
-        isMutationRunning,
-        mutation: CREATE_AIRCRAFT,
-        variables: {input}
-    }).then(item => {
-        aircrafts.value.push(item);
-        return item;
-    })
+  const create = (input) => mutate({
+    isMutationRunning,
+    mutation: CREATE_AIRCRAFT,
+    variables: {input}
+  }).then(item => {
+    aircrafts.value.push(item);
+    return item;
+  })
 
-    const update = (id, input) => mutate({
-        isMutationRunning,
-        mutation: EDIT_AIRCRAFT,
-        variables: {id, input}
-    }).then(item => {
-        updateInItems(aircrafts.value, 'id', item);
-        aircraft.value = item;
-        return item;
-    })
+  const update = (id, input) => mutate({
+    isMutationRunning,
+    mutation: EDIT_AIRCRAFT,
+    variables: {id, input}
+  }).then(item => {
+    updateInItems(aircrafts.value, 'id', item);
+    aircraft.value = item;
+    return item;
+  })
 
-    const destroy = (id) => mutate({
-        isMutationRunning,
-        mutation: DELETE_AIRCRAFT,
-        variables: {id}
-    }).then(item => deleteFromItems(aircrafts.value, 'id', item))
+  const destroy = (id) => mutate({
+    isMutationRunning,
+    mutation: DELETE_AIRCRAFT,
+    variables: {id}
+  }).then(item => deleteFromItems(aircrafts.value, 'id', item))
 
-    return {
-        aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create, update, destroy, fetchPublicDetail
-    }
+  return {
+    aircrafts, aircraft, isQueryRunning, isMutationRunning, fetchDetail, fetch, create, update, destroy, fetchPublicDetail,
+    totalItemsCount
+  }
 });

src/stores/App.js

@@ -1,5 +1,6 @@
 import {defineStore} from 'pinia'
 import {ref} from "vue";
+import {paginationOffset} from "src/composables/pagination";
 
 export const useAppStore = defineStore('App', () => {
   const pageTitle = ref(null);
@@ -10,6 +11,8 @@ export const useAppStore = defineStore('App', () => {
     pageTitle.value = null;
     appStatus.value = 200;
     breadcrumbs.value = null;
+
+    paginationOffset.value = 0;
   };
 
   const setPageTitle = (value) => {

src/stores/Auth.js

@@ -0,0 +1,51 @@
+import {defineStore} from 'pinia'
+import {api} from "boot/axios";
+import {ref} from "vue";
+import {cookies} from "boot/cookies";
+import {useLoggedUserStore} from "stores/LoggedUser";
+
+export const useAuthStore = defineStore('Auth', () => {
+  const isRefreshing = ref(false);
+
+  const login = async (formData) => {
+    return api.post("/login", formData).then(({data}) => {
+      setTokens(data);
+      useLoggedUserStore().user.value = data.user;
+    })
+  };
+
+  const logout = () => {
+    return api.post("/logout").then(response => {
+      unsetTokens();
+      useLoggedUserStore().user.value = data.user;
+    });
+  };
+
+  const unsetTokens = () => {
+    cookies.remove("accessToken")
+  };
+
+  const setTokens = ({access_token, access_token_validity}) => {
+    cookies.set("accessToken", access_token, {expires: `${access_token_validity}s`})
+  };
+
+  const getAccessToken = () => {
+    return cookies.get("accessToken");
+  };
+
+  const hasAccessToken = () => !!getAccessToken();
+
+  const refreshAccessToken = async () => api.post("/refresh")
+    .then(({data}) => {
+      setTokens(data);
+      return data.access_token;
+    }).catch((e) => {
+      console.log("cannot refresh token", e);
+      return Promise.reject(e);
+    })
+
+  return {
+    login, logout, getAccessToken, hasAccessToken, refreshAccessToken,
+    isRefreshing
+  }
+});

src/stores/Events.js

@@ -1,29 +1,46 @@
 import {defineStore} from 'pinia'
 import {CREATE_EVENT, EDIT_EVENT} from "src/graphql/mutations/event";
-import {mutate, query, updateInItems} from "stores/helpers";
+import {mutate, query, setItems, updateInItems} from "stores/helpers";
 import {ref} from "vue";
-import {EVENT_DETAIL, EVENTS_LIST} from "src/graphql/queries/event";
+import {EVENT_DETAIL, EVENT_PUBLIC_DETAIL, EVENTS_LIST, EVENTS_PUBLIC_LIST} from "src/graphql/queries/event";
 
 export const useEventsStore = defineStore('Events', () => {
   const event = ref(null);
   const events = ref([]);
+  const totalItemsCount = ref(0);
   const isMutationRunning = ref(false);
   const isQueryRunning = ref(false);
 
-  const fetchDetail = (id, username) => {
+  const fetchDetail = (id) => {
     return query({
       isQueryRunning,
       query: EVENT_DETAIL,
+      variables: {id},
+    }).then(item => event.value = item);
+  };
+
+    const fetchPublicDetail = (id, username) => {
+    return query({
+      isQueryRunning,
+      query: EVENT_PUBLIC_DETAIL,
       variables: {id, username},
     }).then(item => event.value = item);
   };
 
-  const fetch = (username = undefined) => {
+  const fetch = ({limit = 100, offset, appendItems}) => {
     return query({
       isQueryRunning,
       query: EVENTS_LIST,
-      variables: {username}
-    }).then(items => events.value = items);
+      variables: {limit, offset}
+    }).then(data => setItems(data, appendItems, events, totalItemsCount));
+  }
+
+    const fetchPublic = (username, limit = 100, offset, appendItems) => {
+    return query({
+      isQueryRunning,
+      query: EVENTS_PUBLIC_LIST,
+      variables: {username, limit, offset}
+    }).then(data => setItems(data, appendItems, events, totalItemsCount));
   }
 
   const create = (input) => {
@@ -43,6 +60,7 @@ export const useEventsStore = defineStore('Events', () => {
   }
 
   return {
-    event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update
+    event, events, isMutationRunning, isQueryRunning, fetch, fetchDetail, create, update,
+    fetchPublic, fetchPublicDetail, totalItemsCount
   }
 })

src/stores/Flights.js

@@ -1,81 +1,90 @@
 import {defineStore} from 'pinia'
 import {FLIGHT_DETAIL, FLIGHT_PUBLIC_DETAIL, FLIGHTS_LIST, FLIGHTS_PUBLIC_LIST} from "src/graphql/queries/flights";
 import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
-import {deleteFromItems, mutate, query, updateInItems} from "stores/helpers";
+import {deleteFromItems, mutate, query, updateInItems, setItems} from "stores/helpers";
 import {ref} from "vue";
 
 export const useFlightsStore = defineStore('Flights', () => {
-    const flight = ref(null);
-    const flights = ref([]);
-    const isMutationRunning = ref(false);
-    const isQueryRunning = ref(false);
+  const flight = ref(null);
+  const flights = ref([]);
+  const totalItemsCount = ref(0);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-    const fetchDetail = (id, username) => query({
-        isQueryRunning,
-        query: FLIGHT_DETAIL,
-        variables: {username, id},
-    }).then(item => {
-        flight.value = item;
-        return item;
-    });
+  const fetchDetail = (id) => query({
+    isQueryRunning,
+    query: FLIGHT_DETAIL,
+    variables: {id},
+  }).then(item => {
+    flight.value = item;
+    return item;
+  });
 
-    const fetchPublicDetail = (id, username) => query({
-        isQueryRunning,
-        query: FLIGHT_PUBLIC_DETAIL,
-        variables: {username, id}
-    }).then(item => {
-        flight.value = item;
-        return item;
-    });
+  const fetchPublicDetail = (id, username) => query({
+    isQueryRunning,
+    query: FLIGHT_PUBLIC_DETAIL,
+    variables: {username, id}
+  }).then(item => {
+    flight.value = item;
+    return item;
+  });
 
-    const fetch = ({aircraftId, copilotId, pointOfInterestId}) => query({
-        isQueryRunning,
-        query: FLIGHTS_LIST,
-        variables: {aircraftId, copilotId, pointOfInterestId}
-    }).then(items => {
-        flights.value = items;
-        return items;
-    });
-
-    const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId}) => query({
-        isQueryRunning,
-        query: FLIGHTS_PUBLIC_LIST,
-        variables: {username, aircraftId, copilotId, pointOfInterestId}
-    }).then(items => {
-        flights.value = items;
-        return items;
-    });
-
-    const create = (input) => mutate({
-        isMutationRunning,
-        mutation: CREATE_FLIGHT,
-        variables: {input},
-    }).then(item => {
-        flights.value.push(item);
-        return item;
-    })
-
-    const update = (id, input) => mutate({
-        isMutationRunning,
-        mutation: EDIT_FLIGHT,
-        variables: {id, input}
-    }).then(item => {
-        updateInItems(flights.value, 'id', item);
-        flight.value = item;
-        return item;
-    })
-
-    const destroy = (id) => mutate({
-        isMutationRunning,
-        mutation: DELETE_FLIGHT,
-        variables: {id}
-    }).then(item => {
-        deleteFromItems(flights.value, 'id', item);
-        return item;
-    })
-
-    return {
-        flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
-        fetchPublic
+  const fetch = (
+    {
+      aircraftId,
+      copilotId,
+      pointOfInterestId,
+      offset,
+      limit,
+      appendItems
+    }) => query({
+    isQueryRunning,
+    query: FLIGHTS_LIST,
+    variables: {
+      aircraftId,
+      copilotId,
+      pointOfInterestId,
+      offset,
+      limit
     }
+  }).then(data => setItems(data, appendItems, flights, totalItemsCount));
+
+  const fetchPublic = ({username, aircraftId, copilotId, pointOfInterestId, offset, limit, appendItems}) => query({
+    isQueryRunning,
+    query: FLIGHTS_PUBLIC_LIST,
+    variables: {username, aircraftId, copilotId, pointOfInterestId, offset, limit}
+  }).then(items => setItems(items, appendItems, flights, totalItemsCount));
+
+  const create = (input) => mutate({
+    isMutationRunning,
+    mutation: CREATE_FLIGHT,
+    variables: {input},
+  }).then(item => {
+    flights.value.push(item);
+    return item;
+  })
+
+  const update = (id, input) => mutate({
+    isMutationRunning,
+    mutation: EDIT_FLIGHT,
+    variables: {id, input}
+  }).then(item => {
+    updateInItems(flights.value, 'id', item);
+    flight.value = item;
+    return item;
+  })
+
+  const destroy = (id) => mutate({
+    isMutationRunning,
+    mutation: DELETE_FLIGHT,
+    variables: {id}
+  }).then(item => {
+    deleteFromItems(flights.value, 'id', item);
+    return item;
+  })
+
+  return {
+    flight, flights, isMutationRunning, isQueryRunning, fetchDetail, fetchPublicDetail, fetch, create, update, destroy,
+    fetchPublic, totalItemsCount
+  }
 });

src/stores/LoggedUser.js

@@ -0,0 +1,34 @@
+import {defineStore} from 'pinia'
+import {api} from "boot/axios";
+import {EDIT_USER} from "src/graphql/mutations/user";
+import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
+import {cookies} from "boot/cookies";
+
+export const useLoggedUserStore = defineStore('LoggedUser', () => {
+    const user = ref(null);
+    const isQueryRunning = ref(false);
+    const isMutationRunning = ref(false);
+
+    const fetchLoggedUserDetail = ({refresh}) => query({
+        isQueryRunning,
+        query: LOGGED_USER_DETAIL,
+        refreshUnauthorized: refresh || false,
+    }).then(item => {
+        user.value = item;
+        return item;
+    });
+
+
+    const update = (input) => mutate({
+        isMutationRunning,
+        mutation: EDIT_USER,
+        variables: {input}
+    }).then(item => {
+        user.value = item;
+        return item;
+    });
+
+    return {isQueryRunning, isMutationRunning, user, fetchLoggedUserDetail, update}
+});

src/stores/Organizations.js

@@ -1,10 +1,9 @@
 import {defineStore} from 'pinia'
-import {apolloWrapper} from "boot/apollo";
 import {ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION, EDIT_ORGANIZATION, REMOVE_USER_FROM_ORGANIZATION} from "src/graphql/mutations/organization";
 import {ORGANIZATION_DETAIL, ORGANIZATIONS_LIST} from "src/graphql/queries/organization";
 import {mutate, query, updateInItems} from "stores/helpers";
 import {ref} from "vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 export const useOrganizationsStore = defineStore('Organizations', () => {
 
@@ -44,7 +43,7 @@ export const useOrganizationsStore = defineStore('Organizations', () => {
         mutation: ADD_USER_TO_ORGANIZATION,
         variables: {organizationId}
     }).then(item => {
-        useUserStore().user.organizations.push(item);
+        useLoggedUserStore().user.organizations.push(item);
         organization.value.users = item.users;
         return item;
     });
@@ -54,8 +53,8 @@ export const useOrganizationsStore = defineStore('Organizations', () => {
         mutation: REMOVE_USER_FROM_ORGANIZATION,
         variables: {organizationId},
     }).then(item => {
-        const idx = useUserStore().user.organizations.findIndex(o => o.id === organizationId);
-        useUserStore().user.organizations.splice(idx, 1);
+        const idx = useLoggedUserStore().user.organizations.findIndex(o => o.id === organizationId);
+        useLoggedUserStore().user.organizations.splice(idx, 1);
         organization.value.users = item.users;
         return item;
     });

src/stores/Pilots.js

@@ -0,0 +1,25 @@
+import {defineStore} from 'pinia'
+import {api} from "boot/axios";
+import {EDIT_USER} from "src/graphql/mutations/user";
+import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
+import {ref} from "vue";
+import {mutate, query} from "stores/helpers";
+import {cookies} from "boot/cookies";
+
+export const usePilotsStore = defineStore('Pilots', () => {
+    const pilot = ref(null);
+    const isQueryRunning = ref(false);
+
+    const fetchPublicPilotDetail = (username) => query({
+        isQueryRunning,
+        query: USER_DETAIL,
+        variables: {username}
+    }).then(item => {
+        pilot.value = item;
+        return item;
+    });
+
+    return {
+      isQueryRunning, pilot, fetchPublicPilotDetail
+    }
+});

src/stores/PointsOfInterest.js

@@ -1,71 +1,68 @@
 import {defineStore} from 'pinia'
 import {POI_DETAIL, POI_LIST, POI_PUBLIC_DETAIL, POI_PUBLIC_LIST} from "src/graphql/queries/poi";
 import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
-import {mutate, query, updateInItems} from "stores/helpers";
+import {mutate, query, setItems, updateInItems} from "stores/helpers";
 import {ref} from "vue";
 
 
 export const usePointsOfInterestStore = defineStore('PointsOfInterest', () => {
-    const pointOfInterest = ref(null);
-    const pointsOfInterest = ref([]);
-    const isMutationRunning = ref(false);
-    const isQueryRunning = ref(false);
+  const pointOfInterest = ref(null);
+  const pointsOfInterest = ref([]);
+  const totalItemsCount = ref(0);
+  const isMutationRunning = ref(false);
+  const isQueryRunning = ref(false);
 
-    const fetchDetail = (id) => query({
-        isQueryRunning,
-        query: POI_DETAIL,
-        variables: {id},
-    }).then(item => {
-        pointOfInterest.value = item;
-        return item;
-    });
+  const fetchDetail = (id) => query({
+    isQueryRunning,
+    query: POI_DETAIL,
+    variables: {id},
+  }).then(item => {
+    pointOfInterest.value = item;
+    return item;
+  });
 
-    const fetchPublicDetail = (id) => query({
-        isQueryRunning,
-        query: POI_PUBLIC_DETAIL,
-        variables: {id},
-    }).then(item => {
-        pointOfInterest.value = item;
-        return item;
-    });
+  const fetchPublicDetail = (id) => query({
+    isQueryRunning,
+    query: POI_PUBLIC_DETAIL,
+    variables: {id},
+  }).then(item => {
+    pointOfInterest.value = item;
+    return item;
+  });
 
-    const fetch = () => query({
-        isQueryRunning,
-        query: POI_LIST,
-    }).then(items => {
-        pointsOfInterest.value = items;
-        return items;
-    });
+  const fetch = ({limit = 100, offset = 0, appendItems}) => query({
+    isQueryRunning,
+    query: POI_LIST,
+    variables: {limit, offset}
+  }).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
 
-    const fetchPublic = () => query({
-        isQueryRunning,
-        query: POI_PUBLIC_LIST,
-    }).then(items => {
-        pointsOfInterest.value = items;
-        return items;
-    });
+  const fetchPublic = ({limit, offset, appendItems}) => query({
+    isQueryRunning,
+    query: POI_PUBLIC_LIST,
+    variables: {limit, offset}
+  }).then(data => setItems(data, appendItems, pointsOfInterest, totalItemsCount));
 
-    const create = (input) => mutate({
-        isMutationRunning,
-        mutation: CREATE_POI,
-        variables: {input},
-    }).then(item => {
-        pointsOfInterest.value.push(item);
-        return item;
-    })
+  const create = (input) => mutate({
+    isMutationRunning,
+    mutation: CREATE_POI,
+    variables: {input},
+  }).then(item => {
+    pointsOfInterest.value.push(item);
+    return item;
+  })
 
-    const update = (id, input) => mutate({
-        isMutationRunning,
-        mutation: EDIT_POI,
-        variables: {id, input}
-    }).then(item => {
-        updateInItems(pointsOfInterest.value, 'id', item);
-        pointOfInterest.value = item;
-        return item;
-    })
+  const update = (id, input) => mutate({
+    isMutationRunning,
+    mutation: EDIT_POI,
+    variables: {id, input}
+  }).then(item => {
+    updateInItems(pointsOfInterest.value, 'id', item);
+    pointOfInterest.value = item;
+    return item;
+  })
 
-    return {
-        pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
-        fetchPublicDetail, create, update
-    }
+  return {
+    pointOfInterest, pointsOfInterest, isMutationRunning, isQueryRunning, fetch, fetchPublic, fetchDetail,
+    fetchPublicDetail, create, update, totalItemsCount
+  }
 })

src/stores/User.js

@@ -1,92 +0,0 @@
-import {defineStore} from 'pinia'
-import {api} from "boot/axios";
-import {EDIT_USER} from "src/graphql/mutations/user";
-import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
-import {ref} from "vue";
-import {mutate, query} from "stores/helpers";
-import {cookies} from "boot/cookies";
-
-export const useUserStore = defineStore('LoggedUser', () => {
-    const user = ref(null);
-    const publicUser = ref(null);
-    const isQueryRunning = ref(false);
-    const isMutationRunning = ref(false);
-    const isRefreshing = ref(false);
-
-    const fetchLoggedUserDetail = ({refresh}) => query({
-        isQueryRunning,
-        query: LOGGED_USER_DETAIL,
-        refreshUnauthorized: refresh || false,
-    }).then(item => {
-        user.value = item;
-        return item;
-    });
-
-    const fetchPublicUserDetail = (username) => query({
-        isQueryRunning,
-        query: USER_DETAIL,
-        variables: {username}
-    }).then(item => {
-        publicUser.value = item;
-        return item;
-    });
-
-    const update = (input) => mutate({
-        isMutationRunning,
-        mutation: EDIT_USER,
-        variables: {input}
-    }).then(item => {
-        user.value = item;
-        return item;
-    });
-
-    const register = async (formData) => {
-        return api.post('/registration', formData).then(response => {
-            const registeredUser = response.data;
-            const isSuccess = response.status === 201
-        })
-    };
-
-    const login = async (formData) => {
-        return api.post("/login", formData).then(({data}) => {
-            setTokens(data);
-            user.value = data.user;
-        })
-    };
-
-    const logout = () => {
-        return api.post("/logout").then(response => {
-            unsetTokens();
-            user.value = null;
-        });
-    };
-
-    const unsetTokens = () => {
-        cookies.remove("accessToken")
-    };
-
-    const setTokens = ({access_token, access_token_validity}) => {
-        cookies.set("accessToken", access_token, {expires: `${access_token_validity}s`})
-    };
-
-    const getAccessToken = () => {
-        return cookies.get("accessToken");
-    };
-
-    const hasAccessToken = () => !!getAccessToken();
-
-    const refreshAccessToken = async () => api.post("/refresh")
-        .then(({data}) => {
-            setTokens(data);
-            console.log("token refreshed");
-            return data.access_token;
-        }).catch((e) => {
-            console.log("cannot refresh token", e);
-        })
-
-    return {
-        isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,
-        register, login, logout,
-        getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
-    }
-});

src/stores/helpers.js

@@ -1,6 +1,13 @@
 import {apolloWrapper} from "boot/apollo";
 import {getOperationName} from "@apollo/client/utilities";
 
+  export const setItems = (data, appendItems, itemsModel, totalItemsCount) => {
+    const originalData = appendItems ? [...itemsModel.value] : [];
+    itemsModel.value = [...originalData, ...data.items];
+    totalItemsCount.value = data.totalItemsCount;
+    return data.items;
+  }
+
 export const updateInItems = (items, key, data) => {
   const idx = items.findIndex(i => i[key] === data[key]);
   if (idx >= 0)

yarn.lock

@@ -26,9 +26,9 @@
     zen-observable-ts "^1.2.5"
 
 "@babel/parser@^7.23.5":
-  version "7.23.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.5.tgz#37dee97c4752af148e1d38c34b856b2507660563"
-  integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
+  integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
 
 "@bassist/utils@^0.4.0":
   version "0.4.0"
@@ -356,100 +356,100 @@
   dependencies:
     throttle-debounce "^5.0.0"
 
-"@vue/compiler-core@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.10.tgz#9ca4123a1458df43db641aaa8b7d1e636aa22545"
-  integrity sha512-doe0hODR1+i1menPkRzJ5MNR6G+9uiZHIknK3Zn5OcIztu6GGw7u0XUzf3AgB8h/dfsZC9eouzoLo3c3+N/cVA==
+"@vue/compiler-core@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.11.tgz#9fa26f8c81b9b34365f94ce1ed4d0e6e6f94a2ac"
+  integrity sha512-h97/TGWBilnLuRaj58sxNrsUU66fwdRKLOLQ9N/5iNDfp+DZhYH9Obhe0bXxhedl8fjAgpRANpiZfbgWyruQ0w==
   dependencies:
     "@babel/parser" "^7.23.5"
-    "@vue/shared" "3.3.10"
+    "@vue/shared" "3.3.11"
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-dom@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.10.tgz#183811252be6aff4ac923f783124bb1590301907"
-  integrity sha512-NCrqF5fm10GXZIK0GrEAauBqdy+F2LZRt3yNHzrYjpYBuRssQbuPLtSnSNjyR9luHKkWSH8we5LMB3g+4z2HvA==
+"@vue/compiler-dom@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.11.tgz#36a76ea3a296d41bad133a6912cb0a847d969e4f"
+  integrity sha512-zoAiUIqSKqAJ81WhfPXYmFGwDRuO+loqLxvXmfUdR5fOitPoUiIeFI9cTTyv9MU5O1+ZZglJVTusWzy+wfk5hw==
   dependencies:
-    "@vue/compiler-core" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/compiler-core" "3.3.11"
+    "@vue/shared" "3.3.11"
 
-"@vue/compiler-sfc@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.10.tgz#8eb97d42f276089ec58fd0565ef3a813bceeaa87"
-  integrity sha512-xpcTe7Rw7QefOTRFFTlcfzozccvjM40dT45JtrE3onGm/jBLZ0JhpKu3jkV7rbDFLeeagR/5RlJ2Y9SvyS0lAg==
+"@vue/compiler-sfc@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.11.tgz#acfae240c875d067e0e2c9a4e2d910074408c73b"
+  integrity sha512-U4iqPlHO0KQeK1mrsxCN0vZzw43/lL8POxgpzcJweopmqtoYy9nljJzWDIQS3EfjiYhfdtdk9Gtgz7MRXnz3GA==
   dependencies:
     "@babel/parser" "^7.23.5"
-    "@vue/compiler-core" "3.3.10"
-    "@vue/compiler-dom" "3.3.10"
-    "@vue/compiler-ssr" "3.3.10"
-    "@vue/reactivity-transform" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/compiler-core" "3.3.11"
+    "@vue/compiler-dom" "3.3.11"
+    "@vue/compiler-ssr" "3.3.11"
+    "@vue/reactivity-transform" "3.3.11"
+    "@vue/shared" "3.3.11"
     estree-walker "^2.0.2"
     magic-string "^0.30.5"
     postcss "^8.4.32"
     source-map-js "^1.0.2"
 
-"@vue/compiler-ssr@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.10.tgz#5a1b14a358cb3960a4edbce0ade90548e452fcaa"
-  integrity sha512-12iM4jA4GEbskwXMmPcskK5wImc2ohKm408+o9iox3tfN9qua8xL0THIZtoe9OJHnXP4eOWZpgCAAThEveNlqQ==
+"@vue/compiler-ssr@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.11.tgz#598942a73b64f2bd3f95908b104a7fbb55fc41a2"
+  integrity sha512-Zd66ZwMvndxRTgVPdo+muV4Rv9n9DwQ4SSgWWKWkPFebHQfVYRrVjeygmmDmPewsHyznCNvJ2P2d6iOOhdv8Qg==
   dependencies:
-    "@vue/compiler-dom" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/compiler-dom" "3.3.11"
+    "@vue/shared" "3.3.11"
 
 "@vue/devtools-api@^6.5.0":
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
   integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
 
-"@vue/reactivity-transform@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.10.tgz#b045776cc954bb57883fd305db7a200d42993768"
-  integrity sha512-0xBdk+CKHWT+Gev8oZ63Tc0qFfj935YZx+UAynlutnrDZ4diFCVFMWixn65HzjE3S1iJppWOo6Tt1OzASH7VEg==
+"@vue/reactivity-transform@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.11.tgz#2bd486f4eff60c8724309925618891e722fcfadc"
+  integrity sha512-fPGjH0wqJo68A0wQ1k158utDq/cRyZNlFoxGwNScE28aUFOKFEnCBsvyD8jHn+0kd0UKVpuGuaZEQ6r9FJRqCg==
   dependencies:
     "@babel/parser" "^7.23.5"
-    "@vue/compiler-core" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/compiler-core" "3.3.11"
+    "@vue/shared" "3.3.11"
     estree-walker "^2.0.2"
     magic-string "^0.30.5"
 
-"@vue/reactivity@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.10.tgz#78fe3da319276d9e6d0f072037532928c472a287"
-  integrity sha512-H5Z7rOY/JLO+e5a6/FEXaQ1TMuOvY4LDVgT+/+HKubEAgs9qeeZ+NhADSeEtrNQeiKLDuzeKc8v0CUFpB6Pqgw==
+"@vue/reactivity@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.11.tgz#91f8e6c9ac60a595a5278c836b197628fd947a0d"
+  integrity sha512-D5tcw091f0nuu+hXq5XANofD0OXnBmaRqMYl5B3fCR+mX+cXJIGNw/VNawBqkjLNWETrFW0i+xH9NvDbTPVh7g==
   dependencies:
-    "@vue/shared" "3.3.10"
+    "@vue/shared" "3.3.11"
 
-"@vue/runtime-core@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.10.tgz#d7b78c5c0500b856cf9447ef81d4a1b1438fd5bb"
-  integrity sha512-DZ0v31oTN4YHX9JEU5VW1LoIVgFovWgIVb30bWn9DG9a7oA415idcwsRNNajqTx8HQJyOaWfRKoyuP2P2TYIag==
+"@vue/runtime-core@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.11.tgz#63defba57bc54c1dac68a95b56c2633b1419193d"
+  integrity sha512-g9ztHGwEbS5RyWaOpXuyIVFTschclnwhqEbdy5AwGhYOgc7m/q3NFwr50MirZwTTzX55JY8pSkeib9BX04NIpw==
   dependencies:
-    "@vue/reactivity" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/reactivity" "3.3.11"
+    "@vue/shared" "3.3.11"
 
-"@vue/runtime-dom@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.10.tgz#130dfffb8fee8051671aaf80c5104d2020544950"
-  integrity sha512-c/jKb3ny05KJcYk0j1m7Wbhrxq7mZYr06GhKykDMNRRR9S+/dGT8KpHuNQjv3/8U4JshfkAk6TpecPD3B21Ijw==
+"@vue/runtime-dom@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.11.tgz#1146d8d280b0fec4d2e18c4a4c8f8121d0cecc09"
+  integrity sha512-OlhtV1PVpbgk+I2zl+Y5rQtDNcCDs12rsRg71XwaA2/Rbllw6mBLMi57VOn8G0AjOJ4Mdb4k56V37+g8ukShpQ==
   dependencies:
-    "@vue/runtime-core" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/runtime-core" "3.3.11"
+    "@vue/shared" "3.3.11"
     csstype "^3.1.2"
 
-"@vue/server-renderer@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.10.tgz#f23d151f0e5021ebdc730052d9934c9178486742"
-  integrity sha512-0i6ww3sBV3SKlF3YTjSVqKQ74xialMbjVYGy7cOTi7Imd8ediE7t72SK3qnvhrTAhOvlQhq6Bk6nFPdXxe0sAg==
+"@vue/server-renderer@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.11.tgz#409aed8031a125791e2143552975ecd1958ad601"
+  integrity sha512-AIWk0VwwxCAm4wqtJyxBylRTXSy1wCLOKbWxHaHiu14wjsNYtiRCSgVuqEPVuDpErOlRdNnuRgipQfXRLjLN5A==
   dependencies:
-    "@vue/compiler-ssr" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/compiler-ssr" "3.3.11"
+    "@vue/shared" "3.3.11"
 
-"@vue/shared@3.3.10":
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.10.tgz#1583a8d85a957d8b819078c465d2a11db7914b2f"
-  integrity sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw==
+"@vue/shared@3.3.11":
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.11.tgz#f6a038e15237edefcc90dbfe7edb806dd355c7bd"
+  integrity sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==
 
 "@withtypes/mime@^0.1.2":
   version "0.1.2"
@@ -635,7 +635,7 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-autoprefixer@^10.4.2:
+autoprefixer@^10.4.16:
   version "10.4.16"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
   integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
@@ -647,7 +647,7 @@ autoprefixer@^10.4.2:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-axios@^1.4.0:
+axios@^1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
   integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
@@ -781,9 +781,9 @@ camel-case@^3.0.0:
     upper-case "^1.1.1"
 
 caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
-  version "1.0.30001566"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz#61a8e17caf3752e3e426d4239c549ebbb37fef0d"
-  integrity sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==
+  version "1.0.30001568"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001568.tgz#53fa9297273c9a977a560663f48cbea1767518b7"
+  integrity sha512-vSUkH84HontZJ88MiNrOau1EBrCqEQYgkC5gIySiDlpsm8sGVrhU7Kx4V6h0tnqaHzIHZv08HlJIwPbL4XL9+A==
 
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
@@ -798,7 +798,7 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chart.js@^4.4.0:
+chart.js@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.1.tgz#ac5dc0e69a7758909158a96fe80ce43b3bb96a9f"
   integrity sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==
@@ -991,9 +991,9 @@ cssesc@^3.0.0:
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 csstype@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 debug@2.6.9:
   version "2.6.9"
@@ -1070,9 +1070,9 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.4.601:
-  version "1.4.604"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.604.tgz#8a53d70adb8ebb7206df082aa58cffb48e44b501"
-  integrity sha512-JAJ4lyLJYudlgJPYJicimU9R+qZ/3iyeyQS99bfT7PWi7psYWeN84lPswTjpHxQueU34PKxM/IJzQS6poYlovQ==
+  version "1.4.609"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz#5790a70aaa96de232501b56e14b64d17aff93988"
+  integrity sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw==
 
 elementtree@0.1.7:
   version "0.1.7"
@@ -1371,12 +1371,12 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-prettier@^8.1.0:
+eslint-config-prettier@^8.10.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
   integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
 
-eslint-plugin-vue@^9.0.0:
+eslint-plugin-vue@^9.19.2:
   version "9.19.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.19.2.tgz#7ab83a001a1ac8bccae013c5b9cb5d2c644fb376"
   integrity sha512-CPDqTOG2K4Ni2o4J5wixkLVNwgctKXFu6oBpVJlpNq7f38lh9I80pRTouZSJ2MAebPJlINU/KTFSXyQfBUlymA==
@@ -1402,7 +1402,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.10.0:
+eslint@^8.55.0:
   version "8.55.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.55.0.tgz#078cb7b847d66f2c254ea1794fa395bf8e7e03f8"
   integrity sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==
@@ -1734,9 +1734,9 @@ glob@^7.1.3, glob@^7.1.4, glob@^7.2.3:
     path-is-absolute "^1.0.0"
 
 globals@^13.19.0:
-  version "13.23.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
-  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
@@ -2500,7 +2500,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.5.1:
+prettier@^2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
@@ -3131,7 +3131,7 @@ vue-picture-cropper@^0.7.0:
     "@bassist/utils" "^0.4.0"
     cropperjs "^1.6.1"
 
-vue-router@^4.1.6:
+vue-router@^4.2.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
   integrity sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==
@@ -3147,16 +3147,16 @@ vue3-google-map@^0.15.0:
     "@googlemaps/markerclusterer" "^2.0.6"
     fast-deep-equal "^3.1.3"
 
-vue@^3.2.47:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.10.tgz#6e19c1982ee655a14babe1610288b90005f02ab1"
-  integrity sha512-zg6SIXZdTBwiqCw/1p+m04VyHjLfwtjwz8N57sPaBhEex31ND0RYECVOC1YrRwMRmxFf5T1dabl6SGUbMKKuVw==
+vue@^3.3.11:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.11.tgz#898d97025f73cdb5fc4e3ae3fd07a54615232140"
+  integrity sha512-d4oBctG92CRO1cQfVBZp6WJAs0n8AK4Xf5fNjQCBeKCvMI1efGQ5E3Alt1slFJS9fZuPcFoiAiqFvQlv1X7t/w==
   dependencies:
-    "@vue/compiler-dom" "3.3.10"
-    "@vue/compiler-sfc" "3.3.10"
-    "@vue/runtime-dom" "3.3.10"
-    "@vue/server-renderer" "3.3.10"
-    "@vue/shared" "3.3.10"
+    "@vue/compiler-dom" "3.3.11"
+    "@vue/compiler-sfc" "3.3.11"
+    "@vue/runtime-dom" "3.3.11"
+    "@vue/server-renderer" "3.3.11"
+    "@vue/shared" "3.3.11"
 
 wcwidth@^1.0.1:
   version "1.0.1"