From c4603cf090d275854d1695e52603ee3440d1cc7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 7 Aug 2023 23:22:28 +0200
Subject: [PATCH] Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

---
 public/mapIcons/photo-16x16.png               | Bin 0 -> 610 bytes
 public/mapIcons/photo-32x32.png               | Bin 0 -> 803 bytes
 public/mapIcons/photo-512x512.png             | Bin 0 -> 10900 bytes
 quasar.config.js                              |   7 +-
 src/components/MapWithMarkers.vue             |  58 ----------
 src/components/MapWrapper.vue                 |  12 --
 .../aircrafts/AircraftsListSkeleton.vue       |   4 +-
 src/components/copilots/CopilotEditForm.vue   |   5 -
 src/components/copilots/CopilotForm.vue       |  30 +++++
 .../copilots/CopilotListSkeleton.vue          |  15 ++-
 src/components/copilots/CopilotsList.vue      |   2 +-
 src/components/flights/FlightBasicInfo.vue    |  24 ++--
 src/components/flights/FlightsList.vue        |  56 +++++-----
 .../flights/FlightsListSkeleton.vue           |  21 +++-
 .../flights/form/FlightFormBasic.vue          | 100 ++++++++++-------
 .../flights/form/FlightFormCopilot.vue        |  25 +++--
 .../flights/form/FlightFormNotes.vue          |   5 +-
 .../flights/form/FlightFormTrack.vue          |  16 ++-
 .../inputs/AirportLocationInput.vue           |  52 ---------
 src/components/inputs/ComboboxInput.vue       |  13 ++-
 src/components/inputs/DatetimePicker.vue      |  17 ++-
 src/components/inputs/MapGPSInput.vue         |   2 +-
 src/components/map/EmbeddedMap.vue            |  42 +++++++
 src/components/map/MapWithMarkers.vue         |  71 ++++++++++++
 src/components/map/MapWrapper.vue             |  36 ++++++
 src/components/photos/PhotoDetail.vue         | 105 ++++++++++++++++++
 .../{flights => photos}/PhotoForm.vue         |   2 +-
 src/components/photos/PhotosList.vue          |  20 ++--
 src/components/poi/POIEditForm.vue            |   4 -
 src/components/weather/CloudCoverIcon.vue     |  14 +++
 src/components/weather/WeatherInfo.vue        |  74 ++++++++++++
 src/composables/inputs.js                     |   5 +
 src/composables/objects/aircraft.js           |   2 +-
 src/composables/objects/flight.js             |  10 +-
 src/graphql/fragments/copilot.js              |  15 +++
 src/graphql/fragments/flight.js               |  40 ++++---
 src/graphql/fragments/photo.js                |   4 +
 src/graphql/mutations/copilot.js              |  29 +++++
 src/graphql/queries/aircrafts.js              |   8 +-
 src/graphql/queries/copilots.js               |  12 +-
 src/layouts/ProfileLayout.vue                 |  25 +++--
 src/pages/profile/ProfilePage.vue             |   8 --
 .../profile/details/AircraftDetailPage.vue    |  29 ++---
 .../profile/details/CopilotDetailPage.vue     |   4 +-
 .../profile/details/FlightDetailPage.vue      |  91 +++++++++++----
 .../details/PointOfInterestDetailPage.vue     |  10 +-
 src/pages/profile/forms/EditAircraftPage.vue  |  31 +++---
 src/pages/profile/forms/EditCopilotPage.vue   |  25 +++--
 src/pages/profile/forms/EditFlightPage.vue    |   2 +-
 src/pages/profile/forms/NewAircraftsPage.vue  |  12 +-
 src/pages/profile/forms/NewCopilotPage.vue    |  27 +++--
 src/pages/profile/forms/NewFlightPage.vue     |  40 +++----
 src/router/routes.js                          |   8 +-
 src/stores/Aircrafts.js                       |   3 -
 src/stores/Copilots.js                        |  27 +++--
 55 files changed, 891 insertions(+), 408 deletions(-)
 create mode 100644 public/mapIcons/photo-16x16.png
 create mode 100644 public/mapIcons/photo-32x32.png
 create mode 100644 public/mapIcons/photo-512x512.png
 delete mode 100644 src/components/MapWithMarkers.vue
 delete mode 100644 src/components/MapWrapper.vue
 delete mode 100644 src/components/copilots/CopilotEditForm.vue
 create mode 100644 src/components/copilots/CopilotForm.vue
 delete mode 100644 src/components/inputs/AirportLocationInput.vue
 create mode 100644 src/components/map/EmbeddedMap.vue
 create mode 100644 src/components/map/MapWithMarkers.vue
 create mode 100644 src/components/map/MapWrapper.vue
 create mode 100644 src/components/photos/PhotoDetail.vue
 rename src/components/{flights => photos}/PhotoForm.vue (96%)
 create mode 100644 src/components/weather/CloudCoverIcon.vue
 create mode 100644 src/components/weather/WeatherInfo.vue
 create mode 100644 src/composables/inputs.js
 create mode 100644 src/graphql/fragments/copilot.js
 create mode 100644 src/graphql/mutations/copilot.js

diff --git a/public/mapIcons/photo-16x16.png b/public/mapIcons/photo-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..40b9b37b0e2acb46f2b0cb44201f8ff2cbd115dd
GIT binary patch
literal 610
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf66p}rHd>I(3)EF2VS{N990fib~
zFff!FFfhDIU|_JC!N4G1FlSew4N!t9$=lt9;eUJonf*W>XMsm#F#`kNVGw3Kp1&dm
zD9B#o>Fdh=oP(W5$a>ZFNremyj69w$jv*T7YcK5AYc7;H`tkhxx7xRk1az8oIBwX`
zIk!>G>4@4(-U7}?QZWq$%&tirJv=zd8(2Keo0syat=;!F`-ME`BcJD%&v(yJ{}JYP
zrBL^5o<!BxCf|u7j;9-6&p)s)T-+!_OKQ{AzU0Nrj&4emE&K4m_u{TuN0JNHy_1df
z_0@GT`c>n_`=Y-$(m3bB-gH*uiU3hX(`P!@1lG*hlzwL$%f{I71$qz9bto9U4D$5z
zJGqq8;L*ChHdi;TSoG#_`=+j??{=&(H(r11bLh|e2i97$1{gfwCVkxY!L3cU$8UVN
z@;6!9!{KZnuj|2;%BHt`b+WH^H(co!HaS!NF7Rf;>f(P(ulPFr;h#{$sMg?_`uo*%
zJz!9&mbgZgq$HN4S|t~y0x1R~10!Qy0}EXP^AJNLD?<Y-QzLBy11kdqCAnRnP&DM`
zr(~v8VrnolgJ@WLQr`urK?80>NoH<paY<rs0lFRwD^p8|9?>@Q`9M9AAU(nPX(i=}
nMX3zs<>h*rdD+Fui3O>8`9<lo-`Pk36)||a`njxgN@xNA7b)Tm

literal 0
HcmV?d00001

diff --git a/public/mapIcons/photo-32x32.png b/public/mapIcons/photo-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..694f02a44ff61181e5738fdb28ea8f7c955f5e98
GIT binary patch
literal 803
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4zl0AZa85pY67#JE_7#My5g&JNk
zFq9fFFuY1&V6d9Oz#v{QXIG#NP=YDR+ueoXe|!I#{XiaPfk$L90|Vb-5N14{zaj-F
z$X?><>&pI|gPli+LzMk<Is*gaSx*<o5Rc<Wuk81p8Ysi|;rwdxJeKwQximRsgoK^A
zrIu)@7ZzN(sMvn&UnA3W1u2=_lFnt*mN|4BT6jY2<m$-@OO#ZE9QO%^PpFo9=lWsZ
z_cCMV`NlF8=Pdc}$3K6#W#W?pTeqc7CB~m`r4^s#`|Q+gx_<G$Dn+3e<~di5r&{eh
z8hiLxZI0N%DG6%dQ``(xFReWuI;Du!YwKl=*6cj1Xzi%(K+)}Ux|e9LTOqME*jw-8
z=|w`5w@Hbuy?M)M=8s2Bmh+3Hf2p%fzq{Ev;8Nw8<Dn&5oUAe&Ldt9`ouT>Jk#R+_
z{M%|a&6PgvSQ>pvZ)?Qq*Ue@nl?lGC0wHTES7-~p*bvg&aK!&I8*8U%wO&=$9drFP
zNe4QP=k0i(U1vD$72B2!zYPf<+8L%Pjt0vm+$X3TEX#>}FSzddrcE0o6y_Z{(y}P>
zwfl|I&0T7b(vCCbvc0Vm|M>o`)D$yu4X@O1O8?q@UilO^Zt_{B`{?#kqo>c9W{Tc@
z=kh1_uGgjx`%G~^8}^M$H|9qzFI>OJa?X*@akI9~FSb@^>ia96RP+7F=Ue%Aw#@l0
z9k_Li6SMKnygxiDTp~FyKEIHcU3vak{f8rq*Zui!QS$WivHaJko?c}uT%-?-Yt<6h
zh?11Vl2ohYqEsNoU}RuqtZQJQYhWH?Xk=w*U}b8gZD3$!V4x(o>l2EG-29Zxv`S13
zMrIHVYftLC05xd9Z79jiO)V}-%q>9IV_{`r0nzhY(8wRCM-rqbI6tkVJh3R1p}f3Y
gFEcN@I61K(RWH9NefB#WDWD<-Pgg&ebxsLQ00tB|5&!@I

literal 0
HcmV?d00001

diff --git a/public/mapIcons/photo-512x512.png b/public/mapIcons/photo-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..5be0f44e8b36bfb7c41152ccccf2783d8fb2be5d
GIT binary patch
literal 10900
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

literal 0
HcmV?d00001

diff --git a/quasar.config.js b/quasar.config.js
index 3b1ac1a..e5e4faa 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -41,15 +41,14 @@ module.exports = configure(function (/* ctx */) {
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
       // 'ionicons-v4',
-      'mdi-v5',
+      // 'line-awesome',
       // 'fontawesome-v6',
       // 'eva-icons',
       // 'themify',
-      // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
-
-      'roboto-font', // optional, you are not bound to it
+      'mdi-v5',
       'material-icons', // optional, you are not bound to it
+      'roboto-font', // optional, you are not bound to it
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
diff --git a/src/components/MapWithMarkers.vue b/src/components/MapWithMarkers.vue
deleted file mode 100644
index 11a3f14..0000000
--- a/src/components/MapWithMarkers.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup>
-import MapWrapper from "components/MapWrapper.vue";
-import {Marker, Polyline} from "vue3-google-map";
-import {computed} from "vue";
-
-const props = defineProps({
-  gpsLatitude: {
-    type: Number,
-    required: false
-  },
-  gpsLongitude: {
-    type: Number,
-    required: false
-  },
-  zoom: {
-    type: Number,
-    required: false,
-    default: 10
-  },
-  markers: {
-    type: Array,
-    required: false,
-    default: () => []
-  },
-  showAsTrack: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-})
-
-const mapCenter = computed(() => {
-  const north = Math.max(...props.markers.map(m => m.lng));
-  const south = Math.min(...props.markers.map(m => m.lng));
-  const east = Math.max(...props.markers.map(m => m.lat));
-  const west = Math.min(...props.markers.map(m => m.lat));
-
-  const longitudeDiff = north - south;
-  const latitudeDiff = east - west;
-
-  return {
-    lat: west + latitudeDiff / 2,
-    lng: south + longitudeDiff / 2
-  }
-});
-
-</script>
-
-<template>
-  <MapWrapper v-bind="$attrs" :center="mapCenter" :zoom="zoom">
-    <template v-if="!showAsTrack">
-      <Marker v-for="(marker, idx) in markers" :key="idx" :options="{position: marker}"/>
-    </template>
-    <template v-else>
-      <Polyline :options="{path: markers, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
-    </template>
-  </MapWrapper>
-</template>
diff --git a/src/components/MapWrapper.vue b/src/components/MapWrapper.vue
deleted file mode 100644
index 4f36f45..0000000
--- a/src/components/MapWrapper.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-import {GoogleMap} from "vue3-google-map";
-
-const key = process.env.GOOGLE_MAPS_API_KEY;
-
-</script>
-
-<template>
-  <GoogleMap :api-key="key" v-bind="$attrs">
-    <slot />
-  </GoogleMap>
-</template>
diff --git a/src/components/aircrafts/AircraftsListSkeleton.vue b/src/components/aircrafts/AircraftsListSkeleton.vue
index 4731599..908841d 100644
--- a/src/components/aircrafts/AircraftsListSkeleton.vue
+++ b/src/components/aircrafts/AircraftsListSkeleton.vue
@@ -6,10 +6,10 @@ import {randomInt} from "src/composables/random";
   <q-list bordered separator>
     <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
       <q-item-section avatar>
-        <q-skeleton type="QAvatar"></q-skeleton>
+        <q-skeleton type="QAvatar" />
       </q-item-section>
       <q-item-section>
-        <q-skeleton :width="randomInt(10,25)+'%'"></q-skeleton>
+        <q-skeleton :width="randomInt(10,25)+'%'" />
       </q-item-section>
     </q-item>
   </q-list>
diff --git a/src/components/copilots/CopilotEditForm.vue b/src/components/copilots/CopilotEditForm.vue
deleted file mode 100644
index 10801af..0000000
--- a/src/components/copilots/CopilotEditForm.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script setup></script>
-
-<template>
-  edit form
-</template>
diff --git a/src/components/copilots/CopilotForm.vue b/src/components/copilots/CopilotForm.vue
new file mode 100644
index 0000000..f9625d3
--- /dev/null
+++ b/src/components/copilots/CopilotForm.vue
@@ -0,0 +1,30 @@
+<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";
+
+const props = defineProps({
+  copilot: {
+    type: Object
+  }
+})
+
+const formData = reactive({
+  name: null,
+});
+
+onMounted(() => {
+  if (props.copilot) {
+    setDefaultData(formData, props.copilot);
+  }
+})
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+    <q-input v-bind="commonProps" label="Jméno" v-model="formData.name" />
+  </FormWrapper>
+</template>
diff --git a/src/components/copilots/CopilotListSkeleton.vue b/src/components/copilots/CopilotListSkeleton.vue
index ad40fc1..f4ab8d8 100644
--- a/src/components/copilots/CopilotListSkeleton.vue
+++ b/src/components/copilots/CopilotListSkeleton.vue
@@ -1,5 +1,16 @@
-<script setup></script>
+<script setup>
+import {randomInt} from "src/composables/random";
+</script>
 
 <template>
-  <em>Copilot skeleton</em>
+  <q-list bordered separator>
+    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
+      <q-item-section avatar>
+        <q-skeleton type="QAvatar"/>
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(10,25)+'%'"/>
+      </q-item-section>
+    </q-item>
+  </q-list>
 </template>
diff --git a/src/components/copilots/CopilotsList.vue b/src/components/copilots/CopilotsList.vue
index 7ebdc7d..88c7e1c 100644
--- a/src/components/copilots/CopilotsList.vue
+++ b/src/components/copilots/CopilotsList.vue
@@ -16,7 +16,7 @@ const props = defineProps({
         <q-avatar icon="person" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
-        <router-link :to="{name: 'pilotDetail', params: {id: pilot.id }}">
+        <router-link :to="{name: 'copilotDetail', params: {id: pilot.id }}">
           {{ pilot.name }}
         </router-link>
       </q-item-section>
diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
index 956663f..d9bd939 100644
--- a/src/components/flights/FlightBasicInfo.vue
+++ b/src/components/flights/FlightBasicInfo.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {flight} from "src/composables/objects/flight";
 import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import WeatherInfo from "components/weather/WeatherInfo.vue";
 
 const props = defineProps({
   flight: {
@@ -20,7 +21,11 @@ const props = defineProps({
             <q-icon name="flight_takeoff"/>
           </q-item-section>
           <q-item-section>
-            {{ flight.takeoffAirport.name }}
+            <div>
+              {{ flight.takeoffAirport.name }}
+
+              <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
+            </div>
           </q-item-section>
         </q-item>
 
@@ -38,7 +43,10 @@ const props = defineProps({
             <q-icon name="flight_land"/>
           </q-item-section>
           <q-item-section>
-            {{ flight.landingAirport.name }}
+            <div>
+              {{ flight.landingAirport.name }}
+              <WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
+            </div>
           </q-item-section>
         </q-item>
       </q-list>
@@ -61,20 +69,12 @@ const props = defineProps({
         {{ minutesToHumanReadable(flight.durationMinCalculated) }}
       </q-item-section>
     </q-item>
-    <q-item>
-      <q-item-section avatar>
-        <q-icon name="thermostat"/>
-      </q-item-section>
-      <q-item-section>
-        Clouds: few, Wind: 220/12kt, Temp: 12°C
-      </q-item-section>
-    </q-item>
-    <q-item v-if="!flight.solo">
+    <q-item v-if="flight.copilot">
       <q-item-section avatar>
         <q-icon name="people"/>
       </q-item-section>
       <q-item-section>
-        <router-link :to="{name: 'pilotDetail', params: {id: flight.copilot.id}}">
+        <router-link :to="{name: 'copilotDetail', params: {id: flight.copilot.id}}">
           {{ flight.copilot.name }}
         </router-link>
       </q-item-section>
diff --git a/src/components/flights/FlightsList.vue b/src/components/flights/FlightsList.vue
index bbeecf4..5ba7be2 100644
--- a/src/components/flights/FlightsList.vue
+++ b/src/components/flights/FlightsList.vue
@@ -15,34 +15,32 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-12 col-md-6 col-lg-4" v-for="flight of items" :key="flight">
+  <q-list bordered separator class="q-mx-md q-my-md">
+    <q-item v-for="flight of items" :key="flight" ripple clickable :to="{name: 'flightDetail', params:{id: flight.id}}">
+      <q-item-section avatar>
 
-      <q-card class="q-my-sm q-mx-sm" >
-        <q-img :src="flight.coverPhoto.thumbnailUrl" v-if="flight.coverPhoto">
-          <div class="absolute-bottom text-center text-h6">
-            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}" class="text-white">
-              {{ flightName(flight) }}
-            </router-link>
-          </div>
-        </q-img>
-        <q-card-section>
-          <div class="text-h6" v-if="!flight.coverPhoto">
-            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}">
-              {{ flightName(flight) }}
-            </router-link>
-          </div>
-          <div class="text-subtitle2">{{ minutesToHumanReadable(flight.durationMinCalculated) }}</div>
-          <div class="text-secondary">
-            <q-icon name="today"/>
-            {{ formatDatetime(flight.takeoffDatetime) }}
-          </div>
-          <div class="text-secondary">
-            <q-icon name="plane"/>
-            {{ flight.aircraft.callSign }}
-          </div>
-        </q-card-section>
-      </q-card>
-    </div>
-  </div>
+        <q-avatar size="100px">
+          <div v-if="flight.coverPhoto" :style="`width: 100px; height: 100px; background-image: url('${flight.coverPhoto.thumbnailUrl}'); background-size: cover`"></div>
+        </q-avatar>
+
+
+      </q-item-section>
+      <q-item-section>
+        {{ flightName(flight) }}
+        <div class="text-secondary">
+          <q-icon name="flight_takeoff"/>
+          {{ formatDatetime(flight.takeoffDatetime) }}
+        </div>
+        <div class="text-secondary">
+          <q-icon name="schedule" />
+        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+
+        </div>
+        <div class="text-secondary">
+          <q-icon name="flight"/>
+          {{ flight.aircraft.callSign }}
+        </div>
+      </q-item-section>
+    </q-item>
+  </q-list>
 </template>
diff --git a/src/components/flights/FlightsListSkeleton.vue b/src/components/flights/FlightsListSkeleton.vue
index 1edf1b7..0d4a220 100644
--- a/src/components/flights/FlightsListSkeleton.vue
+++ b/src/components/flights/FlightsListSkeleton.vue
@@ -1,3 +1,22 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+</script>
+
 <template>
-  Skeleton
+  <q-list bordered separator class="q-mx-md q-my-md">
+    <q-item v-for="i in randomInt(5, 10)" :key="i" ripple>
+      <q-item-section avatar>
+        <q-avatar size="100px">
+          <q-skeleton type="QAvatar" size="100px"></q-skeleton>
+        </q-avatar>
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(30,50)+'%'"/>
+
+          <q-skeleton type="text" :width="randomInt(10,15)+'%'"/>
+          <q-skeleton type="text" :width="randomInt(5,10)+'%'"/>
+          <q-skeleton type="text" width="8%"/>
+      </q-item-section>
+    </q-item>
+  </q-list>
 </template>
diff --git a/src/components/flights/form/FlightFormBasic.vue b/src/components/flights/form/FlightFormBasic.vue
index e94b78e..3c01512 100644
--- a/src/components/flights/form/FlightFormBasic.vue
+++ b/src/components/flights/form/FlightFormBasic.vue
@@ -1,9 +1,10 @@
 <script setup>
-import {onMounted, reactive, ref, watch} from "vue";
+import {computed, onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
-import AirportLocationInput from "components/inputs/AirportLocationInput.vue";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {commonProps} from "src/composables/inputs";
 
 const props = defineProps({
     aircrafts: {
@@ -21,16 +22,14 @@ const props = defineProps({
   }
 )
 const formData = reactive({
-  aircraftId: 43,
-  takeoffAirportId: null,
-  landingAirportId: null,
+  aircraft: null,
+  takeoffAirport: null,
+  landingAirport: null,
   takeoffDatetime: null,
   landingDatetime: null,
   landings: 1,
-  solo: true,
-
   name: "",
-  description: ""
+  description: "",
 })
 
 const recalculateDuration = (data) => {
@@ -47,55 +46,72 @@ const isMounted = ref(false);
 onMounted(() => {
   if (props.flight) {
     setDefaultData(formData, props.flight);
+    formData.aircraft = {id: formData.aircraft.id, name: formData.aircraft.callSign};
+    formData.takeoffAirport = {id: formData.takeoffAirport.id, name: formData.takeoffAirport.name}
+    formData.landingAirport = {id: formData.landingAirport.id, name: formData.landingAirport.name}
   }
   isMounted.value = true;
 });
+
+const aircrafts = computed(() => {
+  return props.aircrafts.map(a => ({id: a.id, name: a.callSign}));
+});
+
+watch(() => formData.takeoffAirport, () => {
+  if (!formData.landingAirport) {
+    formData.landingAirport = {...formData.takeoffAirport};
+  }
+});
+
 </script>
 
 <template>
   <FormWrapper v-model="formData" v-if="isMounted">
     <div class="row">
       <div class="col">
-        <q-select
-          v-model="formData.aircraftId"
-          option-label="callSign"
-          option-value="id"
-          emit-value
-          map-options
-          :rules="rules.aircraft"
+        <ComboboxInput
+          v-bind="commonProps"
           :options="aircrafts"
+          v-model="formData.aircraft"
+          :key="formData.aircraft"
           label="Letadlo"
-        >
-          <template #prepend>
-            <q-icon name="flight" />
-          </template>
-        </q-select>
+        />
       </div>
     </div>
-
-    <template v-if="formData.aircraftId">
-      <div class="row">
-        <div class="col col-12 col-md-6">
-          <h3>Vzlet</h3>
-          <DatetimePicker v-model="formData.takeoffDatetime" label="Datum a čas vzletu: "/>
-          <AirportLocationInput v-model="formData.takeoffAirportId" :airports="airports" label="Letiště vzletu" takeoff/>
-        </div>
-        <div class="col col-12 col-md-6" v-if="!!formData.takeoffDatetime && !!formData.takeoffAirportId">
-
-          <h3>Přistání</h3>
-          <DatetimePicker v-model="formData.landingDatetime" label="Datum a čas přistání"/>
-          <AirportLocationInput v-model="formData.landingAirportId" :airports="airports" label="Letiště přistání" landing/>
-        </div>
+    <div class="row">
+      <div class="col col-12 col-md-6">
+        <h3>Vzlet</h3>
+        <DatetimePicker
+          v-model="formData.takeoffDatetime"
+          label="Datum a čas vzletu: "
+          v-bind="commonProps"
+        />
+        <ComboboxInput
+          :options="airports"
+          v-model="formData.takeoffAirport"
+          label="Letiště vzletu"
+          v-bind="commonProps"
+          :enable-new-values="false"
+        />
       </div>
+      <div class="col col-12 col-md-6">
 
-      <div class="row" v-if="formData.landingAirportId">
-        <div class="col">
-          <q-checkbox v-model="formData.solo" label="Solo?"/>
-        </div>
-        <div class="col">
-          <q-input v-model.number="formData.landings" label="Počet přistání" type="number" min="1"/>
-        </div>
+        <h3>Přistání</h3>
+        <DatetimePicker
+          v-model="formData.landingDatetime"
+          :min-date="formData.takeoffDatetime"
+          label="Datum a čas přistání"
+          v-bind="commonProps"
+        />
+
+        <ComboboxInput
+          :options="airports"
+          v-model="formData.landingAirport"
+          label="Letiště přistání"
+          v-bind="commonProps"
+          :enable-new-values="false"
+        />
       </div>
-    </template>
+    </div>
   </FormWrapper>
 </template>
diff --git a/src/components/flights/form/FlightFormCopilot.vue b/src/components/flights/form/FlightFormCopilot.vue
index cc41a30..2420fdd 100644
--- a/src/components/flights/form/FlightFormCopilot.vue
+++ b/src/components/flights/form/FlightFormCopilot.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import FormWrapper from "components/FormWrapper.vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
@@ -16,14 +16,20 @@ const props = defineProps({
 });
 
 const formData = reactive({
-  solo: true,
-  withInstructor: false,
   copilot: null,
 })
 
+const solo = ref(true);
+watch(() => solo.value, (newVal) => {
+  if (!newVal) {
+    formData.copilot = null;
+  }
+});
+
 onMounted(() => {
   if (props.flight) {
     setDefaultData(formData, props.flight);
+    solo.value = !formData.copilot;
   }
 })
 
@@ -32,9 +38,15 @@ onMounted(() => {
 <template>
   <FormWrapper v-model="formData">
 
-    <q-btn-toggle spread no-caps v-model="formData.solo" toggle-color="primary" :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"/>
+    <q-btn-toggle
+      spread
+      no-caps
+      v-model="solo"
+      toggle-color="primary"
+      :options="[{label: 'Solo', value: true}, {label: 'S někým', value: false}]"
+    />
 
-    <div v-if="!formData.solo">
+    <div v-if="!solo">
       <ComboboxInput
         class="q-my-lg"
         outlined
@@ -45,9 +57,6 @@ onMounted(() => {
         :clearable="true"
         label="Druhy pilot"
       />
-
-<!--      <q-checkbox v-model="formData.withInstructor" v-if="formData.copilot" label="Instruktor"/>-->
-      <!--            <q-input v-model="formData.picTime" label="PIC time"/>-->
     </div>
 
   </FormWrapper>
diff --git a/src/components/flights/form/FlightFormNotes.vue b/src/components/flights/form/FlightFormNotes.vue
index d65f940..adfbe58 100644
--- a/src/components/flights/form/FlightFormNotes.vue
+++ b/src/components/flights/form/FlightFormNotes.vue
@@ -3,6 +3,7 @@ import {onMounted, ref} 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";
 
 const props = defineProps({
   flight: {
@@ -28,7 +29,7 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData" v-if="isMounted">
-    <q-input type="text" v-model="formData.name" label="Název"/>
-    <RichTextEditor v-model="formData.description" label="Popis letu, poznámky, ..." />
+    <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, ..." />
   </FormWrapper>
 </template>
diff --git a/src/components/flights/form/FlightFormTrack.vue b/src/components/flights/form/FlightFormTrack.vue
index 78c035b..cf03d59 100644
--- a/src/components/flights/form/FlightFormTrack.vue
+++ b/src/components/flights/form/FlightFormTrack.vue
@@ -2,6 +2,7 @@
 import FormWrapper from "components/FormWrapper.vue";
 import {onMounted, reactive, ref, watch} from "vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
+import {commonProps} from "src/composables/inputs";
 
 const props = defineProps({
   modelValue: {
@@ -18,7 +19,8 @@ const props = defineProps({
 });
 
 const formData = reactive({
-  track: []
+  track: [],
+  gpxTrack: null
 });
 const removeTrackItem = (index) => {
   formData.track.splice(index, 1);
@@ -48,16 +50,22 @@ onMounted(() => {
 
 <template>
   <FormWrapper v-model="formData">
+
+    <q-file v-model="formData.gpxTrack" v-bind="commonProps" label="Trasa v GPX" hint="Slouží pro vykreslení kompletní a detailní trasy"/>
+
+    <template v-if="flight.gpxTrackUrl">
+      <q-icon name="check" color="green" /> Trasa nahrána
+    </template>
+
     <ComboboxInput
-      outlined
-      standout
-      class="q-my-lg"
+      v-bind="commonProps"
       v-model="poi"
       :key="formData.track.length"
       :options="locations"
       @select="addTrackItem"
       clearable
       label="Otočný bod"
+      hint="Nastav významné otočné body"
     />
 
     <q-list bordered>
diff --git a/src/components/inputs/AirportLocationInput.vue b/src/components/inputs/AirportLocationInput.vue
deleted file mode 100644
index c62225b..0000000
--- a/src/components/inputs/AirportLocationInput.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import {onMounted, ref} from "vue";
-
-const props = defineProps({
-  modelValue: {
-    type: [Number]
-  },
-  airports: {
-    type: Array,
-    required: true
-  },
-  takeoff: {
-    type: Boolean,
-    required: false,
-  },
-  landing: {
-    type: Boolean,
-    required: false
-  },
-});
-const emit = defineEmits(['update:modelValue']);
-const model = ref(null);
-const emitModelValue = (val) => {
-  emit("update:modelValue", val);
-}
-
-onMounted(() => {
-  model.value = props.modelValue;
-})
-
-</script>
-
-<template>
-  <q-select
-    v-model="model"
-    emit-value
-    map-options
-    option-label="name"
-    option-value="id"
-    clearable
-    :options="airports"
-    @input="emitModelValue"
-  >
-    <template #prepend v-if="takeoff">
-      <q-icon name="flight_takeoff"/>
-    </template>
-
-    <template #append v-if="landing">
-      <q-icon name="flight_land"/>
-    </template>
-  </q-select>
-</template>
diff --git a/src/components/inputs/ComboboxInput.vue b/src/components/inputs/ComboboxInput.vue
index b44c1a4..d9c14e4 100644
--- a/src/components/inputs/ComboboxInput.vue
+++ b/src/components/inputs/ComboboxInput.vue
@@ -10,6 +10,11 @@ const props = defineProps({
     required: false,
     default: () => []
   },
+  enableNewValues: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
   options: {
     type: Array,
     required: true,
@@ -17,9 +22,9 @@ const props = defineProps({
 })
 
 const model = ref({});
-onMounted(() => {
-  model.value = props.modelValue;
-})
+watch(() => props.modelValue, (newVal) => {
+  model.value = newVal;
+}, {immediate: true});
 
 const emit = defineEmits(['update:modelValue', 'clear']);
 watch(model, (val) => {
@@ -84,7 +89,7 @@ const filterFn = (val, update, abort) => {
     :options="availableOptions"
     option-label="name"
     option-value="id"
-    new-value-mode="add"
+    :new-value-mode="enableNewValues ? 'add' : 'toggle'"
     clear-icon="clear"
     :v-bind="$attrs"
   >
diff --git a/src/components/inputs/DatetimePicker.vue b/src/components/inputs/DatetimePicker.vue
index 0db6f94..05d40ec 100644
--- a/src/components/inputs/DatetimePicker.vue
+++ b/src/components/inputs/DatetimePicker.vue
@@ -10,8 +10,11 @@ const props = defineProps({
     type: [String, Boolean],
     required: false,
     default: FORMAT_DATETIME_LONG
+  },
+  minDate: {
+    type: [String, Date],
+    required: false
   }
-
 })
 
 let dateModel = ref("");
@@ -36,6 +39,7 @@ onMounted(() => {
     emitModelUpdate();
   }
 });
+// TODO: ^^ by asi slo prepsat do watchera, viz ComboboxInput
 
 
 const publicModel = computed(() => {
@@ -92,7 +96,12 @@ const myLocale = {
   pluralDay: 'dny'
 }
 
-// https://quasar.dev/vue-composables/use-form-child - mozna resi ohack s onMounted()?
+const isDateValid = (date) => {
+  if (!props.minDate) return true;
+
+  const minDate = formatDatetime(props.minDate, "YYYY/MM/DD");
+  return date >= minDate;
+}
 
 </script>
 
@@ -107,10 +116,10 @@ const myLocale = {
         <div class="proxy-wrapper">
           <div class="row">
             <div class="col-12 col-sm-6" v-if="showDatePicker">
-              <q-date square v-model="dateModel" :today-btn="true" flat mask="YYYY-MM-DD" :locale="myLocale"/>
+              <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"/>
+              <q-time square v-model="timeModel" format24h flat mask="HH:mm:ss"/>
             </div>
           </div>
           <div class="row q-mb-sm">
diff --git a/src/components/inputs/MapGPSInput.vue b/src/components/inputs/MapGPSInput.vue
index 7727e76..7b56603 100644
--- a/src/components/inputs/MapGPSInput.vue
+++ b/src/components/inputs/MapGPSInput.vue
@@ -2,7 +2,7 @@
 import {Marker} from "vue3-google-map";
 import {onMounted, ref} from "vue";
 import axios from "axios";
-import MapWrapper from "components/MapWrapper.vue";
+import MapWrapper from "components/map/MapWrapper.vue";
 
 const center = ref({
   lat: 50.1314,
diff --git a/src/components/map/EmbeddedMap.vue b/src/components/map/EmbeddedMap.vue
new file mode 100644
index 0000000..3e4978a
--- /dev/null
+++ b/src/components/map/EmbeddedMap.vue
@@ -0,0 +1,42 @@
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  address: {
+    type: String
+  },
+  gpsLatitude: {
+    type: Number
+  },
+  gpsLongitude: {
+    type: Number
+  },
+  zoom: {
+    type: Number,
+    required: false,
+    default: 12
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "500px"
+  }
+});
+
+const addressEncoded = computed(() => {
+  if (!props.gpsLatitude || !props.gpsLongitude) {
+    return encodeURI(props.address);
+  } else {
+    return `${props.gpsLatitude},${props.gpsLongitude}`
+  }
+});
+
+
+</script>
+
+<template>
+  <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
+          :src="`https://maps.google.com/maps?q=${addressEncoded}&amp;t=m&amp;z=${zoom}&amp;output=embed&amp;iwloc=near`"
+          :style="`width: 100%; height: ${height}`"
+          :aria-label="address"/>
+</template>
diff --git a/src/components/map/MapWithMarkers.vue b/src/components/map/MapWithMarkers.vue
new file mode 100644
index 0000000..da4f72f
--- /dev/null
+++ b/src/components/map/MapWithMarkers.vue
@@ -0,0 +1,71 @@
+<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";
+
+
+const props = defineProps({
+  gpxTrackUrl: {
+    type: String,
+    required: false,
+  },
+  markers: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  photos: {
+    type: Array,
+    required: false,
+    default: () => []
+  }
+})
+
+const track = ref([]);
+const gpxLoading = ref(!!props.gpxTrackUrl);
+onMounted(() => {
+  if (!props.gpxTrackUrl) {
+    return;
+  }
+  gpxLoading.value = true;
+  axios.get(props.gpxTrackUrl)
+    .then(({data}) => (new window.DOMParser()).parseFromString(data, "text/xml"))
+    .then(doc => {
+      const points = [];
+      const nodes = [...doc.getElementsByTagName('trkpt')];
+      nodes.forEach(node => {
+        const lat = parseFloat(node.getAttribute("lat"));
+        const lng = parseFloat(node.getAttribute("lon"));
+        points.push({lat, lng});
+      })
+
+      track.value = points;  // puvodne se bounds bralo z tohodle
+    })
+    .finally(() => gpxLoading.value = false);
+});
+
+
+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);
+});
+</script>
+
+<template>
+  <div v-if="gpxLoading" v-bind="$attrs">Loading</div>
+  <MapWrapper v-bind="$attrs" :bounds="bounds" v-if="!gpxLoading">
+    <Marker v-for="(marker, idx) in markers" :key="idx" :options="marker"/>
+
+    <Marker v-for="(photo, idx) in photos" :key="idx" :options="{icon: '/mapIcons/photo-16x16.png', position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
+      <InfoWindow :options="{position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
+        <img :src="photo.thumbnailUrl" />
+      </InfoWindow>
+    </Marker>
+
+    <template v-if="track.length > 0">
+      <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
+    </template>
+  </MapWrapper>
+</template>
diff --git a/src/components/map/MapWrapper.vue b/src/components/map/MapWrapper.vue
new file mode 100644
index 0000000..d01c399
--- /dev/null
+++ b/src/components/map/MapWrapper.vue
@@ -0,0 +1,36 @@
+<script setup>
+import {GoogleMap} from "vue3-google-map";
+import {ref, watch} from "vue";
+
+const props = defineProps({
+  bounds: {
+    type: Array,
+    required: false
+  }
+});
+
+const key = process.env.GOOGLE_MAPS_API_KEY;
+
+
+const mapRef = ref(null);
+watch(
+  () => mapRef.value?.ready,
+  (ready) => {
+    if (!props.bounds || !ready) return;
+    const map = mapRef.value.map;
+    const api = mapRef.value.api;
+
+    const bounds = new api.LatLngBounds();
+    for (let i = 0; i < props.bounds.length; i++) {
+      bounds.extend(props.bounds[i]);
+    }
+    map.fitBounds(bounds);
+  }
+);
+</script>
+
+<template>
+  <GoogleMap :api-key="key" v-bind="$attrs" :max-zoom="13" ref="mapRef">
+    <slot/>
+  </GoogleMap>
+</template>
diff --git a/src/components/photos/PhotoDetail.vue b/src/components/photos/PhotoDetail.vue
new file mode 100644
index 0000000..0450d28
--- /dev/null
+++ b/src/components/photos/PhotoDetail.vue
@@ -0,0 +1,105 @@
+<script setup>
+import EmbeddedMap from "components/map/EmbeddedMap.vue";
+import {computed, onMounted, ref} from "vue";
+import {formatDatetime} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  photos: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  openedIndex: {
+    type: Number,
+    required: false,
+  },
+  modelValue: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+
+const emit = defineEmits(["update:modelValue"])
+
+
+const open = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newVal) {
+    emit("update:modelValue", newVal);
+  }
+})
+
+const photoIndex = ref(null);
+onMounted(() => {
+  photoIndex.value = props.openedIndex
+});
+
+const photo = computed(() => props.photos[photoIndex.value]);
+
+const nextPhoto = () => {
+  if (photoIndex.value < props.photos.length - 1)
+    photoIndex.value++
+}
+
+const prevPhoto = () => {
+  if (photoIndex.value > 0) photoIndex.value--;
+}
+
+</script>
+
+<template>
+  <q-dialog v-model="open" full-width  @keyup.left="prevPhoto" @keyup.right="nextPhoto">
+    <q-card>
+      <q-card-section>
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-9">
+            <q-img :src="photo.url"/>
+            <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
+
+            <p v-if="photo.description !== ''">{{ photo.description }}</p>
+
+            <div class="text-center q-my-sm">
+              <q-btn @click="prevPhoto" v-if="photoIndex > 0" icon="chevron_left" flat rounded>Předchozí</q-btn>
+              <q-btn @click="nextPhoto" v-if="photoIndex < photos.length - 1" icon-right="chevron_right" flat rounded>Další</q-btn>
+            </div>
+
+          </div>
+          <div class="col-12 col-sm-12 col-md-3">
+            <EmbeddedMap class="q-mx-sm" v-if="photo.gpsLatitude && photo.gpsLongitude" :gps-latitude="photo.gpsLatitude" :gps-longitude="photo.gpsLongitude"/>
+
+            <q-list>
+              <q-item v-if="photo.pointOfInterest">
+                <q-item-section avatar>
+                  <q-avatar icon="marker"></q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  {{ formatDatetime(photo.exposedAt) }}
+                </q-item-section>
+              </q-item>
+              <q-item v-if="photo.exposedAt">
+                <q-item-section avatar>
+                  <q-avatar icon="photo_camera"></q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  {{ formatDatetime(photo.exposedAt) }}
+                </q-item-section>
+              </q-item>
+
+              <q-item v-if="photo.gpsAltitude">
+                <q-item-section avatar>
+                  <q-avatar icon="height"/>
+                </q-item-section>
+                <q-item-section>
+                  {{ photo.gpsAltitude }} m
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/components/flights/PhotoForm.vue b/src/components/photos/PhotoForm.vue
similarity index 96%
rename from src/components/flights/PhotoForm.vue
rename to src/components/photos/PhotoForm.vue
index adc8831..9f1fe93 100644
--- a/src/components/flights/PhotoForm.vue
+++ b/src/components/photos/PhotoForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref} from "vue";
+import {computed, ref} from "vue";
 import {setDefaultData} from "src/composables/form/formHandling";
 import DialogWrapper from "components/DialogWrapper.vue";
 import FormWrapper from "components/FormWrapper.vue";
diff --git a/src/components/photos/PhotosList.vue b/src/components/photos/PhotosList.vue
index 8b1ca72..2d2a703 100644
--- a/src/components/photos/PhotosList.vue
+++ b/src/components/photos/PhotosList.vue
@@ -10,7 +10,7 @@ const props = defineProps({
   }
 });
 
-const emits = defineEmits(["edit", "delete", "detail"])
+const emits = defineEmits(["edit", "delete", "openDetail"])
 
 const openEdit = (photo) => {
   emits("edit", photo);
@@ -20,16 +20,16 @@ const deletePhoto = (id) => {
   emits("delete", id);
 };
 
-const openDetail = (photo) => {
-  emits("detail", photo);
+const openDetail = (photo, idx) => {
+  emits("openDetail", {photo, idx, allPhotos: props.photos});
 }
 </script>
 
 <template>
   <div class="row">
-    <div class="col-12 col-md-4 col-lg-3" v-for="photo in photos" :key="photo.id">
+    <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
       <q-card class="q-my-sm q-mx-sm">
-        <q-img :src="photo.thumbnailUrl" @click="openDetail">
+        <q-img :src="photo.thumbnailUrl" @click="openDetail(photo, idx)">
           <div class="absolute-bottom">
             <div class="text-h6" v-if="photo.name !== ''">
               {{ photo.name }}
@@ -40,8 +40,14 @@ const openDetail = (photo) => {
           </div>
         </q-img>
 
-        <q-card-actions v-if="showActions">
-          {{ photo.isFlightCover ? 'ano' : 'ne' }}
+        <q-card-actions v-if="showActions" align="right">
+          <div class="col-grow">
+            <q-icon name="star" v-if="photo.isFlightCover" color="red"/>
+            <q-icon name="place" v-if="photo.pointOfInterestId" />
+            <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude" />
+            <q-icon name="gps_off" v-else />
+          </div>
+
           <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
           <q-btn flat icon="delete" color="red" @click="deletePhoto(photo.id)"></q-btn>
         </q-card-actions>
diff --git a/src/components/poi/POIEditForm.vue b/src/components/poi/POIEditForm.vue
index 54cc916..cf598fa 100644
--- a/src/components/poi/POIEditForm.vue
+++ b/src/components/poi/POIEditForm.vue
@@ -22,7 +22,6 @@ const formData = reactive({
 });
 
 const poiNameForMap = ref("");
-
 onMounted(() => {
   setDefaultData(formData, props.poi);
   poiNameForMap.value = props.poi.name;
@@ -46,7 +45,6 @@ const handlePositionNotFound = () => {
 
 <template>
   <FormWrapper v-model="formData">
-
     <q-input
       class="q-my-lg"
       outlined
@@ -72,7 +70,5 @@ const handlePositionNotFound = () => {
     />
 
     <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
-
-
   </FormWrapper>
 </template>
diff --git a/src/components/weather/CloudCoverIcon.vue b/src/components/weather/CloudCoverIcon.vue
new file mode 100644
index 0000000..ac15fb0
--- /dev/null
+++ b/src/components/weather/CloudCoverIcon.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  cloudcover: {
+    type: Number,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <q-icon name="mdi-weather-sunny" v-if="cloudcover < 20"/>
+    <q-icon name="mdi-weather-partly-cloudy" v-else-if="cloudcover < 75"/>
+    <q-icon name="mdi-weather-cloudy" v-else/>
+</template>
diff --git a/src/components/weather/WeatherInfo.vue b/src/components/weather/WeatherInfo.vue
new file mode 100644
index 0000000..dbf17cd
--- /dev/null
+++ b/src/components/weather/WeatherInfo.vue
@@ -0,0 +1,74 @@
+<script setup>
+import {ref} from "vue";
+import CloudCoverIcon from "components/weather/CloudCoverIcon.vue";
+
+const props = defineProps({
+  weather: {
+    type: Object,
+    required: true
+  }
+})
+
+const kmhToKnots = (speedKmh) => {
+  return Math.round(speedKmh / 0.53996);
+}
+
+const openDetail = ref(false);
+</script>
+
+<template>
+
+  <q-btn rounded @click="openDetail = true" v-bind="$attrs">
+    <CloudCoverIcon :cloudcover="weather.cloudcoverTotal"/>
+
+    <q-icon name="navigation" :style="`transform: rotate(${weather.windDirectionSurface}deg)`"/>
+  </q-btn>
+
+  <q-dialog v-model="openDetail">
+    <q-card>
+      <q-list>
+        <q-item>
+          <q-item-section avatar>
+            <CloudCoverIcon :cloudcover="weather.cloudcoverTotal"/>
+          </q-item-section>
+          <q-item-section>
+            Pokrytí oblačností (celkové): {{ weather.cloudcoverTotal }} %
+            <br>
+            Nízké mraky: {{ weather.cloudcoverLow }} %
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            QNH
+          </q-item-section>
+          <q-item-section>
+            {{ weather.qnh }} hPa
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            <q-icon name="air"/>
+          </q-item-section>
+          <q-item-section>
+            <div :title="`${weather.windSpeedSurface} km/h`">
+              {{ kmhToKnots(weather.windSpeedSurface) }} kt, {{ weather.windDirectionSurface }} &deg;
+            </div>
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            <q-icon name="mdi-thermometer"/>
+          </q-item-section>
+          <q-item-section>
+            Teplota: {{ weather.temperatureSurface }} &deg; C
+            <br>
+            Rosný bod: {{ weather.dewpointSurface }} &deg; C
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/composables/inputs.js b/src/composables/inputs.js
new file mode 100644
index 0000000..25490a5
--- /dev/null
+++ b/src/composables/inputs.js
@@ -0,0 +1,5 @@
+export const commonProps = {
+  class: "q-my-lg",
+  outlined: true,
+  standout: true
+}
diff --git a/src/composables/objects/aircraft.js b/src/composables/objects/aircraft.js
index c81979a..435a11d 100644
--- a/src/composables/objects/aircraft.js
+++ b/src/composables/objects/aircraft.js
@@ -8,7 +8,7 @@ export const aircraft = ref(null);
 
 export const fetchAircraft = (aircraftId) => {
   loading.value = true;
-  useAircraftsStore().fetchDetail(aircraftId).then((data) => {
+  return useAircraftsStore().fetchDetail(aircraftId).then((data) => {
     aircraft.value = data;
   }).catch(err => {
     console.error(err);
diff --git a/src/composables/objects/flight.js b/src/composables/objects/flight.js
index 92492fc..a7094f6 100644
--- a/src/composables/objects/flight.js
+++ b/src/composables/objects/flight.js
@@ -17,8 +17,11 @@ export const loading = ref(true);
 export const flight = ref(null);
 export const fetchFlight = (flightId) => {
   loading.value = true;
-  useFlightsStore().fetchDetail(parseInt(flightId))
-    .then(respFlight => flight.value = respFlight)
+  return useFlightsStore().fetchDetail(parseInt(flightId))
+    .then(respFlight => {
+      flight.value = respFlight;
+      return respFlight;
+    })
     .finally(() => loading.value = false);
 };
 
@@ -32,7 +35,8 @@ export const fetchFlights = () => {
 };
 
 
-export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {}) => {
+export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {
+}) => {
   $q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
     .onOk(() => {
       useFlightsStore().delete(flightId).then(onOkCallback);
diff --git a/src/graphql/fragments/copilot.js b/src/graphql/fragments/copilot.js
new file mode 100644
index 0000000..4d454b1
--- /dev/null
+++ b/src/graphql/fragments/copilot.js
@@ -0,0 +1,15 @@
+import gql from "graphql-tag";
+
+export const FRAGMENT_COPILOT_LIST_INFO = gql`
+fragment copilotListInfo on Copilot {
+  id
+  name
+}
+`;
+
+export const FRAGMENT_COPILOT_FULL_INFO = gql`
+fragment copilotFullInfo on Copilot {
+  id
+  name
+}
+`;
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 4353306..3812491 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -2,6 +2,20 @@ import gql from "graphql-tag";
 import {FRAGMENT_AIRCRAFT_BASIC_INFO, FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
 import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
 import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
+import {FRAGMENT_POI_FULL_INFO} from "src/graphql/fragments/poi";
+
+export const FRAGMENT_WEATHER_FULL_INFO = gql`
+fragment weatherFullInfo on WeatherInfo {
+  datetime
+  qnh
+  temperatureSurface
+  dewpointSurface
+  windSpeedSurface
+  windDirectionSurface
+  cloudcoverTotal
+  cloudcoverLow
+  rain
+}`;
 
 export const FRAGMENT_FLIGHT_FULL_INFO = gql`
 fragment flightFullInfo on Flight {
@@ -12,8 +26,6 @@ fragment flightFullInfo on Flight {
   landingDatetime
   landings
   durationMinCalculated
-  solo
-  withInstructor
 
   coverPhoto {
     thumbnailUrl
@@ -24,12 +36,10 @@ fragment flightFullInfo on Flight {
     ...airportInfo
   }
 
+  gpxTrackUrl
   track {
     pointOfInterest {
-      id
-      name
-      gpsLatitude
-      gpsLongitude
+      ...pointOfInterestFullInfo
     }
   }
 
@@ -37,6 +47,15 @@ fragment flightFullInfo on Flight {
     ...airportInfo
   }
 
+  landingWeatherInfo {
+    ...weatherFullInfo
+  }
+
+  takeoffWeatherInfo {
+    ...weatherFullInfo
+  }
+
+
   aircraft {
     ...aircraftFullInfo
   }
@@ -49,6 +68,8 @@ fragment flightFullInfo on Flight {
 ${FRAGMENT_PHOTO_FULL_INFO}
 ${FRAGMENT_AIRCRAFT_FULL_INFO}
 ${FRAGMENT_AIRPORT_INFO}
+${FRAGMENT_POI_FULL_INFO}
+${FRAGMENT_WEATHER_FULL_INFO}
 `;
 
 export const FRAGMENT_FLIGHT_LIST_INFO = gql`
@@ -92,10 +113,3 @@ fragment flightEditIds on Flight {
   }
 }
 `;
-
-// export const FRAGMENT_LOCATION = gql`
-// fragment airportInfo on Airport {
-//   id
-//   name
-// }
-// `;
diff --git a/src/graphql/fragments/photo.js b/src/graphql/fragments/photo.js
index 7e79259..2904b9a 100644
--- a/src/graphql/fragments/photo.js
+++ b/src/graphql/fragments/photo.js
@@ -11,4 +11,8 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
     flightId
     pointOfInterestId
     isFlightCover
+    gpsLatitude
+    gpsLongitude
+    gpsAltitude
+    exposedAt
 }`;
diff --git a/src/graphql/mutations/copilot.js b/src/graphql/mutations/copilot.js
new file mode 100644
index 0000000..f6e651a
--- /dev/null
+++ b/src/graphql/mutations/copilot.js
@@ -0,0 +1,29 @@
+import gql from "graphql-tag";
+import {FRAGMENT_COPILOT_FULL_INFO} from "src/graphql/fragments/copilot";
+
+export const CREATE_COPILOT = gql`
+  mutation createCopilot($input: CreateCopilotInput!) {
+    createCopilot(input: $input) {
+      ...copilotFullInfo
+    }
+  }
+
+  ${FRAGMENT_COPILOT_FULL_INFO}
+`;
+
+export const EDIT_COPILOT = gql`
+mutation editCopilot($id: Int!, $input: EditCopilotInput!) {
+  editCopilot(id: $id, input: $input) {
+    ...copilotFullInfo
+  }
+}
+
+  ${FRAGMENT_COPILOT_FULL_INFO}
+`;
+export const DELETE_COPILOT = gql`
+mutation deleteCopilot($id: Int!) {
+  deleteCopilot(id: $id) {
+    id
+  }
+}
+`;
diff --git a/src/graphql/queries/aircrafts.js b/src/graphql/queries/aircrafts.js
index 9101b59..0f4b219 100644
--- a/src/graphql/queries/aircrafts.js
+++ b/src/graphql/queries/aircrafts.js
@@ -1,5 +1,6 @@
 import gql from "graphql-tag";
 import {FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight";
 
 export const AIRCRAFTS_LIST = gql`
 query AircraftsList {
@@ -16,8 +17,13 @@ export const AIRCRAFT_DETAIL = gql`
 query AircraftDetail($id: Int!) {
   aircraft(id: $id) {
     ...aircraftFullInfo
+
+    flights {
+      ...flightListInfo
+    }
+
   }
 }
 ${FRAGMENT_AIRCRAFT_FULL_INFO}
-
+${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/graphql/queries/copilots.js b/src/graphql/queries/copilots.js
index 4c88b4e..2e68e32 100644
--- a/src/graphql/queries/copilots.js
+++ b/src/graphql/queries/copilots.js
@@ -1,20 +1,21 @@
 import gql from "graphql-tag";
 import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight";
+import {FRAGMENT_COPILOT_FULL_INFO, FRAGMENT_COPILOT_LIST_INFO} from "src/graphql/fragments/copilot";
 
 export const COPILOTS_LIST = gql`
 query copilotsList {
   copilots {
-    id
-    name
+    ...copilotListInfo
   }
 }
+
+${FRAGMENT_COPILOT_LIST_INFO}
 `;
 
-export const COPILOTS_DETAIL = gql`
+export const COPILOT_DETAIL = gql`
 query copilot($id: Int!) {
   copilot(id: $id) {
-    id
-    name
+    ...copilotFullInfo
 
     flights {
       ...flightListInfo
@@ -22,5 +23,6 @@ query copilot($id: Int!) {
   }
 }
 
+${FRAGMENT_COPILOT_FULL_INFO}
 ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/layouts/ProfileLayout.vue b/src/layouts/ProfileLayout.vue
index 2863742..481fc07 100644
--- a/src/layouts/ProfileLayout.vue
+++ b/src/layouts/ProfileLayout.vue
@@ -26,11 +26,19 @@
 
       <q-img class="absolute-top" src="https://galerie.kvacek.cz/_data/i/upload/2022/06/22/20220622102027-b104fc0d-me.jpg" style="height: 150px">
         <div class="absolute-bottom bg-transparent">
-          <q-avatar size="56px" class="q-mb-sm">
-            <q-img :src="loggedUser.avatarImageUrl"/>
-          </q-avatar>
+          <router-link :to="{name: 'profile'}">
+            <q-avatar size="56px" class="q-mb-sm" v-if="loggedUser.avatarImageUrl">
+              <q-img :src="loggedUser.avatarImageUrl"/>
+            </q-avatar>
+            <q-avatar icon="person" color="primary" text-color="white" size="56px" v-else/>
+          </router-link>
 
-          <div class="text-weight-bold">{{ loggedUser.name }}</div>
+          <router-link
+            v-if="loggedUser.name !== ''"
+            :to="{name: 'profile'}"
+            class="text-weight-bold">
+            {{ loggedUser.name }}
+          </router-link>
         </div>
       </q-img>
       <q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
@@ -47,7 +55,7 @@
     </q-drawer>
 
     <q-page-container class="q-px-md">
-      <BreadcrumbsNavigation class="q-my-md" :items="breadcrumbs"/>
+      <BreadcrumbsNavigation class="q-mx-md q-my-md" :items="breadcrumbs"/>
       <router-view/>
     </q-page-container>
   </q-layout>
@@ -94,7 +102,7 @@ const linksList = [
   {
     title: 'Spolucestující',
     icon: "people",
-    to: {name: "pilots"}
+    to: {name: "copilots"}
   },
 ]
 
@@ -103,9 +111,8 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 };
 
-const loggedUserStore = useUserStore();
 onMounted(() => {
-  loggedUserStore.setupCredentials();
+  useUserStore().setupCredentials();
 })
-const loggedUser = storeToRefs(loggedUserStore).user;
+const loggedUser = storeToRefs(useUserStore()).user;
 </script>
diff --git a/src/pages/profile/ProfilePage.vue b/src/pages/profile/ProfilePage.vue
index 732fbea..9dfcb9c 100644
--- a/src/pages/profile/ProfilePage.vue
+++ b/src/pages/profile/ProfilePage.vue
@@ -4,14 +4,6 @@ import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 
 const loggedUser = useUserStore().user
-
-onMounted(() => {
-  useUserStore().setupCredentials();
-  setInterval(() => {
-    useFlightsStore().fetch();
-  }, 1000);
-})
-
 </script>
 
 <template>
diff --git a/src/pages/profile/details/AircraftDetailPage.vue b/src/pages/profile/details/AircraftDetailPage.vue
index 3716bc5..3524f90 100644
--- a/src/pages/profile/details/AircraftDetailPage.vue
+++ b/src/pages/profile/details/AircraftDetailPage.vue
@@ -8,6 +8,8 @@ import {confirmObject, successObject} from "src/composables/dialog";
 import {loading, aircraft, fetchAircraft} from "src/composables/objects/aircraft";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
+import FlightsList from "components/flights/FlightsList.vue";
+import {copilot} from "src/composables/objects/copilot";
 
 const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
@@ -40,30 +42,31 @@ watch(aircraft, (newVal) => {
   <template v-else>
 
     <q-card>
-    <q-img :src="aircraft.photoUrl"/>
+      <q-img :src="aircraft.photoUrl"/>
 
       <q-card-section>
         <q-list>
-      <q-item>
-        Výrobce: {{ aircraft.manufacturer }}
-      </q-item>
+          <q-item>
+            Výrobce: {{ aircraft.manufacturer }}
+          </q-item>
+          <q-item>
+            Model: {{ aircraft.model }}
+          </q-item>
+        </q-list>
 
-      <q-item>
-        Model: {{ aircraft.model }}
-      </q-item>
-
-    </q-list>
+        <h3>Lety</h3>
+        <q-banner v-if="aircraft.flights.length === 0" class="bg-light-blue text-white">
+          Zatím žádné lety.
+        </q-banner>
+        <FlightsList :items="aircraft.flights" v-else/>
       </q-card-section>
 
       <q-card-actions align="right">
-    <q-btn @click="confirmDelete(aircraft.id)" icon="delete" text-color="red" rounded flat/>
-
+        <q-btn @click="confirmDelete(aircraft.id)" icon="delete" text-color="red" rounded flat/>
       </q-card-actions>
     </q-card>
 
 
-
-
     <!--    <h2>Limits</h2>-->
     <!--    Wind: {{ aircraft.limits.wind.frontKt }}/{{ aircraft.limits.wind.sideKt }} kt-->
     <!--    Neprekrocitelna rychlost: {{ aircraft.limits.speed.vmax }}-->
diff --git a/src/pages/profile/details/CopilotDetailPage.vue b/src/pages/profile/details/CopilotDetailPage.vue
index 1981d55..fcdbda9 100644
--- a/src/pages/profile/details/CopilotDetailPage.vue
+++ b/src/pages/profile/details/CopilotDetailPage.vue
@@ -12,7 +12,7 @@ onMounted(() => {
   fetchCopilot(copilotId).then(() => {
     useAppStore().setPageTitle(copilot.value.name);
     useAppStore().setBreadcrumbs([
-      {to: {name: "pilots"}, label: "Kopiloti"},
+      {to: {name: "copilots"}, label: "Kopiloti"},
       {label: copilot.value.name}
     ])
   });
@@ -29,6 +29,6 @@ onMounted(() => {
     </q-banner>
     <FlightsList :items="copilot.flights" v-else/>
 
-    <FAB mode="edit" :router-link="{name: 'pilotEdit', params: {id: copilotId}}"/>
+    <FAB mode="edit" :router-link="{name: 'copilotEdit', params: {id: copilotId}}"/>
   </template>
 </template>
diff --git a/src/pages/profile/details/FlightDetailPage.vue b/src/pages/profile/details/FlightDetailPage.vue
index c9287ed..4e28b69 100644
--- a/src/pages/profile/details/FlightDetailPage.vue
+++ b/src/pages/profile/details/FlightDetailPage.vue
@@ -1,21 +1,26 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {computed, onMounted, watch} from "vue";
+import {computed, onMounted, ref, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
-import PhotosList from "components/photos/PhotosList.vue";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
-import MapWithMarkers from "components/MapWithMarkers.vue";
+import MapWithMarkers from "components/map/MapWithMarkers.vue";
 import FAB from "components/FAB.vue";
+import PhotoDetail from "components/photos/PhotoDetail.vue";
+
 
 const $q = useQuasar();
 const $router = useRouter();
+const displayedPhoto = ref(null);
 
 onMounted(() => {
-  fetchFlight(useRoute().params.id)
+  fetchFlight(useRoute().params.id).then(() => {
+    if (flight.value.photos.length === 0) return;
+    displayedPhoto.value = flight.value.coverPhoto.url || flight.value.photos[0].url;
+  })
 })
 
 watch(flight, (newVal) => {
@@ -36,35 +41,77 @@ const handleDeleteAndRedirect = () => {
   })
 }
 
-const flightPath = computed(() => {
+const trackWithGPS = computed(() => {
+  return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
+});
+
+const pointsOfInterests = computed(() => {
   const path = [{
-    lat: flight.value.takeoffAirport.gpsLatitude,
-    lng: flight.value.takeoffAirport.gpsLongitude
+    label: flight.value.takeoffAirport.name,
+    position:
+      {
+        lat: flight.value.takeoffAirport.gpsLatitude,
+        lng: flight.value.takeoffAirport.gpsLongitude
+      }
   }];
 
-  for (const poi of flight.value.track) {
-    path.push({lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude});
+  for (const poi of trackWithGPS.value) {
+    path.push({
+      label: poi.pointOfInterest.name,
+      position: {lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude}
+    });
   }
 
   path.push({
-    lat: flight.value.landingAirport.gpsLatitude,
-    lng: flight.value.landingAirport.gpsLongitude
+    label: flight.value.takeoffAirport.name,
+    position: {
+      lat: flight.value.landingAirport.gpsLatitude,
+      lng: flight.value.landingAirport.gpsLongitude
+    }
   });
 
   return path;
 });
+
+const openPhotoDetail = ref(false);
+const photoData = ref(null);
+const openDetail = ({photo, idx, allPhotos}) => {
+  openPhotoDetail.value = true;
+  photoData.value = {photo, idx, allPhotos}
+}
+const mapPhotos = computed(() => {
+  return flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude)
+});
+
+const displayMap = computed(() => {
+  return (
+    !!flight.value.gpsTrackUrl ||
+    mapPhotos.value.length > 0 ||
+    trackWithGPS.value.length > 0 ||
+    flight.value.landingAirport.id !== flight.value.takeoffAirport.id
+  )
+});
 </script>
 
+
 <template>
   <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <template v-else>
-    <q-card class="q-mx-md-lg q-my-md">
-      <q-parallax
-        :src="flight.coverPhoto.url"
-        v-if="flight.coverPhoto"
-        :height="450"
-      />
+    <q-card class="q-mx-md q-my-md">
+      <q-carousel
+        v-if="flight.photos.length > 0"
+        animated
+        v-model="displayedPhoto"
+        arrows
+        swipeable
+        height="auto"
+        infinite
+      >
+        <q-carousel-slide style="padding: 0" v-for="(photo, idx) in flight.photos" :key="photo.url" :name="photo.url">
+          <q-img :src="photo.url" @click="openDetail({photo, idx, allPhotos: flight.photos})"/>
+        </q-carousel-slide>
+      </q-carousel>
 
       <q-card-section>
         <FlightBasicInfo :flight="flight"/>
@@ -72,12 +119,12 @@ const flightPath = computed(() => {
         <article class="q-my-lg" v-html="flight.description"/>
 
         <MapWithMarkers
+          v-if="displayMap"
           style="width: 100%; height: 500px;"
-          :show-as-track="true"
-          :markers="flightPath"
+          :gpx-track-url="flight.gpxTrackUrl"
+          :markers="pointsOfInterests"
+          :photos="mapPhotos"
         />
-
-        <PhotosList :photos="flight.photos" :show-actions="false"/>
       </q-card-section>
 
       <q-card-actions align="right">
@@ -85,6 +132,8 @@ const flightPath = computed(() => {
       </q-card-actions>
     </q-card>
 
+    <PhotoDetail v-if="photoData" v-model="openPhotoDetail" :photo="photoData.photo" :photos="photoData.allPhotos" :opened-index="photoData.idx"/>
+
     <FAB :router-link="{name: 'flightEdit', params:{id: flight.id}}" mode="edit"/>
 
   </template>
diff --git a/src/pages/profile/details/PointOfInterestDetailPage.vue b/src/pages/profile/details/PointOfInterestDetailPage.vue
index 1615709..df059fe 100644
--- a/src/pages/profile/details/PointOfInterestDetailPage.vue
+++ b/src/pages/profile/details/PointOfInterestDetailPage.vue
@@ -6,7 +6,7 @@ import FAB from "components/FAB.vue";
 import {fetchPoi, loading, poi} from "src/composables/objects/poi";
 import PhotosList from "components/photos/PhotosList.vue";
 import {useAppStore} from "stores/App";
-import MapWithMarker from "components/MapWithMarkers.vue";
+import EmbeddedMap from "components/map/EmbeddedMap.vue";
 
 onMounted(() => {
   fetchPoi(useRoute().params.id).then(() => {
@@ -25,11 +25,11 @@ onMounted(() => {
 
   <template v-else>
 
-    <MapWithMarker
-      v-if="poi.gpsLongitude && poi.gpsLatitude"
-      style="width: 100%; height: 500px;"
+    <EmbeddedMap
+      v-if="poi.gpsLatitude && poi.gpsLongitude"
+      :gps-latitude="poi.gpsLatitude"
+      :gps-longitude="poi.gpsLongitude"
       :zoom="13"
-      :markers="[{lat: poi.gpsLatitude, lng: poi.gpsLongitude}]"
     />
 
     <PhotosList
diff --git a/src/pages/profile/forms/EditAircraftPage.vue b/src/pages/profile/forms/EditAircraftPage.vue
index 2983b1b..2151212 100644
--- a/src/pages/profile/forms/EditAircraftPage.vue
+++ b/src/pages/profile/forms/EditAircraftPage.vue
@@ -7,6 +7,8 @@ import {onMounted, ref} from "vue";
 import AircraftEditSkeleton from "components/aircrafts/AircraftEditSkeleton.vue";
 import {successObject} from "src/composables/dialog";
 import {aircraft, fetchAircraft, loading} from "src/composables/objects/aircraft";
+import {useAppStore} from "stores/App";
+import {copilot} from "src/composables/objects/copilot";
 
 
 let isRequestPending = ref(false);
@@ -16,29 +18,32 @@ const aircraftId = parseInt(useRoute().params.id);
 const handleSave = (formData) => {
   isRequestPending.value = true;
   useAircraftsStore().update(aircraftId, formData).then(() => {
-    $q.notify(successObject("Letadlo uspesne upraveno"));
-
+    $q.notify(successObject("Letadlo úspěšně upraveno"));
     useRouter().push({name: "aircrafts"});
   }).finally(() => {
-    isRequestPending.value = true;
+    isRequestPending.value = false;
   })
 }
 
 onMounted(() => {
-  fetchAircraft(aircraftId)
+  fetchAircraft(aircraftId).then(() => {
+    useAppStore().setPageTitle(`${aircraft.value.callSign} - editace`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "aircraft"}, label: "Letadla"},
+      {to: {name: "aircraftDetail", params: {id: aircraftId}}, label: aircraft.value.callSign},
+      {label: "Editace"}
+    ])
+  })
 });
 </script>
 
 <template>
   <AircraftEditSkeleton v-if="loading"/>
 
-  <template v-else>
-    <h1>Editace letadla {{ aircraft.callSign }}</h1>
-
-    <AircraftForm
-      @save="handleSave"
-      :default-values="aircraft"
-      :is-request-pending="isRequestPending"
-    />
-  </template>
+  <AircraftForm
+    v-else
+    @save="handleSave"
+    :default-values="aircraft"
+    :is-request-pending="isRequestPending"
+  />
 </template>
diff --git a/src/pages/profile/forms/EditCopilotPage.vue b/src/pages/profile/forms/EditCopilotPage.vue
index 5c04194..4893f3e 100644
--- a/src/pages/profile/forms/EditCopilotPage.vue
+++ b/src/pages/profile/forms/EditCopilotPage.vue
@@ -3,8 +3,11 @@ import {onMounted} from "vue";
 import {loading, copilot, fetchCopilot} from "src/composables/objects/copilot";
 import {useAppStore} from "stores/App";
 import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
-import CopilotEditForm from "components/copilots/CopilotEditForm.vue";
+import CopilotEditForm from "components/copilots/CopilotForm.vue";
 import {useRoute} from "vue-router";
+import {useCopilotsStore} from "stores/Copilots";
+import {successObject} from "src/composables/dialog";
+import {useQuasar} from "quasar";
 
 const copilotId = parseInt(useRoute().params.id);
 
@@ -12,19 +15,27 @@ onMounted(() => {
   fetchCopilot(copilotId).then(() => {
     useAppStore().setPageTitle(`${copilot.value.name} - editace`);
     useAppStore().setBreadcrumbs([
-      {to: {name: "pilots"}, label: "Kopiloti"},
-      {to: {name: "pilotDetail", params: {id: copilotId}}, label: copilot.value.name},
+      {to: {name: "copilots"}, label: "Kopiloti"},
+      {to: {name: "copilotDetail", params: {id: copilotId}}, label: copilot.value.name},
       {label: "Editace"}
     ])
   })
 });
 
+const $q = useQuasar();
+
+const handleSave = (formData) => {
+  useCopilotsStore().update(copilotId, formData).then(() => {
+    $q.notify(successObject("Kopilot úspěšně upraven"));
+
+    // useRouter().push({name: "copilots"});
+    // TODO: ^^ hazi error
+  })
+}
 </script>
 
 <template>
-<CopilotEditSkeleton v-if="loading" />
-
-  <CopilotEditForm v-else />
-
+  <CopilotEditSkeleton v-if="loading"/>
 
+  <CopilotEditForm v-else :copilot="copilot" @save="handleSave"/>
 </template>
diff --git a/src/pages/profile/forms/EditFlightPage.vue b/src/pages/profile/forms/EditFlightPage.vue
index 61335ca..f905bfe 100644
--- a/src/pages/profile/forms/EditFlightPage.vue
+++ b/src/pages/profile/forms/EditFlightPage.vue
@@ -17,7 +17,7 @@ import FlightFormPhotos from "components/flights/form/FlightFormPhotos.vue";
 import {usePhotosStore} from "stores/Photo";
 import PhotosList from "components/photos/PhotosList.vue";
 import {confirmObject, successObject} from "src/composables/dialog";
-import PhotoForm from "components/flights/PhotoForm.vue";
+import PhotoForm from "components/photos/PhotoForm.vue";
 import FlightFormTrack from "components/flights/form/FlightFormTrack.vue";
 import {fetchFlight, flight, loading} from "src/composables/objects/flight";
 import FlightEditSkeleton from "components/flights/FlightEditSkeleton.vue";
diff --git a/src/pages/profile/forms/NewAircraftsPage.vue b/src/pages/profile/forms/NewAircraftsPage.vue
index 3b7ca4b..1debaf1 100644
--- a/src/pages/profile/forms/NewAircraftsPage.vue
+++ b/src/pages/profile/forms/NewAircraftsPage.vue
@@ -3,7 +3,8 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
+import {useAppStore} from "stores/App";
 
 let isRequestPending = ref(false);
 const $q = useQuasar();
@@ -18,6 +19,15 @@ const handleSave = (formData) => {
     isRequestPending.value = true;
   })
 }
+
+
+onMounted(() => {
+  useAppStore().setPageTitle("Nové letadlo");
+  useAppStore().setBreadcrumbs([
+    {to: {name: "aircrafts"}, label: "Letadla"},
+    {label: "Nové"}
+  ]);
+});
 </script>
 
 <template>
diff --git a/src/pages/profile/forms/NewCopilotPage.vue b/src/pages/profile/forms/NewCopilotPage.vue
index 3b7ca4b..f769538 100644
--- a/src/pages/profile/forms/NewCopilotPage.vue
+++ b/src/pages/profile/forms/NewCopilotPage.vue
@@ -1,25 +1,34 @@
 <script setup>
-import AircraftForm from "components/aircrafts/AircraftForm.vue";
-import {useAircraftsStore} from "stores/Aircrafts";
 import {useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
+import {successObject} from "src/composables/dialog";
+import {useCopilotsStore} from "stores/Copilots";
+import CopilotForm from "components/copilots/CopilotForm.vue";
+import {useAppStore} from "stores/App";
 
 let isRequestPending = ref(false);
 const $q = useQuasar();
 const router = useRouter();
 const handleSave = (formData) => {
   isRequestPending.value = true;
-  useAircraftsStore().create(formData).then(() => {
-    $q.notify({message: "Letadlo úspěšně vytvořeno", position: "top", color: "positive"});
-
-    router.push({name: "aircrafts"});
+  useCopilotsStore().create(formData).then(() => {
+    $q.notify(successObject("Kopilot úspěšně vytvořen"));
+    router.push({name: "copilots"});
   }).finally(() => {
-    isRequestPending.value = true;
+    isRequestPending.value = false;
   })
 }
+
+onMounted(() => {
+  useAppStore().setPageTitle("Nový spolucestující");
+  useAppStore().setBreadcrumbs([
+    {to: {name: "copilots"}, label: "Spolucestující"},
+    {label: "Nový"}
+  ]);
+});
 </script>
 
 <template>
-  <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <CopilotForm @save="handleSave" :is-request-pending="isRequestPending"/>
 </template>
diff --git a/src/pages/profile/forms/NewFlightPage.vue b/src/pages/profile/forms/NewFlightPage.vue
index f74616e..4722171 100644
--- a/src/pages/profile/forms/NewFlightPage.vue
+++ b/src/pages/profile/forms/NewFlightPage.vue
@@ -5,49 +5,39 @@ import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
-import {useMeta} from "quasar";
 import {useAirportsStore} from "stores/Airports";
 import FlightFormSteps from "components/flights/form/FlightFormSteps.vue";
 import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
+import {useAppStore} from "stores/App";
 
-const aircraftsStore = useAircraftsStore();
-const poiStore = usePointsOfInterestStore();
-const flightsStore = useFlightsStore();
-const airportStore = useAirportsStore();
 
-useMeta({title: "New flight"});
 onMounted(() => {
-  aircraftsStore.fetch();
-  poiStore.fetch();
-  flightsStore.fetch();
-  airportStore.fetch();
+  useAircraftsStore().fetch();
+  usePointsOfInterestStore().fetch();
+  useFlightsStore().fetch();
+  useAirportsStore().fetch();
+
+  useAppStore().setPageTitle("Nový let");
+  useAppStore().setBreadcrumbs([
+    {to: {name: "myFlights"}, label: "Moje lety"},
+    {label: "Nový"}
+  ]);
 });
 
 
-const aircrafts = storeToRefs(aircraftsStore).items;
-const locations = storeToRefs(poiStore).items;
-const airports = storeToRefs(airportStore).items;
+const aircrafts = storeToRefs(useAircraftsStore()).items;
+const locations = storeToRefs(usePointsOfInterestStore()).items;
+const airports = storeToRefs(useAirportsStore()).items;
 
 const router = useRouter();
 const handleSave = (formData) => {
-  flightsStore.create(formData).then((flight) => {
+  useFlightsStore().create(formData).then((flight) => {
     router.push({name: "flightEdit", params: {id: flight.id, step: "copilot"}});
   });
 }
-
-const formStep = ref("basic")
-
 </script>
 
 <template>
-
-  <q-breadcrumbs>
-    <q-breadcrumbs-el :to="{name: 'myFlights'}">Moje lety</q-breadcrumbs-el>
-    <q-breadcrumbs-el>Nový</q-breadcrumbs-el>
-  </q-breadcrumbs>
-
-  <!--  {{ formData }}-->
-
   <FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
 
   <FlightFormBasic @save="handleSave" :aircrafts="aircrafts" :airports="airports" :locations="locations" />
diff --git a/src/router/routes.js b/src/router/routes.js
index 2b9e709..6ccc084 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -25,10 +25,10 @@ const routes = [
       {path: 'poi/add', name: "addPOI", component: () => import('pages/profile/forms/NewPointOfInterestPage.vue')},
       {path: 'poi/:id', name: "poiDetail", component: () => import('pages/profile/details/PointOfInterestDetailPage.vue')},
       {path: 'poi/:id/edit', name: "poiEdit", component: () => import('pages/profile/forms/EditPointOfInterestPage.vue')},
-      {path: 'pilots', name: "pilots", component: () => import('pages/profile/lists/CopilotsPage.vue')},
-      {path: 'pilots/add', name: "addPilots", component: () => import('pages/profile/forms/NewCopilotPage.vue')},
-      {path: 'pilots/:id', name: "pilotDetail", component: () => import('pages/profile/details/CopilotDetailPage.vue')},
-      {path: 'pilots/:id/edit', name: "pilotEdit", component: () => import('pages/profile/forms/EditCopilotPage.vue')},
+      {path: 'copilots', name: "copilots", component: () => import('pages/profile/lists/CopilotsPage.vue')},
+      {path: 'copilots/add', name: "addCopilot", component: () => import('pages/profile/forms/NewCopilotPage.vue')},
+      {path: 'copilots/:id', name: "copilotDetail", component: () => import('pages/profile/details/CopilotDetailPage.vue')},
+      {path: 'copilots/:id/edit', name: "copilotEdit", component: () => import('pages/profile/forms/EditCopilotPage.vue')},
       {path: 'aircrafts', name: "aircrafts", component: () => import('pages/profile/lists/AircraftsPage.vue')},
       {path: 'aircrafts/new', name: "addAircraft", component: () => import('pages/profile/forms/NewAircraftsPage.vue')},
       {path: 'aircrafts/:id', name: "aircraftDetail", component: () => import('pages/profile/details/AircraftDetailPage.vue')},
diff --git a/src/stores/Aircrafts.js b/src/stores/Aircrafts.js
index 6431755..9346a9b 100644
--- a/src/stores/Aircrafts.js
+++ b/src/stores/Aircrafts.js
@@ -42,9 +42,6 @@ export const useAircraftsStore = defineStore('Aircrafts', {
       });
     },
     fetch() {
-      /***
-       * {id: id, name: "OK-ABC" + id, private: true, limits: {wind: {frontKt: 22, sideKt: 16}, speed: {vmax: 220}}};
-       */
       return apolloWrapper
         .query(AIRCRAFTS_LIST)
         .then((result) => {
diff --git a/src/stores/Copilots.js b/src/stores/Copilots.js
index 9cbf16a..cd237df 100644
--- a/src/stores/Copilots.js
+++ b/src/stores/Copilots.js
@@ -1,26 +1,35 @@
 import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo";
-import {COPILOTS_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
+import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
+import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
 
 export const useCopilotsStore = defineStore('SecondPilots', {
   state: () => ({
     items: []
   }),
 
-  getters: {},
-
   actions: {
-    create(formData) {
-      console.log("not implemented");
-    },
     fetchDetail(copilotId) {
-      return apolloWrapper.query(COPILOTS_DETAIL, {id: copilotId}).then(({data}) => data.copilot);
+      return apolloWrapper.query(COPILOT_DETAIL, {id: copilotId}).then(({data}) => data.copilot);
     },
     fetch() {
-     return apolloWrapper.query(COPILOTS_LIST).then(result => {
+      return apolloWrapper.query(COPILOTS_LIST).then(result => {
         this.items = result.data.copilots;
         return result.data.copilots;
       });
-    }
+    },
+    create(formData) {
+      delete formData['id'];
+      return apolloWrapper.mutate(CREATE_COPILOT, {input: formData}).then(({data}) => {
+        this.items.push(data.createCopilot);
+
+        return data.createCopilot;
+      })
+    },
+    update(id, formData) {
+      return apolloWrapper.mutate(EDIT_COPILOT, {id: id, input: formData}).then(({data}) => {
+        return data.editCopilot;
+      });
+    },
   }
 })