Fix nacitani vsech letu do profilove casti

bugfixing
Snad fix memory leaku kvuli axiosu
2026-09-14 12:28:50 +02:00 · 2026-09-14 11:08:22 +02:00 · 2026-09-14 10:48:55 +02:00 · 2026-01-26 16:24:15 +01:00 · 2026-01-19 22:26:14 +01:00 · 2026-01-06 22:02:24 +01:00
228 changed files with 10418 additions and 3831 deletions
@@ -28,3 +28,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 .vscode
+
+quasar.config.js.temporary.*
@@ -1,5 +1,5 @@
 # develop stage
-FROM node:20-alpine as develop-stage
+FROM node:22-alpine AS develop-stage

 ENV TZ=Europe/Prague

@@ -12,12 +12,15 @@ RUN npx update-browserslist-db@latest
 COPY . .

 # build stage
-FROM develop-stage as build-stage
+FROM develop-stage AS build-stage
 ENV NODE_ENV production
+ENV API_URL "https://api.poletani.cz"
+ENV GOOGLE_MAPS_API_KEY "AIzaSyAfTU1VntF9rp2D9TR4CFXIMALF5GLgsio"

 RUN quasar build -m ssr
+RUN cp /app/dist/ssr/server/server-entry.mjs /app/dist/ssr/server/server-entry.js

-FROM node:20-alpine as production-stage
+FROM node:22-alpine AS production-stage

 ENV NODE_ENV production
 ENV TZ=Europe/Prague
@@ -2,11 +2,6 @@ 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:3000
@@ -1,30 +1,5 @@
-
 services:
-#
-#  db:
-#    image: mariadb:10.11
-#    ports:
-#      - 3306:3306
-#    environment:
-#      - MYSQL_USER=root
-#      - MYSQL_DATABASE=ull_tracker
-#      - MARIADB_ALLOW_EMPTY_ROOT_PASSWORD=true
-#    volumes:
-#      - ./db/init.sql:/docker-entrypoint-initdb.d/init.sql:ro
-#      - db-data:/var/lib/mysql:rw
-#  api:
-#    build:
-#      context: ../api
-#    ports:
-#      - 8000:8000
-#    volumes:
-#      - ../api:/app
-#    environment:
-#      TZ: "Europe/Prague"
-##    command: ls -l /app
-
  app:
-    network_mode: host
    build:
      context: .
      target: "develop-stage"
@@ -32,18 +7,11 @@ services:
      - "9000:9000"
      - "9001:9100"
    volumes:
-      - ./src:/app/src
-      - ./public:/app/public
-      - ./node_modules:/app/node_modules:delegated
-    command: quasar dev -m ssr
+      - ./:/app
+    command: quasar dev # -m ssr
    environment:
-      API_URL: "http://localhost:8000"
-
-#  nginx:
-#    image:
-#
-#
-
+      API_URL: "http://127.0.0.1:8000"
+      GOOGLE_MAPS_API_KEY: "AIzaSyAfTU1VntF9rp2D9TR4CFXIMALF5GLgsio"

 volumes:
  db-data: { }
@@ -11,8 +11,24 @@
    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
    <link rel="icon" type="image/ico" href="favicon.ico">
+
+    <!-- Google Tag Manager -->
+    <script v-if="process.env.NODE_ENV === 'production'">
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','GTM-WC8BTPJ4');
+    </script>
+    <!-- End Google Tag Manager -->
  </head>
  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript v-if="process.env.NODE_ENV === 'production'">
+      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WC8BTPJ4" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
    <!-- quasar:entry-point -->
  </body>
 </html>
@@ -10,34 +10,49 @@
    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore"
  },
  "dependencies": {
-    "@apollo/client": "^3.7.14",
-    "@quasar/extras": "^1.15.11",
-    "@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",
-    "graphql": "16.6.0",
+    "@apollo/client": "^4.0.5",
+    "@quasar/extras": "^1.16.16",
+    "@sentry/browser": "^10.14.0",
+    "@sentry/integrations": "^7.114.0",
+    "@sentry/vue": "^10.14.0",
+    "@vue/apollo-composable": "4.2.2",
+    "@vue/apollo-option": "^4.2.0",
+    "apollo-upload-client": "^19.0.0",
+    "axios": "^1.7.9",
+    "chart.js": "^4.4.7",
+    "graphql": "16.11.0",
    "graphql-tag": "2.12.6",
-    "photoswipe": "^5.4.2",
+    "photoswipe": "^5.4.4",
    "photoswipe-dynamic-caption-plugin": "^1.2.7",
-    "pinia": "^2.0.33",
-    "quasar": "^2.14.1",
-    "vue": "^3.2.47",
-    "vue-chartjs": "^5.2.0",
+    "pinia": "^3.0.3",
+    "quasar": "2.18.2",
+    "rxjs": "^7.8.2",
+    "vue": "3.5.21",
+    "vue-chartjs": "^5.3.2",
    "vue-picture-cropper": "^0.7.0",
-    "vue-router": "^4.1.6",
-    "vue3-google-map": "^0.15.0"
+    "vue-router": "^4.5.0",
+    "vue3-google-map": "^0.24.1"
  },
  "devDependencies": {
-    "@quasar/app-vite": "^1.7.1",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "postcss": "^8.4.14",
-    "prettier": "^2.5.1"
+    "@quasar/app-vite": "2.4.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2"
  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
  "engines": {
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
@@ -1,27 +0,0 @@
-/* eslint-disable */
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  plugins: [
-    // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
-      overrideBrowserslist: [
-        'last 4 Chrome versions',
-        'last 4 Firefox versions',
-        'last 4 Edge versions',
-        'last 4 Safari versions',
-        'last 4 Android versions',
-        'last 4 ChromeAndroid versions',
-        'last 4 FirefoxAndroid versions',
-        'last 4 iOS versions'
-      ]
-    })
-
-    // https://github.com/elchininet/postcss-rtlcss
-    // If you want to support RTL css, then
-    // 1. yarn/npm install postcss-rtlcss
-    // 2. optionally set quasar.config.js > framework > lang to an RTL language
-    // 3. uncomment the following line:
-    // require('postcss-rtlcss')
-  ]
-}
@@ -3,3 +3,9 @@ apps:
      script: /app/index.js
      exec_mode: cluster
      instances: 3
+      # Pojistka proti bodu 1 (a podobným leakům): pokud paměť workeru
+      # přeroste limit, PM2 ho sám restartuje dřív, než dojde k OOM na
+      # celém VPS. Hodnotu je potřeba doladit dle reálné spotřeby jednoho
+      # SSR workeru po opravě bodu 1 (pm2 monit / pm2 list) - viz
+      # handoffs/05-pm2-docker-memory-limits.md.
+      max_memory_restart: '400M'
@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /login/
+Disallow: /moje/
@@ -8,8 +8,7 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js

-const {configure} = require('quasar/wrappers');
-
+import { configure } from 'quasar/wrappers'

 module.exports = configure(function (ctx) {
  return {
@@ -29,6 +28,13 @@ module.exports = configure(function (ctx) {
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli/boot-files
    boot: [
+      // client-only: Sentry browser SDK (browserTracingIntegration,
+      // replayIntegration) is DOM-only and has no business running per SSR
+      // request - server: false means Quasar excludes this boot file from
+      // the server bundle entirely (not just a runtime guard).
+      // See handoffs/04-sentry-ssr-guard.md.
+      {path: "sentry", server: false},
+      "cookies",
      "axios",
      "apollo",
      "chartJs"
@@ -55,13 +61,13 @@ module.exports = configure(function (ctx) {
    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      target: {
-        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
+        browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
        node: 'node20'
      },

      env: {
-        API_URL: ctx.dev ? 'http://localhost:8000' : 'https://api.poletani.cz',
-        GOOGLE_MAPS_API_KEY: "AIzaSyAfTU1VntF9rp2D9TR4CFXIMALF5GLgsio"
+        API_URL: process.env.API_URL,
+        GOOGLE_MAPS_API_KEY: process.env.GOOGLE_MAPS_API_KEY
      },

      vueRouterMode: 'history', // available values: 'hash', 'history'
@@ -79,8 +85,7 @@ module.exports = configure(function (ctx) {
      minify: true,
      // polyfillModulePreload: true,
      // distDir
-
-      // extendViteConf (viteConf) {},
+      // extendViteConf(viteConf, {isServer}) {},
      // viteVuePluginOptions: {},

      // vitePlugins: []
@@ -109,6 +114,7 @@ module.exports = configure(function (ctx) {

      // Quasar plugins
      plugins: [
+        'Cookies',
        'Dialog',
        'Meta',
        'Notify'
@@ -117,7 +123,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,7 +144,8 @@ module.exports = configure(function (ctx) {
      ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
      // will mess up SSR

-      extendSSRWebserverConf (esbuildConf) {},
+      extendSSRWebserverConf(esbuildConf) {
+      },
      // extendPackageJson (json) {},

      pwa: false,
@@ -1,10 +1,10 @@
-import { ssrMiddleware } from 'quasar/wrappers'
+import { defineSsrMiddleware } from '#q-app/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 }) => {
+export default defineSsrMiddleware(({ 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) => {
@@ -48,7 +48,10 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
          // Render Error Page on production or
          // create a route (/src/routes) for an error page and redirect to it
          res.status(500).send('500 | Internal Server Error')
-          // console.error(err.stack)
+
+          if (process.env.DEBUGGING) {
+            console.error(err.stack)
+          }
        }
      })
  })
@@ -12,21 +12,22 @@
 import express from 'express'
 import compression from 'compression'
 import {
-  ssrClose,
-  ssrCreate,
-  ssrListen,
-  ssrRenderPreloadTag,
-  ssrServeStaticContent
-} from 'quasar/wrappers'
+  defineSsrCreate,
+  defineSsrInjectDevMiddleware,
+  defineSsrListen,
+  defineSsrClose,
+  defineSsrServeStaticContent,
+  defineSsrRenderPreloadTag
+} from '#q-app/wrappers'

 /**
 * Create your webserver and return its instance.
 * If needed, prepare your webserver to receive
 * connect-like middlewares.
 *
- * Should NOT be async!
+ * Can be async: defineSsrCreate(async ({ ... }) => { ... })
 */
-export const create = ssrCreate((/* { ... } */) => {
+export const create = defineSsrCreate((/* { ... } */) => {
  const app = express()

  // attackers can use this header to detect apps running Express
@@ -42,6 +43,19 @@ export const create = ssrCreate((/* { ... } */) => {
  return app
 })

+/**
+ * Used by Quasar SSR dev server to inject middleware into the webserver.
+ * It uses it to handle Vite dev server, handle public paths, etc.
+ * The given middleware is compatible with `node:http`'s Server, Express, Connect, etc.
+ *
+ * Can be async: defineSsrInjectDevMiddleware(async ({ app }) => { ... })
+ */
+export const injectDevMiddleware = defineSsrInjectDevMiddleware(({ app }) => {
+  return (middleware) => {
+    app.use(middleware)
+  }
+})
+
 /**
 * You need to make the server listen to the indicated port
 * and return the listening instance or whatever you need to
@@ -52,10 +66,12 @@ export const create = ssrCreate((/* { ... } */) => {
 *
 * For production, you can instead export your
 * handler for serverless use or whatever else fits your needs.
+ *
+ * Can be async: defineSsrListen(async ({ app, devHttpsApp, port }) => { ... })
 */
-export const listen = ssrListen(async ({ app, port, isReady }) => {
-  await isReady()
-  return app.listen(port, () => {
+export const listen = defineSsrListen(({ app, devHttpsApp, port }) => {
+  const server = devHttpsApp || app
+  return server.listen(port, () => {
    if (process.env.PROD) {
      console.log('Server listening at port ' + port)
    }
@@ -70,9 +86,9 @@ export const listen = ssrListen(async ({ app, port, isReady }) => {
 * Should you need the result of the "listen()" call above,
 * you can use the "listenResult" param.
 *
- * Can be async.
+ * Can be async: defineSsrClose(async ({ listenResult }) => { ... })
 */
-export const close = ssrClose(({ listenResult }) => {
+export const close = defineSsrClose(({ listenResult }) => {
  return listenResult.close()
 })

@@ -81,14 +97,19 @@ const maxAge = process.env.DEV
  : 1000 * 60 * 60 * 24 * 30

 /**
- * Should return middleware that serves the indicated path
- * with static content.
+ * Should return a function that will be used to configure the webserver
+ * to serve static content at "urlPath" from "pathToServe" folder/file.
+ *
+ * Notice resolve.urlPath(urlPath) and resolve.public(pathToServe) usages.
+ *
+ * Can be async: defineSsrServeStaticContent(async ({ app, resolve }) => {
+ * Can return an async function: return async ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
 */
-export const serveStaticContent = ssrServeStaticContent((path, opts) => {
-  return express.static(path, {
-    maxAge,
-    ...opts
-  })
+export const serveStaticContent = defineSsrServeStaticContent(({ app, resolve }) => {
+  return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+    const serveFn = express.static(resolve.public(pathToServe), { maxAge, ...opts })
+    app.use(resolve.urlPath(urlPath), serveFn)
+  }
 })

 const jsRE = /\.js$/
@@ -103,13 +124,13 @@ const pngRE = /\.png$/
 * Should return a String with HTML output
 * (if any) for preloading indicated file
 */
-export const renderPreloadTag = ssrRenderPreloadTag((file) => {
+export const renderPreloadTag = defineSsrRenderPreloadTag((file/* , { ssrContext } */) => {
  if (jsRE.test(file) === true) {
    return `<link rel="modulepreload" href="${file}" crossorigin>`
  }

  if (cssRE.test(file) === true) {
-    return `<link rel="stylesheet" href="${file}">`
+    return `<link rel="stylesheet" href="${file}" crossorigin>`
  }

  if (woffRE.test(file) === true) {
@@ -121,15 +142,15 @@ export const renderPreloadTag = ssrRenderPreloadTag((file) => {
  }

  if (gifRE.test(file) === true) {
-    return `<link rel="preload" href="${file}" as="image" type="image/gif">`
+    return `<link rel="preload" href="${file}" as="image" type="image/gif" crossorigin>`
  }

  if (jpgRE.test(file) === true) {
-    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`
+    return `<link rel="preload" href="${file}" as="image" type="image/jpeg" crossorigin>`
  }

  if (pngRE.test(file) === true) {
-    return `<link rel="preload" href="${file}" as="image" type="image/png">`
+    return `<link rel="preload" href="${file}" as="image" type="image/png" crossorigin>`
  }

  return ''
@@ -1,10 +0,0 @@
-/* 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;
-  }
-}
@@ -1,9 +1,11 @@
 <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";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";

 const route = useRoute();

@@ -13,6 +15,10 @@ const layoutComponent = computed(() => {
 });

 const appStatus = storeToRefs(useAppStore()).appStatus;
+
+useMeta(() => metaData({
+  title: useAppStore().pageTitle,
+}));
 </script>

 <template>
@@ -1,98 +1,149 @@
-import {ApolloClient, ApolloLink, fromPromise, InMemoryCache} from '@apollo/client/core'
-import {onError} from "@apollo/client/link/error";
-import {useUserStore} from "stores/User";
+import {ApolloClient, ApolloLink, InMemoryCache} from '@apollo/client/core'
+import {ErrorLink} from "@apollo/client/link/error";
+import {defineStore} from "pinia";
 import {useAppStore} from "stores/App";
 import {Notify} from "quasar";
 import {errorObject, warningObject} from "src/composables/dialog";
-import {createUploadLink} from "apollo-upload-client";
-// import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
+import {useAuthStore} from "stores/Auth";
+import UploadHttpLink from "apollo-upload-client/UploadHttpLink.mjs";

 const handleRefreshToken = (store, router, forward, operation) => {
  if (!operation.query?._refreshUnauthorizedUser) return;

-  return fromPromise(useUserStore(store).refreshAccessToken()
+  console.log("refreshing token, ", operation.query);
+  return useAuthStore(store).refreshAccessToken()
    .catch((error) => {
-      Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
+      Notify.create(warningObject("Tvoje přihlášení vypršelo. 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}`,
-        },
-      });
+    })
+    .then(value => 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);
-    });
+        // retry the request, returning the new observable
+        return forward(operation);
+    }))
 }

-export const apolloWrapper = {};
-export default (({store, router}) => {
-  const uploadLink = createUploadLink({
-    uri: process.env.API_URL + '/graphql',
-  })
+// SSR: boot() runs again for every request. The client/query/mutate below
+// used to live on a shared module-level `apolloWrapper` object that every
+// request's boot() reassigned in place - under concurrent SSR requests, one
+// request could end up calling into another request's (still-being-set-up
+// or already-overwritten) apolloClient/store, i.e. querying/mutating with
+// the wrong user's auth context. See
+// handoffs/02-apollo-wrapper-race-condition.md for the full analysis.
+//
+// Fix: make this a Pinia store instead of a plain shared object. `init()`
+// is called from boot() with the request's own `store`/`router` explicitly
+// (same proven pattern as useAuthStore(store) elsewhere in this file), so
+// the closures below always close over the correct request. `query`/
+// `mutate` are then read back through Pinia's own SSR-safe per-request
+// resolution (useApolloStore() with no arg, called from preFetch/
+// onServerPrefetch-triggered store actions - the same mechanism every
+// other useXStore() call in this codebase already relies on), instead of
+// through a shared mutable object.
+export const useApolloStore = defineStore('Apollo', () => {
+  let client = null
+  let queryImpl = null
+  let mutateImpl = null

-  const authLink = new ApolloLink((operation, forward) => {
-    const accessToken = useUserStore(store).getAccessToken();
+  const init = ({store, router}) => {
+    if (client) return // boot() already initialized this request's store

-    if (accessToken) {
-      operation.setContext({
-        headers: {"Authorization": `Bearer ${accessToken}`},
-      });
-    }
-    return forward(operation);
-  });
+    const uploadLink = new UploadHttpLink({
+      uri: process.env.API_URL + '/graphql',
+      credentials: 'include'
+    })

-  const errorLink = onError(({graphQLErrors, networkError, operation, forward}) => {
-    console.log(networkError, graphQLErrors);
-    if (networkError?.statusCode === 401) {
-      return handleRefreshToken(store, router, forward, operation);
-    }
+    const authLink = new ApolloLink((operation, forward) => {
+      const accessToken = useAuthStore(store).getAccessToken();
+      if (accessToken) {
+        operation.setContext({
+          headers: {"Authorization": `Bearer ${accessToken}`},
+        });
+      }
+      return forward(operation);
+    });

-    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, router, forward, operation);
-        } else {
-          Notify.create(errorObject("API error: " + error.message));
+    const errorLink = new ErrorLink(({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
    })
-      .then((response) => response)
-      .catch(err => {
-        if (!err.toString().includes("401") && !err.toString().includes("Not authorized"))
-          console.error("Error during query: ", err)
-        return err;
-      })
-  };
-  apolloWrapper.mutate = (mutation, variables) => {
-    return apolloClient
-      .mutate({
-        mutation: mutation,
+
+    client = new ApolloClient({
+      link: ApolloLink.from([authLink, errorLink, uploadLink]),
+      cache: new InMemoryCache(),
+      connectToDevTools: true,
+      ssrMode: true,
+    });
+
+    queryImpl = (query, variables = {}) => {
+      return client.query({
+        query: query,
        fetchPolicy: 'no-cache',
-        variables: variables,
+        variables: variables
      })
-      .then((response) => response)
-      .catch(err => {
-        console.error("Error during mutation: ", err);
-      })
-  };
+        .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();
+          } else if (!errStr.includes("401") && !errStr.includes("Not authorized")) {
+            console.error("Error during query: ", err)
+          }
+          return Promise.reject(err);
+        })
+    };
+
+    mutateImpl = (mutation, variables) => {
+      return client
+        .mutate({
+          mutation: mutation,
+          fetchPolicy: 'no-cache',
+          variables: variables,
+        })
+        .then((response) => response)
+        .catch(err => {
+          console.error("Error during mutation: ", err);
+        })
+    };
+  }
+
+  const query = (query, variables) => queryImpl(query, variables)
+  const mutate = (mutation, variables) => mutateImpl(mutation, variables)
+
+  return {init, query, mutate}
+})
+
+// Backward-compatible shape so existing call sites
+// (`apolloWrapper.query(...)`, `apolloWrapper.mutate(...)` in
+// stores/helpers.js and stores/Organizations.js) keep working unchanged,
+// now delegating to the request-scoped store above instead of a shared
+// mutable singleton.
+export const apolloWrapper = {
+  query: (...args) => useApolloStore().query(...args),
+  mutate: (...args) => useApolloStore().mutate(...args),
+}
+
+export default (({store, router}) => {
+  useApolloStore(store).init({store, router})
 });
@@ -1,6 +1,6 @@
 import {boot} from 'quasar/wrappers'
 import axios from 'axios'
-import {useUserStore} from "stores/User";
+import {useAuthStore} from "stores/Auth";


 const api = axios.create({
@@ -13,28 +13,43 @@ const api = axios.create({
    },
 })

+// SSR: boot() runs again for every request, but `api` above is a
+// module-level singleton created once. Without ejecting the previous
+// request's interceptors before adding new ones, api.interceptors.*
+// would grow without bound for the lifetime of the process, each
+// handler closing over that request's (by-then-stale) store - see
+// handoffs/01-axios-interceptors-leak.md for the full analysis.
+let requestInterceptorId
+let responseInterceptorId
+
 export default boot(({store}) => {
-    api.interceptors.request.use((config) => {
-        const token = useUserStore(store).getAccessToken();
+    if (requestInterceptorId !== undefined) {
+        api.interceptors.request.eject(requestInterceptorId)
+    }
+    if (responseInterceptorId !== undefined) {
+        api.interceptors.response.eject(responseInterceptorId)
+    }
+
+    requestInterceptorId = api.interceptors.request.use((config) => {
+        const token = useAuthStore(store).getAccessToken();
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`
        }

-    if (['/refresh', '/login'].includes(config.url)) {
-      delete config.headers['Authorization'];
-    }
+        if (['/refresh', '/login'].includes(config.url)) {
+            delete config.headers['Authorization'];
+        }

-    return config;
-  })
+        return config;
+    })

    // Response interceptor for API calls
-    api.interceptors.response.use(
+    responseInterceptorId = api.interceptors.response.use(
        (response) => response,
        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;
@@ -0,0 +1,32 @@
+import {Cookies} from 'quasar'
+import {boot} from "quasar/wrappers";
+import {defineStore} from 'pinia'
+
+// SSR: boot() runs again for every request. `cookies` used to be a single
+// shared module-level variable reassigned in place by every request's
+// boot() - under concurrent SSR requests, one request's
+// Cookies.parseSSR(ssrContext) result (which carries that request's own
+// accessToken) could overwrite another still-in-flight request's
+// `cookies` before it finished reading it, leaking one user's access
+// token to another. See handoffs/03-cookies-shared-state.md.
+//
+// Fix: make this a Pinia store, initialized explicitly per request from
+// boot() with that request's own `store` (same proven pattern as
+// boot/apollo.js), instead of a shared mutable variable.
+export const useCookiesStore = defineStore('Cookies', () => {
+  let instance = null
+
+  const init = (ssrContext) => {
+    instance = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies
+  }
+
+  const get = (...args) => instance.get(...args)
+  const set = (...args) => instance.set(...args)
+  const remove = (...args) => instance.remove(...args)
+
+  return {init, get, set, remove}
+})
+
+export default boot(({store, ssrContext}) => {
+  useCookiesStore(store).init(ssrContext)
+});
@@ -0,0 +1,23 @@
+import {boot} from "quasar/wrappers";
+import * as Sentry from "@sentry/browser";
+
+// Client-only boot file (see quasar.config.js: {path: "sentry", server:
+// false} - excludes this from the server bundle entirely). The guard below
+// is a defensive second layer in case that config entry is ever changed
+// back to a plain string. See handoffs/04-sentry-ssr-guard.md.
+export default boot(({app, router}) => {
+  if (process.env.SERVER) return;
+  if (process.env.NODE_ENV !== 'production') return;
+
+  Sentry.init({
+    app,
+    dsn: "https://b2580fb40f4f0037d24f32e89d3e5df2@o472821.ingest.us.sentry.io/4506051015802880",
+    integrations: [
+      Sentry.browserTracingIntegration({router}),
+      Sentry.replayIntegration(),
+    ],
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+  });
+});
@@ -0,0 +1,56 @@
+<script setup>
+import {computed} from "vue";
+import {useAltitudeUtils} from "src/composables/airspaces";
+
+const props = defineProps({
+  lowerLimit: {
+    type: [String, Number],
+    required: true,
+  },
+  lowerLimitUnit: {
+    type: String,
+    required: false // GND nema jednotky
+  },
+  upperLimit: {
+    type: [String, Number],
+    required: true,
+  },
+  upperLimitUnit: {
+    type: String,
+    required: false // GND nema jednotky
+  }
+})
+
+const { altitudeLimitFormatted } = useAltitudeUtils();
+
+const upper = computed(() => altitudeLimitFormatted(props.upperLimit, props.upperLimitUnit));
+const lower = computed(() => altitudeLimitFormatted(props.lowerLimit, props.lowerLimitUnit));
+</script>
+
+<template>
+  <div class="altitude-limit">
+    <span class="upper">
+      {{ upper}}
+    </span>
+    <span class="lower">
+    {{ lower }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+.altitude-limit {
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 12px;
+
+  .upper, .lower {
+    display: block;
+  }
+
+  .upper {
+    border-bottom: 1px solid black;
+  }
+}
+</style>
@@ -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>
@@ -13,7 +13,6 @@ const props = defineProps({
 })

 const config = computed(() => {
-
  if (props.mode === "add") {
    return {icon: "add", label: "Přidat"};
  } else if (props.mode === "edit") {
@@ -26,7 +25,11 @@ const config = computed(() => {
 </script>

 <template>
-  <q-page-sticky location="bottom" :offset="[30, 30]">
+  <q-page-sticky
+    location="bottom"
+    :offset="[30, 30]"
+    v-if="$q.screen.lt.md"
+  >
    <q-fab :icon="config.icon" color="primary" :label="config.label" @click="$router.push(props.routerLink)"/>
  </q-page-sticky>
 </template>
@@ -30,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" :is-request-pending="isRequestPending" />
  </q-form>
 </template>
@@ -0,0 +1,60 @@
+<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;
+  } else {
+    filters.value = {};
+  }
+})
+</script>
+
+<template>
+  <div class="flex">
+    <div class="col-grow">
+      <q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
+        <template #prepend>
+          <q-icon name="search"/>
+        </template>
+      </q-input>
+    </div>
+    <div class="flex items-center">
+      <slot name="append" class="full-height"/>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,46 @@
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true
+  },
+  routerLink: {
+    type: Object,
+    required: true
+  }
+})
+
+const config = computed(() => {
+  if (props.mode === "add") {
+    return {icon: "add", label: "Přidat"};
+  } else if (props.mode === "edit") {
+    return {icon: "edit", label: "Upravit"};
+  }
+
+  return {icon: "unknown", label: `Neznámý typ ${props.mode}`}
+})
+</script>
+
+<template>
+  <div>
+    <q-toolbar class="justify-end q-pr-none" v-if="$q.screen.gt.sm">
+      <q-btn color="primary" size="lg" :icon="config.icon" :to="props.routerLink">{{ config.label }}</q-btn>
+    </q-toolbar>
+
+    <q-page-sticky
+      location="bottom"
+      :offset="[30, 30]"
+      v-else
+    >
+      <q-fab
+        :icon="config.icon"
+        color="primary"
+        :label="config.label"
+        @click="$router.push(props.routerLink)"
+      />
+    </q-page-sticky>
+    </div>
+</template>
+
@@ -6,17 +6,6 @@ import {isNumber, isRequired, maxLength, minLength} from "src/composables/form/r
 import {commonProps} from "src/composables/inputs";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";

-const formData = reactive({
-  id: null,
-  callSign: "",
-  model: "",
-  seats: null,
-  manufacturer: "",
-  description: "",
-  organization: null,
-  isPublic: false
-});
-
 const props = defineProps({
  defaultValues: {
    type: Object,
@@ -34,6 +23,17 @@ const props = defineProps({
  }
 });

+const formData = reactive({
+  id: null,
+  callSign: "",
+  model: "",
+  seats: null,
+  manufacturer: "",
+  description: "",
+  organization: null,
+  isPublic: false
+});
+
 const rules = {
  callSign: [isRequired, minLength(4), maxLength(8)],
  seats: [isRequired, isNumber]
@@ -54,48 +54,48 @@ 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"
+      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-checkbox v-model="formData.isPublic" label="Veřejné?" v-bind="commonProps"/>
@@ -1,46 +1,53 @@
 <script setup>
-
-import {useAppStore} from "stores/App";
+import {useInfiniteScroll} from "src/composables/pagination";

 const props = defineProps({
  items: {
    type: Array,
    required: true
-  }
+  },
+  ...useInfiniteScroll().propsDef
 });

-useAppStore().setPageTitle("Letadla");
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
 </script>

 <template>
-  <q-list bordered separator>
-    <q-item
-      clickable
-      v-ripple
-      :to="{name: 'aircraftDetail', params: {id: aircraft.id }}"
-      v-for="aircraft of props.items" :key="aircraft"
-    >
-      <q-item-section avatar>
-        <q-avatar v-if="aircraft.titlePhoto">
-          <img :src="aircraft.titlePhoto.thumbnailUrl" alt=""/>
-        </q-avatar>
-        <q-avatar color="teal" text-color="white" icon="flight" v-else/>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label label>
-          {{ aircraft.callSign }}
-        </q-item-label>
-        <q-item-label caption>
-          {{ aircraft.model }}
-          <template v-if="aircraft.manufacturer">
-            ({{ aircraft.manufacturer }})
-          </template>
-        </q-item-label>
-        <q-item-label caption v-if="aircraft.organization">
-          Provozovatel: {{ aircraft.organization.name }}
-        </q-item-label>
-      </q-item-section>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <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>
+  </q-infinite-scroll>

-    </q-item>
-  </q-list>
 </template>
@@ -1,4 +1,6 @@
 <script setup>
+import {computed} from "vue";
+
 const props = defineProps({
  routeAdd: {
    type: Object,
@@ -8,16 +10,44 @@ const props = defineProps({
    type: String,
    required: false,
    default: "Přidat"
+  },
+  color: {
+    type: String,
+    required: false,
+    default: 'info'
  }
 });
+
+const bannerClass = computed(() => {
+  const defaultClasses = 'bg-light-blue text-white';
+  const classMap = {
+    info: defaultClasses,
+    warning: 'bg-orange text-white',
+    error: 'bg-red text-white',
+  }
+
+  return classMap[props.color] || defaultClasses;
+});
+
+const icon = computed(() => {
+  const iconsMap = {
+    info: "info",
+    warning: "warning",
+    error: "error",
+  }
+
+  return iconsMap[props.color];
+});
+
 </script>

 <template>
  <div class="q-pa-md q-gutter-sm">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
+    <q-banner :class=bannerClass>
+      <template v-slot:avatar v-if="icon">
+        <q-icon :name="icon"/>
      </template>
+
      <slot/>

      <template v-slot:action v-if="routeAdd">
@@ -5,26 +5,34 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
 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: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
+    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);
@@ -41,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>
@@ -0,0 +1,22 @@
+<script setup>
+import {FORMAT_DATE, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  event: {
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <q-chip icon="date_range" v-if="event.dateFrom || event.dateTo">
+    <template v-if="event.dateFrom !== event.dateTo">
+      {{ formatDatetime(event.dateFrom, FORMAT_DATE) }} - {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
+    </template>
+    <template v-else>
+      {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
+    </template>
+  </q-chip>
+</template>
@@ -0,0 +1,67 @@
+<script setup>
+import MapWithMarkers from "components/map/MapWithMarkers.vue";
+import {ref} from "vue";
+import {useEventsStore} from "stores/Events";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {pluralize} from "src/composables/utils";
+
+const props = defineProps({
+  eventId: {
+    type: Number,
+    required: false
+  },
+  eventUrlSlug: {
+    type: String,
+    required: false,
+  },
+  onlyPublic: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const tracks = ref([]);
+const totalTime = ref(0);
+const totalFlights = ref(0);
+
+useEventsStore().fetchFlightsTracks({
+  eventId: props.eventId,
+  eventUrlSlug: props.eventUrlSlug,
+  onlyPublic: props.onlyPublic
+}).then((data) => {
+  if (!data.flights) return;
+
+  totalFlights.value = data.flights.length;
+
+  for (const flightTrack of data.flights) {
+    totalTime.value += flightTrack.durationMinCalculated;
+
+    if (flightTrack.track) {
+      tracks.value.push(flightTrack.track.points.coordinates);
+    }
+  }
+});
+</script>
+
+<template>
+  <template v-if="tracks.length > 1">
+    <h3>Trasy letů</h3>
+
+    <MapWithMarkers
+      style="width: 100%; height: 500px;"
+      :tracks="tracks"
+    />
+
+    <div class="text-center q-my-md">
+      <q-chip>
+        <q-avatar>{{ totalFlights }}</q-avatar>
+        {{ pluralize(totalFlights, "let", "lety", "letů") }}
+      </q-chip>
+
+      <q-chip icon="schedule">
+        {{ minutesToHumanReadable(totalTime) }}
+      </q-chip>
+    </div>
+
+  </template>
+</template>
@@ -8,20 +8,25 @@ 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
+    type: Object,
+    required: false,
  },
  isRequestPending: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })

 const formData = reactive({
-  name: null,
+  name: "",
+  urlSlug: "",
  isPublic: false,
  description: "",
  dateFrom: null,
@@ -38,6 +43,7 @@ onMounted(() => {
  }
 })

+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 </script>

 <template>
@@ -48,7 +54,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">
@@ -59,9 +73,6 @@ onMounted(() => {
      </div>
    </div>

-
    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
-
  </FormWrapper>
 </template>
@@ -8,8 +8,7 @@ const props = defineProps({
  },
   routeDetail: {
    type: Object,
-    required: false,
-    default: () => ({name: 'eventDetail', params: {}})
+    required: true,
  },
 });

@@ -19,20 +18,20 @@ const getCoverPhotos = (item) => item.flights.filter(f => !!f.titlePhoto).map(f
 <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>
@@ -0,0 +1,48 @@
+<script setup>
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
+import {reactive} from "vue";
+import {commonProps} from "src/composables/inputs";
+import FormWrapper from "components/FormWrapper.vue";
+import {useFlightPlanCalculations} from "src/composables/flightPlan";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  }
+});
+
+const {getTotalDuration} = useFlightPlanCalculations();
+
+const formData = reactive({
+  gpxTrackFile: null,
+  takeoffDatetime: props.flightPlan.plannedTakeoffDatetime,
+  landingDatetime: new Date(
+    (new Date(props.flightPlan.plannedTakeoffDatetime)).getTime() + 60 * 1000 * getTotalDuration(props.flightPlan)
+  ),
+  copyTrack: true,
+  createPointsOfInterests: true,
+  flightPlan: props.flightPlan,
+});
+</script>
+
+<template>
+  <FormWrapper v-model="formData" :save-button="{label: 'Vytvořit let z plánu', icon: 'save'}">
+    <template v-if="!formData.gpxTrackFile">
+      <DatetimePicker v-model="formData.takeoffDatetime" label="Čas vzletu"/>
+      <DatetimePicker v-model="formData.landingDatetime" label="Čas přistání"/>
+    </template>
+
+    <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."
+    />
+
+    <q-checkbox
+      v-model="formData.copyTrack"
+      label="Zkopírovat otočné body (letiště a POI)?"
+    />
+  </FormWrapper>
+</template>
@@ -0,0 +1,69 @@
+<script setup>
+import {commonProps} from "src/composables/inputs";
+import DatetimePicker from "components/inputs/DatetimePicker.vue";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {computed, reactive} from "vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";
+import {useLoggedUserStore} from "stores/LoggedUser";
+import {storeToRefs} from "pinia";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object
+  },
+  aircrafts: {
+    type: Array,
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+})
+
+const aircrafts = computed(() => props.aircrafts.map(a => ({id: a.id, name: a.callSign})));
+
+const formData = reactive({
+  name: props.flightPlan.name || null,
+  isDefaultName: props.flightPlan ? props.flightPlan.isDefaultName : true,
+  isEditableByCopilot: props.flightPlan.isEditableByCopilot || false,
+  isPublic: props.flightPlan.isPublic || false,
+  plannedTakeoffDatetime: props.flightPlan.plannedTakeoffDatetime || null,
+  aircraft: props.flightPlan && props.flightPlan.aircraft ? {
+    id: props.flightPlan.aircraft.id, name: props.flightPlan.aircraft.callSign
+  } : null,
+  plannedSpeed: props.flightPlan.plannedSpeed || 150,
+  description: props.flightPlan.description || '',
+});
+
+const {user} = storeToRefs(useLoggedUserStore());
+</script>
+
+<template>
+  <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
+
+    <div class="row">
+      <div class="col-sm-8 col-md-10" v-if="!formData.isDefaultName">
+        <q-input v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
+      </div>
+      <div class="col">
+        <q-checkbox v-model="formData.isDefaultName" label="Automatické jméno" v-bind="commonProps"/>
+      </div>
+    </div>
+
+    <q-checkbox v-model="formData.isPublic" label="Zveřejnit"/>
+    <CopyLinkButton
+      v-if="flightPlan.isPublic"
+      :route="{name: 'publicFlightPlanDetail', params: {username: user.publicUsername, id: flightPlan.id}}"
+    />
+
+    <q-editor v-model="formData.description" label="Popis" v-bind="commonProps"/>
+    <DatetimePicker v-model="formData.plannedTakeoffDatetime" label="Plánovaný datum a čas vzletu" v-bind="commonProps"/>
+    <ComboboxInput v-model="formData.aircraft" :options="aircrafts" label="Letadlo" v-bind="commonProps"/>
+
+    <q-input v-model.number="formData.plannedSpeed" type="number" step="5" label="Plánovaná rychlost" v-bind="commonProps">
+      <template #append>km/h</template>
+    </q-input>
+  </FormWrapper>
+</template>
@@ -0,0 +1,183 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {Marker, CustomMarker, Polyline} from "vue3-google-map";
+import MapWrapper from "components/map/MapWrapper.vue";
+import {useFlightPlanCalculations, useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
+import {useGeocode} from "src/composables/geocoding";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+  airspaceData: {
+    type: Array,
+    required: true
+  },
+  airports: {
+    type: Array,
+    required: true,
+  },
+  pointsOfInterest: {
+    type: Array,
+    required: true
+  },
+  insertPosition: {
+    type: Number,
+    required: false,
+    default: null
+  },
+});
+const emits = defineEmits(["markers-changed", "change-insert-position"]);
+
+const {center} = useGeocode();
+
+const {markerObject, googleMapsMarkerObject, googleMapsCustomMarkerObject, editableNameTypes} = useFlightPlanObjects();
+const {getMarkersFrom} = useFlightPlanUtils();
+const {getDuration} = useFlightPlanCalculations();
+
+const mapWrap = ref(null);
+
+const handleMarkerClick = (marker) => {
+  mapWrap.value.openInfoWindow({marker});
+}
+
+const markers = ref([]);
+watch(() => props.flightPlan.track, (newVal) => {
+  markers.value = getMarkersFrom(props.flightPlan);
+}, {immediate: true, deep: true});
+
+const track = computed(() => markers.value.map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
+const trackAids = computed(() => props.flightPlan.track.map(p => ({
+    ...p,
+    anchorPoint: 'CENTER',
+    bearing: p.bearing,
+    distance: p.distance,
+    position: {
+      lat: (p.from.gpsLatitude + p.to?.gpsLatitude) / 2,
+      lng: (p.from.gpsLongitude + p.to?.gpsLongitude) / 2
+    }
+  }
+)));
+const displayTrackAids = ref(true);
+
+const addMarker = async (point) => {
+  if (!point) return;
+
+  const insertAt = Math.min(markers.value.length, props.insertPosition);
+  markers.value.splice(insertAt, 0, markerObject({...point}));
+
+  emits("markers-changed", markers.value);
+  emits("change-insert-position", insertAt + 1);
+}
+
+const removeMarker = (infoWindow) => {
+  const idx = markers.value.findIndex(i => i.gpsLatitude === infoWindow.position.lat && i.gpsLongitude === infoWindow.position.lng);
+
+  if (!idx) return;
+
+  markers.value.splice(idx, 1);
+  emits("markers-changed", markers.value);
+}
+
+const {searchPlaceName} = useGeocode();
+const handleMarkerMove = async (idx, event) => {
+  markers.value[idx].name = await searchPlaceName(event.lat(), event.lng());
+  markers.value[idx].gpsLatitude = event.lat();
+  markers.value[idx].gpsLongitude = event.lng();
+  markers.value[idx].type = "mapPoint"
+
+  emits("markers-changed", markers.value);
+}
+</script>
+
+<template>
+
+  <MapWrapper
+    ref="mapWrap"
+    style="width: 100%; height: 65vh; min-height: 500px"
+    :center="center"
+    :zoom="8"
+    :track="{path: track, geodesic: true, strokeColor: '#ff00ff', strokeOpacity: 1, strokeWeight: 3}"
+    :points-of-interest="pointsOfInterest"
+    :airspaces-data="airspaceData"
+    :airports="airports"
+    v-bind="$attrs"
+    :fullscreen-control="false"
+    :show-info-window="true"
+    :show-layer-controls="true"
+    :allow-add-marker="insertPosition !== null"
+    @add-to-route="addMarker"
+    @remove-from-route="removeMarker"
+  >
+    <template v-for="(marker, i) in markers" :key="marker.name">
+      <!-- TODO: ve verejne casti by nemel byt draggable!-->
+      <Marker
+        v-if="editableNameTypes.includes(marker.type)"
+        :options="googleMapsMarkerObject(marker)"
+        @click="handleMarkerClick(marker)"
+        @dragend="handleMarkerMove(i, $event.latLng)"
+      />
+    </template>
+
+    <template v-if="displayTrackAids">
+      <template v-for="marker in trackAids" :key="marker">
+        <CustomMarker :options="marker" class="track-info-marker">
+          <div class="track-info" :style='`transform: rotate(${marker.bearing}deg)`'>
+            {{ marker.bearing }}&deg; <br>
+            {{ getDuration(marker.distance, flightPlan.plannedSpeed) }}'
+          </div>
+        </CustomMarker>
+      </template>
+    </template>
+
+    <template v-if="markers.length > 1">
+      <CustomMarker :options="googleMapsCustomMarkerObject(markers[0], 'CENTER')" class="significant-airport">
+        <q-icon name="flight_takeoff"/>
+      </CustomMarker>
+
+      <CustomMarker :options="googleMapsCustomMarkerObject(markers[markers.length - 1], 'CENTER')" class="significant-airport">
+        <q-icon name="flight_land"/>
+      </CustomMarker>
+
+    </template>
+
+    <template #layersControlsEnd>
+      <q-checkbox v-model="displayTrackAids" label="Zobrazovat navigaci po trase?"/>
+    </template>
+  </MapWrapper>
+</template>
+
+<style lang="scss">
+.significant-airport {
+  position: relative;
+  z-index: 99999;
+  text-align: center;
+  margin-top: -40px;
+
+  .q-icon {
+    color: white;
+    background: #39b6e6;
+    border: solid 1px black;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+    border-radius: 50%;
+  }
+}
+
+.track-info {
+  background: rgba(128, 128, 128, 0.5);
+  color: white;
+  border: solid 2px rgba(0, 0, 0, 0.87);
+  padding: 5px;
+  margin: 5px;
+  font-size: 12pt;
+  font-weight: bold;
+  transform-origin: 50% 50%;
+}
+
+.track-info-marker {
+  z-index: 999;
+}
+</style>
@@ -0,0 +1,91 @@
+<script setup>
+import {computed} from "vue";
+import {useFlightPlanCalculations} from "src/composables/flightPlan";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useQuasar} from "quasar";
+import {textEllipsis} from "src/composables/utils";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+  plannedSpeed: {
+    type: Number,
+    required: true,
+  }
+});
+
+const columns = [
+  {
+    label: 'Z',
+    align: "left",
+    field: 'from'
+  },
+  {
+    label: 'Do',
+    align: "left",
+    field: 'to'
+  },
+  {
+    align: 'right',
+    label: 'Kurz',
+    field: 'bearing',
+  },
+  {
+    align: 'right',
+    label: 'Vzdálenost',
+    field: 'distance',
+  },
+  {
+    align: 'right',
+    label: 'Čas',
+    field: 'duration',
+  },
+];
+
+const {getDuration, getTotalDuration, getTotalDistance} = useFlightPlanCalculations();
+
+const data = computed(() => props.flightPlan.track.map((item) => ({
+  from: textEllipsis(item.from.name, 30),
+  to: textEllipsis(item.to.name, 30),
+  distance: `${item.distance} km`,
+  bearing: `${item.bearing} °`,
+  duration: minutesToHumanReadable(getDuration(item.distance, props.plannedSpeed)),
+})));
+
+const {screen} = useQuasar();
+</script>
+
+<template>
+  <q-table
+    :grid="screen.xs"
+    :dense="screen.lt.md"
+    flat bordered
+    hide-bottom
+    :title="flightPlan.name"
+    :rows="data"
+    :columns="columns"
+    :rows-per-page-options="[0]"
+  >
+    <template #bottom-row="{cols}">
+      <tr class="summary">
+        <td v-for="col in cols" :key="col.field" :class="{'text-right': col.align === 'right'}">
+          <template v-if="col.field === 'duration'">
+            {{ minutesToHumanReadable(getTotalDuration(flightPlan, plannedSpeed)) }}
+          </template>
+          <template v-else-if="col.field === 'distance'">
+            {{ getTotalDistance(flightPlan) }} km
+          </template>
+        </td>
+      </tr>
+    </template>
+  </q-table>
+</template>
+
+
+<style scoped>
+.summary {
+  font-weight: bold;
+}
+</style>
@@ -0,0 +1,76 @@
+<script setup>
+import {ref, watch} from "vue";
+import {commonProps} from "src/composables/inputs";
+import {useGeocode} from "src/composables/geocoding";
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true
+  }
+})
+const emits = defineEmits(["select"])
+
+const place = ref("");
+const placesOptions = ref(null);
+
+const {searchGeocode} = useGeocode()
+
+watch(() => place.value, (newVal) => {
+  if (newVal)
+    emits("select", newVal);
+  place.value = null;
+});
+const placesFilter = (val, update, abort) => {
+  update(() => {
+    if (val && val !== '') {
+      placesOptions.value = props.options.filter(p => p.name.includes(val));
+      if (placesOptions.value.length === 0) {
+        searchGeocode(val).then(results => {
+          if (!results) return;
+
+          console.log(results)
+
+          placesOptions.value = results.map(result => {
+            console.log(result, result.geometry.location)
+            return {
+              name: result.formatted_address,
+              type: "geocode",
+              id: null,
+              gpsLatitude: result.geometry.location.lat(),
+              gpsLongitude: result.geometry.location.lng(),
+            }
+          })
+        });
+      }
+    } else {
+      placesOptions.value = props.options;
+    }
+  })
+}
+
+</script>
+
+<template>
+  <q-select
+    v-bind="commonProps"
+    v-model="place"
+    label="Místo"
+    use-input
+    input-debounce="100"
+    map-options
+    emit-value
+    option-label="name"
+    option-disable="disabled"
+    :options="placesOptions"
+    @filter="placesFilter"
+  >
+    <template #no-option>
+      <q-item>
+        <q-item-section>
+          Toto místo tu nemám. Zkus psát dál, najdem něco v Google Places.
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
@@ -0,0 +1,122 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import FlightPlanPlaceInput from "components/flightPlans/FlightPlanPlaceInput.vue";
+import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
+
+const props = defineProps({
+  markers: {
+    type: Array,
+    required: true
+  },
+  pointsOfInterest: {
+    type: Array,
+    required: true
+  },
+  airports: {
+    type: Array,
+    required: true
+  }
+});
+
+const emits = defineEmits(["markers-changed"]);
+
+const model = ref(props.markers);
+const removeMarker = (idx) => {
+  model.value.splice(idx, 1);
+}
+const swapMarkers = (idx1, idx2) => {
+  const tmp = model.value[idx1];
+  model.value[idx1] = model.value[idx2];
+  model.value[idx2] = tmp;
+};
+const handlePlaceSelect = (modelVal) => {
+  model.value.push(modelVal);
+
+  // TODO: upravit bounds u mapy
+
+}
+
+watch(() => model.value, () => {
+  emits("markers-changed", model.value);
+}, {deep: true});
+
+const {getIcon} = useFlightPlanUtils();
+const {editableNameTypes} = useFlightPlanObjects();
+
+const allPlacesOptions = computed(() => {
+  const reportingPoints = props.airports.map(a => a.reportingPoints.map(r => ({...r, airport: a}))).flat()
+  return [
+    ...props.pointsOfInterest.map(poi => ({...poi, pointOfInterestId: poi.id, type: "poi"})),
+    ...reportingPoints.map(r => ({
+      ...r,
+      name: `${r.airport.icaoCode}:${r.name}`,
+      type: "reportingPoint"
+    })),
+    ...props.airports.map(airport => ({
+      ...airport,
+      name: `${airport.icaoCode} - ${airport.name}`,
+      type: "airport",
+      airportId: airport.id,
+    }))
+  ].map(i => ({...i, disabled: !i.gpsLatitude || !i.gpsLongitude}));
+});
+
+</script>
+
+<template>
+  <q-scroll-area style="height: 60vh;">
+    <q-list bordered separator class="full-width">
+      <q-item v-for="(marker, i) in model" :key="marker">
+        <q-item-section side>
+          <q-icon :name="getIcon(marker.type)"></q-icon>
+        </q-item-section>
+
+        <q-item-section side>
+          <div>
+            <q-btn
+              v-if="i > 0"
+              text-color="primary"
+              size="16px"
+              flat dense round icon="arrow_upward"
+              @click="swapMarkers(i, i-1)"
+            />
+            <q-btn
+              v-if="i < model.length - 1"
+              text-color="primary"
+              flat dense round icon="`arrow_downward`"
+              size="16px"
+              @click="swapMarkers(i, i+1)"
+
+            />
+          </div>
+        </q-item-section>
+
+        <q-item-section>
+          <div class="cursor-pointer" v-if="editableNameTypes.includes(marker.type)">
+            {{ marker.name }}
+            <q-icon name="edit"/>
+            <q-popup-edit v-model="marker.name" v-slot="scope">
+              <q-input v-model="scope.value" autofocus @keyup.enter="scope.set">
+                <template #append>
+                  <q-icon name="edit"/>
+                </template>
+              </q-input>
+            </q-popup-edit>
+          </div>
+          <template v-else>
+            {{ marker.name }}
+          </template>
+        </q-item-section>
+        <q-item-section side class="text-right">
+          <q-btn size="12px" @click="removeMarker(i)" flat dense round color="red" icon="delete"/>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-scroll-area>
+
+  <FlightPlanPlaceInput
+    :options="allPlacesOptions"
+    @select="handlePlaceSelect"
+  />
+
+</template>
@@ -0,0 +1,119 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useFlightPlanCalculations, useFlightPlanUtils} from "src/composables/flightPlan";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+   isFullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  insertPosition: {
+    type: Number,
+    required: true
+  }
+});
+
+const emits = defineEmits(["open", "change-insert-position", "fullscreen-toggle"])
+const {getDuration, getTotalDistance, getTotalDuration} = useFlightPlanCalculations();
+const totalDistance = computed(() => getTotalDistance(props.flightPlan));
+</script>
+
+<template>
+  <q-list bordered class="q-ml-md-md q-pt-md">
+    <q-item class="mobile-hide">
+      <q-item-section>
+        <div style="display: flex; justify-content: space-between">
+          <q-btn
+            @click="emits('change-insert-position', 0)"
+            icon="add"
+            :color="insertPosition === 0 ? 'primary' : 'grey'"
+            size="sm"
+          >
+            <template v-if="insertPosition === 0">Přidávám na začátek</template>
+          </q-btn>
+
+          <q-btn
+            @click='emits("fullscreen-toggle")'
+            size="sm"
+            round
+            :icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+          />
+        </div>
+      </q-item-section>
+    </q-item>
+
+    <q-scroll-area class="mobile-hide" style="height: 55vh">
+      <template v-for="(segment, i) in props.flightPlan.track" :key="segment">
+        <q-item dense>
+          <q-item-section>
+            <q-item-label>{{ segment.from.name }}</q-item-label>
+            <q-item-label caption class="q-pa-sm q-ml-sm" style="border-left: solid 1px" v-if="segment.distance">
+
+              {{ segment.bearing }}°,
+              {{ segment.distance }} km,
+              {{ minutesToHumanReadable(getDuration(segment.distance, props.flightPlan.plannedSpeed)) }}
+
+              <q-btn
+                @click="emits('change-insert-position', i+1)"
+                icon="add"
+                size="xs"
+                round
+                class="q-ml-sm"
+                :color="insertPosition === i+1 ? 'primary' : 'grey'"
+              />
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+
+        <q-item dense v-if="segment.to && i === props.flightPlan.track.length - 1">
+          <q-item-section>
+            <q-item-label>
+              {{ segment.to.name }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+      <q-item>
+        <q-item-section v-if="flightPlan.track.length">
+          <div>
+            <q-btn
+              @click="emits('change-insert-position', flightPlan.track.length + 1)"
+              icon="add"
+              size="sm"
+              :color="insertPosition === flightPlan.track.length + 1? 'primary' : 'grey'"
+            >
+              <template v-if="insertPosition === flightPlan.track.length + 1">Přidávám na konec</template>
+            </q-btn>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-scroll-area>
+
+    <template v-if="totalDistance">
+      <q-item class="mobile-hide">
+        <q-item-section>
+          <q-separator/>
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section>
+          Celková vzdálenost: {{ totalDistance }} km
+          <br>
+          Plánovaná doba letu: {{ minutesToHumanReadable(getTotalDuration(props.flightPlan)) }}
+        </q-item-section>
+      </q-item>
+    </template>
+    <q-item>
+      <q-item-section>
+        <q-btn @click="emits('open')" color="secondary">
+          {{ totalDistance ? 'Upravit trasu' : 'Sestavit trasu' }}
+        </q-btn>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
@@ -0,0 +1,113 @@
+<script setup>
+import {useFlightPlanUtils} from "src/composables/flightPlan";
+import {useQuasar} from "quasar";
+import {useUnitsConvertors} from "src/composables/units";
+import CloudCoverIcon from "components/weather/CloudCoverIcon.vue";
+import {formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  }
+})
+
+
+const columns = [
+  {
+    label: 'Místo',
+    align: "left",
+    name: 'place',
+  },
+  {
+    align: 'right',
+    label: 'Teplota',
+    name: 'temperature',
+  },
+  {
+    align: 'right',
+    label: 'Vítr',
+    name: 'wind',
+  },
+  {
+    align: 'right',
+    label: 'Oblačnost',
+    name: 'clouds',
+  },
+];
+
+const {screen} = useQuasar();
+const {getMarkersFrom} = useFlightPlanUtils();
+const {kmhToKnots, ftToM} = useUnitsConvertors();
+
+const getCloudsBase = (weatherInfo) => {
+  const tempDiff = weatherInfo.temperatureSurface - weatherInfo.dewpointSurface;
+  const cloudLevelInFt = tempDiff / 2.5 * 1000;
+
+  return Math.round(ftToM(cloudLevelInFt));
+}
+
+const markers = getMarkersFrom(props.flightPlan);
+const markersWithWeather = markers.filter(marker => !!marker.weatherInfo);
+</script>
+
+<template>
+  <q-table
+    :grid="screen.xs"
+    :dense="screen.lt.md"
+    flat bordered
+    hide-bottom
+    :title="flightPlan.name"
+    :rows="markersWithWeather"
+    :columns="columns"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:body-cell-place="props">
+      <q-td :props="props">
+        <strong>
+          {{ props.row.name }}
+        </strong>
+        <br>
+        <small>
+          {{ formatDatetime(props.row.weatherInfo.datetime) }}
+        </small>
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-temperature="props">
+      <q-td :props="props">
+        {{ props.row.weatherInfo.temperatureSurface }}° C
+        <br>
+        <small>
+          Rosný bod {{ props.row.weatherInfo.dewpointSurface }}° C
+        </small>
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-wind="props">
+      <q-td :props="props">
+        <q-icon name="navigation" :style="`transform: rotate(${props.row.weatherInfo.windDirectionSurface}deg)`"/>
+        {{ props.row.weatherInfo.windDirectionSurface }}°
+        <br>
+        {{ kmhToKnots(props.row.weatherInfo.windSpeedSurface) }} kt
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-clouds="props">
+      <q-td :props="props">
+        <CloudCoverIcon :cloudcover="props.row.weatherInfo.cloudcoverTotal"/>
+        <br>
+        celkové pokrytí oblačností {{ props.row.weatherInfo.cloudcoverTotal }} %
+        <br>
+        nízké mraky {{ props.row.weatherInfo.cloudcoverLow }} %
+
+        <template v-if="props.row.weatherInfo.cloudcoverLow > 5">
+          <br>
+          odhadovaná výška základen: {{ getCloudsBase(props.row.weatherInfo) }} m
+        </template>
+      </q-td>
+    </template>
+
+
+  </q-table>
+</template>
@@ -0,0 +1,48 @@
+<script setup>
+import {formatDatetime} from "src/composables/datetimeUtils";
+import {useInfiniteScroll} from "src/composables/pagination";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+
+  ...useInfiniteScroll().propsDef
+});
+
+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
+
+</script>
+
+<template>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item
+        clickable
+        :to="{name: 'editFlightPlan', params: {id: flightPlan.id }}"
+        v-ripple
+        v-for="flightPlan of items" :key="flightPlan">
+        <q-item-section avatar>
+          <q-avatar icon="flight" color="primary" text-color="white"/>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ flightPlan.name || "Nepojmenovaný plán" }}
+          </q-item-label>
+          <q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
+            {{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
+          </q-item-label>
+          <q-item-label caption v-if="flightPlan.aircraft">
+            {{ flightPlan.aircraft.callSign }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-infinite-scroll>
+</template>
@@ -0,0 +1,104 @@
+import {computed} from "vue";
+
+
+
+const markersCenter = computed(() => {
+  if (markers.value.length === 0) return null;
+
+  return {
+    gpsLatitude: markers.value.map(m => m.gpsLatitude).reduce((a, b) => a + b) / markers.value.length,
+    gpsLongitude: markers.value.map(m => m.gpsLongitude).reduce((a, b) => a + b) / markers.value.length,
+  }
+});
+
+
+const calcAngleFromCenter = (pointA, pointB) => {
+  if (!markersCenter.value) return 0;
+
+  const u = vector(markersCenter.value, pointA);
+  const v = vector(markersCenter.value, pointB);
+
+  return Math.acos(
+    (u[0] * v[0] + u[1] * v[1])
+    /
+    (vectorSize(u) * vectorSize(v))
+  )
+}
+
+let targetPosition = null;
+let minAngleDiff = Infinity;
+let mapPoints = 1;
+
+const handleMapClickNefunkcni = (position) => {
+  const clickPoint = {gpsLatitude: position.lat, gpsLongitude: position.lng};
+
+  const clickAngle = calcAngleFromCenter(clickPoint, markers.value[0]);
+
+  for (let i = 1; i < markers.value.length - 1; i++) {
+    const marker = markers.value[i];
+    const angle = calcAngleFromCenter(marker, markers.value[0]);
+
+    const angleDiff = clickAngle - angle;
+    console.log("click", i, marker.name, angleDiff);
+    if (angleDiff < minAngleDiff) {
+      console.log("   update => ", minAngleDiff, " > ", Math.abs(angleDiff), marker.name, " -> ", markers.value[i + 1].name);
+      minAngleDiff = angleDiff
+      targetPosition = Math.max(1, angleDiff < 0 ? i - 1 : i + 1);
+    }
+
+    // console.log(marker.name, angle);
+  }
+
+  console.log("click", clickAngle);
+  console.log("insert at position", targetPosition);
+  console.log("---------------")
+  markers.value.splice(targetPosition, 0, {name: `Bod v mape ${mapPoints}`, type: "mapPoint", ...clickPoint});
+  mapPoints++;
+}
+
+const handleMapClickNefunkcni2 = (position) => {
+  const clickPoint = {gpsLatitude: position.lat, gpsLongitude: position.lng}
+
+  const markersToSort = markers.value.slice(1, -1);
+  markersToSort.push({name: `Bod v mape ${mapPoints}`, type: "mapPoint", ...clickPoint});
+
+  markersToSort.sort(
+    (a, b) => calcAngleFromCenter(a, markers.value[0]) - calcAngleFromCenter(b, markers.value[0])
+  );
+
+  for (const marker of markersToSort) {
+    console.log(marker.name, calcAngleFromCenter(marker, markers.value[0]));
+  }
+
+  markers.value = [markers.value[0], ...markersToSort, markers.value[markers.value.length - 1]];
+  mapPoints++;
+}
+
+const calcTotalDistance = (points) => {
+  let distance = 0;
+  for (let i = 1; i < points.length; i++) {
+    distance += vectorDistance(points[i-1], points[i])
+  }
+  return distance
+}
+
+let minDistance = Infinity;
+const handleMapClick = (position) => {
+  const clickPoint = {gpsLatitude: position.lat, gpsLongitude: position.lng};
+  const newMarker = {name: `Bod v mape ${mapPoints}`, type: "mapPoint", ...clickPoint}
+  markers.value.push(newMarker)
+
+  for (let i = 1; i < markers.value.length - 1; i++) {
+    console.log(markers.value[i], clickPoint);
+    const dist = vectorDistance(markers.value[i], clickPoint);
+
+    if (dist < minDistance) {
+      minDistance = dist;
+      targetPosition = i;
+    }
+  }
+
+  targetPosition = Math.min(markers.value.length - 1, Math.max(1, targetPosition));
+  markers.value.splice(targetPosition, 0, {name: `Bod v mape ${mapPoints}`, type: "mapPoint", ...clickPoint});
+  mapPoints++;
+}
@@ -1,6 +1,7 @@
 <script setup>
 import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import WeatherInfo from "components/weather/WeatherInfo.vue";
+import CopyLinkButton from "components/inputs/CopyLinkButton.vue";

 const props = defineProps({
  flight: {
@@ -21,8 +22,17 @@ const props = defineProps({
    type: Object,
    required: false,
    default: null
+  },
+  eventDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
+  },
+  loggedUser: {
+    type: Object,
+    required: false,
+    default: null
  }
-
 })
 </script>

@@ -34,8 +44,8 @@ const props = defineProps({
      </q-item-section>
      <q-item-section>
        <router-link
-            :to="{...aircraftDetailRoute, params: {...aircraftDetailRoute.params, id: flight.aircraft.id}}"
-            v-if="aircraftDetailRoute"
+          :to="{...aircraftDetailRoute, params: {id: flight.aircraft.id, callSign: flight.aircraft.callSign}}"
+          v-if="flight.aircraft.isPublic"
        >
          {{ flight.aircraft.callSign }}
        </router-link>
@@ -62,7 +72,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"/>
@@ -70,7 +82,7 @@ const props = defineProps({
          </q-item-section>
        </q-item>

-        <q-item v-for="poi in flight.track" :key="poi.id">
+        <q-item v-for="poi in flight.turnPoints" :key="poi.id">
          <q-item-section avatar>
            <q-icon name="place" v-if="poi.pointOfInterest"/>
            <q-icon name="local_airport" v-if="poi.airport"/>
@@ -78,8 +90,8 @@ const props = defineProps({
          <q-item-section>
            <template v-if="poi.pointOfInterest">
              <router-link
-                  :to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, id: poi.pointOfInterest.id}}"
-                  v-if="poi.pointOfInterest.isPublic"
+                :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>
@@ -87,7 +99,11 @@ const props = defineProps({
            </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>
@@ -98,7 +114,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>
@@ -115,6 +133,18 @@ const props = defineProps({
        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
      </q-item-section>
    </q-item>
+
+    <q-item v-if="flight.event && (loggedUser || flight.event.isPublic)">
+      <q-item-section avatar>
+        <q-icon name="event"/>
+      </q-item-section>
+      <q-item-section>
+        <router-link :to="eventDetailRoute">
+          {{ flight.event.name }}
+        </router-link>
+      </q-item-section>
+    </q-item>
+
    <q-item v-if="flight.copilots?.length > 0">
      <q-list>
        <q-item v-for="copilot in flight.copilots" :key="copilot.id">
@@ -122,14 +152,32 @@ const props = defineProps({
            <q-icon name="people"/>
          </q-item-section>
          <q-item-section>
-            <router-link
-                v-if="copilotDetailRoute"
-                :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, id: copilot.id}}"
-            >
-              {{ copilot.name }}
-            </router-link>
+            <template v-if="copilot.isPublic">
+              <div>
+                <router-link
+                  :to="{name: copilotDetailRoute.name, params: {...copilotDetailRoute.params, copilotSlug: copilot.urlSlug, id: copilot.id}}"
+                >
+                  {{ copilot.name }}
+                </router-link>
+              </div>
+            </template>
            <template v-else> {{ copilot.name }}</template>
          </q-item-section>
+          <q-item-section>
+            <CopyLinkButton
+              v-if="loggedUser && copilot.token && copilot.isPublic"
+              :route='{
+                  name: "publicCopilotUploadPhoto",
+                  params: {flightSlug: flight.urlSlug, username: loggedUser.publicUsername},
+                  query: {token: copilot.token}
+                }'
+              icon="cloud_upload"
+              title="Získat odkaz na nahrání fotek od kopilota"
+              label=""
+              round
+              class="q-mx-3"
+            />
+          </q-item-section>
        </q-item>
      </q-list>
    </q-item>
@@ -0,0 +1,59 @@
+<script setup>
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  flight: {type: Object, required: true},
+  pilot: {type: Object, required: true},
+  routeDetail: {type: Object, required: true},
+})
+
+</script>
+
+<template>
+  <div class="flight-header-info">
+    <h2 class="text-h4">
+      <router-link :to="routeDetail" v-if="routeDetail">
+        {{ flight.name }}
+      </router-link>
+      <span v-else>{{ flight.name }}</span>
+    </h2>
+
+    <div class="q-my-lg">
+      {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
+    </div>
+
+    <div>
+    <span v-for="(turnPoint, i) in flight.turnPoints">
+      {{ turnPoint.pointOfInterest.name }}
+      <span v-if="i < Object.keys(flight.turnPoints).length - 1" class="q-mx-md"> &bull;</span>
+    </span>
+    </div>
+
+    <div class="q-my-lg">
+      <router-link :to="{name: 'publicAircraftDetail', params: {callSign: flight.aircraft.callSign}}">
+        {{ flight.aircraft.callSign }}
+      </router-link>
+    </div>
+
+    <div class="q-my-lg" v-if="flight.description !== ''">
+      <div v-html="flight.description"></div>
+    </div>
+
+    <slot class="q-my-lg" name="default"></slot>
+  </div>
+</template>
+
+
+<style lang="scss">
+.flight-header-info a {
+
+  &, &:visited {
+    color: #e6f5ff;
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: #c2d2dd;
+  }
+}
+</style>
@@ -2,12 +2,17 @@
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
 import {computed, reactive, ref} from "vue";
 import {Line} from "vue-chartjs"
+import {useFlightPlanUtils} from "src/composables/flightPlan";

 const props = defineProps({
  flight: {
    type: Object,
    required: true
  },
+  flightPlan: {
+    type: Object,
+    required: false,
+  },
  photos: {
    type: Array,
    required: false,
@@ -16,19 +21,21 @@ const props = defineProps({


 const mapPhotos = computed(() => props.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
-const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
+const poisWithGPS = computed(() => props.flight.turnPoints.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}})
  ));

-const gpxTrack = props.flight.gpxTrack ? reactive(props.flight.gpxTrack) : null;
+// Tuu bylo reactive()
+const flightTrack = props.flight.track ? props.flight.track.points : null;
+
 const displayMap = computed(() => {
  return (
-    !!gpxTrack ||
+    !!flightTrack ||
    mapPhotos.value.length > 0 ||
    poisWithGPS.value.length > 0 ||
    props.flight.landingAirport.id !== props.flight.takeoffAirport.id
@@ -36,8 +43,14 @@ const displayMap = computed(() => {
 });

 let chartSpeedData, chartAltitudeData = null;
-if (gpxTrack) {
-  const chartLabels = gpxTrack.time.map(t => {
+if (flightTrack) {
+
+  const timestamp = flightTrack.map(i => i.timestamp);
+  const speed = flightTrack.map(i => i.speed);
+  const altitude = flightTrack.map(i => i.altitude);
+  const terrainElevation = flightTrack.map(i => i.terrainElevation || 0);
+
+  const chartLabels = timestamp.map(t => {
    const datetime = new Date(t);
    return datetime.getHours() + ":" + datetime.getMinutes();
  });
@@ -47,7 +60,7 @@ if (gpxTrack) {
      backgroundColor: "#38bd3e",
      borderColor: "#38bd3e",
      label: "Rychlost (km/h)",
-      data: gpxTrack.speed,
+      data: speed,
      pointRadius: 1,
    }]
  };
@@ -58,18 +71,18 @@ if (gpxTrack) {
      backgroundColor: "#9ae3ff",
      borderColor: "#9ae3ff",
      label: "Nadmořská výška letu (m)",
-      data: gpxTrack.altitude,
+      data: altitude,
      pointRadius: 1,
    }]
  };

-  if (gpxTrack.terrainElevation.length > 0) {
+  if (terrainElevation.length > 0) {
    chartAltitudeData.datasets.push(
      {
        backgroundColor: "rgba(148,94,40,0.7)",
        borderColor: "#945e28",
        label: "Nadmořská výška země (m)",
-        data: gpxTrack.terrainElevation,
+        data: terrainElevation,
        fill: true,
        pointRadius: 1,
      });
@@ -85,7 +98,7 @@ const drawCurrentPositionMarker = (e) => {
    return;
  }
  const idx = res[0].index;
-  currentPositionMarker.value = props.flight.gpxTrack.coordinates[idx];
+  currentPositionMarker.value = props.flight.track.points[idx].coordinates;
 }

 const chartOptions = {
@@ -98,19 +111,38 @@ const chartOptions = {
  onClick: drawCurrentPositionMarker,
  onHover: drawCurrentPositionMarker,
 }
+
+const {getMarkersFrom} = useFlightPlanUtils();
+const showPlanTrack = ref(true);
+const tracks = computed(() => {
+  const items = [];
+  if (props.flight.track) {
+    items.push(props.flight.track.points.map(m => m.coordinates))
+  }
+  if (showPlanTrack.value && props.flightPlan) {
+    items.push(getMarkersFrom(props.flightPlan).map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
+  }
+  return items;
+})
 </script>

 <template>
-  <MapWithMarkers
-    v-if="displayMap"
-    style="width: 100%; height: 500px;"
-    :gpx-track="flight.gpxTrack?.coordinates || []"
-    :markers="pointsOfInterests"
-    :highlight-position="currentPositionMarker"
-    :photos="mapPhotos"
-  />
+  <q-no-ssr>
+    <q-intersection>
+      <q-checkbox v-model="showPlanTrack" label="Zobrazovat plán?" v-if="flightPlan" />

-  <Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
-  <Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
+      <MapWithMarkers
+        v-if="displayMap"
+        style="width: 100%; height: 500px;"
+        :tracks="tracks"
+        :markers="pointsOfInterests"
+        :highlight-position="currentPositionMarker"
+        :photos="mapPhotos"
+        v-bind="$attrs"
+      />

+      <Line v-if="flightTrack" :data="chartSpeedData" :options="chartOptions"/>
+      <Line v-if="flightTrack" :data="chartAltitudeData" :options="chartOptions"/>
+    </q-intersection>
+  </q-no-ssr>
 </template>
@@ -2,6 +2,7 @@
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {flightName} from "src/composables/flight";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import {useInfiniteScroll} from "src/composables/pagination";

 const props = defineProps({
  items: {
@@ -12,60 +13,92 @@ const props = defineProps({
    type: Boolean,
    required: true
  },
+  ...useInfiniteScroll().propsDef
 });

+const emits = defineEmits([...useInfiniteScroll().emitsDef])
+const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
+
 const routeDetail = (flight) => {
  if (props.public)
-    return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, id: flight.id}}
+    return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
  else
    return {name: "flightDetail", params: {id: flight.id}}
 };
 </script>

 <template>
-  <q-list bordered separator>
-    <q-item
-      v-for="flight of items" :key="flight"
-      ripple
-      clickable
-      :to="routeDetail(flight)"
-    >
-      <q-item-section avatar>
-        <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
-      </q-item-section>
-      <q-item-section>
-        <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
+  <q-infinite-scroll
+    :disable="!hasMoreData"
+    @load="emitLoadMore"
+    :offset="250"
+  >
+    <q-list bordered separator>
+      <q-item
+        v-for="flight of items" :key="flight"
+        ripple
+        clickable
+        :to="routeDetail(flight)"
+      >
+        <q-item-section avatar class="gt-xs">
+          <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>
+          <q-img v-if="flight.titlePhoto" class="lt-sm" :src="flight.titlePhoto.thumbnailUrl"/>

-        <div class="text-secondary" v-if="props.public">
-          <q-icon name="support_agent"/>
-          @{{flight.pilot.publicUsername}}
-        </div>
+          <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>

-        <div class="text-secondary" v-if="flight.copilot">
-          <q-icon name="person"/>
-          {{ flight.pilot.name }}
-          {{ flight.copilot.name }}
-        </div>
+          <div class="flex justify-between justify-sm-start list-secondary-info">
+            <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>

-      <q-item-section side top v-if="flight.isPublic && !props.public">
-        <!-- Zobraz jen v adminu -->
-        <q-icon name="visibility"></q-icon>
-      </q-item-section>
-    </q-item>
-  </q-list>
+            <div class="text-secondary" v-if="flight.event">
+              <q-icon name="event"/>
+              {{ flight.event.name }}
+            </div>
+          </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 v-slot:loading>
+      <div class="row justify-center q-my-md">
+        <q-spinner-dots color="primary" size="40px"/>
+      </div>
+    </template>
+  </q-infinite-scroll>
 </template>
+
+<style>
+.list-secondary-info div {
+  padding: 0 1em;
+}
+</style>
@@ -0,0 +1,62 @@
+<script setup>
+import {ref} from "vue";
+import FlightHeaderInfo from "components/flights/FlightHeaderInfo.vue";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.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-full">
+            <FlightHeaderInfo
+              :route-detail="{name: 'publicFlightDetailNew', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
+              :pilot="flight.pilot"
+              :flight="flight"
+            >
+
+              <div class="absolute-bottom-right">
+                <router-link
+                  class="q-pa-lg"
+                  :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
+                >
+                  {{ flight.pilot.publicUsername }}
+                </router-link>
+              </div>
+
+            </FlightHeaderInfo>
+          </div>
+        </q-img>
+      </q-carousel-slide>
+    </q-carousel>
+  </div>
+</template>
@@ -21,10 +21,10 @@ const props = defineProps({
    required: false
  },
  isRequestPending: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });

 const airportName = (airport) => `${airport.icaoCode} (${airport.name})`;
@@ -32,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,
@@ -52,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, () => {
@@ -67,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>
@@ -19,43 +19,11 @@ const formData = reactive({
  copilots: [],
 })

-const solo = ref(false);
-watch(() => solo.value, (newVal) => {
-  if (!newVal) {
-    formData.copilots = [];
-  }
-});

-
-watch(() => props.flight, (newVal) => {
-  if (newVal) {
-    formData.copilots = newVal.copilots.map(copilot => ({id: copilot.id, name: copilot.name}));
-    solo.value = formData.copilots.length === 0;
-  }
-}, {deep: true, immediate: true});
 </script>

 <template>
  <FormWrapper v-model="formData">
-    <q-btn-toggle
-      spread
-      no-caps
-      v-model="solo"
-      toggle-color="primary"
-      :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"
-    />
-
-    <div v-if="!solo">
-      <ComboboxInput
-        v-for="i in flight.aircraft.seats - 1"
-        :key="i"
-        v-bind="commonProps"
-        :options="copilots"
-        v-model="formData.copilots[i-1]"
-        :clearable="true"
-        :label="i === 1 ? 'Kopilot' : 'Pasažér'"
-      />
-    </div>

  </FormWrapper>
 </template>
@@ -1,10 +1,14 @@
 <script setup>
-import {reactive, 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";
+import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";

 const props = defineProps({
  flight: {
@@ -15,19 +19,30 @@ const props = defineProps({
    type: Array,
    required: false,
  },
+  copilots: {
+    type: Array,
+    required: false,
+  },
  isRequestPending: {
-  type: Boolean,
-  required: false,
-  default: false,
-}
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });

 const formData = reactive({
  name: "",
  event: null,
-  description: ""
+  description: "",
+  debriefingNotes: "",
+  urlSlug: "",
+  isPublic: null,
+  copilots: []
 })

+
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
+
 watch(() => props.flight, (newVal) => {
  if (newVal) {
    setDefaultData(formData, newVal);
@@ -38,12 +53,88 @@ watch(() => props.flight, (newVal) => {
  }
 }, {immediate: true});

+const solo = ref(false);
+watch(() => solo.value, (newVal) => {
+  if (!newVal) {
+    formData.copilots = [];
+  }
+});
+
+watch(() => props.flight, (newVal) => {
+  if (newVal) {
+    formData.copilots = newVal.copilots.map(copilot => ({id: copilot.id, name: copilot.name}));
+    solo.value = formData.copilots.length === 0;
+  }
+}, {deep: true, immediate: true});
+
+const descriptionTab = ref("description");
 </script>

 <template>
  <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>
+
+    <div>
+      Letel jsi
+      <q-radio
+        v-model="solo"
+        :val="true"
+        label="Sólo"
+      />
+      <q-radio
+        v-model="solo"
+        :val="false"
+        label="S někým"
+      />
+    </div>
+
+    <div v-if="!solo">
+      <ComboboxInput
+        v-for="i in flight.aircraft.seats - 1"
+        :key="i"
+        v-bind="commonProps"
+        :options="copilots"
+        v-model="formData.copilots[i-1]"
+        :clearable="true"
+        :label="i === 1 ? 'Kopilot' : 'Pasažér'"
+      />
+    </div>
+
+    <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">
+        <BasicInfoBanner>
+          Debriefing by měl obsahovat minimálně následující body:
+          <ul>
+            <li><strong>Shrnutí letu:</strong> Trasa, čas a splnění cílů.</li>
+            <li><strong>Výkon:</strong> Navigace, reakce na podmínky, zvládnutí letu.</li>
+            <li><strong>Stav letadla:</strong> Funkčnost přístrojů, případné problémy.</li>
+            <li><strong>Bezpečnostní postupy:</strong> Dodržení bezpečnostních pravidel, řešení neočekávaných situací.</li>
+            <li><strong>Zpětná vazba:</strong> Pocity z letu, spokojenost pasažéra, návrhy na zlepšení.</li>
+          </ul>
+        </BasicInfoBanner>
+
+        <RichTextEditor v-model="formData.debriefingNotes" v-bind="commonProps" height="20vh"/>
+      </q-tab-panel>
+    </q-tab-panels>
  </FormWrapper>
 </template>
@@ -1,8 +1,6 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
 import {reactive} from "vue";
-import ComboboxInput from "components/inputs/ComboboxInput.vue";
-import {roundWithPrecision} from "../../../composables/utils";

 const props = defineProps({
    flight: {
@@ -25,11 +25,11 @@ onMounted(() => {
 })

 const steps = [
-  {name: "basic", icon: "flight_takeoff", label: "Základní informace"},
-  {name: "copilot", icon: "person_add", label: "Spolucestující"},
-  {name: "track", icon: "route", label: "Trasa"},
-  {name: "photos", icon: "add_a_photo", label: "Fotky"},
-  {name: "notes", icon: "edit_note", label: "Poznámky"},
+  {name: "editFlightBasic", icon: "flight_takeoff", label: "Základní informace"},
+  {name: "editFlightTrack", icon: "route", label: "Trasa"},
+  {name: "editFlightPhotos", icon: "add_a_photo", label: "Fotky"},
+  {name: "editFlightNotes", icon: "edit_note", label: "Poznámky"},
+  {name: "editFlightSetPlan", icon: "pin_drop", label: "Plán"},
 ];

 const emit = defineEmits(["update:modelValue"])
@@ -37,14 +37,20 @@ watch(currentStep, (val) => emit("update:modelValue", val));
 </script>

 <template>
-  <q-tabs v-if="routerEditMode" active-color="primary" class="q-mb-lg">
+  <q-tabs
+    v-if="routerEditMode"
+    active-color="primary"
+    class="q-mb-lg"
+    left-icon="chevron_left"
+    right-icon="chevron_right"
+  >
    <q-route-tab
      v-for="step in steps"
      :key="step.name"
      :icon="step.icon"
      :label="step.label"
      replace
-      :to="{name: 'flightEdit', params: {id: flightId, step: step.name}}"
+      :to="{name: step.name, params: {id: flightId}}"
      :disable="disabled.includes(step.name)"
      exact
    />
@@ -60,7 +66,6 @@ watch(currentStep, (val) => emit("update:modelValue", val));
    active-color="primary"
    class="q-mb-lg"
  >
-
    <q-tab v-for="step in steps" :key="step.name" v-bind="step" :disable="disabled.includes(step.name)"/>
  </q-tabs>
 </template>
@@ -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);
@@ -50,7 +51,8 @@ watch(poi, (newVal) => {
  }
 });

-watch(() => props.flight.track, (newVal) => {
+watch(() => props.flight.turnPoints, (newVal) => {
+  formData.track = [];
  for (const i in newVal) {
    const trackInfo = newVal[i];
    const info = {landingDuration: trackInfo.landingDuration};
@@ -74,14 +76,14 @@ watch(() => props.flight.track, (newVal) => {
 <template>
  <FormWrapper v-model="formData">

-    <q-banner class="bg-green text-white" v-if="flight.gpxTrack">
+    <q-banner class="bg-green text-white" v-if="flight.track">
      <q-icon name="check"/>
      Trasa nahrána
    </q-banner>

    <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>
@@ -0,0 +1,23 @@
+<script setup></script>
+
+<template>
+  <div class="row">
+    <div class="col">
+      <q-card class="q-my-sm">
+        <q-card-section>
+          <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col col-12 col-md-6" v-for="i in 2" :key="i">
+      <q-card class="q-mr-md-sm q-my-sm">
+        <q-card-section>
+          <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,6 @@
+<script setup></script>
+
+<template>
+  <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+  <q-skeleton type="rect" width="100%" height="500px"/>
+</template>
@@ -1,77 +0,0 @@
-<script setup>
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import {randomInt} from "src/composables/random";
-
-const props = defineProps({
-  step: {
-    type: String,
-    required: true
-  },
-})
-</script>
-
-<template>
-  <template v-if="step === 'basic'">
-    <div class="row">
-      <div class="col">
-        <q-card class="q-my-sm">
-          <q-card-section>
-            <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
-          </q-card-section>
-        </q-card>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col col-12 col-md-6" v-for="i in 2" :key="i">
-        <q-card class="q-mr-md-sm q-my-sm">
-          <q-card-section>
-            <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
-          </q-card-section>
-        </q-card>
-      </div>
-    </div>
-  </template>
-
-  <q-card v-else-if="step === 'copilot'">
-    <q-card class="q-mr-md-sm q-my-sm">
-      <q-card-section>
-        <q-skeleton type="QInput" class="q-my-sm"/>
-      </q-card-section>
-    </q-card>
-  </q-card>
-
-  <template v-else-if="step === 'track'">
-    <q-card>
-      <q-card-section>
-        <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
-      </q-card-section>
-    </q-card>
-
-    <BasicListSkeleton :items-count-min="2" :items-count-max="6"/>
-  </template>
-
-  <template v-else-if="step === 'photos'">
-    <q-card class="q-my-lg">
-      <q-card-section>
-        <q-skeleton type="QInput" class="q-my-sm"/>
-      </q-card-section>
-    </q-card>
-
-    <div class="row">
-      <div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
-        <q-card class="q-ma-md">
-          <q-skeleton height="300px" type="rect"/>
-        </q-card>
-      </div>
-    </div>
-
-
-  </template>
-
-  <div v-else-if="step === 'notes'">
-    <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
-    <q-skeleton type="rect" width="100%" height="500px"/>
-  </div>
-
-</template>
@@ -0,0 +1,13 @@
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <q-skeleton type="QInput" class="q-my-sm" v-for="i in 2" :key="i"/>
+    </q-card-section>
+  </q-card>
+
+  <BasicListSkeleton :items-count-min="2" :items-count-max="6"/>
+</template>
@@ -1,10 +1,18 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  items: {
+    type: Number,
+    required: false,
+    default: 10,
+  }
+})
 </script>

 <template>
  <q-list bordered separator>
-    <q-item v-for="i in 10" :key="i" ripple>
+    <q-item v-for="i in items" :key="i" ripple>
      <q-item-section avatar>
        <q-avatar size="100px">
          <q-skeleton type="QAvatar" size="100px"></q-skeleton>
@@ -12,9 +20,9 @@ import {randomInt} from "src/composables/random";
      </q-item-section>
      <q-item-section>
        <q-skeleton :width="randomInt(30,50)+'%'"/>
-          <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
-          <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
-          <q-skeleton type="text" width="8%"/>
+        <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
+        <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
+        <q-skeleton type="text" width="8%"/>
      </q-item-section>
    </q-item>
  </q-list>
@@ -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>
@@ -0,0 +1,40 @@
+<script setup>
+</script>
+
+<template>
+  <q-timeline color="primary" class="q-my-lg">
+    <q-timeline-entry title="Naplánuj si let">
+      <div>
+        Pomocí jednoduchého plánovače si sestav trasu, označ si zajímavé body, připrav si navigační štítek a zkontroluj počasí.
+      </div>
+    </q-timeline-entry>
+
+    <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>
+      <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>
@@ -100,7 +100,7 @@ const filterFn = (val, update, abort) => {
    clear-icon="clear"
    :v-bind="$attrs"
  >
-    <template v-slot:no-option>
+    <template #no-option>
      <q-item v-if="inputValue">
        <q-item-section avatar>
          <q-avatar text-color="green" size="32px" icon="add"/>
@@ -0,0 +1,43 @@
+<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
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "link"
+  },
+  label: {
+    type: String,
+    required: false,
+    default: "Získat odkaz"
+  }
+})
+
+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="icon"
+    :label="label"
+    v-bind="$attrs"
+    flat
+    @click="copyLinkToClipboard()"
+  />
+</template>
@@ -1,14 +1,9 @@
 <script setup>
 import {Marker} from "vue3-google-map";
-import {onMounted, ref} from "vue";
-import axios from "axios";
+import {onMounted, ref, watch} from "vue";
 import MapWrapper from "components/map/MapWrapper.vue";
-
-const center = ref({
-  lat: 50.1314,
-  lng: 14.5256
-});
-const zoom = ref(10);
+import {useGeocode} from "src/composables/geocoding";
+import axios from "axios";

 const props = defineProps({
  gpsLatitude: {
@@ -24,44 +19,61 @@ const props = defineProps({
    required: false
  }
 });
-
 const emits = defineEmits(["update:gpsLatitude", "update:gpsLongitude", "notFound"]);
+
 const emitModels = (lat, lng) => {
  emits("update:gpsLatitude", lat);
  emits("update:gpsLongitude", lng);
 }
+
+const {searchGeocode, center} = useGeocode(emits);
 const markerDropped = (position) => {
  emitModels(position.latLng.lat(), position.latLng.lng());
 }

-const setCoordinatesFromGeocode = (address) => {
-  axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURI(address)}&key=${process.env.GOOGLE_MAPS_API_KEY}`).then(response => {
-    if (response.data.status !== 'OK') {
-      emits("notFound", props.label);
-      return;
-    }
-    center.value = response.data.results[0].geometry.location;
-    emitModels(center.value.lat, center.value.lng);
-    zoom.value = 13;
-  });
-}
+const zoom = ref(8);


-onMounted(() => {
-  if (props.gpsLatitude && props.gpsLongitude) {
-    center.value.lng = props.gpsLongitude;
-    center.value.lat = props.gpsLatitude
-  } else if (props.label) {
-    setCoordinatesFromGeocode(props.label);
+watch(() => [props.label, props.gpsLongitude, props.gpsLatitude], (val, oldValue) => {
+  const [newAddress, newLon, newLat] = val
+  const [previousAddress, oldLon, oldLat] = oldValue
+  if (newAddress) {
+    if (newAddress === previousAddress) return
+
+    searchGeocode(newAddress).then(results => {
+      if (!results) return;
+
+      const lat = results[0].geometry.location.lat()
+      const lng = results[0].geometry.location.lng()
+
+      center.value = {lng, lat}
+      emitModels(center.value.lat, center.value.lng);
+      zoom.value = 13;
+    });
+  } else if (newLat && newLon && (props.gpsLatitude !== newLat || props.gpsLongitude !== newLon)) {
+    center.value.lng = newLon;
+    center.value.lat = newLat
  } else {
+    console.log(newAddress, newLon, newLat, props.label, props.gpsLongitude, props.gpsLatitude)
    console.error("Set either label or gps coordinates.");
  }
-})
-
+},
+  // {immediate: true}
+)
 </script>

 <template>
-  <MapWrapper style="width: 100%; height: 500px" :center="center" :zoom="zoom">
-    <Marker :options="{ position: center, title: label, draggable: true }" @dragend="markerDropped"/>
+  <MapWrapper
+    :show-info-window="false"
+    :show-layer-controls="false"
+    style="width: 100%; height: 500px"
+    :center="center"
+    :zoom="zoom"
+    v-bind="$attrs"
+  >
+    <Marker
+      :options="{ position: center, title: label, draggable: true }"
+      @dragend="markerDropped"
+    />
  </MapWrapper>
 </template>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,19 @@
+<script setup>
+import {useAirportsStore} from "stores/Airports";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {ref} from "vue";
+
+const props = defineProps({
+   modelValue: {
+    type: [Object, Array]
+  },
+})
+
+const model = ref("");
+
+const options = useAirportsStore().fetch();
+</script>
+
+<template>
+<ComboboxInput :options="options" v-model="model"
+</template>
@@ -0,0 +1,229 @@
+<script setup>
+import {CustomMarker, InfoWindow} from "vue3-google-map";
+import {useFlightPlanUtils} from "src/composables/flightPlan";
+import {useGeocode} from "src/composables/geocoding";
+import {computed, ref, watch} from "vue";
+import {useAirspaceColors} from "src/composables/airspaces";
+import AltitudeLimit from "components/AltitudeLimit.vue";
+
+const props = defineProps({
+  infoWindow: {
+    type: Object,
+    required: true
+  },
+  highlightedAirspaces: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  isInTrack: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+
+const emits = defineEmits(["add-to-route", "remove-from-route", "highlight-airspace", "close"])
+
+const {getIcon} = useFlightPlanUtils();
+const {searchPlaceName} = useGeocode()
+
+const title = ref(null);
+const isOpened = ref(props.infoWindow.active);
+watch(() => props.infoWindow.position, async () => {
+  if (props.infoWindow.title) {
+    title.value = props.infoWindow.title
+  } else {
+    searchPlaceName(props.infoWindow.position.lat, props.infoWindow.position.lng).then(data => title.value = data);
+  }
+}, {immediate: true, deep: true});
+
+const addPoint = () => {
+  let type = "mapPoint";
+  if (props.infoWindow.poi) {
+    type = "poi";
+  } else if (props.infoWindow.airport) {
+    type = "airport";
+  }
+
+  const point = props.infoWindow.marker || {
+    name: title.value,
+    airportId: props.infoWindow.airport?.id,
+    pointOfInterestId: props.infoWindow.poi?.id,
+    type,
+    gpsLatitude: props.infoWindow.position.lat,
+    gpsLongitude: props.infoWindow.position.lng
+  }
+  emits("add-to-route", point)
+  closeInfoWindow();
+}
+
+const closeInfoWindow = () => {
+  emits('close');
+  isOpened.value = false;
+}
+
+const removePoint = () => {
+  emits("remove-from-route", props.infoWindow);
+  emits("close");
+}
+
+const {getColorByType} = useAirspaceColors();
+const highlightAirspace = (airspace) => {
+  emits('highlight-airspace', airspace.name)
+}
+
+const runways = computed(() => {
+  const runwayPairs = {};
+
+  for (const runway of props.infoWindow.airport.runways) {
+    runwayPairs[runway.designator] = runway;
+  }
+
+  return runwayPairs;
+});
+
+const runwaySurfaceName = (surface) => {
+  const surfaceMap = {
+    grass: "tráva",
+    concrete: "beton",
+    asphalt: "asfalt"
+  }
+  return surfaceMap[surface] || 'jiné'
+}
+
+const openedTab = ref("info");
+</script>
+
+
+<template>
+  <InfoWindow
+    @close="closeInfoWindow"
+    v-model="isOpened"
+    :options="{position: infoWindow.position}"
+  >
+    <q-tabs v-model="openedTab">
+      <q-tab name="info">{{ title }}</q-tab>
+      <q-tab name="airspaces" v-if="infoWindow.airspaces?.length">Prostory</q-tab>
+    </q-tabs>
+    <q-tab-panels v-model="openedTab">
+      <q-tab-panel name="info">
+        <div v-if="infoWindow.airport">
+          Elevace: {{ infoWindow.airport.elevation }} m
+
+          <div class="row">
+            <div class="col">
+              <q-list dense>
+                <q-item dense v-for="runway in runways" :key="runway">
+
+                  <q-item-section>
+                    <q-item-label>
+                      <strong>{{ runway.designator }}</strong> ({{ runwaySurfaceName(runway.surface) }})
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ runway.heading }}&deg;, {{ runway.width }} &times; {{ runway.length }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+            <div class="col">
+              <q-list>
+                <q-item dense v-for="frequency in infoWindow.airport.frequencies" :key="frequency">
+                  <q-item-section>
+                    <q-item-label>
+                      <strong>{{ frequency.name }}</strong>
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ frequency.frequency }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="infoWindow.marker">
+          <span class="text-h6">
+            <q-icon :name="getIcon(infoWindow.marker.type)"/>
+            {{ infoWindow.marker.name }}
+          </span>
+        </div>
+
+        <div v-if="infoWindow.poi">
+          <q-img :src="infoWindow.poi.titlePhoto.thumbnailUrl" width="300px" v-if="infoWindow.poi.titlePhoto"/>
+        </div>
+      </q-tab-panel>
+      <q-tab-panel name="airspaces" v-if="infoWindow.airspaces?.length">
+        <q-list>
+          <q-item-label v-for="airspace in infoWindow.airspaces" :key="airspace.name">
+            <q-avatar size="16px" class="q-mx-sm" :style="`border: solid 1px; background: ${getColorByType(airspace.type)}`"/>
+
+            <strong>
+              {{ airspace.name }}
+            </strong>
+
+            <AltitudeLimit
+              class="q-mx-md"
+              :upper-limit="airspace.upperLimit"
+              :upper-limit-unit="airspace.upperAltUnit"
+              :lower-limit="airspace.lowerLimit"
+              :lower-limit-unit="airspace.lowerAltUnit"
+            />
+
+            <q-btn
+              v-if="airspace.type !== 'FIR'"
+              color="white"
+              :text-color="props.highlightedAirspaces.includes(airspace.name) ? 'primary' : 'grey-6'"
+              size="x-small"
+              round
+              text
+              icon="mdi-eye"
+              @click="highlightAirspace(airspace)"
+            />
+          </q-item-label>
+        </q-list>
+      </q-tab-panel>
+    </q-tab-panels>
+
+    <template v-if="showActions">
+      <q-btn
+        v-if="isInTrack"
+        class="q-mr-sm q-mt-lg"
+        color="warning"
+        @click="removePoint()"
+      >
+        Odebrat z trasy
+      </q-btn>
+      <q-btn
+        :class="{'q-mt-lg': true, 'full-width': !isInTrack}"
+        color="secondary"
+        @click="addPoint()"
+      >
+        Přidat bod do trasy
+      </q-btn>
+    </template>
+
+    <CustomMarker :options="{position: infoWindow.position, anchorPoint: 'CENTER'}" v-if="isOpened">
+      <div class="info-window-position"></div>
+    </CustomMarker>
+  </InfoWindow>
+
+</template>
+
+<style scoped>
+.info-window-position {
+  border: solid 4px orange;
+  outline: solid 1px black;
+  border-radius: 50%;
+  padding: 4px;
+  position: relative;
+  z-index: 9999;
+}
+</style>
@@ -1,14 +1,14 @@
 <script setup>
 import MapWrapper from "components/map/MapWrapper.vue";
 import {Marker, Polyline, InfoWindow} from "vue3-google-map";
-import {computed, onMounted, ref} from "vue";
-import {axios} from "boot/axios";
+import {computed} from "vue";


 const props = defineProps({
-  gpxTrack: {
-    type: Object,
+  tracks: {
+    type: Array,
    required: false,
+    default: () => []
  },
  markers: {
    type: Array,
@@ -23,15 +23,56 @@ const props = defineProps({
    type: Array,
    required: false,
    default: () => []
+  },
+  bounds: {
+    type: Array,
+    required: false,
+    default: () => []
  }
 })

-const track = ref([]);
 const bounds = computed(() => {
  const photosTransformed = props.photos.map(p => ({position: {lat: p.gpsLatitude, lng: p.gpsLongitude}}));
-  const allData = [...props.markers, ...track.value, ...photosTransformed];
-  return allData.filter(i => !!i.position).map(i => i.position);
+  const coordinates = [
+    ...[...props.markers, ...photosTransformed].filter(i => !!i.position).map(i => i.position),
+    ...(props.tracks || []).flat()
+  ];
+
+  const latitudes = coordinates.filter(i => i && i.lat).map(i => i.lat);
+  const longitudes = coordinates.filter(i => i && i.lng).map(i => i.lng);
+  const minLat = Math.min(...latitudes);
+  const maxLat = Math.max(...latitudes);
+  const minLng = Math.min(...longitudes);
+  const maxLng = Math.max(...longitudes);
+
+  return [
+    {lat: minLat, lng: minLng},
+    {lat: minLat, lng: maxLng},
+    {lat: maxLat, lng: minLng},
+    {lat: maxLat, lng: maxLng},
+  ];
 });
+
+
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+const getColor = (i) => {
+  const colors = [
+    '#FF0000',
+    '#5733FF', '#4bec41', '#8d3f25',
+    '#33A1FF', '#6d7e59', '#FF3333', '#0e1c48',
+    '#A133FF', '#FFFF33', '#c9decc'
+  ]
+  return colors[i] || getRandomColor()
+}
+
+
 </script>

 <template>
@@ -43,11 +84,12 @@ const bounds = computed(() => {
      </InfoWindow>
    </Marker>

-    <template v-if="gpxTrack && gpxTrack.length > 0">
-      <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
+    <template v-if="tracks && tracks.length > 0">
+      <template v-for="(track, i) in tracks" :key="track">
+        <Polyline :options="{path: track, geodesic: true, strokeColor: getColor(i), strokeOpacity: 0.5, strokeWeight: 5}"/>
+      </template>
    </template>

    <Marker v-if="highlightPosition" :options="{position: highlightPosition, icon: '/mapIcons/currentPosition32x32.png'}"/>
-
  </MapWrapper>
 </template>
@@ -1,37 +1,391 @@
 <script setup>
-import {GoogleMap} from "vue3-google-map";
-import {ref, watch} from "vue";
+import {CustomControl, CustomMarker, GoogleMap, Polygon, Polyline} from "vue3-google-map";
+import {computed, ref, watch} from "vue";
+import {useVectorUtilities} from "src/graphql/fragments/vectorUtilities";
+import {useAirspaceColors, useAltitudeUtils} from "src/composables/airspaces";
+import AirspaceInfoWindow from "components/map/AirspaceInfoWindow.vue";
+import {useFlightPlanObjects} from "src/composables/flightPlan";
+import {debounce} from "quasar";

 const props = defineProps({
  bounds: {
    type: Array,
    required: false
+  },
+  airspacesData: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  airports: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  pointsOfInterest: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  track: {
+    type: Object,
+    required: false,
+  },
+  showInfoWindow: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  allowAddMarker: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  showLayerControls: {
+    type: Boolean,
+    required: false,
+    default: true
  }
 });

+const emits = defineEmits(["map-click", "add-to-route", "remove-from-route"]);
+
 const key = process.env.GOOGLE_MAPS_API_KEY;

-
 const mapRef = ref(null);
+const zoomLevel = ref(null);
+const visibleBoundsObject = ref(null);
 watch(
  () => mapRef.value?.ready,
  (ready) => {
-    if (!props.bounds || !ready) return;
-    const map = mapRef.value.map;
-    const api = mapRef.value.api;
+    if (!ready) return;

-    const bounds = new api.LatLngBounds();
-    for (let i = 0; i < props.bounds.length; i++) {
-      bounds.extend(props.bounds[i]);
+    if (props.bounds) {
+      const bounds = new mapRef.value.api.LatLngBounds();
+      for (let i = 0; i < props.bounds.length; i++) {
+        bounds.extend(props.bounds[i]);
+      }
+      mapRef.value.map.fitBounds(bounds);
    }
-    map.fitBounds(bounds);
+    zoomLevel.value = mapRef.value.map.getZoom();
+
+    mapRef.value.map.addListener("zoom_changed", debounce(() => {
+      zoomLevel.value = mapRef.value.map.getZoom();
+    }, 100));
+
+    mapRef.value.map.addListener("bounds_changed", debounce(() => {
+      visibleBoundsObject.value = mapRef.value.map.getBounds();
+    }, 100));
  }
 );

+const airspaceLayers = ref({
+  CTR: {displayed: true, color: "", minZoom: 7},
+  TMA: {displayed: true, color: "", minZoom: 7},
+  RMZ: {displayed: false, color: "", minZoom: 7},
+  DANGER: {label: "Nebezpečné prostory", displayed: false, color: "", minZoom: 7},
+  PROHIBIT: {label: "Zakázané prostory", displayed: true, color: "", minZoom: 7},
+  RESTRICT: {label: "TRA", displayed: true, color: "", minZoom: 7},
+  TRAGA: {displayed: true, color: "", minZoom: 8},
+  ATZ: {displayed: true, color: "", minZoom: 8},
+  AIRPORTS: {label: "Letiště", displayed: true, color: "", minZoom: 10},
+  FIELDSTRIP: {label: "SLZ plochy", displayed: false, color: "", minZoom: 11},
+})
+
+const isAirspaceVisible = (airspace, bounds) => {
+  if (!bounds) return false;
+
+  if (airspace.mapBounds) {
+    return airspace.mapBounds.some(b => bounds.contains(b));
+  }
+
+  if (airspace.gpsLatitude && airspace.gpsLongitude) {
+    return bounds.contains({lat: airspace.gpsLatitude, lng: airspace.gpsLongitude});
+  }
+
+  return true;
+}
+
+const maxAltitude = ref(5000);
+const {altitudeLimitFormatted, altitudeToFt} = useAltitudeUtils();
+
+const airspaces = computed(() => {
+  const colorsMap = useAirspaceColors().colors;
+
+  return props.airspacesData
+    .filter(airspace => airspaceLayers.value[airspace.type] && airspaceLayers.value[airspace.type].displayed)
+    .filter(airspace => airspaceLayers.value[airspace.type].minZoom <= zoomLevel.value)
+    .filter(airspace => isAirspaceVisible(airspace, visibleBoundsObject.value))
+    .filter(airspace => altitudeToFt(airspace.lowerLimit, airspace.lowerAltUnit) < maxAltitude.value)
+    .map(airspace => {
+      let fillOpacity = 0;
+      let strokeWeight = 1;
+      if (["PROHIBIT", "RESTRICT"].includes(airspace.type))
+        fillOpacity = 0.1;
+      if (highlightedAirspaces.value.includes(airspace.name)) {
+        strokeWeight = 2;
+        fillOpacity = 0.3;
+      }
+
+      const data = {
+        name: airspace.name,
+        strokeColor: colorsMap[airspace.type],
+        fillColor: colorsMap[airspace.type],
+        strokeOpacity: 0.5,
+        strokeWeight,
+        fillOpacity,
+      };
+
+      if (airspace.mapBounds.length > 0) {
+        data['path'] = airspace.mapBounds;
+      }
+
+      return data
+    });
+});
+
+const airportsOnMap = computed(() => {
+  const displayAirport = airspaceLayers.value.AIRPORTS.displayed;
+  const displayFieldstrip = airspaceLayers.value.FIELDSTRIP.displayed;
+  if (!displayAirport && !displayFieldstrip) return [];
+
+  return props.airports
+    .filter(a => a.gpsLatitude && a.gpsLongitude)
+    .filter(a => isAirspaceVisible(a, visibleBoundsObject.value))
+    .filter(a => zoomLevel.value >= (a.icaoCode.length === 6 ? airspaceLayers.value.FIELDSTRIP.minZoom : airspaceLayers.value.AIRPORTS.minZoom))
+    .filter(a => a.icaoCode.length === 6 ? displayFieldstrip : displayAirport)
+});
+
+const {isPointInPolygon} = useVectorUtilities();
+
+const getAirspacesAtCoordinates = (clickCoordinates) => {
+  const airspacesUnderClick = []
+  for (const airspace of props.airspacesData) {
+    if (airspace.mapBounds && isPointInPolygon(clickCoordinates, airspace.mapBounds)) {
+      airspacesUnderClick.push(airspace);
+    }
+  }
+  return airspacesUnderClick;
+}
+
+const {infoWindowObject} = useFlightPlanObjects();
+const infoWindow = ref({...infoWindowObject({})});
+
+const openInfoWindow = (data) => {
+  infoWindow.value = infoWindowObject({active: true, ...data});
+}
+
+defineExpose({
+  openInfoWindow
+});
+
+const emitMapClick = (data) => {
+  isControlsOpened.value = false;
+  openInfoWindow(data);
+  emits("map-click", data);
+}
+
+const highlightedAirspaces = ref([]);
+const highlightAirspace = (airspaceName) => {
+  const airspace = props.airspacesData.find(a => a.name === airspaceName);
+
+  if (airspace) {
+    highlightedAirspaces.value = [airspaceName];
+    airspaceLayers.value[airspace.type].displayed = true;
+  }
+}
+
+const handleMapClick = (e) => {
+  const position = {lat: e.latLng.lat(), lng: e.latLng.lng()};
+
+  const airspacesUnderClick = getAirspacesAtCoordinates(position);
+  highlightedAirspaces.value = airspacesUnderClick.map(a => a.name);
+
+  emitMapClick({position, airspaces: airspacesUnderClick});
+}
+
+const handleReportingPointClick = (airport, reportingPoint) => {
+  const position = {lat: reportingPoint.gpsLatitude, lng: reportingPoint.gpsLongitude};
+
+  const airspacesUnderClick = getAirspacesAtCoordinates(position);
+  highlightedAirspaces.value = [];
+
+  emitMapClick({position, airport, reportingPoint, airspaces: airspacesUnderClick})
+}
+
+const handleAirportClick = (airport) => {
+  const position = {lat: airport.gpsLatitude, lng: airport.gpsLongitude};
+
+  const airspacesUnderClick = getAirspacesAtCoordinates(position);
+  highlightedAirspaces.value = [];
+
+  emitMapClick({position, airport, airspaces: airspacesUnderClick})
+}
+
+const handlePoiClick = (poi) => {
+  const position = {lat: poi.gpsLatitude, lng: poi.gpsLongitude};
+
+  const airspacesUnderClick = getAirspacesAtCoordinates(position);
+  highlightedAirspaces.value = [];
+
+  emitMapClick({poi, position, airspaces: airspacesUnderClick});
+}
+
+const isDetailInTrack = computed(() => {
+  if (!props.track) return false;
+
+  return !!props.track.path.find(i => i.lat === infoWindow.value.position.lat && i.lng === infoWindow.value.position.lng);
+});
+
+const isControlsOpened = ref(false);
 </script>

 <template>
-  <GoogleMap :api-key="key" v-bind="$attrs" :max-zoom="13" ref="mapRef">
+
+<!--  <q-banner>-->
+<!--    https://dev.to/quasar/how-to-use-google-maps-in-a-quasar-project-1c13-->
+<!--  </q-banner>-->
+
+  <GoogleMap
+    :api-key="key"
+    v-bind="$attrs"
+    :street-view-control="false"
+    @click="handleMapClick"
+    map-type-id="roadmap"
+    gesture-handling="greedy"
+    :max-zoom="13"
+    ref="mapRef"
+  >
+    <!--    TODO: pridavani a odebirani z trasy resit pres slot-->
+    <AirspaceInfoWindow
+      v-if="showInfoWindow && infoWindow.active"
+      :info-window="infoWindow"
+      :show-actions="allowAddMarker"
+      :highlighted-airspaces="highlightedAirspaces"
+      :is-in-track="isDetailInTrack"
+      @close="infoWindow.active=false"
+      @add-to-route="emits('add-to-route', $event)"
+      @remove-from-route="emits('remove-from-route', $event)"
+      @highlight-airspace="highlightAirspace"
+    />
+
+    <template v-for="airspace in airspaces" :key="airspace.name">
+      <Polygon :options="airspace" @click="handleMapClick"/>
+    </template>
+
    <slot/>
+
+    <template v-for="airport in airportsOnMap" :key="airport.icaoCode">
+      <CustomMarker
+        style="position: relative; z-index: 100"
+        :options="{position: {lat: airport.gpsLatitude, lng: airport.gpsLongitude}, anchorPoint: 'CENTER'}"
+        @click.stop="handleAirportClick(airport)"
+      >
+        <img
+          :title="airport.icaoCode"
+          :src="airport.iconUrl"
+          :alt="airport.icaoCode"
+        />
+      </CustomMarker>
+
+      <template v-if="airspaceLayers.CTR.displayed">
+        <CustomMarker
+          v-for="reportingPoint in airport.reportingPoints" :key="reportingPoint.id"
+          :options="{position: {lat: reportingPoint.gpsLatitude, lng: reportingPoint.gpsLongitude, anchorPoint: 'CENTER'}}"
+          @click.stop="handleReportingPointClick(airport, reportingPoint)"
+          :title="`${airport.icaoCode}: ${reportingPoint.name}`"
+          style="font-size: 20px"
+        >
+          &#9650;
+        </CustomMarker>
+      </template>
+    </template>
+
+    <template v-for="poi in pointsOfInterest" :key="poi.name">
+      <CustomMarker
+        v-if="poi.gpsLatitude && poi.gpsLongitude"
+        :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
+        @click.stop="handlePoiClick(poi)"
+      >
+        <div class="poi-avatar" :title="poi.name" v-if="!poi.titlePhoto">
+          <img src="/mapIcons/photo-32x32.png" alt="">
+        </div>
+
+        <div
+          :title="poi.name"
+          v-else
+          class="poi-img"
+          :style="`background-image: url(${poi.titlePhoto.thumbnailUrl})`"
+        >
+        </div>
+      </CustomMarker>
+    </template>
+
+    <Polyline v-if="track" :options="track"/>
+
+    <CustomControl position="TOP_LEFT" v-if="showLayerControls" style="width: auto; max-width: 200px">
+      <q-btn
+        @click="isControlsOpened = !isControlsOpened"
+        :icon="isControlsOpened ? 'layers_clear' : 'layers'"
+        color="grey-2"
+        text-color="grey-9"
+        round
+        size="sm"
+        class="q-my-md"
+      >
+      </q-btn>
+      <q-card
+        v-if="isControlsOpened"
+        class="q-px-lg"
+        style="max-width: 30%; min-width: 200px;"
+      >
+        <template v-for="(airspaceLayer, key) in airspaceLayers" :key="airspaceLayer">
+          <q-checkbox
+            v-model="airspaceLayers[key].displayed"
+            v-if="airspaceLayers[key].minZoom <= zoomLevel"
+            :label="airspaceLayer.label || key"
+          />
+        </template>
+
+        <br>
+
+        <div class="q-my-lg">
+          Zobrazit prostory od GND do výšky {{ altitudeLimitFormatted(maxAltitude, 'ft') }}
+          <q-slider
+            v-model.number="maxAltitude"
+            :min="1000"
+            :max="15000"
+            label
+            :label-value="altitudeLimitFormatted(maxAltitude, 'ft')"
+            :step="1000"
+          />
+        </div>
+
+        <slot name="layersControlsEnd"></slot>
+
+      </q-card>
+    </CustomControl>
  </GoogleMap>
 </template>
+
+
+<style lang="scss">
+.poi-img {
+  border: solid 3px #8bdfff;
+  outline: solid 1px black;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-size: cover;
+}
+
+.poi-avatar {
+  padding: 5px;
+  border-radius: 15px;
+  background: #8bdfff;
+
+  img {
+    width: 20px;
+  }
+}
+</style>
@@ -6,8 +6,8 @@ import {randomInt} from "src/composables/random";
 <template>

  <q-breadcrumbs class="q-mx-md q-my-md">
-    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(30, 60)}px`" type="rect" /> </q-breadcrumbs-el>
-    <q-breadcrumbs-el> <q-skeleton :width="`${randomInt(40, 80)}px`" type="rect" /> </q-breadcrumbs-el>
+    <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>


@@ -9,12 +9,12 @@
      v-if="icon"
      avatar
    >
-      <q-icon :name="icon" />
+      <q-icon :name="icon"/>
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
+      <q-item-label caption v-if="caption">{{ caption }}</q-item-label>
    </q-item-section>
  </q-item>
 </template>
@@ -24,26 +24,21 @@ import {computed} from "vue";
 import {useRoute, useRouter} from "vue-router";

 const props = defineProps({
-    title: {
-      type: String,
-      required: true
-    },
-
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    to: {
-      type: Object,
-      required: true
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
-  });
+  title: {
+    type: String,
+    required: true
+  },
+  to: {
+    type: Object,
+    required: true
+  },
+  caption: {
+    type: String,
+  },
+  icon: {
+    type: String,
+  }
+});

 const $route = useRoute();
 const $router = useRouter();
@@ -51,7 +46,7 @@ const isButtonActive = computed(() => {
  const btnResolvedPath = $router.resolve(props.to).path;

  if (props.to.name === 'myFlights') {
-    return $route.name.toLowerCase().includes("flight");
+    return ["myFlights", "addFlight", "flightDetail", "flightEdit"].includes($route.name);
  } else {
    return $route.fullPath === btnResolvedPath || $route.fullPath.startsWith(btnResolvedPath);
  }
@@ -6,9 +6,15 @@ const linksList = [
  {
    title: 'Moje lety',
    icon: "flight_takeoff",
-    to: {name: "myFlights"}
+    to: {name: "myFlights"},
  },
-    {separator: true},
+  {
+    title: 'Moje plány',
+    icon: "pin_drop",
+    to: {name: "flightPlans"}
+  },
+
+  {separator: true},

  {
    title: 'Letadla',
@@ -19,6 +19,9 @@ const props = defineProps({
  copilots: {
    type: Array
  },
+  loading: {
+    type: Boolean
+  }
 });

 const formData = ref({
@@ -44,7 +47,12 @@ const setup = () => {
    <q-card-section class="text-center">
      <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>
+
+    <q-card-section v-if="loading">
+      <q-spinner />
+    </q-card-section>
+
+    <q-card-section v-else>
      <FormWrapper :save-button="false">
        <ComboboxInput
            :options="locations"
@@ -18,6 +18,9 @@ const props = defineProps({
  },
  copilots: {
    type: Array
+  },
+  loading: {
+    type: Boolean
  }
 });

@@ -38,7 +41,10 @@ const setup = (() => {
 <template>
  <DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
    <q-img :src="photo.thumbnailUrl"/>
-    <q-card-section>
+    <q-card-section v-if="loading">
+      <q-spinner />
+    </q-card-section>
+    <q-card-section v-else>
      <FormWrapper :save-button="false">
        <ComboboxInput
          :options="locations"
@@ -67,7 +73,7 @@ const setup = (() => {
          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"/>
@@ -6,8 +6,9 @@ import PhotoSwipeDynamicCaption from "../../../node_modules/photoswipe-dynamic-c
 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 {useRouter} from "vue-router";
 import {usePhotosStore} from "stores/Photos";
+import {useQuasar} from "quasar";

 const props = defineProps({
  galleryId: {
@@ -21,9 +22,8 @@ const props = defineProps({
  }
 })

-
-const route = useRoute();
 const $router = useRouter();
+const $q = useQuasar();

 let $lightbox = ref(null);

@@ -46,20 +46,6 @@ const initLightbox = () => {
  $lightbox.value.init();
 }

-onMounted(() => {
-  initLightbox();
-
-  // 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();
-    }
-
-    if ($lightbox.value && $lightbox.value.pswp)
-      $lightbox.value.pswp.close();
-  };
-});
-
 onUnmounted(() => {
  if ($lightbox.value) {
    $lightbox.value.destroy();
@@ -69,38 +55,82 @@ onUnmounted(() => {

 const openedPhoto = computed(() => usePhotosStore().openedPhoto);
 watch(() => [openedPhoto.value, $lightbox.value], () => {
-  if (!$lightbox.value || !openedPhoto.value) return;
+  if (!openedPhoto.value) return;
+
+  if (!$lightbox.value) {
+    initLightbox();
+  }

  const idx = props.photos.findIndex(p => p.id === openedPhoto.value.id);
  if (idx >= 0) {
    $lightbox.value.loadAndOpen(idx);
    usePhotosStore().setOpenedPhoto(null);
  }
-}, {immediate: true})
+}, {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"
+  <div :class="{'photogallery--wrapper': true}" :id="`${galleryId}-wrapper`">
+    <div :id="galleryId" class="row photogallery--content">
+      <div
+        v-for="photo in photos" :key="photo.id"
+        style="min-height: 100px"
+        class="col-6 col-sm-4 col-md-4 col-lg-2 q-pa-sm"
      >
-        <q-img
-          spinner-color="primary"
-          class="rounded-borders"
-          :src="photo.thumbnailUrl"
-          alt=""
+        <a
+          :data-pswp-src="photo.url"
+          :data-pswp-width="photo.width"
+          :data-pswp-height="photo.height"
+          target="_blank"
+          @click="initLightbox"
+          rel="noreferrer"
        >
-          <div class="absolute-bottom" v-if="photo.name !== ''">
-            {{ photo.name }}
-          </div>
-        </q-img>
-        <PhotoCaption :photo="photo"/>
-      </a>
+          <q-img
+            spinner-color="primary"
+            class="rounded-borders"
+            :src="photo.thumbnailUrl"
+            alt=""
+          >
+            <div class="absolute-bottom" v-if="photo.name !== ''">
+              {{ photo.name }}
+            </div>
+          </q-img>
+          <PhotoCaption :photo="photo"/>
+        </a>
+      </div>
    </div>
+
  </div>
+
 </template>
+
+<style lang="scss">
+.photogallery--wrapper {
+  margin: 50px 0;
+
+  a:hover {
+    cursor: pointer
+  }
+
+  &.collapsed {
+    position: relative;
+
+    .photogallery--content {
+      max-height: 250px;
+      overflow: hidden
+    }
+
+    .photogallery--collapse {
+      display: block;
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      text-align: center;
+      background: rgb(255, 255, 255);
+      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 0) 100%);
+    }
+  }
+}
+</style>
@@ -2,6 +2,7 @@
 import {computed, onMounted, reactive, ref, watch} from "vue";
 import {useQuasar} from "quasar";
 import {confirmObject} from "src/composables/dialog";
+import {usePhotoBatchManagement} from "src/composables/photos/batch";

 const props = defineProps({
  photos: {
@@ -19,100 +20,23 @@ const props = defineProps({

 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);
 };

-
 const confirmPhotoDelete = (id) => {
  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
-      .onOk(() => {
-        emits("delete", id);
-      });
+    .onOk(() => {
+      emits("delete", id);
+    });
 }

-const confirmBatchPhotoDelete = () => {
-  $q.dialog(confirmObject("Opravdu chces smazat vybrané fotky?"))
-      .onOk(() => {
-        for (const id in batchEdit.value) {
-          if (!batchEdit.value[id]) continue;
-          emits("delete", parseInt(id));
-          batchEdit.value[id] = false;
-        }
-      });
-}
-
-const handleImageClick = (photo, idx) => {
-  batchEdit.value[photo.id] = !batchEdit.value[photo.id];
-}
-
-const selectedPhotos = computed(() => {
-  const photos = [];
-  for (const i in batchEdit.value) {
-    const photo = props.photos.find(p => p.id === parseInt(i));
-    if (photo && batchEdit.value[i]) photos.push(photo);
-  }
-
-  return photos;
-});
-
-const openBatchEdit = () => {
-  const photos = selectedPhotos.value;
-  for (const i in batchEdit.value) {
-    batchEdit.value[i] = false;
-  }
-  emits('batch-edit', photos);
-}
-
-const batchRotate = (direction) => {
-  const photos = selectedPhotos.value;
-  emits("batch-rotate", {photos, direction});
-}
-
-const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
-
-const checkAll = ref(false);
-watch(() => checkAll.value, (newVal) => {
-  if (newVal === null) return;
-
-  for (const photo of props.photos) {
-    batchEdit.value[photo.id] = newVal;
-  }
-});
-watch(() => batchEdit.value, () => {
-  let checkedAll = true;
-  let uncheckedAll = true;
-
-  for (const i of Object.keys(batchEdit.value)) {
-    if (typeof batchEdit.value[i] === 'undefined') continue;
-
-    if (batchEdit.value[i]) uncheckedAll = false;
-    if (!batchEdit.value[i]) checkedAll = false;
-  }
-
-  if (checkedAll) {
-    checkAll.value = true;
-  } else if (uncheckedAll) {
-    checkAll.value = false;
-  } else {
-    checkAll.value = null;
-  }
-}, {deep: true});
-
-const batchOptionsProps = computed(() => ({
-  round: true,
-  flat: true,
-  class: "q-ml-lg",
-  disable: !isBatchEditAllowed.value
-}));
+const {
+  openBatchEdit, batchEdit, handleImageClick, confirmBatchPhotoDelete, batchOptionsProps,
+  isBatchEditAllowed, batchRotate, checkAll
+} = usePhotoBatchManagement({photos: props.photos, emits});

 const setFlightCover = (titlePhoto) => {
  emits("set-title-photo", titlePhoto);
@@ -127,7 +51,7 @@ const showLarge = (displayedPhoto) => {
 </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">
@@ -136,10 +60,10 @@ const showLarge = (displayedPhoto) => {
              <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)"
+              icon="star"
+              :color="titlePhoto?.id === photo.id ? 'amber-9' : 'grey-6'"
+              round
+              @click.stop.prevent="setFlightCover(photo)"
            />
          </div>

@@ -162,7 +86,7 @@ const showLarge = (displayedPhoto) => {
          </div>
          <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-btn flat icon="delete" color="red" :disabled="titlePhoto?.id === photo.id" @click="confirmPhotoDelete(photo.id)"/>
        </q-card-actions>
      </q-card>
    </div>
@@ -183,7 +107,7 @@ const showLarge = (displayedPhoto) => {
  <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" />
+        <q-btn icon="close" round color="primary" @click="openPhoto = false"/>
      </div>
    </q-img>
  </q-dialog>
@@ -0,0 +1,63 @@
+<script setup>
+import {useQuasar} from "quasar";
+import {confirmObject} from "src/composables/dialog";
+import {usePhotoBatchManagement} from "src/composables/photos/batch";
+
+const props = defineProps({
+  photos: {
+    type: Array
+  },
+  titlePhoto: {
+    type: Object,
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+});
+
+const $q = useQuasar();
+
+
+const emits = defineEmits(["delete", "batch-edit", "batch-rotate"])
+
+const confirmPhotoDelete = (id) => {
+  $q.dialog(confirmObject("Opravdu chces smazat tuto fotku?"))
+    .onOk(() => {
+      emits("delete", id);
+    });
+}
+
+const {
+  batchEdit, handleImageClick, confirmBatchPhotoDelete, batchOptionsProps, isBatchEditAllowed, batchRotate, checkAll
+} = usePhotoBatchManagement({photos: props.photos, emits});
+
+</script>
+
+<template>
+  <div class="row" v-bind="$attrs">
+    <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"/>
+        <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]"/>
+          </div>
+          <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 && showActions">
+    <q-card>
+      <q-card-actions>
+        <q-checkbox v-model="checkAll" label="Vybrat vše"/>
+        <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>
+</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Michal Kváček	160bc1b031	Fix nacitani vsech letu do profilove casti	2026-09-14 12:28:50 +02:00
Michal Kváček	ae7072ddee	bugfixing	2026-09-14 11:08:22 +02:00
Michal Kváček	f7845b963d	Snad fix memory leaku kvuli axiosu	2026-09-14 10:48:55 +02:00
Michal Kváček	65ea19664c	Bugfixing infinite scrollu u seznamu letu, novy vzhled detailu letu	2026-01-26 16:24:15 +01:00
Michal Kváček	348025afee	Nastrel nove podoby detailu letu	2026-01-19 22:26:14 +01:00
Michal Kváček	33e7aa6e36	lepsi infinite scroll	2026-01-06 22:02:24 +01:00
Michal Kváček	ea88a29750	Zfunkcneni aplikace, aktualizace zavislosti	2025-09-24 16:10:11 +02:00
Michal Kváček	448d97e310	Fix map	2025-09-18 22:04:37 +02:00
Michal Kváček	018153aff1	Bugfixing	2025-03-17 16:38:28 +01:00
Michal Kváček	87c7f17116	Upgrade quasaru, bugfixing	2025-03-05 13:23:56 +01:00
Michal Kváček	532aee9f32	Commit po dlohe dobe	2025-01-27 16:41:32 +01:00
Michal Kváček	92c9e53ea0	Bugfixing	2024-10-14 06:38:52 +02:00
Michal Kváček	be977ee241	Pridani informace o planovaci na homepage	2024-10-09 06:57:21 +02:00
Michal Kváček	bffdd96be2	Rozdeleni editace letu do samostatnych views	2024-10-03 22:41:14 +02:00
Michal Kváček	86e8dbf8e7	Rozdeleni planovace do samostatnych routes	2024-09-30 06:43:58 +02:00
Michal Kváček	786c59cc4a	Zobrazeni pocasi po trase planu	2024-09-09 17:41:34 +02:00
Michal Kváček	7011aa3223	Nasazeni cookie listyz pres GTM, sentry jen v produkci, doplneni textovych stranek	2024-08-27 18:30:13 +02:00
Michal Kváček	e8dc51a80d	Vykreslovat trasu na zaklade dat z z db	2024-07-25 19:51:15 +02:00
Michal Kváček	88a760846c	Pridana moznost zobrazeni planu v detailu letu	2024-07-11 07:26:56 +02:00
Michal Kváček	a8ad8467ce	Ve verejne casti s detailem planu ukazovat jen pouzite POI	2024-06-30 02:38:31 +02:00
Michal Kváček	ba1089af3d	Zakladni vytvareni letu na zaklade planu	2024-06-30 02:31:16 +02:00
Michal Kváček	16650cc0cb	Fix z-indexu pro navigaci, pridani prostoru do verejne casti detialu letu	2024-06-25 22:27:23 +02:00
Michal Kváček	25b1735c87	Redesign sidebaru v planovaci, fix fullsreenu, zobrazovani mista kliku na mape	2024-06-25 21:14:35 +02:00
Michal Kváček	5280f60f34	Kurzy po planovane trase	2024-06-25 07:39:32 +02:00
Michal Kváček	ffbb3ff178	Sentry, drobnosti	2024-06-24 16:23:31 +02:00
Michal Kváček	e01bafee73	Detail planovace, verejne planovain	2024-06-11 22:03:53 +02:00
Michal Kváček	852d00b932	Pridani tabulky s necim jako navigacni stitek do planovace	2024-06-10 16:42:00 +02:00
Michal Kváček	aa6bed6f7f	Mapa s POI ve verejne casti	2024-06-04 10:56:14 +02:00
Michal Kváček	70bc57d3c7	Planovac, lepsi social image	2024-06-03 23:07:41 +02:00
Michal Kváček	32ff47a3a7	Optimalizace planovace, ikony pro letiste	2024-05-27 22:31:06 +02:00
Michal Kváček	97d1787642	Zobrazovani informaci o RWY, vylepseni zobrazeni vysek	2024-05-15 09:33:16 +02:00
Michal Kváček	8cc1746be7	Update vue na 3.4	2024-05-09 13:31:50 +02:00
Michal Kváček	3c51631bcd	Aktualizace quasaru	2024-05-09 13:17:44 +02:00
Michal Kváček	9daea5974b	Bugfixing	2024-05-07 08:24:57 +02:00
Michal Kváček	a56c6828b1	Fix geocode u poi	2024-05-06 16:30:06 +02:00
Michal Kváček	670e80d998	Pridani linku na planovac do menu, drobny bugfixing	2024-05-06 09:40:25 +02:00
Michal Kváček	be8966b5c1	Fullscreen u planovace	2024-05-02 16:29:17 +02:00
Michal Kváček	8dd0a16918	Ukladani metadat k planum	2024-04-30 22:34:41 +02:00
Michal Kváček	0760e6fb1c	Vicemene funkcni mapova cast planovace	2024-04-29 06:45:29 +02:00
Michal Kváček	bc0b5e2f15	Vkladani mista na konkretni pozici	2024-04-18 16:37:46 +02:00
Michal Kváček	de0b75163d	Dalsi iterace planovace, snad jiz kompletni vrstvy mapy	2024-04-17 13:21:32 +02:00
Michal Kváček	cee979fec8	Zakladni verze planovace	2024-04-15 18:13:22 +02:00
Michal Kváček	338ec13db2	Merge branch 'master' of kvacek.cz:poletani.cz/app into planovac	2024-04-02 06:13:48 +02:00
Michal Kváček	9af80cda06	draft planovace	2024-03-25 21:59:55 +01:00
Michal Kváček	02b839674e	Planovac, zobrazeni vzdusnych prostoru	2024-03-21 16:40:41 +01:00
Michal Kváček	275c48986e	Fix zorbazovani udalosti	2024-03-14 06:27:30 +01:00
Michal Kváček	691bd4c7c5	Bootstrap na planovac	2024-03-14 06:27:01 +01:00
Michal Kváček	c0cfd7115c	uprava breadcrumbs v privatni casti, nasazeni prefetche	2024-03-13 16:16:08 +01:00
Michal Kváček	9379d3bfd6	Prusunuti nacitani detailu do prefetche (neverejna cast), zruseni resetu breadcrumbs a title pred zmenou routy	2024-03-13 07:31:53 +01:00
Michal Kváček	48f57cde0d	Breadcrumbs resit pres funkce	2024-03-13 06:35:26 +01:00
Michal Kváček	5cff3580b0	Pagination prepsano do inteligentnejsi composable	2024-03-09 23:16:37 +01:00
Michal Kváček	883b4fa97f	Init lightboxu az po otevreni fotky	2024-03-09 23:02:30 +01:00
Michal Kváček	722e832f1d	Docasne vypnuti intersection observeru u fotek - nefunguje pak proklik na titulni fotku	2024-03-07 10:13:31 +01:00
Michal Kváček	415ff15ab9	Pridan intersection na galeriii a mapu -> zrychleni	2024-03-07 07:08:03 +01:00
Michal Kváček	cd9c7351e9	Moznost nahravat fotky copilotem	2024-03-07 06:45:22 +01:00
Michal Kváček	f0a4c439dc	Fix nacitani spatnych dat do mapy u udalosti	2024-02-29 08:19:24 +01:00
Michal Kváček	7a45a0133e	Mapa s trasami letu u eventu, drobna uprava vizualu eventu	2024-02-28 09:41:15 +01:00
Michal Kváček	92678ec829	Zobrazeni linku na event u detailu letu	2024-02-26 09:45:23 +01:00
Michal Kváček	1a5c8f09bf	Napoveda, fix filtru pro nacitani letu u objektu	2024-02-13 23:00:37 +01:00
Michal Kváček	9c9bbc9baa	Reset hesla	2024-02-08 16:25:41 +01:00
Michal Kváček	fe47c1f7d6	Neindexovat 404	2024-02-02 09:34:03 +01:00
Michal Kváček	b22773b2ae	Snad fix 404ky	2024-02-01 17:32:12 +01:00
Michal Kváček	d69ceac14b	Vyhledavani i ve verejnych POI	2024-02-01 14:48:05 +01:00
Michal Kváček	418469d81c	Vyhledavani v POI	2024-02-01 08:32:27 +01:00
Michal Kváček	c28feade90	Drobna uprava refreshe loginu	2024-02-01 07:21:03 +01:00
Michal Kváček	5b94f2c4b3	Kontaktni form	2024-02-01 07:20:54 +01:00
Michal Kváček	08a3cbf3d9	Avatar do admina, pridani debrief informaci	2024-01-20 22:08:49 +01:00
Michal Kváček	b0aa6b5628	Uprava setovani 404 (asi porad nefunguje), ruzne podminky, priprava na zapomenute heslo, sjednoceni nacitani letu v profilu	2024-01-20 15:40:31 +01:00
Michal Kváček	0c89884b23	Uprava publikovani objektu, bugfixing	2024-01-18 06:52:39 +01:00
Michal Kváček	5a5c7cb645	Slugy, webp, hromada refaktoringu	2024-01-13 23:29:51 +01:00
Michal Kváček	e7cde2f425	Zmena favicon, uprava HP	2024-01-02 11:30:53 +01:00
Michal Kváček	966d582b63	Uprava error stranek, indexu	2023-12-19 20:34:06 +01:00
Michal Kváček	9aebc352cd	Fix nacitani letu u eventu	2023-12-12 23:54:19 +01:00
Michal Kváček	c8ea17c1ec	Aktualizace balicku, strnakovani, uprava hlavni stranky	2023-12-12 23:42:16 +01:00
Michal Kváček	8c7e237053	Verejny seznam POI	2023-12-10 23:21:33 +01:00
Michal Kváček	3216de4cb7	Bugfixing	2023-12-10 23:11:11 +01:00
Michal Kváček	9b38abd0de	Cookies v SSR	2023-12-10 22:10:26 +01:00