Bugfixing

Fix geocode u poi
Pridani linku na planovac do menu, drobny bugfixing
2024-05-07 08:24:57 +02:00 · 2024-05-06 16:30:06 +02:00 · 2024-05-06 09:40:25 +02:00 · 2024-05-02 16:29:17 +02:00 · 2024-04-30 22:34:41 +02:00 · 2024-04-29 06:45:29 +02:00
273 changed files with 11062 additions and 8989 deletions
@@ -1,24 +1,34 @@
 # develop stage
 FROM node:20-alpine as develop-stage

+ENV TZ=Europe/Prague
+
 WORKDIR /app
-COPY package*.json ./
-RUN yarn global add @quasar/cli && yarn --production=false
+RUN  yarn global add @quasar/cli
+
+COPY package.json yarn.lock ./
+RUN yarn --production=false
+RUN npx update-browserslist-db@latest
 COPY . .

 # build stage
 FROM develop-stage as build-stage
+ENV NODE_ENV production

-#ARG API_URL
-#ENV VUE_API_URL $API_URL
+RUN quasar build -m ssr

-RUN yarn --production=false
-RUN quasar build
+FROM node:20-alpine as production-stage

-# production stage
-FROM nginx:1.25-alpine as production-stage
-COPY conf/nginx.conf /etc/nginx/nginx.conf
-COPY --from=build-stage /app/dist/spa /app/html
-EXPOSE 80
+ENV NODE_ENV production
+ENV TZ=Europe/Prague

-CMD ["nginx", "-g", "daemon off;"]
+EXPOSE 3000
+WORKDIR /app
+
+COPY process.yml /app
+COPY --from=build-stage /app/dist/ssr/package.json /app
+RUN yarn global add pm2 && yarn && yarn cache clean
+
+COPY --from=build-stage /app/dist/ssr /app
+
+CMD ["pm2-runtime", "/app/process.yml"]
@@ -1,7 +1,12 @@
-version: "3.3"
+version: "3.4"
 services:
  poletani-app:
    image: "docker.kvacek.cz/poletani/app:latest"
+#    build:
+#      context: .
+#      dockerfile: Dockerfile
+#      target: "production-stage"
    restart: always
    ports:
-      - 9000:80
+#      - 9000:80
+      - 9000:3000
@@ -24,18 +24,21 @@ services:
 ##    command: ls -l /app

  app:
+    network_mode: host
    build:
      context: .
      target: "develop-stage"
    ports:
      - "9000:9000"
+      - "9001:9100"
    volumes:
      - ./src:/app/src
+      - ./src-ssr:/app/src-ssr
      - ./public:/app/public
-      - ./node_modules:/app/node_modules:delegated
-    command: quasar dev
+#      - ./node_modules:/app/node_modules:delegated
+    command: quasar dev # -m ssr
    environment:
-      API_URL: "http://localhost:8000"
+      API_URL: "http://127.0.0.1:8000"

 #  nginx:
 #    image:
@@ -1,10 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <title><%= productName %></title>
-
    <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
@@ -1,7 +1,7 @@
 {
  "name": "app",
  "version": "0.0.1",
-  "description": "A Quasar Project",
+  "description": "Fotogalerie pro tvoje zážitky ze vzduchu",
  "productName": "Polétání.cz",
  "author": "Michal Kváček <michal@kvacek.cz>",
  "private": true,
@@ -15,27 +15,28 @@
    "@vue/apollo-composable": "4.0.0-beta.2",
    "@vue/apollo-option": "^4.0.0-beta.5",
    "apollo-upload-client": "^17.0.0",
-    "axios": "^1.4.0",
-    "chart.js": "^4.4.0",
+    "axios": "^1.6.2",
+    "chart.js": "^4.4.1",
    "graphql": "16.6.0",
    "graphql-tag": "2.12.6",
+    "photoswipe": "^5.4.2",
+    "photoswipe-dynamic-caption-plugin": "^1.2.7",
    "pinia": "^2.0.33",
-    "quasar": "^2.12.0",
-    "vue": "^3.2.47",
+    "quasar": "^2.14.1",
+    "vue": "^3.3.11",
    "vue-chartjs": "^5.2.0",
-    "vue-inner-image-zoom": "^2.0.0",
-    "vue-router": "^4.1.6",
+    "vue-picture-cropper": "^0.7.0",
+    "vue-router": "^4.2.5",
    "vue3-google-map": "^0.15.0"
  },
  "devDependencies": {
-    "@quasar/app-vite": "^1.3.0",
-    "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^9.0.0",
+    "@quasar/app-vite": "^1.7.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-vue": "^9.19.2",
    "postcss": "^8.4.14",
-    "prettier": "^2.5.1",
-    "vite-plugin-rewrite-all": "^1.0.1"
+    "prettier": "^2.8.8"
  },
  "engines": {
    "npm": ">= 6.13.4",
@@ -0,0 +1,5 @@
+apps:
+    - name: poletani
+      script: /app/index.js
+      exec_mode: cluster
+      instances: 3
@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /login/
+Disallow: /moje/
@@ -23,15 +23,16 @@ module.exports = configure(function (ctx) {
    },

    // https://v2.quasar.dev/quasar-cli/prefetch-feature
-    // preFetch: true,
+    preFetch: true,

    // app boot file (/poletani/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli/boot-files
    boot: [
+      "cookies",
      "axios",
-      "vueInnerImageZoom",
-      "chartJs",
+      "apollo",
+      "chartJs"
    ],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
@@ -56,7 +57,7 @@ module.exports = configure(function (ctx) {
    build: {
      target: {
        browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
-        node: 'node18'
+        node: 'node20'
      },

      env: {
@@ -76,17 +77,14 @@ module.exports = configure(function (ctx) {
      // env: {},
      // rawDefine: {}
      // ignorePublicFolder: true,
-      // minify: false,
+      minify: true,
      // polyfillModulePreload: true,
      // distDir

      // extendViteConf (viteConf) {},
      // viteVuePluginOptions: {},

-
-      vitePlugins: [
-        [ require("vite-plugin-rewrite-all").default ] // slouzi k podpore tecky v params v routeru
-      ]
+      // vitePlugins: []
    },

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
@@ -98,6 +96,7 @@ module.exports = configure(function (ctx) {
    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
    framework: {
      config: {},
+      cssAddon: true,

      iconSet: 'mdi-v6', // Quasar icon set
      // lang: 'cs-CZ', // Quasar language pack
@@ -111,6 +110,7 @@ module.exports = configure(function (ctx) {

      // Quasar plugins
      plugins: [
+        'Cookies',
        'Dialog',
        'Meta',
        'Notify'
@@ -119,7 +119,9 @@ module.exports = configure(function (ctx) {

    // animations: 'all', // --- includes all animations
    // https://v2.quasar.dev/options/animations
-    animations: [],
+    animations: [
+      "fadeIn", "fadeOut"
+    ],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
    sourceFiles: {
@@ -135,10 +137,10 @@ module.exports = configure(function (ctx) {

    // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
    ssr: {
-      // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
+      ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
      // will mess up SSR

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

      pwa: false,
@@ -0,0 +1,58 @@
+import { ssrMiddleware } from 'quasar/wrappers'
+
+// This middleware should execute as last one
+// since it captures everything and tries to
+// render the page with Vue
+
+export default ssrMiddleware(({ app, resolve, render, serve }) => {
+  // we capture any other Express route and hand it
+  // over to Vue and Vue Router to render our page
+  app.get(resolve.urlPath('*'), (req, res) => {
+    res.setHeader('Content-Type', 'text/html')
+
+    render(/* the ssrContext: */ { req, res })
+      .then(html => {
+        // now let's send the rendered html to the client
+        res.send(html)
+      })
+      .catch(err => {
+        // oops, we had an error while rendering the page
+
+        // we were told to redirect to another URL
+        if (err.url) {
+          if (err.code) {
+            res.redirect(err.code, err.url)
+          } else {
+            res.redirect(err.url)
+          }
+        } else if (err.code === 404) {
+          // hmm, Vue Router could not find the requested route
+
+          console.log("404 v renderu")
+
+          // Should reach here only if no "catch-all" route
+          // is defined in /src/routes
+          // res.status(404).send('404 | Page Not Found')
+            res.redirect(resolve.urlPath('404'))
+        } else if (process.env.DEV) {
+          // well, we treat any other code as error;
+          // if we're in dev mode, then we can use Quasar CLI
+          // to display a nice error page that contains the stack
+          // and other useful information
+
+          // serve.error is available on dev only
+          serve.error({ err, req, res })
+
+        } else {
+          // we're in production, so we should have another method
+          // to display something to the client when we encounter an error
+          // (for security reasons, it's not ok to display the same wealth
+          // of information as we do in development)
+
+          // Render Error Page on production or
+          // create a route (/src/routes) for an error page and redirect to it
+            res.redirect(resolve.urlPath('500'))
+        }
+      })
+  })
+})
@@ -0,0 +1,136 @@
+/**
+ * More info about this file:
+ * https://v2.quasar.dev/quasar-cli-vite/developing-ssr/ssr-webserver
+ *
+ * Runs in Node context.
+ */
+
+/**
+ * Make sure to yarn add / npm install (in your project root)
+ * anything you import here (except for express and compression).
+ */
+import express from 'express'
+import compression from 'compression'
+import {
+  ssrClose,
+  ssrCreate,
+  ssrListen,
+  ssrRenderPreloadTag,
+  ssrServeStaticContent
+} from 'quasar/wrappers'
+
+/**
+ * Create your webserver and return its instance.
+ * If needed, prepare your webserver to receive
+ * connect-like middlewares.
+ *
+ * Should NOT be async!
+ */
+export const create = ssrCreate((/* { ... } */) => {
+  const app = express()
+
+  // attackers can use this header to detect apps running Express
+  // and then launch specifically-targeted attacks
+  app.disable('x-powered-by')
+
+  // place here any middlewares that
+  // absolutely need to run before anything else
+  if (process.env.PROD) {
+    app.use(compression())
+  }
+
+  return app
+})
+
+/**
+ * You need to make the server listen to the indicated port
+ * and return the listening instance or whatever you need to
+ * close the server with.
+ *
+ * The "listenResult" param for the "close()" definition below
+ * is what you return here.
+ *
+ * For production, you can instead export your
+ * handler for serverless use or whatever else fits your needs.
+ */
+export const listen = ssrListen(async ({ app, port, isReady }) => {
+  await isReady()
+  return app.listen(port, () => {
+    if (process.env.PROD) {
+      console.log('Server listening at port ' + port)
+    }
+  })
+})
+
+/**
+ * Should close the server and free up any resources.
+ * Will be used on development only when the server needs
+ * to be rebooted.
+ *
+ * Should you need the result of the "listen()" call above,
+ * you can use the "listenResult" param.
+ *
+ * Can be async.
+ */
+export const close = ssrClose(({ listenResult }) => {
+  return listenResult.close()
+})
+
+const maxAge = process.env.DEV
+  ? 0
+  : 1000 * 60 * 60 * 24 * 30
+
+/**
+ * Should return middleware that serves the indicated path
+ * with static content.
+ */
+export const serveStaticContent = ssrServeStaticContent((path, opts) => {
+  return express.static(path, {
+    maxAge,
+    ...opts
+  })
+})
+
+const jsRE = /\.js$/
+const cssRE = /\.css$/
+const woffRE = /\.woff$/
+const woff2RE = /\.woff2$/
+const gifRE = /\.gif$/
+const jpgRE = /\.jpe?g$/
+const pngRE = /\.png$/
+
+/**
+ * Should return a String with HTML output
+ * (if any) for preloading indicated file
+ */
+export const renderPreloadTag = ssrRenderPreloadTag((file) => {
+  if (jsRE.test(file) === true) {
+    return `<link rel="modulepreload" href="${file}" crossorigin>`
+  }
+
+  if (cssRE.test(file) === true) {
+    return `<link rel="stylesheet" href="${file}">`
+  }
+
+  if (woffRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`
+  }
+
+  if (woff2RE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`
+  }
+
+  if (gifRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="image" type="image/gif">`
+  }
+
+  if (jpgRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="image" type="image/jpeg">`
+  }
+
+  if (pngRE.test(file) === true) {
+    return `<link rel="preload" href="${file}" as="image" type="image/png">`
+  }
+
+  return ''
+})
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    ssr: true;
+  }
+}
@@ -1,13 +1,12 @@
 <script setup>
 import {useRoute} from "vue-router";
 import {computed} from "vue";
-import ErrorNotFound from "pages/ErrorNotFound.vue";
+import ErrorNotFound from "pages/errors/ErrorNotFound.vue";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";

 const route = useRoute();

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

 const api = axios.create({
    baseURL: process.env.API_URL,
@@ -12,8 +13,9 @@ const api = axios.create({
    },
 })

+export default boot(({store}) => {
    api.interceptors.request.use((config) => {
-  const token = useUserStore().getAccessToken();
+        const token = useAuthStore(store).getAccessToken();
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`
        }
@@ -26,13 +28,12 @@ api.interceptors.request.use((config) => {
    })

    // Response interceptor for API calls
-api.interceptors.response.use((response) => {
-  return response
-}, async function (error) {
+    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().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;
@@ -40,18 +41,6 @@ api.interceptors.response.use((response) => {
            }
            return Promise.reject(error);
        });
-
-
-export default boot(({app}) => {
-  // for use inside Vue files (Options API) through this.$axios and this.$api
-
-  // app.config.globalProperties.$axios = axios
-  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
-  //       so you won't necessarily have to import axios in each vue file
-
-  app.config.globalProperties.$api = api
-  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
-  //       so you can easily perform requests against your app's API
 })

 export {axios, api}
@@ -2,5 +2,5 @@ import {boot} from "quasar/wrappers";
 import {BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Title, Tooltip} from "chart.js";

 export default boot(({app}) => {
-  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale)
-})
+  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale);
+});
@@ -0,0 +1,9 @@
+import {Cookies} from 'quasar'
+import {boot} from "quasar/wrappers";
+
+let cookies = Cookies;
+export default boot(({ssrContext}) => {
+    cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies
+});
+
+export {cookies}
@@ -1,6 +0,0 @@
-import {boot} from "quasar/wrappers";
-import InnerImageZoom from 'vue-inner-image-zoom';
-
-export default boot(({app}) => {
-  app.component("inner-image-zoom", InnerImageZoom);
-})
@@ -0,0 +1,57 @@
+<script setup>
+import {computed} from "vue";
+
+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 getLimitFormatted = (limit, unit) => {
+  return `${limit} ${unit}`
+}
+
+const upper = computed(() => getLimitFormatted(props.upperLimit, props.upperLimitUnit));
+const lower = computed(() => getLimitFormatted(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>
@@ -0,0 +1,34 @@
+<script setup>
+import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
+
+const props = defineProps({
+  titlePhoto: {
+    type: Object,
+    required: false
+  },
+  title: {
+    type: String,
+    required: false
+  }
+})
+
+</script>
+
+<template>
+  <q-card class="flight-detail-card q-mb-lg">
+    <TitlePhotoWithGallery
+        v-if="titlePhoto"
+        :photo="titlePhoto"
+        :title="title"
+    />
+    <q-card-section v-else-if="title && title !== ''">
+      <h3>{{ title }}</h3>
+    </q-card-section>
+
+    <q-card-actions>
+      <slot name="actions"/>
+    </q-card-actions>
+
+    <slot name="content"/>
+  </q-card>
+</template>
@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  to: {
+    type: Object,
+    required: true
+  },
+  label: {
+    type: String,
+    required: false,
+    default: null
+  }
+});
+</script>
+
+<template>
+
+  <div class="text-right">
+    <q-btn flat class="q-my-sm" :to="props.to" icon="edit" color="primary">
+      {{ props.label }}
+    </q-btn>
+  </div>
+</template>
@@ -0,0 +1,48 @@
+<script setup>
+import {computed} from "vue";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  saveButton: {
+    type: [Object, Boolean],
+    required: false,
+    default: () => ({
+      label: "Uložit",
+      icon: "save",
+      align: "left"
+    })
+  }
+})
+const $q = useQuasar();
+const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
+</script>
+
+<template>
+  <div class="text-right">
+    <q-btn
+        color="primary"
+        type="submit"
+        size="lg"
+        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
+        :icon="props.saveButton.icon"
+        :loading="props.isRequestPending"
+    >
+      {{ props.saveButton.label }}
+
+      <template v-slot:loading>
+        <q-spinner/>
+      </template>
+    </q-btn>
+  </div>
+</template>
+
+<style>
+.btn--fullwidth {
+  width: 100%;
+}
+</style>
@@ -1,13 +1,15 @@
 <script setup>
-import {isRequestPending} from "src/composables/form/props";
-import {computed, useSlots} from "vue";
-import {useQuasar} from "quasar";
+import FormSubmitButton from "components/FormSubmitButton.vue";

 const props = defineProps({
  modelValue: {
    type: Object,
  },
-  isRequestPending,
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
  saveButton: {
    type: [Object, Boolean],
    required: false,
@@ -23,38 +25,11 @@ const emits = defineEmits(["save"]);
 const saveForm = () => {
  emits("save", props.modelValue);
 }
-
-const $q = useQuasar();
-const fullwidthBtn = computed(() => $q.screen.width <= $q.screen.sizes.md);
-
 </script>

 <template>
  <q-form @submit.prevent="saveForm" ref="form">
    <slot name="default"/>
-
-    <div class="text-right">
-      <q-btn
-        color="primary"
-        type="submit"
-        size="lg"
-        :class="{'q-my-lg': true, 'btn--fullwidth': fullwidthBtn}"
-        v-if="saveButton"
-        :icon="props.saveButton.icon"
-        :loading="props.isRequestPending"
-      >
-        {{ props.saveButton.label }}
-
-        <template v-slot:loading>
-          <q-spinner />
-        </template>
-      </q-btn>
-    </div>
+    <FormSubmitButton v-if="saveButton" :save-button="saveButton"/>
  </q-form>
 </template>
-
-<style>
-.btn--fullwidth {
-  width: 100%;
-}
-</style>
@@ -0,0 +1,51 @@
+<script setup>
+import {commonProps} from "src/composables/inputs";
+import {onMounted, ref, watch} from "vue";
+import {debounce} from "quasar";
+import {useRoute, useRouter} from "vue-router";
+
+const props = defineProps({
+  emitDebounce: {
+    type: Number,
+    required: false,
+    default: 200
+  }
+})
+const emits = defineEmits(["filtersChanged"]);
+
+const filters = ref({
+  search: ""
+});
+
+const $route = useRoute();
+const $router = useRouter();
+watch((() => filters.value), debounce(() => {
+  emits("filtersChanged", filters.value);
+
+  const query = {...$route.query};
+  for (const key in filters.value) {
+    if (filters.value[key] === "" || filters.value['key'] === null) {
+      delete query[key];
+    } else {
+      query[key] = filters.value[key];
+    }
+  }
+  $router.replace({query});
+}, props.emitDebounce), {deep: true});
+
+onMounted(() => {
+  const search = $route.query.search;
+
+  if (search) {
+    filters.value.search = search;
+  }
+})
+</script>
+
+<template>
+  <q-input v-model="filters.search" placeholder="Vyhledávání..." v-bind="commonProps" clearable>
+    <template #prepend>
+      <q-icon name="search"/>
+    </template>
+  </q-input>
+</template>
@@ -0,0 +1,41 @@
+<script setup>
+const props = defineProps({
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsLength: {
+    type: Number,
+    required: true,
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+
+const emits = defineEmits(["load-more"]);
+const loadMore = () => {
+  emits("load-more", props.itemsPerPage);
+}
+</script>
+
+<template>
+  <div>
+    <slot name="items"/>
+    <slot name="skeleton" v-if="isQueryRunning"/>
+
+    <div class="text-center q-my-md">
+      <q-btn color="primary" :loading="isQueryRunning" rounded size="lg" icon="expand_more" @click="loadMore()" v-if="totalItemsCount > itemsLength">
+        <slot name="loadMoreText"/>
+      </q-btn>
+    </div>
+  </div>
+</template>
@@ -1,59 +0,0 @@
-<script setup>
-import {aircraft} from "src/composables/objects/aircraft";
-import {confirmObject} from "src/composables/dialog";
-import {useQuasar} from "quasar";
-
-const props = defineProps({
-  aircraft: {
-    type: Object,
-    required: true
-  }
-});
-
-const emits = defineEmits(["delete"]);
-
-const $q = useQuasar();
-
-const confirmDelete = (aircraftId) => {
-  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
-    .onOk(() => {
-      emits("delete", aircraftId);
-    });
-};
-</script>
-
-<template>
-  <q-card class="q-mx-md q-my-md flight-detail-card">
-    <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
-
-    <q-card-actions class="q-my-md">
-      <div class="col-grow">
-        <q-btn
-          flat
-          :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
-          icon="edit"
-          text-color="primary"
-          label="Upravit"
-        />
-      </div>
-      <q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
-    </q-card-actions>
-
-    <q-card-section>
-      <q-list>
-        <q-item v-if="aircraft.manufacturer">
-          Výrobce: {{ aircraft.manufacturer }}
-        </q-item>
-        <q-item v-if="aircraft.model">
-          Model: {{ aircraft.model }}
-        </q-item>
-        <q-item v-if="aircraft.seats">
-          Počet míst: {{ aircraft.seats }}
-        </q-item>
-      </q-list>
-    </q-card-section>
-    <q-card-section>
-      <article v-html="aircraft.description" class="q-my-md"/>
-    </q-card-section>
-  </q-card>
-</template>
@@ -2,9 +2,26 @@
 import {onMounted, reactive} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
-import {defaultValues, isRequestPending} from "src/composables/form/props";
 import {isNumber, isRequired, maxLength, minLength} from "src/composables/form/rules";
 import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+
+const props = defineProps({
+  defaultValues: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  organizations: {
+    type: Array,
+    required: true,
+  }
+});

 const formData = reactive({
  id: null,
@@ -13,13 +30,8 @@ const formData = reactive({
  seats: null,
  manufacturer: "",
  description: "",
-  photo: null,
-  organizationId: null
-});
-
-const props = defineProps({
-  defaultValues,
-  isRequestPending
+  organization: null,
+  isPublic: false
 });

 const rules = {
@@ -28,8 +40,12 @@ const rules = {
 };

 onMounted(() => {
-  if (Object.keys(props.defaultValues).length > 0)
+  if (Object.keys(props.defaultValues).length > 0) {
    setDefaultData(formData, props.defaultValues);
+    if (props.defaultValues.organization) {
+      formData.organization = {id: props.defaultValues.organization.id, name: props.defaultValues.organization.name};
+    }
+  }
 })
 </script>

@@ -45,6 +61,23 @@ onMounted(() => {
      v-bind="commonProps"
    />

+    <q-input
+      type="number"
+      v-model.number="formData.seats"
+      label="Počet míst (včetně pilota)"
+      min="1"
+      :rules="rules.seats"
+      v-bind="commonProps"
+    />
+
+    <ComboboxInput
+      :options="organizations"
+      label="Organizace"
+      v-model="formData.organization"
+      v-bind="commonProps"
+      hint="Vyber provozovatele letadla. Tím se stane dostupné i pro ostatní členy vybrané organizace."
+    />
+
    <q-input
      type="text"
      v-model="formData.manufacturer"
@@ -58,15 +91,6 @@ onMounted(() => {
      v-bind="commonProps"
    />

-    <q-input
-      type="number"
-      v-model.number="formData.seats"
-      label="Počet míst (včetně pilota)"
-      min="1"
-      :rules="rules.seats"
-      v-bind="commonProps"
-    />
-
    <q-input
      type="textarea"
      v-model="formData.description"
@@ -74,10 +98,7 @@ onMounted(() => {
      v-bind="commonProps"
    />

-    <q-file v-model="formData.photo" label="Fotografie" v-bind="commonProps">
-      <template #prepend>
-        <q-icon name="upload"/>
-      </template>
-    </q-file>
+    <q-checkbox v-model="formData.isPublic" label="Veřejné?" v-bind="commonProps"/>
+
  </FormWrapper>
 </template>
@@ -0,0 +1,30 @@
+<script setup>
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  aircraft: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+    <q-list>
+      <q-item v-if="aircraft.organization">
+        Provozovatel: {{ aircraft.organization.name }}
+      </q-item>
+
+      <q-item v-if="aircraft.manufacturer">
+        Výrobce: {{ aircraft.manufacturer }}
+      </q-item>
+      <q-item v-if="aircraft.model">
+        Model: {{ aircraft.model }}
+      </q-item>
+      <q-item v-if="aircraft.seats">
+        Počet míst: {{ aircraft.seats }}
+      </q-item>
+    </q-list>
+
+    <article v-html="aircraft.description" class="q-my-md"/>
+</template>
@@ -1,18 +1,33 @@
 <script setup>
-
-import {useAppStore} from "stores/App";
+import LoadMoreList from "components/LoadMoreList.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";

 const props = defineProps({
  items: {
    type: Array,
    required: true
+  },
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
+    type: Boolean,
+    required: false,
+    default: false
  }
 });
-
-useAppStore().setPageTitle("Letadla");
 </script>

 <template>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
      <q-list bordered separator>
        <q-item
          clickable
@@ -21,8 +36,8 @@ useAppStore().setPageTitle("Letadla");
          v-for="aircraft of props.items" :key="aircraft"
        >
          <q-item-section avatar>
-        <q-avatar v-if="aircraft.photoUrl">
-          <img :src="aircraft.photoUrl" alt=""/>
+            <q-avatar 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>
@@ -36,7 +51,18 @@ useAppStore().setPageTitle("Letadla");
                ({{ aircraft.manufacturer }})
              </template>
            </q-item-label>
+            <q-item-label caption v-if="aircraft.organization">
+              Provozovatel: {{ aircraft.organization.name }}
+            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </template>
+    <template #skeleton>
+      <BasicListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Další
+    </template>
+  </LoadMoreList>
+</template>
@@ -13,11 +13,11 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
    </q-card-section>

    <q-card-section class="q-my-md">
-      <BasicTextSkeleton :paragraphs="1" :lines="randomInt(1, 3)"/>
+      <BasicTextSkeleton :paragraphs="1" :lines="2"/>
    </q-card-section>
-  </q-card>

-  <q-card class="flight-detail-card" flat>
-    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+
+    <h3>Lety</h3>
+    <BasicListSkeleton :items="5" />
  </q-card>
 </template>
@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  avatars: {
+    type: Array,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div style="height: 60px">
+    <q-avatar
+      v-for="(avatar, idx) in avatars"
+      :key="idx"
+      class="overlapping"
+      :style="`left: ${(idx+1) * 20}px`"
+    >
+      <img :src="avatar"/>
+    </q-avatar>
+  </div>
+</template>
+
+
+<style lang="sass" scoped>
+.overlapping
+  position: absolute
+</style>
@@ -1,6 +1,4 @@
 <script setup>
-import {poi} from "src/composables/objects/poi";
-
 const props = defineProps({
    routeBack: {
    type: Object,
@@ -1,5 +1,6 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+import {computed} from "vue";

 const props = defineProps({
  itemsCountMin: {
@@ -11,14 +12,19 @@ const props = defineProps({
    type: Number,
    required:false,
    default: 5
+  },
+  items: {
+    type: Number,
+    required: false,
  }
-})
+});

+const renderedItems = computed(() => props.items || randomInt(props.itemsCountMin, props.itemsCountMax));
 </script>

 <template>
  <q-list bordered separator>
-    <q-item v-ripple v-for="i in randomInt(itemsCountMin, itemsCountMax)" :key="i">
+    <q-item v-ripple v-for="i in renderedItems" :key="i">
      <q-item-section avatar>
        <q-skeleton type="QAvatar" />
      </q-item-section>
@@ -4,24 +4,35 @@ import {onMounted, reactive} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import FormWrapper from "components/FormWrapper.vue";
 import {commonProps} from "src/composables/inputs";
-import {isRequestPending} from "src/composables/form/props";
 import {isRequired} from "src/composables/form/rules";
+import SlugInput from "components/inputs/SlugInput.vue";
+import {storeToRefs} from "pinia";
+import {useLoggedUserStore} from "stores/LoggedUser";

 const props = defineProps({
  copilot: {
    type: Object
  },
-  isRequestPending
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 })

 const formData = reactive({
  name: null,
+  urlSlug: "",
+  isPublic: false,
 });

 const rules = {
-  name: [isRequired]
+  name: [isRequired],
+  urlSlug: [],
 }

+const loggedUser = storeToRefs(useLoggedUserStore()).user;
+
 onMounted(() => {
  if (props.copilot) {
    setDefaultData(formData, props.copilot);
@@ -38,5 +49,19 @@ onMounted(() => {
      :rules="rules.name"
      v-model="formData.name"
    />
+
+    <template v-if="loggedUser?.publicUsername">
+      <SlugInput
+        v-if="formData.isPublic"
+        v-bind="commonProps"
+        v-model="formData.urlSlug"
+        label="URL"
+        :url="`/${loggedUser.publicUsername}/a/`"
+        :slug-source="formData.name"
+        :rules="rules.urlSlug"
+      />
+      <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+    </template>
+
  </FormWrapper>
 </template>
@@ -11,14 +11,19 @@ const props = defineProps({

 <template>
  <q-list bordered separator>
-    <q-item clickable v-ripple v-for="pilot of items" :key="pilot">
+    <q-item
+      clickable
+      :to="{name: 'copilotDetail', params: {id: pilot.id }}"
+      v-ripple
+      v-for="pilot of items" :key="pilot">
      <q-item-section avatar>
-        <q-avatar icon="person" color="primary" text-color="white"/>
+        <q-avatar v-if="pilot.titlePhoto">
+          <img :src="pilot.titlePhoto.thumbnailUrl" alt=""/>
+        </q-avatar>
+        <q-avatar v-else icon="person" color="primary" text-color="white"/>
      </q-item-section>
      <q-item-section>
-        <router-link :to="{name: 'copilotDetail', params: {id: pilot.id }}">
        {{ pilot.name }}
-        </router-link>
      </q-item-section>
    </q-item>
  </q-list>
@@ -0,0 +1,8 @@
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+</script>
+
+<template>
+  <q-skeleton type="rect" class="q-my-lg" style="width: 200px; height: 40px" />
+    <BasicListSkeleton :items="4"/>
+</template>
@@ -1,5 +1,5 @@
 <script setup></script>

 <template>
-  <em>Copilot skeleton</em>
+  <q-skeleton type="QInput" />
 </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.gpxTrack) {
+      tracks.value.push(flightTrack.gpxTrack.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>
@@ -0,0 +1,78 @@
+<script setup>
+
+import {onMounted, reactive} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+import {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,
+    required: false,
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
+})
+
+const formData = reactive({
+  name: "",
+  urlSlug: "",
+  isPublic: false,
+  description: "",
+  dateFrom: null,
+  dateTo: null,
+});
+
+const rules = {
+  name: [isRequired]
+}
+
+onMounted(() => {
+  if (props.event) {
+    setDefaultData(formData, props.event);
+  }
+})
+
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
+</script>
+
+<template>
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
+    <q-input
+      v-bind="commonProps"
+      label="Jméno"
+      :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">
+        <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateFrom" label="Od"/>
+      </div>
+      <div class="col q-pl-sm">
+        <DatetimePicker :mask="FORMAT_DATE" v-model="formData.dateTo" label="Do"/>
+      </div>
+    </div>
+
+    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..."/>
+  </FormWrapper>
+</template>
@@ -0,0 +1,39 @@
+<script setup>
+import AvatarsGroup from "components/avatars/AvatarsGroup.vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+   routeDetail: {
+    type: Object,
+    required: true,
+  },
+});
+
+const getCoverPhotos = (item) => item.flights.filter(f => !!f.titlePhoto).map(f => f.titlePhoto.thumbnailUrl);
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item
+      v-for="eventDetail of items" :key="eventDetail"
+      clickable
+      :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="!eventDetail.flights || eventDetail.flights.length === 0"/>
+          <AvatarsGroup :avatars="getCoverPhotos(eventDetail)" v-else/>
+
+          {{ eventDetail.name }}
+        </q-item-label>
+        <q-item-label lines="4" caption>
+          <article v-html="eventDetail.description"/>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
@@ -0,0 +1,14 @@
+{
+  "name": "event",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@kvacek.cz:poletani.cz/app.git"
+  },
+  "private": true
+}
@@ -0,0 +1,17 @@
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+</script>
+
+<template>
+
+  <q-list bordered separator class="q-my-lg">
+    <ListItemSkeleton/>
+    <ListItemSkeleton/>
+  </q-list>
+
+  <BasicTextSkeleton :lines="3" :paragraphs="2"/>
+
+  <BasicListSkeleton :items="4"/>
+</template>
@@ -0,0 +1,18 @@
+<script setup>
+</script>
+
+<template>
+  <q-skeleton type="QInput" class="q-my-lg"/>
+
+  <div class="row">
+    <div class="col q-pr-sm">
+      <q-skeleton type="QInput"/>
+    </div>
+    <div class="col q-pl-sm">
+      <q-skeleton type="QInput"/>
+    </div>
+  </div>
+
+  <q-skeleton type="rect" class="q-my-lg" height="400px"/>
+
+</template>
@@ -0,0 +1,115 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {Marker, CustomMarker, Polyline} from "vue3-google-map";
+import MapWrapper from "components/map/MapWrapper.vue";
+import {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: true
+  }
+});
+const emits = defineEmits(["markers-changed", "change-insert-position"]);
+
+const {center} = useGeocode();
+
+const {markerObject, googleMapsMarkerObject, editableNameTypes} = useFlightPlanObjects();
+const {getMarkersFrom} = useFlightPlanUtils();
+
+const mapWrap = ref(null);
+
+const handleMarkerClick = (marker) => {
+  mapWrap.value.openInfoWindow({marker});
+}
+
+const handlePoiClick = (poi) => {
+  mapWrap.value.openInfoWindow({poi});
+}
+
+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 addMarker = async (point) => {
+  if (!point) return;
+
+  const insertAt = Math.min(markers.value.length, props.insertPosition);
+
+  markers.value.splice(insertAt, 0, markerObject({...point}));
+  // infoWindow.value = infoWindowObject({active: false});
+
+  emits("markers-changed", markers.value);
+  emits("change-insert-position", insertAt + 1);
+}
+
+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: 100%; min-height: 500px"
+    :center="center"
+    :zoom="8"
+    :airspaces-data="airspaceData"
+    :airports="airports"
+    v-bind="$attrs"
+    :fullscreen-control="false"
+    :show-info-window="true"
+    :show-layer-controls="true"
+    :allow-add-marker="true"
+    @add-to-route="addMarker"
+
+  >
+    <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)"
+      >
+        <q-icon name="place" style="color: orange; font-size: 30px"/>
+      </CustomMarker>
+    </template>
+
+
+    <template v-for="(marker, i) in markers" :key="marker.name">
+      <Marker
+        v-if="editableNameTypes.includes(marker.type)"
+        :options="googleMapsMarkerObject(marker)"
+        @click="handleMarkerClick(marker)"
+        @dragend="handleMarkerMove(i, $event.latLng)"
+      />
+    </template>
+    <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff00ff', strokeOpacity: 1, strokeWeight: 3}"/>
+  </MapWrapper>
+</template>
@@ -0,0 +1,71 @@
+<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;
+
+          placesOptions.value = results.map(result => ({
+            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,119 @@
+<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) => {
+  console.log(modelVal);
+  model.value.push(modelVal);
+}
+
+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, 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",
+    }))
+  ].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,139 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useFlightPlanUtils} from "src/composables/flightPlan";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+  plannedSpeed: {
+    type: Number,
+    required: false,
+    default: 150
+  },
+  isFullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  insertPosition: {
+    type: Number,
+    required: true
+  }
+});
+
+const emits = defineEmits(["open", "change-insert-position", "fullscren-toggle"])
+
+
+const getDuration = (distance, speed) => Math.round(distance / speed * 60)
+
+const totalDistance = computed(() => {
+  if (!props.flightPlan.track.length) return null;
+
+  return Math.round(props.flightPlan.track.map(t => t.distance).reduce((a, b) => a + b));
+});
+const totalTime = computed(() => {
+  if (!props.flightPlan.track.length) return null;
+
+  return props.flightPlan.track.map(t => getDuration(t.distance, props.plannedSpeed)).reduce((a, b) => a + b)
+});
+
+</script>
+
+<template>
+  <q-list bordered class="q-ml-md-md q-pt-md">
+
+    <q-item>
+      <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"
+            :icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+          />
+        </div>
+      </q-item-section>
+    </q-item>
+
+    <q-scroll-area style="height: 50vh">
+      <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-py-sm" v-if="segment.distance">
+              {{ segment.bearing }}°,
+              {{ segment.distance }} km,
+              {{ minutesToHumanReadable(getDuration(segment.distance, props.plannedSpeed)) }}
+            </q-item-label>
+            <q-item-label>
+              <q-btn
+                @click="emits('change-insert-position', i+1)"
+                icon="add"
+                size="sm"
+                class="q-ml-lg q-mb-sm"
+                :round="insertPosition !== i+1"
+                :color="insertPosition === i+1 ? 'primary' : 'grey'"
+              >
+                <template v-if="insertPosition === i+1">Přidávám sem</template>
+              </q-btn>
+            </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-scroll-area>
+    <q-item>
+      <q-item-section>
+        <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>
+    <template v-if="totalDistance">
+      <q-item>
+        <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(totalTime) }}
+        </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,36 @@
+<script setup>
+import {formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <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>
+</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,17 +1,37 @@
 <script setup>
-import {flight} from "src/composables/objects/flight";
 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: {
    type: Object,
    required: true
  },
-  showCopilots: {
-    type: Boolean,
+  copilotDetailRoute: {
+    type: Object,
    required: false,
-    default: false
+    default: null
+  },
+  aircraftDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
+  },
+  poiDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
+  },
+  eventDetailRoute: {
+    type: Object,
+    required: false,
+    default: null
+  },
+  loggedUser: {
+    type: Object,
+    required: false,
+    default: null
  }
 })
 </script>
@@ -23,7 +43,15 @@ const props = defineProps({
        <q-icon name="flight"/>
      </q-item-section>
      <q-item-section>
+        <router-link
+          :to="{...aircraftDetailRoute, params: {id: flight.aircraft.id, callSign: flight.aircraft.callSign}}"
+          v-if="flight.aircraft.isPublic"
+        >
          {{ flight.aircraft.callSign }}
+        </router-link>
+        <template v-else>
+          {{ flight.aircraft.callSign }}
+        </template>
      </q-item-section>
    </q-item>

@@ -44,7 +72,9 @@ const props = defineProps({
          </q-item-section>
          <q-item-section>
            <div>
+              <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"/>
@@ -54,10 +84,27 @@ const props = defineProps({

        <q-item v-for="poi in flight.track" :key="poi.id">
          <q-item-section avatar>
-            <q-icon name="place"/>
+            <q-icon name="place" v-if="poi.pointOfInterest"/>
+            <q-icon name="local_airport" v-if="poi.airport"/>
          </q-item-section>
          <q-item-section>
+            <template v-if="poi.pointOfInterest">
+              <router-link
+                :to="{name: poiDetailRoute.name, params: {...poiDetailRoute.params, slug: poi.pointOfInterest.urlSlug, id: poi.pointOfInterest.id}}"
+                v-if="poi.pointOfInterest.isPublic"
+              >
                {{ poi.pointOfInterest.name }}
+              </router-link>
+              <template v-else>{{ poi.pointOfInterest.name }}</template>
+            </template>
+            <span v-if="poi.airport">
+              <strong>{{ poi.airport.icaoCode }}</strong> ({{ poi.airport.name }}),
+              <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>

@@ -67,7 +114,9 @@ const props = defineProps({
          </q-item-section>
          <q-item-section>
            <div>
+              <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>
@@ -84,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">
@@ -91,9 +152,31 @@ const props = defineProps({
            <q-icon name="people"/>
          </q-item-section>
          <q-item-section>
-            <router-link :to="{name: 'copilotDetail', params: {id: copilot.id}}">
+            <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>
@@ -1,20 +0,0 @@
-<script setup>
-
-import {randomInt} from "src/composables/random";
-import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-</script>
-
-<template>
-  <q-card class="flight-detail-card">
-    <q-skeleton type="rect" height="400px"/>
-
-    <q-card-section>
-      <q-skeleton type="QInput" v-for="i in 3" :key="i" />
-    </q-card-section>
-
-  </q-card>
-
-  <q-card class="flight-detail-card" flat>
-    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
-  </q-card></template>
@@ -1,59 +1,37 @@
 <script setup>
-import {flight} from "src/composables/objects/flight";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import {computed, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {Line} from "vue-chartjs"

 const props = defineProps({
  flight: {
    type: Object,
    required: true
+  },
+  photos: {
+    type: Array,
+    required: false,
  }
 })


-const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
-const poisWithGPS = computed(() => {
-  return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
-});
+const mapPhotos = computed(() => props.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));

-const pointsOfInterests = computed(() => {
-  const path = [{
-    label: flight.value.takeoffAirport.name,
-    position:
-      {
-        lat: flight.value.takeoffAirport.gpsLatitude,
-        lng: flight.value.takeoffAirport.gpsLongitude
-      }
-  }];
-
-  for (const poi of poisWithGPS.value) {
-    path.push({
-      label: poi.pointOfInterest.name,
-      position: {lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude}
-    });
-  }
-
-  path.push({
-    label: flight.value.landingAirport.name,
-    position: {
-      lat: flight.value.landingAirport.gpsLatitude,
-      lng: flight.value.landingAirport.gpsLongitude
-    }
-  });
-
-  return path;
-});
-
-
-const gpxTrack = flight.value.gpxTrack;
+const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
+const pointsOfInterests = computed(() => mapMarkers
+  .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;
 const displayMap = computed(() => {
  return (
    !!gpxTrack ||
    mapPhotos.value.length > 0 ||
    poisWithGPS.value.length > 0 ||
-    flight.value.landingAirport.id !== flight.value.takeoffAirport.id
+    props.flight.landingAirport.id !== props.flight.takeoffAirport.id
  )
 });

@@ -101,13 +79,13 @@ if (gpxTrack) {

 const currentPositionMarker = ref(null);
 const drawCurrentPositionMarker = (e) => {
-  const res = e.chart.getElementsAtEventForMode(e, 'nearest', {intersect: false},);
+  const res = e.chart.getElementsAtEventForMode(e, 'nearest', {intersect: false});
  if (res.length === 0) {
    currentPositionMarker.value = null;
    return;
  }
  const idx = res[0].index;
-  currentPositionMarker.value = flight.value.gpxTrack.coordinates[idx];
+  currentPositionMarker.value = props.flight.gpxTrack.coordinates[idx];
 }

 const chartOptions = {
@@ -123,6 +101,8 @@ const chartOptions = {
 </script>

 <template>
+  <q-no-ssr>
+    <q-intersection>
      <MapWithMarkers
        v-if="displayMap"
        style="width: 100%; height: 500px;"
@@ -130,9 +110,11 @@ const chartOptions = {
        :markers="pointsOfInterests"
        :highlight-position="currentPositionMarker"
        :photos="mapPhotos"
+        v-bind="$attrs"
      />

      <Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
      <Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
-
+    </q-intersection>
+  </q-no-ssr>
 </template>
@@ -1,44 +1,75 @@
 <script setup>
 import {minutesToHumanReadable} from "src/composables/datetimeUtils";
-import {flightName} from "src/composables/objects/flight";
-import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
+import {flightName} from "src/composables/flight";
+import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {computed} from "vue";
+import LoadMoreList from "components/LoadMoreList.vue";
+import {pluralize} from "../../composables/utils";

 const props = defineProps({
  items: {
    type: Array,
    required: true
  },
-  routeDetail: {
-    type: Object,
-    required: false,
-    default: () => ({name: 'flightDetail', params: {}})
+  public: {
+    type: Boolean,
+    required: true
  },
-  displayVisibilityInfo: {
+  totalItemsCount: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    required: false,
+    default: 5,
+  },
+  isQueryRunning: {
    type: Boolean,
    required: false,
-    default: true
+    default: false
  }
 });

+const routeDetail = (flight) => {
+  if (props.public)
+    return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
+  else
+    return {name: "flightDetail", params: {id: flight.id}}
+};
+const loadMoreCount = computed(() => {
+  return Math.min(props.itemsPerPage, props.totalItemsCount - props.items.length);
+});
+
 </script>

 <template>
+  <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
+    <template #items>
      <q-list bordered separator>
        <q-item
          v-for="flight of items" :key="flight"
          ripple
          clickable
-      :to="{name: routeDetail.name, params:{...routeDetail.params, id: flight.id}}"
+          :to="routeDetail(flight)"
        >
          <q-item-section avatar>
-        <AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.thumbnailUrl"/>
+            <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
+            <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
          </q-item-section>
          <q-item-section>
            <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>

-        <div class="text-secondary" v-if="flight.copilot">
+            <div class="text-secondary" v-if="props.public">
+              <q-icon name="support_agent"/>
+              @{{ flight.pilot.publicUsername }}
+            </div>
+
+            <div class="text-secondary" v-if="flight.copilots">
              <q-icon name="person"/>
-          {{ flight.copilot.name }}
+              {{ flight.pilot.name }}
+              {{ flight.copilots }}
            </div>

            <div class="text-secondary">
@@ -49,11 +80,32 @@ const props = defineProps({
              <q-icon name="flight"/>
              {{ flight.aircraft.callSign }}
            </div>
+
+            <div class="text-secondary" v-if="flight.event">
+              <q-icon name="event"/>
+              {{ flight.event.name }}
+            </div>
          </q-item-section>

-      <q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">
-        <q-icon name="visibility"></q-icon>
+          <q-item-section side top v-if="!props.public">
+            <!-- Zobraz jen v adminu -->
+            <q-icon name="visibility" v-if="flight.isPublic"/>
+
+            <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
+              <q-tooltip>
+                Let je sice publikovaný, nemá ale nastavenou URL adresu!
+              </q-tooltip>
+            </q-icon>
          </q-item-section>
        </q-item>
      </q-list>
    </template>
+    <template #skeleton>
+      <FlightsListSkeleton :items="itemsPerPage"/>
+    </template>
+    <template #loadMoreText>
+      Načíst {{ pluralize(loadMoreCount, 'jeden let', `další ${loadMoreCount} lety`, `dalších ${loadMoreCount} letů`) }}
+    </template>
+  </LoadMoreList>
+
+</template>
@@ -1,58 +0,0 @@
-<script setup>
-import PhotoDetail from "components/photos/PhotoDetail.vue";
-import { ref, watch} from "vue";
-
-const props = defineProps({
-  photos: {
-    type: Array,
-    required: true
-  },
-  coverPhotoUrl: {
-    type: String,
-    required: false
-  },
-  defaultTitle: {
-    type: String,
-    required: false
-  }
-})
-
-const displayedPhoto = ref(null);
-const openPhotoDetail = ref(false);
-const photoData = ref(null);
-const openDetail = ({photo, idx, allPhotos}) => {
-  openPhotoDetail.value = true;
-  photoData.value = {photo, idx, allPhotos}
-}
-
-watch(() => props.photos, (newVal) => {
-  if (newVal.length === 0) return;
-  displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
-}, {immediate: true});
-</script>
-
-<template>
-  <q-carousel
-    v-if="photos.length > 0"
-    animated
-    v-model="displayedPhoto"
-    arrows
-    swipeable
-    height="auto"
-    infinite
-    v-bind="$attrs"
-  >
-    <q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
-      <q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: photos})"/>
-    </q-carousel-slide>
-  </q-carousel>
-
-  <PhotoDetail
-    v-if="photoData"
-    v-model="openPhotoDetail"
-    :default-title="defaultTitle"
-    :photo="photoData.photo"
-    :photos="photoData.allPhotos"
-    :opened-index="photoData.idx"
-  />
-</template>
@@ -6,7 +6,6 @@ import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
 import {isRequired} from "src/composables/form/rules";
-import {isRequestPending} from "src/composables/form/props";

 const props = defineProps({
  aircrafts: {
@@ -21,19 +20,29 @@ const props = defineProps({
    type: Object,
    required: false
  },
-  isRequestPending,
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });

+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,
  landingDatetime: null,
-  landings: 1,
-  isPublic: false,
-  name: "",
-  description: "",
 });

 const rules = {
@@ -43,19 +52,21 @@ const rules = {
  landingDatetime: [isRequired],
  landingAirport: [isRequired],
 };
+
 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: newVal.takeoffAirport.name}
-    formData.landingAirport = {id: newVal.landingAirport.id, name: newVal.landingAirport.name}
+
+    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});
-
-const aircrafts = computed(() => {
-  return props.aircrafts.map(a => ({id: a.id, name: a.callSign}));
-});
-
 watch(() => formData.takeoffDatetime, () => {
  if (!formData.landingDatetime) {
    formData.landingDatetime = structuredClone(formData.takeoffDatetime);
@@ -67,18 +78,13 @@ 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-mx-md q-my-md">
-          <q-card-section>
-            <div class="text-h6">Vyber letadlo</div>
-          </q-card-section>
-
-          <q-card-section>
        <ComboboxInput
          :rules="rules.aircraft"
          v-bind="commonProps"
@@ -86,17 +92,23 @@ watch(() => formData.takeoffAirport, () => {
          v-model="formData.aircraft"
          label="Letadlo"
        />
-          </q-card-section>
-        </q-card>
      </div>
    </div>
-    <div class="row">
-      <div class="col col-12 col-md-6">
-        <q-card class="q-mx-md q-my-md">
-          <q-card-section>
+
+    <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="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>
-          </q-card-section>
-          <q-card-section>
        <DatetimePicker
          v-model="formData.takeoffDatetime"
          :rules="rules.takeoffDatetime"
@@ -110,19 +122,11 @@ watch(() => formData.takeoffAirport, () => {
          v-model="formData.takeoffAirport"
          label="Letiště vzletu"
          v-bind="commonProps"
-              :enable-new-values="false"
        />
-          </q-card-section>
-        </q-card>
      </div>

-      <div class="col col-12 col-md-6">
-
-        <q-card class="q-mx-md  q-my-md">
-          <q-card-section>
+      <div class="col col-12 col-md-6 q-pl-md-sm">
        <div class="text-h6">Přistání</div>
-          </q-card-section>
-          <q-card-section>
        <DatetimePicker
          v-model="formData.landingDatetime"
          :min-date="formData.takeoffDatetime"
@@ -137,11 +141,12 @@ watch(() => formData.takeoffAirport, () => {
          label="Letiště přistání"
          v-bind="commonProps"
          :rules="rules.landingAirport"
-              :enable-new-values="false"
        />
-          </q-card-section>
-        </q-card>
+      </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>
@@ -1,35 +1,86 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import RichTextEditor from "components/inputs/RichTextEditor.vue";
 import {commonProps} from "src/composables/inputs";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import SlugInput from "components/inputs/SlugInput.vue";
+import {storeToRefs} from "pinia";
+import {useLoggedUserStore} from "stores/LoggedUser";

 const props = defineProps({
  flight: {
    type: Object,
    required: false
  },
+  events: {
+    type: Array,
+    required: false,
+  },
+  isRequestPending: {
+    type: Boolean,
+    required: false,
+    default: false,
+  }
 });

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

-const isMounted = ref(false);
-onMounted(() => {
-  if (props.flight)
-    setDefaultData(formData.value, props.flight);

-  isMounted.value = true;
-})
+const loggedUser = storeToRefs(useLoggedUserStore()).user;

+watch(() => props.flight, (newVal) => {
+  if (newVal) {
+    setDefaultData(formData, newVal);
+
+    if (newVal.event) {
+      formData.event = {id: newVal.event.id, name: newVal.event.name};
+    }
+  }
+}, {immediate: true});
+
+const descriptionTab = ref("description");
 </script>

 <template>
-  <FormWrapper v-model="formData" v-if="isMounted">
+  <FormWrapper v-model="formData" :is-request-pending="props.isRequestPending">
+    <ComboboxInput :options="events" v-if="events" v-model="formData.event" label="Událost" v-bind="commonProps"/>
    <q-input type="text" v-model="formData.name" label="Jméno letu" v-bind="commonProps"/>
-    <RichTextEditor v-model="formData.description" v-bind="commonProps" label="Popis letu, poznámky, ..." />
+    <template v-if="loggedUser?.publicUsername">
+      <SlugInput
+        v-if="formData.isPublic"
+        v-bind="commonProps"
+        v-model="formData.urlSlug"
+        label="URL"
+        :url="`/${loggedUser.publicUsername}/`"
+        :slug-source="formData.name"
+      />
+      <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+    </template>
+
+    <q-tabs v-model="descriptionTab" active-color="primary">
+      <q-tab name="description">Popis</q-tab>
+      <q-tab name="debriefing">Debriefing (soukromé poznámky)</q-tab>
+    </q-tabs>
+    <q-tab-panels  v-model="descriptionTab">
+      <q-tab-panel name="description">
+
+
+
+        <RichTextEditor v-model="formData.description" v-bind="commonProps" height="30vh"/>
+      </q-tab-panel>
+      <q-tab-panel name="debriefing">
+
+        <RichTextEditor v-model="formData.debriefingNotes" v-bind="commonProps" height="20vh"/>
+      </q-tab-panel>
+    </q-tab-panels>
  </FormWrapper>
 </template>
@@ -1,7 +1,6 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
 import {reactive} from "vue";
-import ComboboxInput from "components/inputs/ComboboxInput.vue";

 const props = defineProps({
    flight: {
@@ -17,6 +16,10 @@ const props = defineProps({
 const formData = reactive({
  photos: []
 });
+
+const inlinePreview = (photo) => {
+  return URL.createObjectURL(photo);
+}
 </script>

 <template>
@@ -26,6 +29,18 @@ const formData = reactive({
      align: "left"
    }'>

+    <div class="flex flex-center">
+      <div v-for="photo in formData.photos" :key="photo.name" style="width: 70px" class="q-ma-sm">
+        <q-img
+          :src="inlinePreview(photo)"
+          fit="fill"
+        >
+          <div class="absolute-top absolute-bottom text-center" v-if="isRequestPending">
+            <q-spinner/>
+          </div>
+        </q-img>
+      </div>
+    </div>
    <q-file
      class="q-my-lg"
      outlined
@@ -1,8 +1,9 @@
 <script setup>
 import FormWrapper from "components/FormWrapper.vue";
-import {onMounted, reactive, ref, watch} from "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: {
@@ -12,6 +13,10 @@ const props = defineProps({
    type: Array,
    required: true
  },
+  airports: {
+    type: Array,
+    required: true
+  },
  flight: {
    type: Object,
    required: false
@@ -20,45 +25,65 @@ const props = defineProps({

 const formData = reactive({
  track: [],
-  gpxTrack: null
+  gpxTrackFile: null
 });
 const removeTrackItem = (index) => {
  formData.track.splice(index, 1);
 }

 const poi = ref(null);
-const addTrackItem = (item) => {
-  formData.track.push(item);
+const airport = ref(null);
+const landingDuration = ref(null);
+
+const addTrackPOIItem = (item) => {
+  formData.track.push({pointOfInterest: item});
  poi.value = null;
 }
+
+const addAirportToTrack = (airportData, duration) => {
+  formData.track.push({airport: airportData, landingDuration: parseInt(duration)})
+  airport.value = null;
+}
+
 watch(poi, (newVal) => {
  if (newVal?.name) {
-    addTrackItem(newVal);
+    addTrackPOIItem(newVal);
  }
 });

-onMounted(() => {
-  for (const i in props.flight.track) {
-    const poiInfo = props.flight.track[i].pointOfInterest;
-    formData.track.push({
-      id: poiInfo.id,
-      name: poiInfo.name
-    });
+watch(() => props.flight.track, (newVal) => {
+  formData.track = [];
+  for (const i in newVal) {
+    const trackInfo = newVal[i];
+    const info = {landingDuration: trackInfo.landingDuration};
+    if (trackInfo.pointOfInterest) {
+      info['pointOfInterest'] = {
+        id: trackInfo.pointOfInterest.id,
+        name: trackInfo.pointOfInterest.name,
+      };
    }
-});
+    if (trackInfo.airport) {
+      info['airport'] = {
+        id: trackInfo.airport.id,
+        name: trackInfo.airport.name,
+      }
+    }
+    formData.track.push(info);
+  }
+}, {immediate: true});
 </script>

 <template>
  <FormWrapper v-model="formData">

-    <q-banner class="bg-green text-white" v-if="flight.gpxTrackUrl">
+    <q-banner class="bg-green text-white" v-if="flight.gpxTrack">
      <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"
@@ -68,17 +93,46 @@ onMounted(() => {
      </template>
    </q-file>

+    <h5>Body na mapě</h5>
+
    <ComboboxInput
      v-bind="commonProps"
      v-model="poi"
      :key="formData.track.length"
      :options="locations"
-      @select="addTrackItem"
+      @select="addTrackPOIItem"
      clearable
      label="Přidat otočný bod"
      hint="Nastav významné otočné body"
    />

+    <div class="row">
+      <div class="col-12 col-md-8">
+        <ComboboxInput
+          v-bind="commonProps"
+          v-model="airport"
+          :key="formData.track.length"
+          :options="airports"
+          clearable
+          label="Letiště pro mezipřistání"
+          hint="Nastav letiště a dobu mezipřistání"
+        />
+      </div>
+      <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-md"
+        >
+          <template #after>
+            <q-btn @click="addAirportToTrack(airport, landingDuration)" color="primary" icon="add"></q-btn>
+          </template>
+        </q-input>
+      </div>
+    </div>
+
    <q-list bordered>
      <q-item-label header>Trasa</q-item-label>
      <q-item>
@@ -86,7 +140,7 @@ onMounted(() => {
          <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>

@@ -95,13 +149,20 @@ onMounted(() => {
          <q-avatar size="32px" color="secondary" text-color="white">{{ index + 1 }}.</q-avatar>
        </q-item-section>
        <q-item-section>
-          <span>
-            {{ item.name }}
+          <span v-if="item.pointOfInterest">
+            {{ item.pointOfInterest.name }}

-            <q-badge color="green" v-if="!item.id">
+            <q-badge color="green" v-if="!item.pointOfInterest.id">
              <q-icon name="add"/>
            </q-badge>
          </span>
+          <span v-if="item.airport">
+            {{ 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>
        <q-item-section top side>
@@ -114,7 +175,7 @@ onMounted(() => {
          <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>
@@ -1,5 +1,4 @@
 <script setup>
-import {randomInt} from "src/composables/random";
 import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
 import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 </script>
@@ -16,7 +15,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";

        <q-item>
          <q-list>
-            <ListItemSkeleton v-for="i in randomInt(1, 3)" :key="i"/>
+            <ListItemSkeleton v-for="i in 3" :key="i"/>
          </q-list>
        </q-item>

@@ -26,7 +25,7 @@ import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
      </q-list>

      <article class="q-my-lg">
-        <BasicTextSkeleton :lines="randomInt(2, 5)" :paragraphs="randomInt(1, 2)" />
+        <BasicTextSkeleton :lines="7" :paragraphs="2" />
      </article>

      <q-skeleton height="400px" square class="q-mt-lg"/>
@@ -1,6 +1,7 @@
 <script setup>
+
 </script>

 <template>
-  <em>POI edit skeleton</em>
+  edit copilot skeleton
 </template>
@@ -0,0 +1,77 @@
+<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>
@@ -1,10 +1,18 @@
 <script setup>
 import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  items: {
+    type: Number,
+    required: false,
+    default: 10,
+  }
+})
 </script>

 <template>
-  <q-list bordered separator class="q-mx-md q-my-md">
-    <q-item v-for="i in randomInt(5, 10)" :key="i" ripple>
+  <q-list bordered separator>
+    <q-item v-for="i in items" :key="i" ripple>
      <q-item-section avatar>
        <q-avatar size="100px">
          <q-skeleton type="QAvatar" size="100px"></q-skeleton>
@@ -12,7 +20,6 @@ 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%"/>
@@ -0,0 +1,33 @@
+<script setup>
+import {flightName} from "src/composables/flight";
+
+const props = defineProps({
+  flight: {
+    type: Object,
+    required: true
+  },
+  textColor: {
+    type: String,
+    required: false,
+    default: "white"
+  }
+})
+</script>
+
+<template>
+  <div class="text-h4">
+    <router-link
+      :class="`text-${props.textColor}`"
+      :to="{name: 'publicFlightDetail', params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}"
+    >
+      {{ flightName(flight) }}
+    </router-link>
+  </div>
+
+  <router-link
+    :class="`text-${props.textColor}`"
+    :to="{name: 'publicProfileDetail', params: {username: flight.pilot.publicUsername}}"
+  >
+    @{{ flight.pilot.publicUsername }}
+  </router-link>
+</template>
@@ -0,0 +1,48 @@
+<script setup>
+import {ref} from "vue";
+import {flightName} from "src/composables/flight";
+import LatestFlightSliderInfo from "components/flights/slider/LatestFlightSliderInfo.vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+const slide = ref(0);
+</script>
+
+<template>
+  <div class="bg-blue-1 q-py-lg">
+    <h3 class="text-center">Poslední lety</h3>
+
+    <q-carousel
+      v-model="slide"
+      swipeable
+      animated
+      control-color="primary"
+      navigation
+      padding
+      arrows
+      height="500px"
+      class="bg-blue-1 text-white"
+    >
+      <q-carousel-slide :name="idx" v-for="(flight, idx) in items" :key="idx" class="column no-wrap flex-center text-center">
+        <q-img
+          :src="flight.titlePhoto.url"
+          fit="cover"
+          ratio="16/9"
+          style="max-width: 1000px;"
+          height="400px"
+          v-if="flight.titlePhoto"
+        >
+          <div class="absolute-bottom">
+            <LatestFlightSliderInfo :flight="flight"/>
+          </div>
+        </q-img>
+        <LatestFlightSliderInfo v-else :flight="flight" text-color="primary"/>
+      </q-carousel-slide>
+    </q-carousel>
+  </div>
+</template>
@@ -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,37 @@
+<script setup>
+</script>
+
+<template>
+  <q-timeline color="primary" class="q-my-lg">
+    <q-timeline-entry title="Zaznamenej si let">
+      <div>
+        Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Ulož trasu">
+      <div>
+        Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Vyber a nahraj fotky">
+      <div>A pokud mají v sobě uloženou informaci o poloze, p
+        Máš nějaké fotky z letu? Nahraj je ke svému letu! Polétání.cz ti zobrazí i místo kde fotka vznikla.
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Popiš zážitek">
+      <div>
+        Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
+      </div>
+    </q-timeline-entry>
+
+    <q-timeline-entry title="Sdílej">
+      <div>
+        Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a
+        sdílet odkaz kde chceš. Třeba s tvým kopilotem.
+      </div>
+    </q-timeline-entry>
+  </q-timeline>
+</template>
@@ -10,11 +10,6 @@ const props = defineProps({
    required: false,
    default: () => []
  },
-  enableNewValues: {
-    type: Boolean,
-    required: false,
-    default: true,
-  },
  options: {
    type: Array,
    required: true,
@@ -101,11 +96,11 @@ const filterFn = (val, update, abort) => {
    :options="availableOptions"
    :option-label="optionLabel"
    :option-value="optionValue"
-    :new-value-mode="enableNewValues ? 'add' : 'toggle'"
+    new-value-mode="add"
    clear-icon="clear"
    :v-bind="$attrs"
  >
-    <template v-slot:no-option v-if="enableNewValues">
+    <template #no-option>
      <q-item v-if="inputValue">
        <q-item-section avatar>
          <q-avatar text-color="green" size="32px" icon="add"/>
@@ -115,5 +110,9 @@ const filterFn = (val, update, abort) => {
        </q-item-section>
      </q-item>
    </template>
+
+    <template #append>
+      <slot name="append" />
+    </template>
  </q-select>
 </template>
@@ -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,6 +1,6 @@
 <script setup>
 import {computed, onMounted, ref, watch} from "vue";
-import {FORMAT_DATETIME_LONG, FORMAT_ISO, formatDatetime, parseDate} from "src/composables/datetimeUtils";
+import {FORMAT_DATE, FORMAT_DATE_ISO, FORMAT_DATETIME_LONG, FORMAT_ISO, formatDatetime, parseDate} from "src/composables/datetimeUtils";
 import {commonProps} from "src/composables/inputs";

 const props = defineProps({
@@ -23,9 +23,14 @@ const props = defineProps({
  }
 })

-let dateModel = ref("");
-let timeModel = ref("");
+const emit = defineEmits(['update:modelValue']);
+
+const dateModel = ref("");
+const timeModel = ref("00:00:00");
+const tab = ref("date");
+
 let originalTime, originalDate;
+const popupProxy = ref(null);

 const publicModel = computed(() => {
  if (!dateModel.value) {
@@ -35,12 +40,22 @@ const publicModel = computed(() => {
  return formatDatetime(dateObject, props.mask);
 });

-const popupProxy = ref(null);
+const model = computed(() => {
+  if (dateModel.value === '') return null;
+  let modelVal = dateModel.value;
+  if (showTimePicker.value) {
+    modelVal += "T" + timeModel.value;
+  } else {
+    modelVal += "T00:00:00"
+  }
+
+  return modelVal
+});

-const model = computed(() => dateModel.value + "T" + timeModel.value);
-const emit = defineEmits(['update:modelValue']);
 const emitModelUpdate = () => {
-  if (dateModel.value === '' || timeModel.value === '') return;
+  if (dateModel.value === '' || timeModel.value === '') {
+    return;
+  }

  const val = parseDate(model.value);
  emit("update:modelValue", val);
@@ -49,6 +64,12 @@ const emitModelUpdate = () => {
    popupProxy.value.hide();
 }

+const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
+
+watch(() => dateModel.value, (newVal, oldVal) => {
+  if (showTimePicker.value)
+    tab.value = "time";
+});
 const containsAnyOf = (needles, haystack) => {
  for (const i in needles) {
    if (haystack.includes(needles[i])) return true;
@@ -57,9 +78,6 @@ const containsAnyOf = (needles, haystack) => {
  return false;
 }

-const showDatePicker = computed(() => containsAnyOf(["YY", "M", "D"], props.mask));
-const showTimePicker = computed(() => containsAnyOf(["H", "h", "m"], props.mask));
-
 const setOriginalValues = () => {
  originalDate = dateModel.value;
  originalTime = timeModel.value;
@@ -120,21 +138,43 @@ watch(() => props.modelValue, (newVal) => {

    <template #default>
      <q-popup-proxy ref="popupProxy" @hide="emitModelUpdate" @show="setOriginalValues">
-        <div class="proxy-wrapper">
-          <div class="row">
-            <div class="col-12 col-sm-6" v-if="showDatePicker">
-              <q-date square v-model="dateModel" :options="isDateValid" :today-btn="true" flat mask="YYYY-MM-DD" :locale="myLocale"/>
-            </div>
-            <div class="col-12 col-sm-6" v-if="showTimePicker">
-              <q-time square v-model="timeModel" format24h flat mask="HH:mm:ss"/>
-            </div>
-          </div>
-          <div class="row q-mb-sm">
+        <div class="proxy-wrapper relative-position" :style="`min-height: ${showTimePicker ? '500' : '300'}px`">
+
+          <q-tabs v-model="tab" v-if="showTimePicker" class="bg-primary text-white">
+            <q-tab name="date" icon="event" :label="dateModel ? formatDatetime(dateModel, 'D. M.', FORMAT_DATE_ISO) : 'datum'"/>
+            <q-tab name="time" v-if="showTimePicker" icon="schedule" :label="model ? formatDatetime(model, 'HH:mm') : 'čas'"/>
+          </q-tabs>
+
+          <q-separator/>
+
+          <q-tab-panels v-model="tab" animated>
+            <q-tab-panel name="date">
+              <q-date
+                minimal
+                flat
+                v-model="dateModel"
+                :options="isDateValid"
+                mask="YYYY-MM-DD"
+                :locale="myLocale"
+              />
+            </q-tab-panel>
+
+            <q-tab-panel name="time" v-if="showTimePicker">
+              <q-time
+                v-model="timeModel"
+                format24h
+                flat
+                mask="HH:mm:ss"
+              />
+            </q-tab-panel>
+          </q-tab-panels>
+
+          <div class="row q-mb-sm absolute-bottom">
            <div class="col">
              <q-btn color="secondary" class="q-ml-sm" @click="cancelSelection">Zrušit</q-btn>
            </div>
            <div class="col text-right">
-              <q-btn color="primary" class="q-mr-sm" @click="emitModelUpdate">Nastavit</q-btn>
+              <q-btn color="primary" class="q-mr-sm" :disable="!dateModel || !timeModel" @click="emitModelUpdate">Nastavit</q-btn>
            </div>
          </div>
        </div>
@@ -1,14 +1,9 @@
 <script setup>
 import {Marker} from "vue3-google-map";
 import {onMounted, ref} from "vue";
-import axios from "axios";
 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,35 +19,30 @@ 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);
+    searchGeocode(props.label).then(results => {
+      if (!results) return;
+      center.value = results[0].geometry.location;
+      emitModels(center.value.lat, center.value.lng);
+      zoom.value = 13;
+    });
  } else {
    console.error("Set either label or gps coordinates.");
  }
@@ -61,7 +51,17 @@ onMounted(() => {
 </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,121 @@
+<script setup>
+import {InfoWindow} from "vue3-google-map";
+import {useFlightPlanUtils} from "src/composables/flightPlan";
+import {useGeocode} from "src/composables/geocoding";
+import {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: () => []
+  },
+  showActions: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+
+const emits = defineEmits(["add-to-route", "highlight-airspace", "close"])
+
+const {getIcon} = useFlightPlanUtils();
+const {searchPlaceName} = useGeocode()
+
+const title = ref(null);
+
+watch(() => props.infoWindow.position, async () => {
+  if (props.infoWindow.title) {
+    title.value = props.infoWindow.title
+  } else {
+    title.value = await searchPlaceName(props.infoWindow.position.lat, props.infoWindow.position.lng);
+  }
+}, {immediate: true, deep: true});
+
+const addPoint = async () => {
+  let type = "mapPoint";
+  if (props.infoWindow.poi) {
+    type = "poi";
+  } else if (props.infoWindow.airport) {
+    type = "airport";
+  }
+  const point = props.infoWindow.marker || {
+    name: title.value,
+    type: type,
+    gpsLatitude: props.infoWindow.position.lat,
+    gpsLongitude: props.infoWindow.position.lng
+  }
+  emits("add-to-route", point)
+}
+
+const {getColorByType} = useAirspaceColors();
+const highlightAirspace = (airspace) => {
+  emits('highlight-airspace', airspace.name)
+}
+</script>
+
+
+<template>
+  <InfoWindow
+    @close="emits('close')"
+    :options="{position: infoWindow.position}"
+  >
+    <div class="text-h5">{{ title }}</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>
+
+    <template v-if="infoWindow.airspaces?.length">
+      <span class="text-h6">Prostory</span>
+      <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>
+    </template>
+    <q-btn
+      v-if="showActions"
+      class="q-mt-lg"
+      color="secondary"
+      @click="addPoint()">
+      Přidat bod do trasy
+    </q-btn>
+  </InfoWindow>
+</template>
@@ -1,14 +1,20 @@
 <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,
    required: false,
+    default: () => {
+    }
+  },
+  tracks: {
+    type: Array,
+    required: false,
+    default: () => []
  },
  markers: {
    type: Array,
@@ -26,15 +32,47 @@ const props = defineProps({
  }
 })

-const track = ref([]);
-const speed = ref([]);
-const elevation = 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.gpxTrack || []),
+    ...(props.tracks || []).flat()
+  ];
+
+  const minLat = Math.min(...coordinates.map(i => i.lat));
+  const maxLat = Math.max(...coordinates.map(i => i.lat));
+  const minLng = Math.min(...coordinates.map(i => i.lng));
+  const maxLng = Math.max(...coordinates.map(i => i.lng));
+
+  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>
@@ -47,10 +85,15 @@ const bounds = computed(() => {
    </Marker>

    <template v-if="gpxTrack && gpxTrack.length > 0">
-      <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
+      <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: getColor(0), strokeOpacity: 0.5, strokeWeight: 5}"/>
+    </template>
+
+    <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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
Michal Kváček	71389caecc	Reorganizace skeletonu, aktualizace app-vite a quasaru	2023-12-10 10:19:03 +01:00
Michal Kváček	68659ca924	Bugfixing, dotazeni uprav s uvodni fotkou	2023-12-05 12:15:12 +01:00
Michal Kváček	3bd4d7ba52	Lepsi verejna cast, ssr, lepsi prace s fotkamaa	2023-12-04 22:46:23 +01:00
Michal Kváček	11cc6ad107	Vylepseni SSR, pridani meta informaci, zatim dost WIP	2023-11-28 11:35:53 +01:00
Michal Kváček	86605ad53e	Merge branch 'master' of kvacek.cz:poletani.cz/app into ssr	2023-11-21 16:27:49 +01:00
Michal Kváček	9a14fdfcfb	Fix chybejiciho importu props	2023-11-20 16:48:58 +01:00
Michal Kváček	00d4de08e4	Fix chybejiciho importu props	2023-11-20 16:48:35 +01:00
Michal Kváček	9181118e69	Fix loginu a spatneho importu	2023-11-20 16:43:19 +01:00
Michal Kváček	4aeef2e8a6	Merge branch 'master' of kvacek.cz:poletani.cz/app into ssr	2023-11-20 16:28:02 +01:00
Michal Kváček	af74801693	Bugfixing	2023-11-20 10:24:08 +01:00
Michal Kváček	f9d70a5d57	Ne uplne otestovany prepis storu	2023-11-19 00:44:01 +01:00
Michal Kváček	331ebbc4e4	Zaklad ssr	2023-11-14 16:20:01 +01:00
Michal Kváček	e65491e00b	Bugfix	2023-11-09 06:17:20 +01:00
Michal Kváček	8beb7bb9d6	Odstraneni vue-inner-image-zoom, oprava na dotazovani na verejny seznam letu u kopilota	2023-11-07 17:47:23 +01:00
Michal Kváček	284f8d2c53	Nahled pred uploadem	2023-11-06 21:35:43 +01:00
Michal Kváček	6b1e220d42	Pridani stranky pro verejny prehled letu s danym kopilotem	2023-11-02 09:03:12 +01:00
Michal Kváček	40f21d159e	Pridani skeletonu	2023-11-01 06:19:26 +01:00
Michal Kváček	3e7ee9e686	Uprava editoru	2023-10-31 17:29:51 +01:00
Michal Kváček	1ed35552d5	Drobnosti	2023-10-30 09:13:54 +01:00
Michal Kváček	e2ad6e39b8	Implementace photoswipe	2023-10-30 09:08:58 +01:00
Michal Kváček	a63efc44d8	Prepracovane zobrazeni seznamu fotke	2023-10-27 23:01:11 +02:00
Michal Kváček	100e1fa33b	Pridan fotoeditor	2023-10-27 22:30:47 +02:00
Michal Kváček	4c8952117b	Refaktoring verejneho profilu, pridani zobrazeni udalosti	2023-10-14 22:43:16 +02:00
Michal Kváček	5b47c56c6f	Bugfixing a refaktoring	2023-10-13 23:25:06 +02:00
Michal Kváček	bf8df8bb34	Fix vykreslovani mapy	2023-10-09 14:57:15 +02:00
Michal Kváček	e76d34fab4	Refaktoring a pridani letiste mezipristani do mapy	2023-10-07 22:11:56 +02:00
Michal Kváček	901c652641	Pridani letiste pro mezipristani	2023-10-07 21:37:16 +02:00
Michal Kváček	36b0178b97	Pridani od/do k eventum, fix datetime pickeru pro vyber pouze data, pridano URL k otevrene fotce	2023-09-25 06:25:53 +02:00
Michal Kváček	b64c426179	Otaceni fotek	2023-09-21 09:39:22 +02:00
Michal Kváček	d1baec342f	Drobny bugfixing	2023-09-20 14:43:53 +02:00
Michal Kváček	8c3c5ee48d	Sprava eventu a organizaci	2023-09-20 13:26:13 +02:00
Michal Kváček	6fbaef4a1e	Sprava eventu	2023-09-19 06:33:17 +02:00
Michal Kváček	0c91ff7838	Fix vypisu spolecnych letu s kopilotem, uprava zobrazeni photo carouselu	2023-09-18 20:03:53 +02:00
Michal Kváček	b6a6fc3558	Description projektu, drobna uprava skeletonu pro editaci letu	2023-09-18 09:00:03 +02:00
Michal Kváček	e203a7d229	Refaktoring	2023-09-13 10:03:41 +02:00