Zakladni nastrel sitemapy

Dockerfile

@@ -1,24 +1,34 @@
 # develop stage
 FROM node:20-alpine as develop-stage
 
+ENV TZ=Europe/Prague
+
 WORKDIR /app
-COPY package*.json ./
-RUN yarn global add @quasar/cli && yarn --production=false
+RUN  yarn global add @quasar/cli
+
+COPY package.json yarn.lock ./
+RUN yarn --production=false
+RUN npx update-browserslist-db@latest
 COPY . .
 
 # build stage
 FROM develop-stage as build-stage
+ENV NODE_ENV production
 
-#ARG API_URL
-#ENV VUE_API_URL $API_URL
+RUN quasar build -m ssr
 
-RUN yarn --production=false
-RUN quasar build
+FROM node:20-alpine as production-stage
 
-# production stage
-FROM nginx:1.25-alpine as production-stage
-COPY conf/nginx.conf /etc/nginx/nginx.conf
-COPY --from=build-stage /app/dist/spa /app/html
-EXPOSE 80
+ENV NODE_ENV production
+ENV TZ=Europe/Prague
 
-CMD ["nginx", "-g", "daemon off;"]
+EXPOSE 3000
+WORKDIR /app
+
+COPY process.yml /app
+COPY --from=build-stage /app/dist/ssr/package.json /app
+RUN yarn global add pm2 && yarn && yarn cache clean
+
+COPY --from=build-stage /app/dist/ssr /app
+
+CMD ["pm2-runtime", "/app/process.yml"]

LICENSE.txt

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

conf/nginx.conf

@@ -24,9 +24,7 @@ http {
     #tcp_nopush     on;
 
     keepalive_timeout  65;
-
-    #gzip  on;
-
+    gzip  on;
     include /etc/nginx/conf.d/*.conf;
 
     map $sent_http_content_type $expires {
@@ -34,6 +32,10 @@ http {
       text/html		0;
     }
 
+    map $host $api_url {
+      default "$API_URL";
+    }
+
     server {
         listen 80 default;
         server_name poletani.cz;
@@ -46,5 +48,9 @@ http {
           expires $expires;
           try_files $uri /index.html;
         }
+
+        location /sitemap.xml {
+          try_files $uri $api_url;
+        }
     }
 }

docker-compose.prod.yml

@@ -1,7 +1,14 @@
-version: "3.3"
+version: "3.4"
 services:
   poletani-app:
     image: "docker.kvacek.cz/poletani/app:latest"
+#    build:
+#      context: .
+#      dockerfile: Dockerfile
+#      target: "production-stage"
     restart: always
     ports:
-      - 9000:80
+#      - 9000:80
+      - 9000:3000
+    environment:
+      API_URL: "https://api.poletani.cz"

docker-compose.yml

@@ -24,18 +24,21 @@ services:
 ##    command: ls -l /app
 
   app:
+    network_mode: host
     build:
       context: .
       target: "develop-stage"
     ports:
       - "9000:9000"
+      - "9001:9100"
     volumes:
       - ./src:/app/src
+      - ./src-ssr:/app/src-ssr
       - ./public:/app/public
-      - ./node_modules:/app/node_modules:delegated
-    command: quasar dev
+#      - ./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:

index.html

@@ -1,10 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= productName %></title>
-
     <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

package.json

@@ -15,29 +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.12.0",
-    "vue": "^3.2.47",
+    "quasar": "^2.14.1",
+    "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.3.0",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
+    "@quasar/app-vite": "^1.7.1",
+    "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",
-    "vite-plugin-rewrite-all": "^1.0.1"
+    "prettier": "^2.8.8"
   },
   "engines": {
     "npm": ">= 6.13.4",

process.yml

@@ -0,0 +1,5 @@
+apps:
+    - name: poletani
+      script: /app/index.js
+      exec_mode: cluster
+      instances: 3

public/robots.txt

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

quasar.config.js

@@ -23,15 +23,16 @@ module.exports = configure(function (ctx) {
     },
 
     // https://v2.quasar.dev/quasar-cli/prefetch-feature
-    // preFetch: true,
+    preFetch: true,
 
     // app boot file (/poletani/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
+      "cookies",
       "axios",
       "apollo",
-      "chartJs",
+      "chartJs"
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
@@ -56,7 +57,7 @@ module.exports = configure(function (ctx) {
     build: {
       target: {
         browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
-        node: 'node18'
+        node: 'node20'
       },
 
       env: {
@@ -76,17 +77,14 @@ module.exports = configure(function (ctx) {
       // env: {},
       // rawDefine: {}
       // ignorePublicFolder: true,
-      // minify: false,
+      minify: true,
       // polyfillModulePreload: true,
       // distDir
 
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-
-      vitePlugins: [
-        [ require("vite-plugin-rewrite-all").default ] // slouzi k podpore tecky v params v routeru
-      ]
+      // vitePlugins: []
     },
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
@@ -112,6 +110,7 @@ module.exports = configure(function (ctx) {
 
       // Quasar plugins
       plugins: [
+        'Cookies',
         'Dialog',
         'Meta',
         'Notify'
@@ -120,7 +119,9 @@ module.exports = configure(function (ctx) {
 
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [],
+    animations: [
+      "fadeIn", "fadeOut"
+    ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
     sourceFiles: {
@@ -136,10 +137,10 @@ module.exports = configure(function (ctx) {
 
     // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {
-      // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
+      ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
       // will mess up SSR
 
-      // extendSSRWebserverConf (esbuildConf) {},
+      extendSSRWebserverConf (esbuildConf) {},
       // extendPackageJson (json) {},
 
       pwa: false,

src-ssr/middlewares/render.js

@@ -0,0 +1,58 @@
+import { ssrMiddleware } from 'quasar/wrappers'
+
+// This middleware should execute as last one
+// since it captures everything and tries to
+// render the page with Vue
+
+export default ssrMiddleware(({ app, resolve, render, serve }) => {
+  // we capture any other Express route and hand it
+  // over to Vue and Vue Router to render our page
+  app.get(resolve.urlPath('*'), (req, res) => {
+    res.setHeader('Content-Type', 'text/html')
+
+    render(/* the ssrContext: */ { req, res })
+      .then(html => {
+        // now let's send the rendered html to the client
+        res.send(html)
+      })
+      .catch(err => {
+        // oops, we had an error while rendering the page
+
+        // we were told to redirect to another URL
+        if (err.url) {
+          if (err.code) {
+            res.redirect(err.code, err.url)
+          } else {
+            res.redirect(err.url)
+          }
+        } else if (err.code === 404) {
+          // hmm, Vue Router could not find the requested route
+
+          console.log("404 v renderu")
+
+          // Should reach here only if no "catch-all" route
+          // is defined in /src/routes
+          // res.status(404).send('404 | Page Not Found')
+            res.redirect(resolve.urlPath('404'))
+        } else if (process.env.DEV) {
+          // well, we treat any other code as error;
+          // if we're in dev mode, then we can use Quasar CLI
+          // to display a nice error page that contains the stack
+          // and other useful information
+
+          // serve.error is available on dev only
+          serve.error({ err, req, res })
+
+        } else {
+          // we're in production, so we should have another method
+          // to display something to the client when we encounter an error
+          // (for security reasons, it's not ok to display the same wealth
+          // of information as we do in development)
+
+          // Render Error Page on production or
+          // create a route (/src/routes) for an error page and redirect to it
+            res.redirect(resolve.urlPath('500'))
+        }
+      })
+  })
+})

src-ssr/server.js

@@ -0,0 +1,136 @@
+/**
+ * More info about this file:
+ * https://v2.quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver
+ *
+ * Runs in Node context.
+ */
+
+/**
+ * Make sure to yarn add / npm install (in your project root)
+ * anything you import here (except for express and compression).
+ */
+import express from 'express'
+import compression from 'compression'
+import {
+  ssrClose,
+  ssrCreate,
+  ssrListen,
+  ssrRenderPreloadTag,
+  ssrServeStaticContent
+} from 'quasar/wrappers'
+
+/**
+ * Create your webserver and return its instance.
+ * If needed, prepare your webserver to receive
+ * connect-like middlewares.
+ *
+ * Should NOT be async!
+ */
+export const create = ssrCreate((/* { ... } */) => {
+  const app = express()
+
+  // attackers can use this header to detect apps running Express
+  // and then launch specifically-targeted attacks
+  app.disable('x-powered-by')
+
+  // place here any middlewares that
+  // absolutely need to run before anything else
+  if (process.env.PROD) {
+    app.use(compression())
+  }
+
+  return app
+})
+
+/**
+ * You need to make the server listen to the indicated port
+ * and return the listening instance or whatever you need to
+ * close the server with.
+ *
+ * The "listenResult" param for the "close()" definition below
+ * is what you return here.
+ *
+ * For production, you can instead export your
+ * handler for serverless use or whatever else fits your needs.
+ */
+export const listen = ssrListen(async ({ app, port, isReady }) => {
+  await isReady()
+  return app.listen(port, () => {
+    if (process.env.PROD) {
+      console.log('Server listening at port ' + port)
+    }
+  })
+})
+
+/**
+ * Should close the server and free up any resources.
+ * Will be used on development only when the server needs
+ * to be rebooted.
+ *
+ * Should you need the result of the "listen()" call above,
+ * you can use the "listenResult" param.
+ *
+ * Can be async.
+ */
+export const close = ssrClose(({ listenResult }) => {
+  return listenResult.close()
+})
+
+const maxAge = process.env.DEV
+  ? 0
+  : 1000 * 60 * 60 * 24 * 30
+
+/**
+ * Should return middleware that serves the indicated path
+ * with static content.
+ */
+export const serveStaticContent = ssrServeStaticContent((path, opts) => {
+  return express.static(path, {
+    maxAge,
+    ...opts
+  })
+})
+
+const jsRE = /\.js$/
+const cssRE = /\.css$/
+const woffRE = /\.woff$/
+const woff2RE = /\.woff2$/
+const gifRE = /\.gif$/
+const jpgRE = /\.jpe?g$/
+const pngRE = /\.png$/
+
+/**
+ * Should return a String with HTML output
+ * (if any) for preloading indicated file
+ */
+export const renderPreloadTag = ssrRenderPreloadTag((file) => {
+  if (jsRE.test(file) === true) {
+    return `<link rel="modulepreload" href="${file}" crossorigin>`
+  }
+
+  if (cssRE.test(file) === true) {
+    return `<link rel="stylesheet" href="${file}">`
+  }
+
+  if (woffRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
+  }
+
+  if (woff2RE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
+  }
+
+  if (gifRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="image" type="image/gif">`
+  }
+
+  if (jpgRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`
+  }
+
+  if (pngRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="image" type="image/png">`
+  }
+
+  return ''
+})

src-ssr/ssr-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    ssr: true;
+  }
+}

src/App.vue

@@ -1,13 +1,12 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {computed} from "vue";
-import ErrorNotFound from "pages/ErrorNotFound.vue";
+import ErrorNotFound from "pages/errors/ErrorNotFound.vue";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";
 
 const route = useRoute();
 
-
 const layoutComponent = computed(() => {
   if (!route.meta) return null;
   return route.meta.layout;

src/boot/apollo.js

@@ -1,96 +1,105 @@
-// import {boot} from "quasar/wrappers";
 import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
-import {createUploadLink} from 'apollo-upload-client';
 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 {useRouter} from "vue-router";
+// import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
-const handleRefreshToken = (store, forward, operation) => {
-    return fromPromise(useUserStore(store).refreshAccessToken()
-        .catch((error) => {
-            Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
-            window.location = "/login";
-        }))
-        .filter((value) => Boolean(value))
-        .flatMap((accessToken) => {
-            const oldHeaders = operation.getContext().headers;
-            operation.setContext({
-                headers: {
-                    ...oldHeaders, authorization: `Bearer ${accessToken}`,
-                },
-            });
+const handleRefreshToken = (store, router, forward, operation) => {
+  if (!operation.query?._refreshUnauthorizedUser) return;
 
-            // retry the request, returning the new observable
-            return forward(operation);
-        });
+  console.log("refreshing token, ", operation.query);
+  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"})
+    }))
+    .filter((value) => Boolean(value))
+    .flatMap((accessToken) => {
+      const oldHeaders = operation.getContext().headers;
+      operation.setContext({
+        headers: {
+          ...oldHeaders,
+          authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      // retry the request, returning the new observable
+      return forward(operation);
+    });
 }
 
-
-
 export const apolloWrapper = {};
-export default (({store}) => {
-    const uploadLink = createUploadLink({
-        uri: process.env.API_URL + '/graphql',
+export default (({store, router}) => {
+  const uploadLink = createUploadLink({
+    uri: process.env.API_URL + '/graphql',
+    credentials: 'include'
+  })
+
+  const authLink = new ApolloLink((operation, forward) => {
+    const accessToken = useAuthStore(store).getAccessToken();
+    if (accessToken) {
+      operation.setContext({
+        headers: {"Authorization": `Bearer ${accessToken}`},
+      });
+    }
+    return forward(operation);
+  });
+
+  const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
+    if (networkError?.statusCode === 401) {
+      return handleRefreshToken(store, router, forward, operation);
+    }
+
+    if (graphQLErrors) {
+      for (const error of graphQLErrors) {
+        if (error.message.includes("401") || error.message.includes("Not authorized")) {
+          return handleRefreshToken(store, router, forward, operation);
+        } else if (error.message.includes("404") || error.message.includes("Not found")) {
+          useAppStore(store).appStatus = 404;
+        } else {
+          Notify.create(errorObject("API error: " + error.message));
+        }
+      }
+    }
+  });
+
+  const apolloClient = new ApolloClient({
+    link: ApolloLink.from([authLink, errorLink, uploadLink]), cache: new InMemoryCache(), connectToDevTools: true,
+  });
+
+  apolloWrapper.query = (query, variables = {}) => {
+    return apolloClient.query({
+      query: query,
+      fetchPolicy: 'no-cache',
+      variables: variables
     })
-
-    const authLink = new ApolloLink((operation, forward) => {
-        const accessToken = useUserStore(store).getAccessToken();
-
-        if (accessToken) {
-            operation.setContext({
-                headers: {"Authorization": `Bearer ${accessToken}`},
-            });
+      .then((response) => response)
+      .catch(err => {
+        const errStr = err.toString();
+        if (errStr.includes('Not found') || errStr.includes("No row was found")) {
+          useAppStore(store).appStatus = 404;
+          return Promise.resolve();
         }
-        return forward(operation);
-    });
-
-    const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
-        if (networkError?.statusCode === 401) {
-            return handleRefreshToken(store, forward, operation);
+        else if (!errStr.includes("401") && !errStr.includes("Not authorized")) {
+          console.error("Error during query: ", err)
         }
-
-        if (graphQLErrors) {
-            for (const error of graphQLErrors) {
-                if (error.message === "Not found") {
-                    useAppStore(store).appStatus = 404;
-                } else if (error.message.includes("401") || error.message.includes("Not authorized")) {
-                    return handleRefreshToken(store, forward, operation);
-                } else {
-                    Notify.create(errorObject("API error: " + error.message));
-                }
-            }
-        }
-    });
-
-
-    const apolloClient = new ApolloClient({
-        link: ApolloLink.from([authLink, errorLink, uploadLink]), cache: new InMemoryCache(), connectToDevTools: true,
-    });
-    // const  apolloProvider = createApolloProvider({
-    //     defaultClient: apolloClient,
-    // });
-
-
-    apolloWrapper.query = (query, variables = {}) => {
-        return apolloClient.query({
-            query: query, fetchPolicy: 'no-cache', variables: variables
-        })
-            .then((response) => response)
-            .catch(err => {
-                console.error("Error during query: ", err)
-                return err;
-            })
-    };
-    apolloWrapper.mutate = (mutation, variables) => {
-        return apolloClient
-            .mutate({
-                mutation: mutation, fetchPolicy: 'no-cache', variables: variables,
-            })
-            .then((response) => response)
-            .catch(err => {
-                console.error("Error during mutation: ", err);
-            })
-    };
+        return Promise.reject(err);
+      })
+  };
+  apolloWrapper.mutate = (mutation, variables) => {
+    return apolloClient
+      .mutate({
+        mutation: mutation,
+        fetchPolicy: 'no-cache',
+        variables: variables,
+      })
+      .then((response) => response)
+      .catch(err => {
+        console.error("Error during mutation: ", err);
+      })
+  };
 });

src/boot/axios.js

@@ -1,6 +1,7 @@
 import {boot} from 'quasar/wrappers'
 import axios from 'axios'
-import {useUserStore} from "stores/User";
+import {useAuthStore} from "stores/Auth";
+
 
 const api = axios.create({
     baseURL: process.env.API_URL,
@@ -14,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}`
         }
@@ -32,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/boot/cookies.js

@@ -0,0 +1,9 @@
+import {Cookies} from 'quasar'
+import {boot} from "quasar/wrappers";
+
+let cookies = Cookies;
+export default boot(({ssrContext}) => {
+    cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies
+});
+
+export {cookies}

src/components/AppFooter.vue

@@ -0,0 +1,69 @@
+<script setup>
+import {ref} from "vue";
+
+const date = new Date();
+const year = ref(date.getFullYear());
+</script>
+
+<template>
+  <q-footer class="q-pa-lg q-mt-xl">
+    <div class="row justify-center">
+
+      <div class="col-xs-12 col-md-4 text-center q-py-lg" style="font-size: 130%">
+        <q-img fit="contain" width="32px" src="/icons/favicon-32x32.png"/>
+
+        <div class="text-h5">Polétání.cz</div>
+        Vytvořeno s <q-icon name="favorite" color="red"/> nejen pro létání.
+      </div>
+      <div class="col-xs-6 col-md-2">
+        <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: 'features'}">Funkce</router-link>
+          </q-item>
+        </q-list>
+      </div>
+      <div class="col-xs-6 col-md-2">
+        <q-list>
+          <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-item>
+            <router-link :to="{name: 'forgottenPassword'}">Zapomenuté heslo</router-link>
+          </q-item>
+        </q-list>
+      </div>
+      <div class="col-xs-12 col-md-2">
+        <q-list>
+          <q-item>
+            <router-link :to="{name: 'termsAndConditions'}">Podmínky použití</router-link>
+          </q-item>
+          <q-item>
+            <router-link :to="{name: 'personalInformation'}">Správa osobních údajů</router-link>
+          </q-item>
+        </q-list>
+      </div>
+    </div>
+    <div class="row q-mt-lg">
+      <div class="col text-center">
+        &copy; {{ year }} Polétání.cz
+      </div>
+    </div>
+  </q-footer>
+</template>
+
+
+<style scoped>
+a {
+  color: white;
+  font-size: 110%;
+}
+</style>

src/components/ContentCard.vue

@@ -0,0 +1,34 @@
+<script setup>
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+
+const props = defineProps({
+  titlePhoto: {
+    type: Object,
+    required: false
+  },
+  title: {
+    type: String,
+    required: false
+  }
+})
+
+</script>
+
+<template>
+  <q-card class="flight-detail-card q-mb-lg">
+    <TitlePhotoWithGallery
+        v-if="titlePhoto"
+        :photo="titlePhoto"
+        :title="title"
+    />
+    <q-card-section v-else-if="title && title !== ''">
+      <h3>{{ title }}</h3>
+    </q-card-section>
+
+    <q-card-actions>
+      <slot name="actions"/>
+    </q-card-actions>
+
+    <slot name="content"/>
+  </q-card>
+</template>

src/components/ContentCardEditButton.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  to: {
+    type: Object,
+    required: true
+  },
+  label: {
+    type: String,
+    required: false,
+    default: null
+  }
+});
+</script>
+
+<template>
+
+  <div class="text-right">
+    <q-btn flat class="q-my-sm" :to="props.to" icon="edit" color="primary">
+      {{ props.label }}
+    </q-btn>
+  </div>
+</template>

src/components/FormSubmitButton.vue

@@ -3,6 +3,11 @@ import {computed} from "vue";
 import {useQuasar} from "quasar";
 
 const props = defineProps({
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   saveButton: {
     type: [Object, Boolean],
     required: false,

src/components/FormWrapper.vue

@@ -1,14 +1,15 @@
 <script setup>
-import {isRequestPending} from "src/composables/form/props";
-import {computed, useSlots} from "vue";
-import {useQuasar} from "quasar";
 import FormSubmitButton from "components/FormSubmitButton.vue";
 
 const props = defineProps({
   modelValue: {
     type: Object,
   },
-  isRequestPending,
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   saveButton: {
     type: [Object, Boolean],
     required: false,
@@ -29,6 +30,6 @@ const saveForm = () => {
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
     <slot name="default"/>
-    <FormSubmitButton v-if="saveButton" :save-button="saveButton" />
+    <FormSubmitButton v-if="saveButton" :save-button="saveButton"/>
   </q-form>
 </template>

src/components/ListFilters.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {commonProps} from "src/composables/inputs";
+import {onMounted, ref, watch} from "vue";
+import {debounce} from "quasar";
+import {useRoute, useRouter} from "vue-router";
+
+const props = defineProps({
+  emitDebounce: {
+    type: Number,
+    required: false,
+    default: 200
+  }
+})
+const emits = defineEmits(["filtersChanged"]);
+
+const filters = ref({
+  search: ""
+});
+
+const $route = useRoute();
+const $router = useRouter();
+watch((() => filters.value), debounce(() => {
+  emits("filtersChanged", filters.value);
+
+  const query = {...$route.query};
+  for (const key in filters.value) {
+    if (filters.value[key] === "" || filters.value['key'] === null) {
+      delete query[key];
+    } else {
+      query[key] = filters.value[key];
+    }
+  }
+  $router.replace({query});
+}, props.emitDebounce), {deep: true});
+
+onMounted(() => {
+  const search = $route.query.search;
+
+  if (search) {
+    filters.value.search = search;
+  }
+})
+</script>
+
+<template>
+  <q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
+    <template #prepend>
+      <q-icon name="search"/>
+    </template>
+  </q-input>
+</template>

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/AircraftDetailCard.vue

@@ -1,66 +0,0 @@
-<script setup>
-import {confirmObject} from "src/composables/dialog";
-import {useQuasar} from "quasar";
-import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
-
-const props = defineProps({
-  aircraft: {
-    type: Object,
-    required: true
-  }
-});
-
-const emits = defineEmits(["delete"]);
-const $q = useQuasar();
-
-const loggedUser = storeToRefs(useUserStore()).user;
-
-const confirmDelete = (aircraftId) => {
-  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
-    .onOk(() => {
-      emits("delete", aircraftId);
-    });
-};
-</script>
-
-<template>
-  <q-card class="q-mx-md q-my-md flight-detail-card">
-    <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
-
-    <q-card-actions class="q-my-md" v-if="aircraft.createdById === loggedUser.id">
-      <div class="col-grow">
-        <q-btn
-          flat
-          :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
-          icon="edit"
-          text-color="primary"
-          label="Upravit"
-        />
-      </div>
-      <q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
-
-    <q-card-section>
-      <q-list>
-
-        <q-item v-if="aircraft.organization">
-          Provozovatel: {{ aircraft.organization.name }}
-        </q-item>
-
-        <q-item v-if="aircraft.manufacturer">
-          Výrobce: {{ aircraft.manufacturer }}
-        </q-item>
-        <q-item v-if="aircraft.model">
-          Model: {{ aircraft.model }}
-        </q-item>
-        <q-item v-if="aircraft.seats">
-          Počet míst: {{ aircraft.seats }}
-        </q-item>
-      </q-list>
-    </q-card-section>
-    <q-card-section>
-      <article v-html="aircraft.description" class="q-my-md"/>
-    </q-card-section>
-  </q-card>
-</template>

src/components/aircrafts/AircraftForm.vue

@@ -2,7 +2,6 @@
 import {onMounted, reactive} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {defaultValues, isRequestPending} from "src/composables/form/props";
 import {isNumber, isRequired, maxLength, minLength} from "src/composables/form/rules";
 import {commonProps} from "src/composables/inputs";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
@@ -14,13 +13,21 @@ const formData = reactive({
   seats: null,
   manufacturer: "",
   description: "",
-  photo: null,
-  organization: null
+  organization: null,
+  isPublic: false
 });
 
 const props = defineProps({
-  defaultValues,
-  isRequestPending,
+  defaultValues: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   organizations: {
     type: Array,
     required: true,
@@ -47,56 +54,51 @@ onMounted(() => {
     <q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl"/>
 
     <q-input
-      type="text"
-      :rules="rules.callSign"
-      v-model="formData.callSign"
-      label="Volací značka"
-      v-bind="commonProps"
+        type="text"
+        :rules="rules.callSign"
+        v-model="formData.callSign"
+        label="Volací značka"
+        v-bind="commonProps"
     />
 
-     <q-input
-      type="number"
-      v-model.number="formData.seats"
-      label="Počet míst (včetně pilota)"
-      min="1"
-      :rules="rules.seats"
-      v-bind="commonProps"
+    <q-input
+        type="number"
+        v-model.number="formData.seats"
+        label="Počet míst (včetně pilota)"
+        min="1"
+        :rules="rules.seats"
+        v-bind="commonProps"
     />
 
     <ComboboxInput
-      :options="organizations"
-      label="Organizace"
-      v-model="formData.organization"
-      v-bind="commonProps"
-      hint="Vyber provozovatele letadla. Tím se stane dostupné i pro ostatní členy vybrané organizace."
+        :options="organizations"
+        label="Organizace"
+        v-model="formData.organization"
+        v-bind="commonProps"
+        hint="Vyber provozovatele letadla. Tím se stane dostupné i pro ostatní členy vybrané organizace."
     />
 
     <q-input
-      type="text"
-      v-model="formData.manufacturer"
-      label="Výrobce"
-      v-bind="commonProps"
+        type="text"
+        v-model="formData.manufacturer"
+        label="Výrobce"
+        v-bind="commonProps"
     />
     <q-input
-      type="text"
-      v-model="formData.model"
-      label="Model"
-      v-bind="commonProps"
+        type="text"
+        v-model="formData.model"
+        label="Model"
+        v-bind="commonProps"
     />
 
-
-
     <q-input
-      type="textarea"
-      v-model="formData.description"
-      label="Popis"
-      v-bind="commonProps"
+        type="textarea"
+        v-model="formData.description"
+        label="Popis"
+        v-bind="commonProps"
     />
 
-    <q-file v-model="formData.photo" label="Fotografie" v-bind="commonProps">
-      <template #prepend>
-        <q-icon name="upload"/>
-      </template>
-    </q-file>
+    <q-checkbox v-model="formData.isPublic" label="Veřejné?" v-bind="commonProps"/>
+
   </FormWrapper>
 </template>

src/components/aircrafts/AircraftInfo.vue

@@ -0,0 +1,30 @@
+<script setup>
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  aircraft: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+    <q-list>
+      <q-item v-if="aircraft.organization">
+        Provozovatel: {{ aircraft.organization.name }}
+      </q-item>
+
+      <q-item v-if="aircraft.manufacturer">
+        Výrobce: {{ aircraft.manufacturer }}
+      </q-item>
+      <q-item v-if="aircraft.model">
+        Model: {{ aircraft.model }}
+      </q-item>
+      <q-item v-if="aircraft.seats">
+        Počet míst: {{ aircraft.seats }}
+      </q-item>
+    </q-list>
+
+    <article v-html="aircraft.description" class="q-my-md"/>
+</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.photoUrl">
-          <img :src="aircraft.photoUrl" 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/aircrafts/skeletons/AircraftDetailSkeleton.vue

@@ -13,11 +13,11 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
     </q-card-section>
 
     <q-card-section class="q-my-md">
-      <BasicTextSkeleton :paragraphs="1" :lines="randomInt(1, 3)"/>
+      <BasicTextSkeleton :paragraphs="1" :lines="2"/>
     </q-card-section>
-  </q-card>
 
-  <q-card class="flight-detail-card" flat>
-    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+
+    <h3>Lety</h3>
+    <BasicListSkeleton :items="5" />
   </q-card>
 </template>

src/components/basicSkeletons/BasicListSkeleton.vue

@@ -14,9 +14,10 @@ const props = defineProps({
     default: 5
   },
   items: {
-    type: Number, required: false,
+    type: Number,
+    required: false,
   }
-})
+});
 
 const renderedItems = computed(() => props.items || randomInt(props.itemsCountMin, props.itemsCountMax));
 </script>

src/components/copilots/CopilotForm.vue

@@ -4,24 +4,35 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
+import SlugInput from "components/inputs/SlugInput.vue";
+import {storeToRefs} from "pinia";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 const props = defineProps({
   copilot: {
     type: Object
   },
-  isRequestPending
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })
 
 const formData = reactive({
   name: null,
+  urlSlug: "",
+  isPublic: false,
 });
 
 const rules = {
-  name: [isRequired]
+  name: [isRequired],
+  urlSlug: [],
 }
 
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
+
 onMounted(() => {
   if (props.copilot) {
     setDefaultData(formData, props.copilot);
@@ -38,5 +49,19 @@ onMounted(() => {
       :rules="rules.name"
       v-model="formData.name"
     />
+
+    <template v-if="loggedUser?.publicUsername">
+      <SlugInput
+        v-if="formData.isPublic"
+        v-bind="commonProps"
+        v-model="formData.urlSlug"
+        label="URL"
+        :url="`/${loggedUser.publicUsername}/a/`"
+        :slug-source="formData.name"
+        :rules="rules.urlSlug"
+      />
+      <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+    </template>
+
   </FormWrapper>
 </template>

src/components/copilots/CopilotsList.vue

@@ -17,7 +17,10 @@ const props = defineProps({
       v-ripple
       v-for="pilot of items" :key="pilot">
       <q-item-section avatar>
-        <q-avatar icon="person" color="primary" text-color="white"/>
+        <q-avatar v-if="pilot.titlePhoto">
+          <img :src="pilot.titlePhoto.thumbnailUrl" alt=""/>
+        </q-avatar>
+        <q-avatar v-else icon="person" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
         {{ pilot.name }}

src/components/copilots/skeletons/CopilotDetailSkeleton.vue

@@ -4,5 +4,5 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 <template>
   <q-skeleton type="rect" class="q-my-lg" style="width: 200px; height: 40px" />
-    <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
+    <BasicListSkeleton :items="4"/>
 </template>

src/components/event/EventForm.vue

@@ -4,21 +4,28 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import {FORMAT_DATE, FORMAT_DATETIME_LONG} from "src/composables/datetimeUtils";
+import SlugInput from "components/inputs/SlugInput.vue";
+import {storeToRefs} from "pinia";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 const props = defineProps({
   event: {
     type: Object
   },
-  isRequestPending
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })
 
 const formData = reactive({
-  name: null,
+  name: "",
+  urlSlug: "",
   isPublic: false,
   description: "",
   dateFrom: null,
@@ -35,6 +42,7 @@ onMounted(() => {
   }
 })
 
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 </script>
 
 <template>
@@ -45,7 +53,15 @@ onMounted(() => {
       :rules="rules.name"
       v-model="formData.name"
     />
-
+    <SlugInput
+      v-if="formData.isPublic"
+      v-bind="commonProps"
+      v-model="formData.urlSlug"
+      label="URL"
+      :url="`/${loggedUser?.publicUsername}/udalosti/`"
+      :slug-source="formData.name"
+    />
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
 
     <div class="row">
       <div class="col q-pr-sm">
@@ -58,7 +74,7 @@ onMounted(() => {
 
 
     <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+
 
   </FormWrapper>
 </template>

src/components/event/EventsList.vue

@@ -8,31 +8,30 @@ const props = defineProps({
   },
    routeDetail: {
     type: Object,
-    required: false,
-    default: () => ({name: 'eventDetail', params: {}})
+    required: true,
   },
 });
 
-const getCoverPhotos = (item) => item.flights.filter(f => !!f.coverPhoto).map(f => f.coverPhoto.thumbnailUrl);
+const getCoverPhotos = (item) => item.flights.filter(f => !!f.titlePhoto).map(f => f.titlePhoto.thumbnailUrl);
 </script>
 
 <template>
   <q-list bordered separator>
     <q-item
-      v-for="event of items" :key="event"
+      v-for="eventDetail of items" :key="eventDetail"
       clickable
-      :to="{name: routeDetail.name, params: {...routeDetail.params, id: event.id}}"
+      :to="{name: props.routeDetail.name, params: {...props.routeDetail.params, eventSlug: eventDetail.urlSlug, id: eventDetail.id}}"
       v-ripple
     >
       <q-item-section>
         <q-item-label>
-          <q-avatar icon="event" color="primary" text-color="white" v-if="!event.flights || event.flights.length === 0"/>
-          <AvatarsGroup :avatars="getCoverPhotos(event)" v-else/>
+          <q-avatar icon="event" color="primary" text-color="white" v-if="!eventDetail.flights || eventDetail.flights.length === 0"/>
+          <AvatarsGroup :avatars="getCoverPhotos(eventDetail)" v-else/>
 
-          {{ event.name }}
+          {{ eventDetail.name }}
         </q-item-label>
         <q-item-label lines="4" caption>
-          <article v-html="event.description"/>
+          <article v-html="eventDetail.description"/>
         </q-item-label>
       </q-item-section>
     </q-item>

src/components/event/skeletons/EventDetailSkeleton.vue

@@ -13,5 +13,5 @@ import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
 
   <BasicTextSkeleton :lines="3" :paragraphs="2"/>
 
-  <BasicListSkeleton :items-count-min="1" :items-count-max="5"/>
+  <BasicListSkeleton :items="4"/>
 </template>

src/components/flights/FlightBasicInfo.vue

@@ -11,6 +11,16 @@ const props = defineProps({
     type: Object,
     required: false,
     default: null
+  },
+  aircraftDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
+  },
+  poiDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
   }
 })
 </script>
@@ -22,7 +32,15 @@ const props = defineProps({
         <q-icon name="flight"/>
       </q-item-section>
       <q-item-section>
-        {{ flight.aircraft.callSign }}
+        <router-link
+          :to="{...aircraftDetailRoute, params: {id: flight.aircraft.id, callSign: flight.aircraft.callSign}}"
+          v-if="flight.aircraft.isPublic"
+        >
+          {{ flight.aircraft.callSign }}
+        </router-link>
+        <template v-else>
+          {{ flight.aircraft.callSign }}
+        </template>
       </q-item-section>
     </q-item>
 
@@ -43,7 +61,9 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              <strong>{{ flight.takeoffAirport.icaoCode }}</strong> ({{ flight.takeoffAirport.name }}),
+              <template v-if="flight.takeoffAirport">
+                <strong>{{ flight.takeoffAirport.icaoCode }}</strong> ({{ flight.takeoffAirport.name }}),
+              </template>
               čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
 
               <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
@@ -53,16 +73,26 @@ const props = defineProps({
 
         <q-item v-for="poi in flight.track" :key="poi.id">
           <q-item-section avatar>
-            <q-icon name="place" v-if="poi.pointOfInterest" />
-            <q-icon name="local_airport" v-if="poi.airport" />
+            <q-icon name="place" v-if="poi.pointOfInterest"/>
+            <q-icon name="local_airport" v-if="poi.airport"/>
           </q-item-section>
           <q-item-section>
             <template v-if="poi.pointOfInterest">
-              {{ poi.pointOfInterest.name }}
+              <router-link
+                :to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, slug: poi.pointOfInterest.urlSlug, id: poi.pointOfInterest.id}}"
+                v-if="poi.pointOfInterest.isPublic"
+              >
+                {{ poi.pointOfInterest.name }}
+              </router-link>
+              <template v-else>{{ poi.pointOfInterest.name }}</template>
             </template>
             <span v-if="poi.airport">
               <strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
-              délka mezipřistání {{ minutesToHumanReadable(poi.landingDuration) }}
+              <template v-if="poi.landingDuration > 0">
+                délka mezipřistání {{ minutesToHumanReadable(poi.landingDuration) }}
+              </template>
+              <template v-else>touch and go</template>
+
             </span>
           </q-item-section>
         </q-item>
@@ -73,7 +103,9 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              <strong>{{ flight.landingAirport.icaoCode }}</strong> ({{ flight.landingAirport.name }}),
+              <template v-if="flight.landingAirport">
+                <strong>{{ flight.landingAirport.icaoCode }}</strong> ({{ flight.landingAirport.name }}),
+              </template>
               čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
               <WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
             </div>
@@ -98,8 +130,8 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <router-link
-              v-if="copilotDetailRoute"
-              :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
+              v-if="copilot.isPublic"
+              :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, copilotSlug: copilot.urlSlug, id: copilot.id}}"
             >
               {{ copilot.name }}
             </router-link>

src/components/flights/FlightTrackMap.vue

@@ -7,16 +7,20 @@ const props = defineProps({
   flight: {
     type: Object,
     required: true
+  },
+  photos: {
+    type: Array,
+    required: false,
   }
 })
 
 
-const mapPhotos = computed(() => props.flight.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const mapPhotos = computed(() => props.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
 const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
 
 const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
 const pointsOfInterests = computed(() => mapMarkers
-  .filter(marker => marker.gpsLatitude && marker.gpsLongitude)
+  .filter(marker => marker && marker.gpsLatitude && marker.gpsLongitude)
   .map(
     marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
   ));
@@ -97,16 +101,17 @@ const chartOptions = {
 </script>
 
 <template>
-  <MapWithMarkers
-    v-if="displayMap"
-    style="width: 100%; height: 500px;"
-    :gpx-track="flight.gpxTrack?.coordinates || []"
-    :markers="pointsOfInterests"
-    :highlight-position="currentPositionMarker"
-    :photos="mapPhotos"
-  />
-
-  <Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
-  <Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
+  <q-no-ssr>
+    <MapWithMarkers
+      v-if="displayMap"
+      style="width: 100%; height: 500px;"
+      :gpx-track="flight.gpxTrack?.coordinates || []"
+      :markers="pointsOfInterests"
+      :highlight-position="currentPositionMarker"
+      :photos="mapPhotos"
+    />
 
+    <Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
+    <Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
+  </q-no-ssr>
 </template>

src/components/flights/FlightsList.vue

@@ -2,63 +2,117 @@
 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: {
     type: Array,
     required: true
   },
-  routeDetail: {
-    type: Object,
-    required: false,
-    default: () => ({name: 'flightDetail', params: {}})
+  public: {
+    type: Boolean,
+    required: true
   },
-  displayVisibilityInfo: {
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
     type: Boolean,
     required: false,
-    default: true
+    default: false
   }
 });
 
+const routeDetail = (flight) => {
+  if (props.public)
+    return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
+  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="{name: routeDetail.name, params: {...routeDetail.params, id: flight.id}}"
-    >
-      <q-item-section avatar>
-        <AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.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-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
+          </q-item-section>
+          <q-item-section>
+            <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
 
-        <div class="text-secondary" v-if="flight.copilot">
-          <q-icon name="person"/>
-          {{ flight.copilot.name }}
-        </div>
+            <div class="text-secondary" v-if="props.public">
+              <q-icon name="support_agent"/>
+              @{{ flight.pilot.publicUsername }}
+            </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.copilots">
+              <q-icon name="person"/>
+              {{ flight.pilot.name }}
+              {{ flight.copilots }}
+            </div>
 
-        <div class="text-secondary" v-if="flight.event">
-          <q-icon name="event" />
-          {{ flight.event.name }}
-        </div>
-      </q-item-section>
+            <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>
+
+          <q-item-section side top v-if="!props.public">
+            <!-- Zobraz jen v adminu -->
+            <q-icon name="visibility" v-if="flight.isPublic"/>
+
+            <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
+              <q-tooltip>
+                Let je sice publikovaný, nemá ale nastavenou URL adresu!
+              </q-tooltip>
+            </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 && displayVisibilityInfo">
-        <q-icon name="visibility"></q-icon>
-      </q-item-section>
-    </q-item>
-  </q-list>
 </template>

src/components/flights/form/FlightFormBasic.vue

@@ -6,7 +6,6 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
-import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
   aircrafts: {
@@ -21,7 +20,11 @@ const props = defineProps({
     type: Object,
     required: false
   },
-  isRequestPending,
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });
 
 const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;
@@ -29,8 +32,13 @@ const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;
 const airports = computed(() => props.airports.map(a => ({id: a.id, name: airportName(a)})));
 const aircrafts = computed(() => props.aircrafts.map(a => ({id: a.id, name: a.callSign})));
 
+
+const manualInput = ref(false);
+const allowGPXUpload = ref(true);
+
 const formData = reactive({
   aircraft: null,
+  gpxTrackFile: null,
   takeoffAirport: null,
   landingAirport: null,
   takeoffDatetime: null,
@@ -49,8 +57,14 @@ watch(() => props.flight, (newVal) => {
   if (newVal) {
     setDefaultData(formData, newVal);
     formData.aircraft = {id: newVal.aircraft.id, name: newVal.aircraft.callSign};
-    formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: airportName(newVal.takeoffAirport)}
-    formData.landingAirport = {id: newVal.landingAirport.id, name: airportName(newVal.landingAirport)}
+
+    if (newVal.takeoffAirport)
+      formData.takeoffAirport = {id: newVal.takeoffAirport.id, name: airportName(newVal.takeoffAirport)}
+
+    if (newVal.landingAirport)
+      formData.landingAirport = {id: newVal.landingAirport.id, name: airportName(newVal.landingAirport)}
+    allowGPXUpload.value = false;
+    manualInput.value = true;
   }
 }, {immediate: true});
 watch(() => formData.takeoffDatetime, () => {
@@ -64,79 +78,75 @@ watch(() => formData.takeoffAirport, () => {
     formData.landingAirport = {...formData.takeoffAirport};
   }
 });
+
 </script>
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
     <div class="row">
       <div class="col">
-        <q-card class="q-my-sm">
-          <q-card-section>
-            <div class="text-h6">Vyber letadlo</div>
-          </q-card-section>
-
-          <q-card-section>
-            <ComboboxInput
-              :rules="rules.aircraft"
-              v-bind="commonProps"
-              :options="aircrafts"
-              v-model="formData.aircraft"
-              label="Letadlo"
-            />
-          </q-card-section>
-        </q-card>
+        <ComboboxInput
+          :rules="rules.aircraft"
+          v-bind="commonProps"
+          :options="aircrafts"
+          v-model="formData.aircraft"
+          label="Letadlo"
+        />
       </div>
     </div>
-    <div class="row">
-      <div class="col col-12 col-md-6">
-        <q-card class="q-mr-md-sm q-my-sm">
-          <q-card-section>
-            <div class="text-h6">Vzlet</div>
-          </q-card-section>
-          <q-card-section>
-            <DatetimePicker
-              v-model="formData.takeoffDatetime"
-              :rules="rules.takeoffDatetime"
-              label="Datum a čas vzletu: "
-              v-bind="commonProps"
-            />
 
-            <ComboboxInput
-              :options="airports"
-              :rules="rules.takeoffAirport"
-              v-model="formData.takeoffAirport"
-              label="Letiště vzletu"
-              v-bind="commonProps"
-            />
-          </q-card-section>
-        </q-card>
-      </div>
+    <div class="row" v-if="!manualInput">
+      <div class="col">
+        <div class="text-h6">Mám trasu v GPX, chci importovat data</div>
+        <q-file v-bind="commonProps" v-model="formData.gpxTrackFile" label="Trasa v GPX" hint="Z trasy se načtou letiště a časy vzletu a přistání. Tyto hodnoty je možné později upravit."/>
 
-      <div class="col col-12 col-md-6">
-
-        <q-card class="q-ml-md-sm q-my-sm">
-          <q-card-section>
-            <div class="text-h6">Přistání</div>
-          </q-card-section>
-          <q-card-section>
-            <DatetimePicker
-              v-model="formData.landingDatetime"
-              :min-date="formData.takeoffDatetime"
-              :rules="rules.landingDatetime"
-              label="Datum a čas přistání"
-              v-bind="commonProps"
-            />
-
-            <ComboboxInput
-              :options="airports"
-              v-model="formData.landingAirport"
-              label="Letiště přistání"
-              v-bind="commonProps"
-              :rules="rules.landingAirport"
-            />
-          </q-card-section>
-        </q-card>
+        <div class="text-center">
+          <q-btn @click="manualInput = true" rounded flat>Zadat informace ručně</q-btn>
+        </div>
       </div>
     </div>
+
+    <div class="row" v-if="manualInput">
+      <div class="col col-12 col-md-6 q-pr-md-sm">
+        <div class="text-h6">Vzlet</div>
+        <DatetimePicker
+          v-model="formData.takeoffDatetime"
+          :rules="rules.takeoffDatetime"
+          label="Datum a čas vzletu: "
+          v-bind="commonProps"
+        />
+
+        <ComboboxInput
+          :options="airports"
+          :rules="rules.takeoffAirport"
+          v-model="formData.takeoffAirport"
+          label="Letiště vzletu"
+          v-bind="commonProps"
+        />
+      </div>
+
+      <div class="col col-12 col-md-6 q-pl-md-sm">
+        <div class="text-h6">Přistání</div>
+        <DatetimePicker
+          v-model="formData.landingDatetime"
+          :min-date="formData.takeoffDatetime"
+          :rules="rules.landingDatetime"
+          label="Datum a čas přistání"
+          v-bind="commonProps"
+        />
+
+        <ComboboxInput
+          :options="airports"
+          v-model="formData.landingAirport"
+          label="Letiště přistání"
+          v-bind="commonProps"
+          :rules="rules.landingAirport"
+        />
+      </div>
+      <div class="col-12 text-center" v-if="allowGPXUpload">
+        <q-btn @click="manualInput = false" rounded flat>Mám GPX, načíst informace z trasy</q-btn>
+      </div>
+    </div>
+
   </FormWrapper>
 </template>

src/components/flights/form/FlightFormNotes.vue

@@ -1,10 +1,13 @@
 <script setup>
-import {onMounted, reactive, ref, watch} from "vue";
+import {reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import {commonProps} from "src/composables/inputs";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import SlugInput from "components/inputs/SlugInput.vue";
+import {storeToRefs} from "pinia";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 const props = defineProps({
   flight: {
@@ -14,15 +17,26 @@ const props = defineProps({
   events: {
     type: Array,
     required: false,
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
   }
 });
 
 const formData = reactive({
   name: "",
   event: null,
-  description: ""
+  description: "",
+  debriefingNotes: "",
+  urlSlug: "",
+  isPublic: null
 })
 
+
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
+
 watch(() => props.flight, (newVal) => {
   if (newVal) {
     setDefaultData(formData, newVal);
@@ -33,12 +47,40 @@ watch(() => props.flight, (newVal) => {
   }
 }, {immediate: true});
 
+const descriptionTab = ref("description");
 </script>
 
 <template>
-  <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
     <ComboboxInput :options="events" v-if="events" v-model="formData.event" label="Událost" v-bind="commonProps"/>
     <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
-    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
+    <template v-if="loggedUser?.publicUsername">
+      <SlugInput
+        v-if="formData.isPublic"
+        v-bind="commonProps"
+        v-model="formData.urlSlug"
+        label="URL"
+        :url="`/${loggedUser.publicUsername}/`"
+        :slug-source="formData.name"
+      />
+      <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+    </template>
+
+    <q-tabs v-model="descriptionTab" active-color="primary">
+      <q-tab name="description">Popis</q-tab>
+      <q-tab name="debriefing">Debriefing (soukromé poznámky)</q-tab>
+    </q-tabs>
+    <q-tab-panels  v-model="descriptionTab">
+      <q-tab-panel name="description">
+
+
+
+        <RichTextEditor v-model="formData.description" v-bind="commonProps" height="30vh"/>
+      </q-tab-panel>
+      <q-tab-panel name="debriefing">
+
+        <RichTextEditor v-model="formData.debriefingNotes" v-bind="commonProps" height="20vh"/>
+      </q-tab-panel>
+    </q-tab-panels>
   </FormWrapper>
 </template>

src/components/flights/form/FlightFormTrack.vue

@@ -3,6 +3,7 @@ import FormWrapper from "components/FormWrapper.vue";
 import {reactive, ref, watch} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 
 const props = defineProps({
   modelValue: {
@@ -24,7 +25,7 @@ const props = defineProps({
 
 const formData = reactive({
   track: [],
-  gpxTrack: null
+  gpxTrackFile: null
 });
 const removeTrackItem = (index) => {
   formData.track.splice(index, 1);
@@ -51,6 +52,7 @@ watch(poi, (newVal) => {
 });
 
 watch(() => props.flight.track, (newVal) => {
+  formData.track = [];
   for (const i in newVal) {
     const trackInfo = newVal[i];
     const info = {landingDuration: trackInfo.landingDuration};
@@ -81,7 +83,7 @@ watch(() => props.flight.track, (newVal) => {
 
     <q-file
       accept=".gpx"
-      v-model="formData.gpxTrack"
+      v-model="formData.gpxTrackFile"
       v-bind="commonProps"
       label="Nahrát trasu v GPX"
       hint="Slouží pro vykreslení kompletní a detailní trasy"
@@ -91,6 +93,8 @@ watch(() => props.flight.track, (newVal) => {
       </template>
     </q-file>
 
+    <h5>Body na mapě</h5>
+
     <ComboboxInput
       v-bind="commonProps"
       v-model="poi"
@@ -103,7 +107,7 @@ watch(() => props.flight.track, (newVal) => {
     />
 
     <div class="row">
-      <div class="col">
+      <div class="col-12 col-md-8">
         <ComboboxInput
           v-bind="commonProps"
           v-model="airport"
@@ -111,16 +115,16 @@ watch(() => props.flight.track, (newVal) => {
           :options="airports"
           clearable
           label="Letiště pro mezipřistání"
-          hint="Nastav letiště a dobu mezispřistání"
+          hint="Nastav letiště a dobu mezipřistání"
         />
       </div>
-      <div class="col" v-if="airport?.name">
+      <div class="col-md-4 col-12" v-if="airport?.name">
         <q-input
           type="number"
           v-bind="commonProps"
           v-model="landingDuration"
           label="Délka mezipřistání (minuty)"
-          class="q-mx-md"
+          class="q-mx-md-md"
         >
           <template #after>
             <q-btn @click="addAirportToTrack(airport, landingDuration)" color="primary" icon="add"></q-btn>
@@ -136,7 +140,7 @@ watch(() => props.flight.track, (newVal) => {
           <q-avatar color="primary" text-color="white" icon="flight_takeoff"/>
         </q-item-section>
         <q-item-section>
-          {{ flight.takeoffAirport.name }}
+          {{ flight.takeoffAirport?.name || '???' }}
         </q-item-section>
       </q-item>
 
@@ -153,7 +157,11 @@ watch(() => props.flight.track, (newVal) => {
             </q-badge>
           </span>
           <span v-if="item.airport">
-            {{ item.airport.name }}, mezipřistání: {{ item.landingDuration }} minut
+            {{ item.airport.name }},
+            <template v-if="item.landingDuration > 0">
+                mezipřistání {{ minutesToHumanReadable(item.landingDuration) }}
+              </template>
+              <template v-else>touch and go</template>
           </span>
 
         </q-item-section>
@@ -167,7 +175,7 @@ watch(() => props.flight.track, (newVal) => {
           <q-avatar color="primary" text-color="white" icon="flight_land"/>
         </q-item-section>
         <q-item-section>
-          {{ flight.landingAirport.name }}
+          {{ flight.landingAirport?.name || '???' }}
         </q-item-section>
       </q-item>
     </q-list>

src/components/flights/skeletons/FlightDetailSkeleton.vue

@@ -25,7 +25,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-        <BasicTextSkeleton :lines="4" :paragraphs="2" />
+        <BasicTextSkeleton :lines="7" :paragraphs="2" />
       </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>

src/components/flights/skeletons/FlightEditCopilotSkeleton.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  edit copilot skeleton
+</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 class="q-mx-md q-my-md">
-    <q-item v-for="i in randomInt(5, 10)" :key="i" ripple>
+  <q-list bordered separator>
+    <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,10 +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,33 @@
+<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, flightSlug: flight.urlSlug}}"
+    >
+      {{ 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,48 @@
+<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>
+  <div class="bg-blue-1 q-py-lg">
+    <h3 class="text-center">Poslední lety</h3>
+
+    <q-carousel
+      v-model="slide"
+      swipeable
+      animated
+      control-color="primary"
+      navigation
+      padding
+      arrows
+      height="500px"
+      class="bg-blue-1 text-white"
+    >
+      <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"
+          style="max-width: 1000px;"
+          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>
+  </div>
+</template>

src/components/indexPage/IntroBlock.vue

@@ -0,0 +1,29 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="row q-mx-md">
+    <div class="col-12 col-md-6 col-lg-6 self-center info-box">
+      <div class="text-h3 text-center q-my-lg">Fotogalerie ze vzduchu</div>
+
+      <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 class="col-12 col-md-6 col-lg-6 text-center">
+      <div>
+        <q-img src="hp/mobile-preview-200.webp" height="401px" width="200px" class="q-ma-lg" fit="contain" alt="Nahled aplikace"/>
+        <q-img src="hp/desktop-preview-350.webp" height="310px" width="350px" fit="contain" class="xs-hide sm-hide" alt="Nahled aplikace"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.info-box {
+  font-size: 150%;
+}
+</style>

src/components/indexPage/TimelineDescription.vue

@@ -0,0 +1,37 @@
+<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="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="Vyber a nahraj fotky">
+      <div>A pokud mají v sobě uloženou informaci o poloze, p
+        Máš nějaké fotky z letu? Nahraj je ke svému letu! Polétání.cz ti zobrazí i místo kde fotka vznikla.
+      </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/inputs/CopyLinkButton.vue

@@ -0,0 +1,32 @@
+<script setup>
+import {copyToClipboard, useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+import {useRouter} from "vue-router";
+
+const props = defineProps({
+  route: {
+    type: Object,
+    required: true
+  }
+})
+
+const $router = useRouter();
+const $q = useQuasar();
+
+
+const copyLinkToClipboard = () => {
+  const url = $router.resolve(props.route);
+  copyToClipboard(window.location.origin + url.href).then(() => {
+    $q.notify(successObject("Odkaz zkopírován"))
+  });
+};
+</script>
+
+<template>
+  <q-btn
+    icon="link"
+    @click="copyLinkToClipboard()"
+    flat
+    label="Získat odkaz"
+  />
+</template>

src/components/inputs/PublishButton.vue

@@ -0,0 +1,64 @@
+<script setup>
+import {useQuasar} from "quasar";
+import {ref, watch} from "vue";
+import {slugify} from "src/composables/slugify";
+
+const props = defineProps({
+  requireUrlSlug: {
+    type: Boolean,
+    required: true
+  },
+  isPublic: {
+    type: Boolean,
+    required: true
+  },
+  urlPrefix: {
+    type: String,
+    required: true
+  }
+});
+
+const emits = defineEmits(["changeVisibility"]);
+
+const $q = useQuasar();
+const urlSlugModel = ref("");
+watch(() => urlSlugModel.value, (newVal) => {
+  const slug = slugify(newVal);
+
+  if (urlSlugModel.value !== slug)
+    urlSlugModel.value = slug;
+})
+const inputPrompt = () =>
+  $q.dialog({
+    title: 'URL',
+    message: props.urlPrefix+"...",
+    prompt: {
+      model: urlSlugModel,
+      placeholder: "URL fragment",
+      isValid: val => val.length > 1,
+      type: 'text' // optional
+    },
+    cancel: true,
+    persistent: true
+  })
+
+
+const togglePublicVisibility = () => {
+  if (props.requireUrlSlug && !props.isPublic) {
+    inputPrompt().onOk((data) => {
+      emits("changeVisibility", {isPublic: !props.isPublic, urlSlug: slugify(urlSlugModel.value)});
+    })
+  } else {
+    emits("changeVisibility", {isPublic: !props.isPublic});
+  }
+}
+</script>
+
+<template>
+  <q-btn
+    @click="togglePublicVisibility"
+    :icon="isPublic ? 'visibility_off' : 'visibility'"
+    flat
+    :label="isPublic ? 'Skrýt' : 'Zveřejnit'"
+  />
+</template>

src/components/inputs/RichTextEditor.vue

@@ -56,5 +56,12 @@ const toolbar = [
 </script>
 
 <template>
-  <q-editor v-model="content" :definitions="definitions" :toolbar="toolbar" :height="height" :label="label" :rules="rules"/>
+  <q-editor
+    v-model="content"
+    :definitions="definitions"
+    :toolbar="toolbar"
+    :height="height"
+    v-bind="$attrs"
+    :rules="rules"
+  />
 </template>

src/components/inputs/SlugInput.vue

@@ -0,0 +1,62 @@
+<script setup>
+import {ref, watch} from "vue";
+import {slugify} from "src/composables/slugify";
+
+const props = defineProps({
+  modelValue: {
+    type: String
+  },
+  slugSource: {
+    type: String,
+    required: false,
+  },
+  url : {
+    type: String,
+    required: false,
+    default: null
+  },
+  label: {
+    type: String,
+    required: false,
+    default: "URL"
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => ([])
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+const model = ref("");
+
+const emitValue = (val) => {
+  emit("update:modelValue", val);
+}
+watch(() => model.value, (newVal) => {
+  model.value = slugify(newVal);
+  emitValue(newVal);
+})
+
+
+
+watch(() => props.slugSource, (newVal, oldVal) => {
+  if (model.value === "" || slugify(oldVal) === model.value) {
+    // pokud puvodni vychozi hodnota je stejna jako aktualne nastaveny slug, zmenime model
+    model.value = slugify(newVal);
+  }
+}, {immediate: true});
+</script>
+
+<template>
+  <q-input
+      v-model="model"
+      :label="label"
+      :rules="rules"
+      hint="Veřejná URL adresa"
+   >
+      <template #prepend>
+        {{ url }}
+      </template>
+    </q-input>
+</template>

src/components/navigation/BreadcrumbsNavigation.vue

@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <q-breadcrumbs>
+  <q-breadcrumbs class="q-mx-md q-my-md">
     <q-breadcrumbs-el v-for="item in items" :key="item.label" :to="item.to"> {{ item.label }} </q-breadcrumbs-el>
   </q-breadcrumbs>
 </template>

src/components/navigation/BreadcrumbsSkeleton.vue

@@ -0,0 +1,14 @@
+<script setup>
+
+import {randomInt} from "src/composables/random";
+</script>
+
+<template>
+
+  <q-breadcrumbs class="q-mx-md q-my-md">
+    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(100, 190)}px`" type="rect" /> </q-breadcrumbs-el>
+    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(200, 280)}px`" type="rect" /> </q-breadcrumbs-el>
+  </q-breadcrumbs>
+
+
+</template>

src/components/navigation/CommonEditSwitcher.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  route: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <q-tabs active-color="primary" class="q-mb-lg">
+    <q-route-tab
+        icon="edit"
+        label="Informace"
+        replace
+        :to="{name: route.name, params: {...route.params, step: 'info'}}"
+        exact
+    />
+    <q-route-tab
+        icon="add_a_photo"
+        label="Fotky"
+        replace
+        :to="{name: route.name, params: {...route.params, step: 'photo'}}"
+        exact100
+    />
+  </q-tabs>
+</template>

src/components/organizations/OrganizationForm.vue

@@ -4,15 +4,17 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
-import RichTextEditor from "components/inputs/RichTextEditor.vue";
 
 const props = defineProps({
   organization: {
     type: Object
   },
-  isRequestPending
+  isRequestPending: {
+  type: Boolean,
+  required: false,
+  default: false,
+}
 })
 
 const formData = reactive({

src/components/photos/BatchPhotoFormDialog.vue

@@ -12,13 +12,21 @@ const props = defineProps({
   },
   locations: {
     type: Array
-  }
+  },
+  aircrafts: {
+    type: Array
+  },
+  copilots: {
+    type: Array
+  },
 });
 
 const formData = ref({
   name: "",
   description: "",
   pointOfInterest: null,
+  copilots: [],
+  aircraftId: null,
   photoIds: []
 });
 
@@ -34,23 +42,41 @@ const setup = () => {
 <template>
   <DialogWrapper :formData="formData" @show="setup()">
     <q-card-section class="text-center">
-<!--      <q-scroll-area style="min-height: 80px; max-height: 150px">-->
-        <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
-<!--        {{ photos }}-->
-<!--      </q-scroll-area>-->
+      <q-img :src="photo.thumbnailUrl" width="80px" class="q-ma-sm" v-for="photo in photos" :key="photo.thumbnailUrl"/>
     </q-card-section>
     <q-card-section>
       <FormWrapper :save-button="false">
-        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
-        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
-
         <ComboboxInput
             :options="locations"
             v-bind="commonProps"
             v-model="formData.pointOfInterest"
             :enable-new-values="false"
-            label="POI"
+            label="Místo"
         />
+
+        <q-select
+            v-if="copilots.length > 0"
+            :options="copilots"
+            v-model="formData.copilots"
+            v-bind="commonProps"
+            label="Kopiloti"
+            option-label="name"
+            option-value="id"
+            multiple
+        />
+
+        <q-select
+            :options="aircrafts"
+            v-model="formData.aircraftId"
+            v-bind="commonProps"
+            label="Letadlo"
+            option-label="callSign"
+            option-value="id"
+            emit-value
+            map-options
+        />
+        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
+        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>
     </q-card-section>
   </DialogWrapper>

src/components/photos/PhotoFormDialog.vue

@@ -12,6 +12,12 @@ const props = defineProps({
   },
   locations: {
     type: Array
+  },
+  aircrafts: {
+    type: Array
+  },
+  copilots: {
+    type: Array
   }
 });
 
@@ -20,7 +26,8 @@ const formData = ref({
   name: "",
   description: "",
   pointOfInterest: null,
-  isFlightCover: false
+  copilots: [],
+  aircraftId: null,
 });
 
 const setup = (() => {
@@ -33,17 +40,37 @@ const setup = (() => {
     <q-img :src="photo.thumbnailUrl"/>
     <q-card-section>
       <FormWrapper :save-button="false">
-        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
-        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
-
         <ComboboxInput
           :options="locations"
           v-bind="commonProps"
           v-model="formData.pointOfInterest"
-          label="POI"
+          label="Místo"
         />
 
-        <q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?"/>
+        <q-select
+          v-if="copilots.length > 0"
+          :options="copilots"
+          v-model="formData.copilots"
+          v-bind="commonProps"
+          label="Kopiloti"
+          option-label="name"
+          option-value="id"
+          multiple
+        />
+
+        <q-select
+          :options="aircrafts"
+          v-model="formData.aircraftId"
+          v-bind="commonProps"
+          label="Letadlo"
+          option-label="callSign"
+          option-value="id"
+          emit-value
+          map-options
+          />
+
+        <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
+        <q-input type="textarea" v-model="formData.description" label="Popis" v-bind="commonProps"/>
       </FormWrapper>
     </q-card-section>
   </DialogWrapper>

src/components/photos/PhotoGallery.vue

@@ -1,21 +1,19 @@
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue";
-import PhotoSwipeLightbox from "photoswipe/lightbox";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import 'photoswipe/style.css';
 import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
-import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin";
-import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import {formatDatetime} from "src/composables/datetimeUtils";
-import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {roundWithPrecision} from "../../composables/utils";
+import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm";
 import PhotoCaption from "components/photos/PhotoCaption.vue";
-
+import PhotoSwipeLightbox from "../../../node_modules/photoswipe/dist/photoswipe-lightbox.esm"
+import PhotoSwipe from "../../../node_modules/photoswipe/dist/photoswipe.esm"
+import {useRoute, useRouter} from "vue-router";
+import {usePhotosStore} from "stores/Photos";
 
 const props = defineProps({
   galleryId: {
     type: String,
     required: false,
-    default: () => "randomGalleryId"
+    default: () => "photogallery"
   },
   photos: {
     type: Array,
@@ -23,47 +21,79 @@ const props = defineProps({
   }
 })
 
-let $lightbox = null;
 
+const route = useRoute();
+const $router = useRouter();
+
+let $lightbox = ref(null);
+
+const initLightbox = () => {
+  if ($lightbox.value && $lightbox.value.pswp) {
+    // lightbox already initialized
+    return
+  }
+
+  $lightbox.value = new PhotoSwipeLightbox({
+    gallery: '#' + props.galleryId,
+    children: 'a',
+    pswpModule: () => PhotoSwipe,
+  });
+
+  let captionPlugin = new PhotoSwipeDynamicCaption($lightbox.value, {
+    type: 'auto',
+  });
+
+  $lightbox.value.init();
+}
 
 onMounted(() => {
-  if (!$lightbox) {
-    $lightbox = new PhotoSwipeLightbox({
-      gallery: '#' + props.galleryId,
-      children: 'a',
-      pswpModule: () => import('photoswipe'),
-    });
+  initLightbox();
 
-    let captionPlugin = new PhotoSwipeDynamicCaption($lightbox, {
-      type: 'auto',
-    });
+  // todo: tohle nefunguje, sice se galerie zavre, ale i tak se user presmeruje na predchozi stranku
+  window.onpopstate = function (e) {
+    if (!$lightbox.value || !$lightbox.value.pswp) {
+      initLightbox();
+    }
 
-    $lightbox.init();
-  }
+    if ($lightbox.value && $lightbox.value.pswp)
+      $lightbox.value.pswp.close();
+  };
 });
+
 onUnmounted(() => {
-  if ($lightbox) {
-    $lightbox.destroy();
-    $lightbox = null;
+  if ($lightbox.value) {
+    $lightbox.value.destroy();
+    $lightbox.value = null;
   }
 });
+
+const openedPhoto = computed(() => usePhotosStore().openedPhoto);
+watch(() => [openedPhoto.value, $lightbox.value], () => {
+  if (!$lightbox.value || !openedPhoto.value) return;
+
+  const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
+  if (idx >= 0) {
+    $lightbox.value.loadAndOpen(idx);
+    usePhotosStore().setOpenedPhoto(null);
+  }
+}, {immediate: true})
 </script>
 
 <template>
   <div :id="galleryId" class="row">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="photo in photos" :key="photo.id">
       <a
-          :href="photo.url"
-          :data-pswp-width="photo.width"
-          :data-pswp-height="photo.height"
-          target="_blank"
-          rel="noreferrer"
+        :href="photo.url"
+        :data-pswp-width="photo.width"
+        :data-pswp-height="photo.height"
+        target="_blank"
+        rel="noreferrer"
       >
         <q-img
-            spinner-color="primary"
-            class="rounded-borders"
-            :src="photo.thumbnailUrl"
-            alt=""
+          spinner-color="primary"
+          class="rounded-borders"
+          :src="photo.thumbnailUrl"
+          alt=""
         >
           <div class="absolute-bottom" v-if="photo.name !== ''">
             {{ photo.name }}

src/components/photos/PhotosEditorList.vue

@@ -3,24 +3,29 @@ import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useQuasar} from "quasar";
 import {confirmObject} from "src/composables/dialog";
 
-const $q = useQuasar();
-
-
 const props = defineProps({
   photos: {
     type: Array
   },
-});
-
-const batchEdit = ref({});
-
-onMounted(() => {
-  for (const photo of props.photos) {
-    batchEdit.value[photo.id] = false;
+  titlePhoto: {
+    type: Object,
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 });
 
-const emits = defineEmits(["edit", "delete", "batch-edit", "batch-rotate"])
+const $q = useQuasar();
+
+
+const batchEdit = ref({});
+for (const photo of props.photos) {
+  batchEdit.value[photo.id] = false;
+}
+
+const emits = defineEmits(["edit", "delete", "set-title-photo", "batch-edit", "batch-rotate"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -108,13 +113,36 @@ const batchOptionsProps = computed(() => ({
   class: "q-ml-lg",
   disable: !isBatchEditAllowed.value
 }));
+
+const setFlightCover = (titlePhoto) => {
+  emits("set-title-photo", titlePhoto);
+}
+
+const openPhoto = ref(false);
+const photo = ref(null);
+const showLarge = (displayedPhoto) => {
+  photo.value = displayedPhoto;
+  openPhoto.value = true;
+}
 </script>
 
 <template>
-  <div class="row" style="margin-bottom: 150px">
+  <div class="row">
     <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
         <q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
+          <div class="absolute-top bg-transparent flex">
+            <div class="col-grow">
+              <q-btn icon="fullscreen" color="grey-6" round @click.stop.prevent="showLarge(photo)"/>
+            </div>
+            <q-btn
+                icon="star"
+                :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+                round
+                @click.stop.prevent="setFlightCover(photo)"
+            />
+          </div>
+
           <div class="absolute-bottom" v-if="photo.name !== '' || photo.description !== ''">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -125,28 +153,38 @@ const batchOptionsProps = computed(() => ({
           </div>
         </q-img>
 
-        <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}">
+        <q-card-actions align="right" :class="{'bg-primary': batchEdit[photo.id], 'text-white': batchEdit[photo.id]}" v-if="showActions">
           <div class="col-grow">
             <q-checkbox v-model="batchEdit[photo.id]"/>
-            <q-icon name="star" v-if="photo.isFlightCover" color="red"/>
+            <q-icon name="flight" v-if="photo.aircraftId" size="xs" color="grey-5"/>
+            <q-icon name="person" v-if="photo.copilots.length > 0" size="xs" color="grey-5"/>
+            <q-icon name="place" v-if="photo.pointOfInterest" size="xs" color="grey-5"/>
           </div>
-          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
-          <q-btn flat icon="info" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"/>
+          <q-btn flat icon="tune" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}"/>
           <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"/>
         </q-card-actions>
       </q-card>
     </div>
   </div>
 
-  <q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0">
+  <q-page-sticky :offset="[50, 50]" position="bottom" v-if="photos.length > 0 && showActions">
     <q-card>
       <q-card-actions>
         <q-checkbox v-model="checkAll" label="Vybrat vše"/>
-        <q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
+        <q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
         <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
         <q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
         <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
       </q-card-actions>
     </q-card>
   </q-page-sticky>
+
+  <q-dialog v-model="openPhoto" full-width>
+    <q-img :src="photo.url">
+      <div class="absolute-top bg-transparent text-right">
+          <q-btn icon="close" round color="primary" @click="openPhoto = false" />
+      </div>
+    </q-img>
+  </q-dialog>
 </template>

src/components/photos/TitlePhotoWithGallery.vue

@@ -0,0 +1,31 @@
+<script setup>
+import {useRoute, useRouter} from "vue-router";
+import {usePhotosStore} from "stores/Photos";
+
+const props = defineProps({
+  photo: {
+    type: Object,
+    required: true
+  },
+  title: {
+    type: String,
+    required: false
+  }
+});
+
+const route = useRoute();
+const $router = useRouter();
+const openGallery = (photo) => {
+  usePhotosStore().setOpenedPhoto(photo);
+}
+</script>
+
+<template>
+  <q-img :src="photo.url" fit="cover" :ratio="4/3" @click="openGallery(photo)" class="cursor-pointer" v-if="photo">
+    <div class="absolute-bottom custom-caption" v-if="title && title !== ''">
+      <div class="text-h5">
+        {{ title }}
+      </div>
+    </div>
+  </q-img>
+</template>

src/components/photos/skeletons/PhotoGallerySkeleton.vue

@@ -0,0 +1,17 @@
+<script setup>
+const props = defineProps({
+  photos: {
+    type: Number,
+    required: false,
+    default: 9
+  }
+});
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-6 col-sm-4 col-md-4 col-lg-3 q-pa-sm" v-for="i in props.photos" :key="i">
+      <q-skeleton type="rect" width="100%" height="200px" />
+    </div>
+  </div>
+</template>

src/components/poi/POIForm.vue

@@ -8,6 +8,8 @@ import {errorObject} from "src/composables/dialog";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {useRouter} from "vue-router";
+import SlugInput from "components/inputs/SlugInput.vue";
 
 const props = defineProps({
   poi: {
@@ -23,7 +25,8 @@ const props = defineProps({
 })
 
 const formData = reactive({
-  name: null,
+  name: "",
+  urlSlug: "",
   description: "",
   gpsLatitude: null,
   gpsLongitude: null,
@@ -47,7 +50,8 @@ const resetMap = () => {
 }
 
 const rules = {
-  name: [isRequired]
+  name: [isRequired],
+  urlSlug: []
 }
 
 const zoom = ref(10);
@@ -72,6 +76,18 @@ const handlePositionNotFound = () => {
       </template>
     </q-input>
 
+    <SlugInput
+      v-if="formData.isPublic"
+      v-bind="commonProps"
+      v-model="formData.urlSlug"
+      label="URL"
+      url="/mista/"
+      :slug-source="formData.name"
+      :rules="rules.urlSlug"
+    />
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+
+
     <MapGPSInput
       v-if="poiNameForMap"
       :key="poiNameForMap"
@@ -82,10 +98,8 @@ const handlePositionNotFound = () => {
       @not-found="handlePositionNotFound"
     />
 
-    <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis" />
+    <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis"/>
 
-    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps" />
-
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps"/>
   </FormWrapper>
 </template>

src/components/poi/POIList.vue

@@ -1,27 +1,68 @@
 <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,
     required: false
+  },
+  public: {
+    type: Boolean,
+    required: true
+  },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
   }
-})
+});
+
+const getRoute = (item) => {
+  if (props.public)
+    return {name: "publicPOIDetail", params: {slug: item.urlSlug}}
+  else
+    return {name: "poiDetail", params: {id: item.id}}
+};
 </script>
 <template>
-  <q-list bordered separator>
-    <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="{name: 'poiDetail', params: {id: poi.id}}">
-      <q-item-section avatar>
-        <q-avatar :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/poi/skeletons/POIDetailSkeleton.vue

@@ -6,12 +6,12 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 <template>
   <div>
 
-    <BasicTextSkeleton :lines="randomInt(4, 8)" />
+    <BasicTextSkeleton :lines="4" />
 
     <q-skeleton type="rect" width="100%" class="q-my-lg" height="400px"/>
 
     <div class="row">
-      <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
+      <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="i in 6" :key="i">
         <q-card class="q-my-sm q-mx-sm">
           <q-skeleton type="rect" width="100%" height="200px"/>
         </q-card>

src/components/profile/ProfileForm.vue

@@ -4,7 +4,6 @@ import {commonProps} from "src/composables/inputs";
 import {reactive, watch} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
-import {isRequestPending} from "src/composables/form/props";
 
 const props = defineProps({
   user: {
@@ -12,7 +11,11 @@ const props = defineProps({
     required: false,
     default: null
   },
-  isRequestPending
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });
 const formData = reactive({
   avatarImage: null,
@@ -29,14 +32,14 @@ watch(() => props.user, (newVal) => {
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
 
     <div class="text-center">
-      <AvatarFromPhoto :size="200" :src="user.avatarImageUrl" v-if="user.avatarImageUrl"  />
+      <AvatarFromPhoto :size="200" :src="user.avatarImageUrl" v-if="user.avatarImageUrl"/>
     </div>
 
     <q-file
-      v-model="formData.avatarImage"
-      accept="image/jpeg"
-      v-bind="commonProps"
-      label="Nahrát avatar"
+        v-model="formData.avatarImage"
+        accept="image/jpeg"
+        v-bind="commonProps"
+        label="Nahrát avatar"
     >
       <template #prepend>
         <q-icon name="upload"/>
@@ -48,9 +51,9 @@ watch(() => props.user, (newVal) => {
     </div>
 
     <q-file
-      v-model="formData.titleImage"
-      accept="image/jpeg"
-      v-bind="commonProps" label="Nahrát titulní fotku"
+        v-model="formData.titleImage"
+        accept="image/jpeg"
+        v-bind="commonProps" label="Nahrát titulní fotku"
     >
       <template #prepend>
         <q-icon name="upload"/>

src/components/profile/PublicProfileInfo.vue

@@ -1,12 +1,13 @@
 <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";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {isRequestPending} from "src/composables/form/props";
+import {slugify} from "src/composables/slugify";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 
 const props = defineProps({
   user: {
@@ -14,8 +15,11 @@ const props = defineProps({
     required: false,
     default: null
   },
-    isRequestPending,
-
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })
 
 const formData = reactive({
@@ -26,22 +30,19 @@ const formData = reactive({
 watch(() => props.user, (newVal) => {
   setDefaultData(formData, props.user)
 }, {immediate: true});
+
+watch(() => formData.publicUsername, (newVal) => {
+  formData.publicUsername = slugify(newVal);
+}, {immediate: true})
+
 </script>
 
 <template>
   <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
 
-    <q-list>
-      <q-item v-if="user.publicUsername">
-        <router-link target="_blank" :to="{name: 'publicProfileDetail', params: {username: user.publicUsername}}">
-          @{{ user.publicUsername }}
-        </router-link>
-      </q-item>
-      <q-item v-else>
-        <q-icon name="" color="red"/>
-        Nastav si veřejné uživatelské jméno pro zpřístupnění profilu a sdílení záznamů s ostatními
-      </q-item>
-    </q-list>
+    <BasicInfoBanner style="padding: 0 !important" v-if="formData.publicUsername === ''">
+      Nastav si veřejné uživatelské jméno pro zpřístupnění profilu a sdílení záznamů s ostatními
+    </BasicInfoBanner>
 
     <q-input v-model="formData.name" label="Jméno" v-bind="commonProps"/>
     <q-input

src/components/profile/skeletons/PublicProfileSkeleton.vue

@@ -15,7 +15,7 @@ import {randomInt} from "src/composables/random";
         <q-skeleton class="inline-block" type="text" height="40px" :width="`${randomInt(60, 90)}%`"/>
       </div>
       <div class="q-mt-lg">
-        <BasicTextSkeleton :lines="randomInt(1, 5)" :paragraphs="1"/>
+        <BasicTextSkeleton :lines="3" :paragraphs="1"/>
       </div>
     </q-card-section>
   </q-card>

src/composables/flight.js

@@ -8,6 +8,6 @@ export const flightName = (flight) => {
     const track = flight.track ? flight.track.map(t => t.pointOfInterest?.name || t.airport?.icaoCode) : [];
     const trackStr = track.length > 0 ? ` - ${track.join(" - ")} - ` : ' - ';
 
-    return `${flight.takeoffAirport.icaoCode} ${trackStr} ${flight.landingAirport.icaoCode} (${date})`;
+    return `${flight.takeoffAirport?.icaoCode || '???'} ${trackStr} ${flight.landingAirport?.icaoCode || "???"} (${date})`;
   }
 }

src/composables/form/formHandling.js

@@ -1,3 +1,5 @@
+import {successObject} from "src/composables/dialog";
+
 export const setDefaultData = (formData, defaultData) => {
   const ignoredFields = ['__typename'];
 
@@ -10,3 +12,10 @@ export const setDefaultData = (formData, defaultData) => {
     formData[key] = defaultData[key];
   }
 }
+
+export const toggleVisibility = ({store, $q, object, variables, mutation = undefined}) => {
+  store.update(object.id, variables, mutation)
+    .then(() => {
+      $q.notify(successObject(variables.isPublic ? "Úspěšně publikováno" : "Úspěšně skryto"));
+    });
+}

src/composables/form/props.js

@@ -1,10 +0,0 @@
-export const isRequestPending = {
-  type: Boolean,
-  required: false,
-  default: false,
-};
-export const defaultValues = {
-  type: Object,
-  required: false,
-  default: () => ({})
-}