From 864db6c6a2757af5af999007bc526172ec2ae439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 24 Jul 2023 17:31:54 +0200
Subject: [PATCH] composables, mazani letu, skeletony

---
 src/components/BreadcrumbsNavigation.vue      | 14 ++++
 .../aircrafts/AircraftEditSkeleton.vue        |  5 ++
 src/components/aircrafts/AircraftForm.vue     |  8 +-
 src/components/aircrafts/AircraftsList.vue    |  4 +
 .../copilots/CopilotDetailSkeleton.vue        |  5 ++
 .../copilots/CopilotEditSkeleton.vue          |  5 ++
 .../copilots/CopilotListSkeleton.vue          |  5 ++
 src/components/copilots/CopilotsList.vue      | 25 ++++++
 src/components/flights/FlightBasicInfo.vue    | 64 +++++++++++++++
 .../FlightEditSkeleton.vue}                   |  4 +-
 src/components/flights/FlightsList.vue        | 25 +-----
 src/components/flights/PhotoForm.vue          | 19 ++++-
 .../flights/form/FlightFormBasic.vue          |  4 -
 src/components/inputs/MapGPSInput.vue         |  5 ++
 src/components/photos/PhotosList.vue          |  1 +
 src/components/poi/POIDetailSkeleton.vue      |  5 ++
 src/components/poi/POIEditForm.vue            | 35 +++++++++
 src/components/poi/POIEditSkeleton.vue        |  6 ++
 src/components/poi/POIList.vue                | 21 +++++
 src/components/poi/POIListSkeleton.vue        |  7 ++
 src/composables/flight.js                     | 10 ---
 src/composables/objects/aircraft.js           | 23 ++++++
 src/composables/objects/copilot.js            | 18 +++++
 src/composables/objects/flight.js             | 41 ++++++++++
 src/composables/objects/poi.js                | 19 +++++
 src/graphql/fragments/photo.js                |  3 +
 src/graphql/fragments/poi.js                  | 16 ++++
 src/graphql/mutations/flight.js               |  9 +++
 src/graphql/mutations/poi.js                  | 16 +++-
 src/graphql/queries/copilots.js               |  9 +++
 src/graphql/queries/poi.js                    | 12 ++-
 src/layouts/ProfileLayout.vue                 | 13 ++--
 .../profile/details/AircraftDetailPage.vue    | 48 ++++++------
 .../profile/details/CopilotDetailPage.vue     | 39 ++++++++++
 .../profile/details/FlightDetailPage.vue      | 78 +++++++++++++------
 .../details/PointOfInterestDetailPage.vue     | 30 +++----
 src/pages/profile/forms/EditAircraftPage.vue  | 26 +++----
 .../EditCopilotPage.vue}                      | 11 +--
 ...{FlightEditPage.vue => EditFlightPage.vue} | 17 ++--
 .../profile/forms/EditPointOfInterestPage.vue | 27 +++++++
 src/pages/profile/forms/NewCopilotPage.vue    | 25 ++++++
 .../{FlightLogPage.vue => NewFlightPage.vue}  |  0
 .../profile/forms/NewPointOfInterestPage.vue  | 25 ++++++
 src/pages/profile/lists/AircraftsPage.vue     | 23 ++----
 src/pages/profile/lists/FlightsPage.vue       | 27 +++----
 .../profile/lists/PointsOfInterestPage.vue    | 35 ++++-----
 src/pages/profile/lists/SecondPilotPage.vue   | 31 +++-----
 src/router/index.js                           |  3 +
 src/router/routes.js                          | 10 ++-
 src/stores/App.js                             | 21 +++--
 src/stores/Copilots.js                        |  5 +-
 src/stores/Flights.js                         | 26 ++++---
 src/stores/PointsOfInterest.js                | 42 ++++------
 53 files changed, 732 insertions(+), 273 deletions(-)
 create mode 100644 src/components/BreadcrumbsNavigation.vue
 create mode 100644 src/components/aircrafts/AircraftEditSkeleton.vue
 create mode 100644 src/components/copilots/CopilotDetailSkeleton.vue
 create mode 100644 src/components/copilots/CopilotEditSkeleton.vue
 create mode 100644 src/components/copilots/CopilotListSkeleton.vue
 create mode 100644 src/components/copilots/CopilotsList.vue
 create mode 100644 src/components/flights/FlightBasicInfo.vue
 rename src/components/{inputs/UCombobox.vue => flights/FlightEditSkeleton.vue} (52%)
 create mode 100644 src/components/inputs/MapGPSInput.vue
 create mode 100644 src/components/poi/POIDetailSkeleton.vue
 create mode 100644 src/components/poi/POIEditForm.vue
 create mode 100644 src/components/poi/POIEditSkeleton.vue
 create mode 100644 src/components/poi/POIList.vue
 create mode 100644 src/components/poi/POIListSkeleton.vue
 delete mode 100644 src/composables/flight.js
 create mode 100644 src/composables/objects/aircraft.js
 create mode 100644 src/composables/objects/copilot.js
 create mode 100644 src/composables/objects/flight.js
 create mode 100644 src/composables/objects/poi.js
 create mode 100644 src/pages/profile/details/CopilotDetailPage.vue
 rename src/pages/profile/{details/SecondPilotDetailPage.vue => forms/EditCopilotPage.vue} (73%)
 rename src/pages/profile/forms/{FlightEditPage.vue => EditFlightPage.vue} (92%)
 create mode 100644 src/pages/profile/forms/EditPointOfInterestPage.vue
 create mode 100644 src/pages/profile/forms/NewCopilotPage.vue
 rename src/pages/profile/forms/{FlightLogPage.vue => NewFlightPage.vue} (100%)
 create mode 100644 src/pages/profile/forms/NewPointOfInterestPage.vue

diff --git a/src/components/BreadcrumbsNavigation.vue b/src/components/BreadcrumbsNavigation.vue
new file mode 100644
index 0000000..2200f72
--- /dev/null
+++ b/src/components/BreadcrumbsNavigation.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <q-breadcrumbs>
+    <q-breadcrumbs-el v-for="item in items" :key="item.label" :to="item.to"> {{ item.label }} </q-breadcrumbs-el>
+  </q-breadcrumbs>
+</template>
diff --git a/src/components/aircrafts/AircraftEditSkeleton.vue b/src/components/aircrafts/AircraftEditSkeleton.vue
new file mode 100644
index 0000000..e052340
--- /dev/null
+++ b/src/components/aircrafts/AircraftEditSkeleton.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <em>Aircraft edit skeleton</em>
+</template>
diff --git a/src/components/aircrafts/AircraftForm.vue b/src/components/aircrafts/AircraftForm.vue
index 636f206..e1c0e24 100644
--- a/src/components/aircrafts/AircraftForm.vue
+++ b/src/components/aircrafts/AircraftForm.vue
@@ -34,11 +34,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <FormWrapper v-model="formData">
+  <FormWrapper v-model="formData" :is-request-pending="isRequestPending">
     <q-input type="text" :rules="rules.callSign" v-model="formData.callSign" label="Volací značka"/>
     <q-input type="text" v-model="formData.model" label="Model"/>
     <q-input type="text" v-model="formData.manufacturer" label="Výrobce"/>
     <q-input type="textarea" v-model="formData.description" label="Popis" />
-    <q-file v-model="formData.photo" label="Avatar" />
+
+
+    {{ props.defaultValues.photoUrl }}
+    <q-img :src="props.defaultValues.photoUrl" v-if="props.defaultValues.photoUrl" />
+    <q-file v-model="formData.photo" label="Fotografie" />
   </FormWrapper>
 </template>
diff --git a/src/components/aircrafts/AircraftsList.vue b/src/components/aircrafts/AircraftsList.vue
index 2b8fd8b..e053f3e 100644
--- a/src/components/aircrafts/AircraftsList.vue
+++ b/src/components/aircrafts/AircraftsList.vue
@@ -1,11 +1,15 @@
 <script setup>
 
+import {useAppStore} from "stores/App";
+
 const props = defineProps({
   items: {
     type: Array,
     required: true
   }
 });
+
+useAppStore().setPageTitle("Letadla");
 </script>
 
 <template>
diff --git a/src/components/copilots/CopilotDetailSkeleton.vue b/src/components/copilots/CopilotDetailSkeleton.vue
new file mode 100644
index 0000000..ad40fc1
--- /dev/null
+++ b/src/components/copilots/CopilotDetailSkeleton.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <em>Copilot skeleton</em>
+</template>
diff --git a/src/components/copilots/CopilotEditSkeleton.vue b/src/components/copilots/CopilotEditSkeleton.vue
new file mode 100644
index 0000000..ad40fc1
--- /dev/null
+++ b/src/components/copilots/CopilotEditSkeleton.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <em>Copilot skeleton</em>
+</template>
diff --git a/src/components/copilots/CopilotListSkeleton.vue b/src/components/copilots/CopilotListSkeleton.vue
new file mode 100644
index 0000000..ad40fc1
--- /dev/null
+++ b/src/components/copilots/CopilotListSkeleton.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <em>Copilot skeleton</em>
+</template>
diff --git a/src/components/copilots/CopilotsList.vue b/src/components/copilots/CopilotsList.vue
new file mode 100644
index 0000000..789cfa9
--- /dev/null
+++ b/src/components/copilots/CopilotsList.vue
@@ -0,0 +1,25 @@
+<script setup>
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item clickable v-ripple v-for="pilot of items" :key="pilot">
+      <q-item-label>
+        <router-link :to="{name: 'pilotDetail', params: {id: pilot.id }}">
+          {{ pilot.name }}
+        </router-link>
+      </q-item-label>
+      <q-item-section>
+        section
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
diff --git a/src/components/flights/FlightBasicInfo.vue b/src/components/flights/FlightBasicInfo.vue
new file mode 100644
index 0000000..e0a22f3
--- /dev/null
+++ b/src/components/flights/FlightBasicInfo.vue
@@ -0,0 +1,64 @@
+<script setup>
+import {flight} from "src/composables/objects/flight";
+import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  flight: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="flight_takeoff"/>
+      </q-item-section>
+      <q-item-section>
+        {{ flight.takeoffAirport.name }}
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="flight_land"/>
+      </q-item-section>
+      <q-item-section>
+        {{ flight.landingAirport.name }}
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section avatar>
+        <q-icon name="event"/>
+      </q-item-section>
+      <q-item-section>
+        {{ formatDatetime(flight.takeoffDatetime) }}
+      </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>
+      <q-item-section avatar>
+        <q-icon name="schedule"/>
+      </q-item-section>
+      <q-item-section>
+        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+      </q-item-section>
+    </q-item>
+    <q-item v-if="!flight.solo">
+      <q-item-section avatar>
+        <q-icon name="people"/>
+      </q-item-section>
+      <q-item-section>
+        {{ flight.copilot.name }}
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
diff --git a/src/components/inputs/UCombobox.vue b/src/components/flights/FlightEditSkeleton.vue
similarity index 52%
rename from src/components/inputs/UCombobox.vue
rename to src/components/flights/FlightEditSkeleton.vue
index 7c3f688..bde00f0 100644
--- a/src/components/inputs/UCombobox.vue
+++ b/src/components/flights/FlightEditSkeleton.vue
@@ -1,7 +1,7 @@
 <script setup>
-const props = defineProps({});
+
 </script>
 
 <template>
-  {{ props }}
+  <em>Flight edit skeleton</em>
 </template>
diff --git a/src/components/flights/FlightsList.vue b/src/components/flights/FlightsList.vue
index f75dccb..1ed2f87 100644
--- a/src/components/flights/FlightsList.vue
+++ b/src/components/flights/FlightsList.vue
@@ -3,6 +3,7 @@ import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUt
 import {computed} from "vue";
 import {useQuasar} from "quasar";
 import {useFlightsStore} from "stores/Flights";
+import {flightName} from "../../composables/objects/flight";
 
 const props = defineProps({
   items: {
@@ -11,31 +12,14 @@ const props = defineProps({
   }
 });
 
-
-const $q = useQuasar();
-const deleteFlight = (flightId) => {
-  $q.dialog({
-    title: 'Potvrzení',
-    message: 'Opravdu chceš smazat tento let?',
-    cancel: true,
-    persistent: true
-  }).onOk(() => {
-    useFlightsStore().deleteItem(flightId);
-  })
-}
-
 const totalFlightTime = computed(() => {
   return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
 })
 
-const flightName = (item) => {
-  if (item.name) {
-    return item.name;
-  } else {
-    return `${item.takeoffAirport.name} - ${item.landingAirport.name}`
-  }
+const emit = defineEmits(["delete"]);
+const deleteFlight = (flightId) => {
+  emit("delete", flightId);
 }
-
 </script>
 
 <template>
@@ -70,7 +54,6 @@ const flightName = (item) => {
         <q-separator/>
 
         <q-card-actions align="right">
-          <q-btn flat icon="visibility"></q-btn>
           <q-btn flat icon="edit" :to="{name: 'flightEdit', params:{id: flight.id}}"></q-btn>
           <q-btn flat icon="delete" color="red" @click="deleteFlight(flight.id)"></q-btn>
         </q-card-actions>
diff --git a/src/components/flights/PhotoForm.vue b/src/components/flights/PhotoForm.vue
index 5c61bbc..adc8831 100644
--- a/src/components/flights/PhotoForm.vue
+++ b/src/components/flights/PhotoForm.vue
@@ -7,13 +7,18 @@ import FormWrapper from "components/FormWrapper.vue";
 const props = defineProps({
   photo: {
     type: Object
+  },
+  locations: {
+    type: Array
   }
 });
 
 const photoId = computed(() => props.photo?.id || null);
 const formData = ref({
   name: "",
-  description: ""
+  description: "",
+  pointOfInterestId: null,
+  isFlightCover: false
 });
 
 const setup = (() => {
@@ -29,6 +34,18 @@ const setup = (() => {
       <FormWrapper :save-button="false">
         <q-input v-model="formData.name" label="Název"/>
         <q-input type="textarea" v-model="formData.description" label="Popis"/>
+
+        <q-select
+          :options="locations"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          v-model="formData.pointOfInterestId"
+          label="POI"
+        />
+
+        <q-checkbox v-model="formData.isFlightCover" label="Úvodní fotografie k letu?" />
       </FormWrapper>
     </q-card-section>
   </DialogWrapper>
diff --git a/src/components/flights/form/FlightFormBasic.vue b/src/components/flights/form/FlightFormBasic.vue
index 8213b93..e94b78e 100644
--- a/src/components/flights/form/FlightFormBasic.vue
+++ b/src/components/flights/form/FlightFormBasic.vue
@@ -14,10 +14,6 @@ const props = defineProps({
       type: Array,
       required: true
     },
-    locations: {
-      type: Array,
-      required: true
-    },
     flight: {
       type: Object,
       required: false
diff --git a/src/components/inputs/MapGPSInput.vue b/src/components/inputs/MapGPSInput.vue
new file mode 100644
index 0000000..5690584
--- /dev/null
+++ b/src/components/inputs/MapGPSInput.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <div>Tu bude mapa s GPS pointerem</div>
+</template>
diff --git a/src/components/photos/PhotosList.vue b/src/components/photos/PhotosList.vue
index 993b8f8..8b1ca72 100644
--- a/src/components/photos/PhotosList.vue
+++ b/src/components/photos/PhotosList.vue
@@ -41,6 +41,7 @@ const openDetail = (photo) => {
         </q-img>
 
         <q-card-actions v-if="showActions">
+          {{ photo.isFlightCover ? 'ano' : 'ne' }}
           <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/POIDetailSkeleton.vue b/src/components/poi/POIDetailSkeleton.vue
new file mode 100644
index 0000000..e7ef873
--- /dev/null
+++ b/src/components/poi/POIDetailSkeleton.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <em>POI detail skeleton</em>
+</template>
diff --git a/src/components/poi/POIEditForm.vue b/src/components/poi/POIEditForm.vue
new file mode 100644
index 0000000..686df71
--- /dev/null
+++ b/src/components/poi/POIEditForm.vue
@@ -0,0 +1,35 @@
+<script setup>
+import FormWrapper from "components/FormWrapper.vue";
+import {onMounted, reactive} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import MapGPSInput from "components/inputs/MapGPSInput.vue";
+
+const props = defineProps({
+  poi: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  }
+})
+
+const formData = reactive({
+  name: null,
+  isPublic: false,
+});
+
+onMounted(() => {
+  setDefaultData(formData, props.poi)
+})
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+
+    <q-input v-model="formData.name" label="Jméno" />
+    <q-checkbox v-model="formData.isPublic" label="Veřejný?" />
+
+    <MapGPSInput />
+
+  </FormWrapper>
+</template>
diff --git a/src/components/poi/POIEditSkeleton.vue b/src/components/poi/POIEditSkeleton.vue
new file mode 100644
index 0000000..65f1f26
--- /dev/null
+++ b/src/components/poi/POIEditSkeleton.vue
@@ -0,0 +1,6 @@
+<script setup>
+</script>
+
+<template>
+  <em>POI edit skeleton</em>
+</template>
diff --git a/src/components/poi/POIList.vue b/src/components/poi/POIList.vue
new file mode 100644
index 0000000..7f5daf9
--- /dev/null
+++ b/src/components/poi/POIList.vue
@@ -0,0 +1,21 @@
+<script setup>
+import {pointsOfInterest} from "src/composables/objects/poi";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: false
+  }
+})
+</script>
+<template>
+  <q-list bordered separator>
+    <q-item clickable v-ripple v-for="poi of items" :key="poi">
+      <q-item-section>
+        <router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
+          {{ poi.name }}
+        </router-link>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
diff --git a/src/components/poi/POIListSkeleton.vue b/src/components/poi/POIListSkeleton.vue
new file mode 100644
index 0000000..846fd63
--- /dev/null
+++ b/src/components/poi/POIListSkeleton.vue
@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+  <em>POI list skeleton</em>
+</template>
diff --git a/src/composables/flight.js b/src/composables/flight.js
deleted file mode 100644
index fc5e747..0000000
--- a/src/composables/flight.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-
-export const flightName = (flight) => {
-  const date = formatDatetime(flight.takeoffDatetime, FORMAT_DATE);
-  if (flight.name !== '') {
-    return `${flight.name} (${date})`
-  } else {
-    return `${flight.takeoffAirport.icaoCode} - ${flight.takeoffAirport.icaoCode} (${date})`;
-  }
-}
diff --git a/src/composables/objects/aircraft.js b/src/composables/objects/aircraft.js
new file mode 100644
index 0000000..c81979a
--- /dev/null
+++ b/src/composables/objects/aircraft.js
@@ -0,0 +1,23 @@
+import {useAircraftsStore} from "stores/Aircrafts";
+import {ref} from "vue";
+import {storeToRefs} from "pinia";
+
+export const loading = ref(true);
+
+export const aircraft = ref(null);
+
+export const fetchAircraft = (aircraftId) => {
+  loading.value = true;
+  useAircraftsStore().fetchDetail(aircraftId).then((data) => {
+    aircraft.value = data;
+  }).catch(err => {
+    console.error(err);
+  }).finally(() => loading.value = false);
+}
+
+
+export const aircrafts = storeToRefs(useAircraftsStore()).items;
+export const fetchAircrafts = () => {
+  loading.value = true;
+  useAircraftsStore().fetch().finally(() => loading.value = false);
+}
diff --git a/src/composables/objects/copilot.js b/src/composables/objects/copilot.js
new file mode 100644
index 0000000..2e2dcc2
--- /dev/null
+++ b/src/composables/objects/copilot.js
@@ -0,0 +1,18 @@
+import {ref} from "vue";
+import {useCopilotsStore} from "stores/Copilots";
+import {storeToRefs} from "pinia";
+
+export const loading = ref(true);
+export const copilot = ref(null);
+export const fetchCopilot = (copilotId) => {
+  loading.value = true;
+  useCopilotsStore().fetchDetail(parseInt(copilotId))
+    .then(resp => copilot.value = resp)
+    .finally(() => loading.value = false);
+}
+
+export const copilots = storeToRefs(useCopilotsStore()).items;
+export const fetchCopilots = () => {
+  loading.value = true;
+  useCopilotsStore().fetch().finally(() => loading.value = false);
+}
diff --git a/src/composables/objects/flight.js b/src/composables/objects/flight.js
new file mode 100644
index 0000000..92492fc
--- /dev/null
+++ b/src/composables/objects/flight.js
@@ -0,0 +1,41 @@
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+import {useFlightsStore} from "stores/Flights";
+import {ref} from "vue";
+import {storeToRefs} from "pinia";
+import {confirmObject} from "src/composables/dialog";
+
+export const flightName = (flight) => {
+  const date = formatDatetime(flight.takeoffDatetime, FORMAT_DATE);
+  if (flight.name !== '') {
+    return `${flight.name} (${date})`
+  } else {
+    return `${flight.takeoffAirport.icaoCode} - ${flight.takeoffAirport.icaoCode} (${date})`;
+  }
+}
+
+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)
+    .finally(() => loading.value = false);
+};
+
+export const flights = storeToRefs(useFlightsStore()).items;
+
+export const fetchFlights = () => {
+  loading.value = true;
+  useFlightsStore().fetch().finally(() => {
+    loading.value = false;
+  });
+};
+
+
+export const handleDeleteFlight = ($q, flightId, onOkCallback = () => {}) => {
+  $q.dialog(confirmObject(`Opravdu chceš smazat tento let?`))
+    .onOk(() => {
+      useFlightsStore().delete(flightId).then(onOkCallback);
+    });
+};
+
diff --git a/src/composables/objects/poi.js b/src/composables/objects/poi.js
new file mode 100644
index 0000000..632d059
--- /dev/null
+++ b/src/composables/objects/poi.js
@@ -0,0 +1,19 @@
+import {ref} from "vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
+
+export const loading = ref(true);
+export const poi = ref(null);
+export const fetchPoi = (poiId) => {
+  loading.value = true;
+  usePointsOfInterestStore().fetchDetail(poiId)
+    .then(data => poi.value = data)
+    .finally(() => loading.value = false);
+};
+
+
+export const pointsOfInterest = storeToRefs(usePointsOfInterestStore()).items;
+export const fetchPOIList = () => {
+  loading.value = true;
+  usePointsOfInterestStore().fetch().finally(() => loading.value = false);
+}
diff --git a/src/graphql/fragments/photo.js b/src/graphql/fragments/photo.js
index d5fde16..7e79259 100644
--- a/src/graphql/fragments/photo.js
+++ b/src/graphql/fragments/photo.js
@@ -8,4 +8,7 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
     filename
     name
     description
+    flightId
+    pointOfInterestId
+    isFlightCover
 }`;
diff --git a/src/graphql/fragments/poi.js b/src/graphql/fragments/poi.js
index 35d04fd..6cb3695 100644
--- a/src/graphql/fragments/poi.js
+++ b/src/graphql/fragments/poi.js
@@ -6,3 +6,19 @@ fragment pointOfInterestListInfo on PointOfInterest {
   name
 }
 `;
+
+export const FRAGMENT_POI_FULL_INFO = gql`
+fragment pointOfInterestFullInfo on PointOfInterest {
+  id
+  name
+  isPublic
+  gpsLatitude
+  gpsLongitude
+  photos {
+    thumbnailUrl
+    url
+    name
+    description
+  }
+}
+`;
diff --git a/src/graphql/mutations/flight.js b/src/graphql/mutations/flight.js
index aa6b33d..5b3bf5b 100644
--- a/src/graphql/mutations/flight.js
+++ b/src/graphql/mutations/flight.js
@@ -20,3 +20,12 @@ mutation editFlight($id: Int!, $input: EditFlightInput!) {
 
   ${FRAGMENT_FLIGHT_FULL_INFO}
 `;
+
+
+export const DELETE_FLIGHT = gql`
+mutation deleteFlight($id: Int!) {
+    deleteFlight(id: $id) {
+      id
+    }
+  }
+`;
diff --git a/src/graphql/mutations/poi.js b/src/graphql/mutations/poi.js
index f294570..ab44170 100644
--- a/src/graphql/mutations/poi.js
+++ b/src/graphql/mutations/poi.js
@@ -1,12 +1,22 @@
 import gql from "graphql-tag";
-import {FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
+import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
 
 export const CREATE_POI = gql`
   mutation createPointOfInterest($input: CreatePointOfInterestInput!) {
     createPointOfInterest(input: $input) {
-      ...pointOfInterestListInfo
+      ...pointOfInterestFullInfo
     }
   }
 
-  ${FRAGMENT_POI_LIST_INFO}
+  ${FRAGMENT_POI_FULL_INFO}
+`;
+
+export const EDIT_POI = gql`
+  mutation editPointOfInterest($id: Int!, $input: EditPointOfInterestInput!) {
+    editPointOfInterest(id: $id, input: $input) {
+      ...pointOfInterestFullInfo
+    }
+  }
+
+  ${FRAGMENT_POI_FULL_INFO}
 `;
diff --git a/src/graphql/queries/copilots.js b/src/graphql/queries/copilots.js
index 3c819b8..10f8481 100644
--- a/src/graphql/queries/copilots.js
+++ b/src/graphql/queries/copilots.js
@@ -8,3 +8,12 @@ query copilotsList {
   }
 }
 `;
+
+export const COPILOTS_DETAIL = gql`
+query copilot($id: Int!) {
+  copilot(id: $id) {
+    id
+    name
+  }
+}
+`;
diff --git a/src/graphql/queries/poi.js b/src/graphql/queries/poi.js
index a4e22c4..0e943c8 100644
--- a/src/graphql/queries/poi.js
+++ b/src/graphql/queries/poi.js
@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
+import {FRAGMENT_POI_FULL_INFO, FRAGMENT_POI_LIST_INFO} from "src/graphql/fragments/poi";
 
 export const POI_LIST = gql`
 query poiList {
@@ -10,3 +10,13 @@ query poiList {
 
 ${FRAGMENT_POI_LIST_INFO}
 `;
+
+export const POI_DETAIL = gql`
+query poiDetail($id: Int!) {
+  pointOfInterest(id: $id) {
+    ...pointOfInterestFullInfo
+  }
+}
+
+${FRAGMENT_POI_FULL_INFO}
+`;
diff --git a/src/layouts/ProfileLayout.vue b/src/layouts/ProfileLayout.vue
index de479ae..f8ccb0b 100644
--- a/src/layouts/ProfileLayout.vue
+++ b/src/layouts/ProfileLayout.vue
@@ -12,7 +12,7 @@
         />
 
         <q-toolbar-title>
-          Polétání.cz
+          {{ app.pageTitle.value || "Polétání.cz"}}
         </q-toolbar-title>
 
       </q-toolbar>
@@ -47,22 +47,21 @@
     </q-drawer>
 
     <q-page-container class="q-px-md">
+      <BreadcrumbsNavigation :items="app.breadcrumbs.value" />
       <router-view/>
     </q-page-container>
   </q-layout>
 </template>
 
 <script setup>
-import {computed, onMounted, ref} from 'vue'
+import {onMounted, ref} from 'vue'
 import NavigationButton from "../components/navigation/NavigationButton.vue";
-import {useMeta} from "quasar";
 import {useUserStore} from "stores/User";
 import {storeToRefs} from "pinia";
+import BreadcrumbsNavigation from "components/BreadcrumbsNavigation.vue";
+import {useAppStore} from "stores/App";
 
-const metadata = {
-  titleTemplate: title => `${title} - Polétání.cz`,
-}
-useMeta(metadata);
+const app = storeToRefs(useAppStore());
 
 const linksList = [
    {
diff --git a/src/pages/profile/details/AircraftDetailPage.vue b/src/pages/profile/details/AircraftDetailPage.vue
index c393603..0bb9a80 100644
--- a/src/pages/profile/details/AircraftDetailPage.vue
+++ b/src/pages/profile/details/AircraftDetailPage.vue
@@ -1,50 +1,47 @@
 <script setup>
-import {computed, onMounted, reactive, ref} from "vue";
+import {onMounted, watch} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
-import {confirmObject} from "src/composables/dialog";
+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";
 
-const aircraftStore = useAircraftsStore();
-const route = useRoute();
-const router = useRouter();
-
-const aircraftId = computed(() => parseInt(route.params.id));
-const loading = ref(false);
-let aircraft = reactive({});
+const aircraftId = parseInt(useRoute().params.id);
 onMounted(() => {
-  loading.value = true;
-  aircraftStore.fetchDetail(aircraftId.value)
-    .then(respAircraft => aircraft = respAircraft)
-    .finally(() => {
-      loading.value = false;
-    });
+  fetchAircraft(aircraftId);
 })
 
 const $q = useQuasar();
 const confirmDelete = (id) => {
   $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
     .onOk(() => {
-      aircraftStore.delete(id).then(() => {
-        router.push({name: "aircrafts"});
-        $q.notify({message: "Letadlo uspesne odstraneno", position: "top", color: "positive"});
+      useAircraftsStore().delete(id).then(() => {
+        useRouter().push({name: "aircrafts"});
+        $q.notify(successObject("Letadlo uspesne odstraneno"));
       });
     })
 };
+
+watch(aircraft, (newVal) => {
+  useAppStore().setPageTitle(newVal.callSign);
+  useAppStore().setBreadcrumbs([
+    {label: "Letadla", to: {name: "aircrafts"}},
+    {label: newVal.callSign}
+  ])
+});
+
 </script>
 
 <template>
-  <AircraftDetailSkeleton v-if="loading && aircraft"/>
+  <AircraftDetailSkeleton v-if="loading || !aircraft"/>
   <template v-else>
-    <q-breadcrumbs>
-      <q-breadcrumbs-el :to="{name: 'aircrafts'}">Letadla</q-breadcrumbs-el>
-      <q-breadcrumbs-el>{{ aircraft.callSign }}</q-breadcrumbs-el>
-    </q-breadcrumbs>
 
     <h1>{{ aircraft.callSign }}</h1>
 
-    {{ aircraft.photoUrl }}
+    <q-img :src="aircraft.photoUrl"/>
 
     <q-list>
       <q-item>
@@ -56,7 +53,6 @@ const confirmDelete = (id) => {
       </q-item>
 
     </q-list>
-    <q-btn :to='{name: "aircraftEdit", params: {id: aircraft.id}}'>Edit {{ aircraft.id }}</q-btn>
     <q-btn @click="confirmDelete(aircraft.id)">Delete</q-btn>
 
     <!--    <h2>Limits</h2>-->
@@ -67,6 +63,8 @@ const confirmDelete = (id) => {
     <!--    Padova rychlost bez klapek:-->
     <!--    Padova rychlost s klapkami (plne vysunute):-->
 
+
+    <FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>
   </template>
 
 
diff --git a/src/pages/profile/details/CopilotDetailPage.vue b/src/pages/profile/details/CopilotDetailPage.vue
new file mode 100644
index 0000000..92304b7
--- /dev/null
+++ b/src/pages/profile/details/CopilotDetailPage.vue
@@ -0,0 +1,39 @@
+<script setup>
+import {useRoute} from "vue-router";
+import {computed, onMounted} from "vue";
+import {storeToRefs} from "pinia";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {copilot, fetchCopilot, loading} from "src/composables/objects/copilot";
+import {useFlightsStore} from "stores/Flights";
+import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
+
+const copilotId = parseInt(useRoute().params.copilotId);
+onMounted(() => {
+  useFlightsStore().fetch();
+  fetchCopilot(copilotId);
+})
+
+const flights = storeToRefs(useFlightsStore()).items;
+const commonFlights = computed(() => flights.value.filter(f => f.secondPilot.id === copilot.id))
+const totalFlightTime = computed(() => {
+  return commonFlights.value.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
+})
+</script>
+
+<template>
+  <CopilotDetailSkeleton v-if="loading || !copilot"/>
+
+  <template v-else>
+    <q-breadcrumbs>
+      <q-breadcrumbs-el :to="{name: 'pilots'}">Pilots</q-breadcrumbs-el>
+      <q-breadcrumbs-el>{{ copilot.name }}</q-breadcrumbs-el>
+    </q-breadcrumbs>
+
+    <h1>{{ copilot.name }}</h1>
+
+    Flights:
+    {{ commonFlights }}
+
+    Total time together: {{ minutesToHumanReadable(totalFlightTime) }}
+  </template>
+</template>
diff --git a/src/pages/profile/details/FlightDetailPage.vue b/src/pages/profile/details/FlightDetailPage.vue
index 1e38e8e..e46c845 100644
--- a/src/pages/profile/details/FlightDetailPage.vue
+++ b/src/pages/profile/details/FlightDetailPage.vue
@@ -1,41 +1,71 @@
 <script setup>
-import {useFlightsStore} from "stores/Flights";
-import {useRoute} from "vue-router";
-import {onMounted, reactive, ref} from "vue";
-import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useRoute, useRouter} from "vue-router";
+import {onMounted, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
-import FAB from "components/FAB.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";
+
+const $q = useQuasar();
+const $router = useRouter();
 
-const route = useRoute();
-const loading = ref(false)
-let flight = reactive({});
 onMounted(() => {
-  loading.value = true;
-  useFlightsStore().fetchDetail(parseInt(route.params.id))
-    .then(respFlight => flight = respFlight)
-    .finally(() => loading.value = false);
+  fetchFlight(useRoute().params.id)
 })
+
+watch(flight, (newVal) => {
+  const flightNameFormatted = flightName(newVal);
+  useAppStore().setPageTitle(flightNameFormatted);
+  useAppStore().setBreadcrumbs([
+    {to: {name: "myFlights"}, label: "Moje lety"},
+    {label: flightNameFormatted}
+  ]);
+});
+
+const handleDeleteAndRedirect = () => {
+  const flightId = flight.value.id;
+
+  handleDeleteFlight($q, flightId, (flight) => {
+    $router.push({name: "myFlights"});
+    $q.notify(successObject(`Úspěšně smazáno`));
+  })
+}
+
 </script>
 
 <template>
-  <FlightDetailSkeleton v-if="loading || Object.keys(flight).length === 0"/>
+  <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <template v-else>
-    <h1>{{ flight.name }}</h1>
-    <h2>{{ flight.takeoffAirport.name }} - {{ flight.landingAirport.name }}</h2>
+    <q-card class="q-mx-md q-my-md">
+      <q-parallax
+        :src="flight.coverPhoto.url"
+        v-if="flight.coverPhoto"
+        :height="450"
+      />
 
-    <article v-html="flight.description" />
+      <q-card-section>
+        <FlightBasicInfo :flight="flight"/>
 
-    <q-icon name="calendar"/>
-    {{ formatDatetime(flight.takeoffDatetime) }}
-    {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+        <article v-html="flight.description"/>
 
-    <!--    <q-icon name="weather"/>-->
-    <!--    Clouds: few-->
-    <!--    Wind: 220/12kt-->
-    <!--    Temp: 12°C-->
+        <ul>
+          <li v-for="poi in flight.track" :key="poi.pointOfInterest.id">
+            {{ poi.pointOfInterest.name }}
+          </li>
+        </ul>
 
+        <PhotosList :photos="flight.photos" :show-actions="false"/>
+      </q-card-section>
 
-    <FAB mode="edit" :router-link="{name: 'flightEdit', params:{id: flight.id}}"/>
+      <q-card-actions align="right">
+        <q-btn @click="handleDeleteAndRedirect" icon="delete" rounded flat text-color="red"/>
+        <q-btn :to="{name: 'flightEdit', params:{id: flight.id}}" icon="edit" rounded flat text-color="primary"/>
+      </q-card-actions>
+    </q-card>
+    <!--    <FAB mode="edit" :router-link=""/>-->
   </template>
 </template>
diff --git a/src/pages/profile/details/PointOfInterestDetailPage.vue b/src/pages/profile/details/PointOfInterestDetailPage.vue
index a0dcd06..386748d 100644
--- a/src/pages/profile/details/PointOfInterestDetailPage.vue
+++ b/src/pages/profile/details/PointOfInterestDetailPage.vue
@@ -1,24 +1,28 @@
 <script setup>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {computed, onMounted} from "vue";
+import {onMounted} from "vue";
 import {useRoute} from "vue-router";
-
-const route = useRoute();
-const poiId = route.params.id;
-const poiStore = usePointsOfInterestStore();
+import POIDetailSkeleton from "components/poi/POIDetailSkeleton.vue";
+import FAB from "components/FAB.vue";
+import {fetchPoi, loading, poi} from "src/composables/objects/poi";
+import {flight} from "src/composables/objects/flight";
+import PhotosList from "components/photos/PhotosList.vue";
 
 onMounted(() => {
-  poiStore.fetchDetail(poiId);
+  fetchPoi(useRoute().params.id);
 })
-
-const poi = computed(() => poiStore.getDetail(poiId));
 </script>
 
 <template>
-  <h1>{{ poi.name }}</h1>
+  <POIDetailSkeleton v-if="loading || !poi"/>
 
+  <template v-else>
+    <h1>{{ poi.name }}</h1>
+
+    <PhotosList
+      :photos="poi.photos"
+      :show-actions="false"
+    />
+    <FAB :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
+  </template>
 
-  <q-page-sticky position="bottom-right" :offset="[30, 30]">
-    <q-fab icon="edit" label="Edit"/>
-  </q-page-sticky>
 </template>
diff --git a/src/pages/profile/forms/EditAircraftPage.vue b/src/pages/profile/forms/EditAircraftPage.vue
index 188043c..2983b1b 100644
--- a/src/pages/profile/forms/EditAircraftPage.vue
+++ b/src/pages/profile/forms/EditAircraftPage.vue
@@ -3,45 +3,41 @@ import AircraftForm from "components/aircrafts/AircraftForm.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
 import {useQuasar} from "quasar";
-import {onMounted, reactive, ref} from "vue";
+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";
 
 
 let isRequestPending = ref(false);
 const $q = useQuasar();
-const router = useRouter();
-
 const aircraftId = parseInt(useRoute().params.id);
 
 const handleSave = (formData) => {
   isRequestPending.value = true;
   useAircraftsStore().update(aircraftId, formData).then(() => {
-    $q.notify({message: "Letadlo uspesne upraveno", position: "top", color: "positive"});
+    $q.notify(successObject("Letadlo uspesne upraveno"));
 
-    router.push({name: "aircrafts"});
+    useRouter().push({name: "aircrafts"});
   }).finally(() => {
     isRequestPending.value = true;
   })
 }
 
-let loadedAircraft = ref(null);
 onMounted(() => {
-  useAircraftsStore().fetchDetail(aircraftId).then((data) => {
-    loadedAircraft.value = data;
-  }).catch(err => {
-    console.error(err);
-  })
+  fetchAircraft(aircraftId)
 });
 </script>
 
 <template>
-  <q-skeleton v-if="!loadedAircraft"/>
+  <AircraftEditSkeleton v-if="loading"/>
 
-  <template v-if="loadedAircraft">
-    <h1>Editace letadla {{ loadedAircraft.callSign }}</h1>
+  <template v-else>
+    <h1>Editace letadla {{ aircraft.callSign }}</h1>
 
     <AircraftForm
       @save="handleSave"
-      :default-values="loadedAircraft"
+      :default-values="aircraft"
       :is-request-pending="isRequestPending"
     />
   </template>
diff --git a/src/pages/profile/details/SecondPilotDetailPage.vue b/src/pages/profile/forms/EditCopilotPage.vue
similarity index 73%
rename from src/pages/profile/details/SecondPilotDetailPage.vue
rename to src/pages/profile/forms/EditCopilotPage.vue
index 6cc3456..377ca45 100644
--- a/src/pages/profile/details/SecondPilotDetailPage.vue
+++ b/src/pages/profile/forms/EditCopilotPage.vue
@@ -25,16 +25,7 @@ const totalFlightTime = computed(() => {
 </script>
 
 <template>
-    <q-breadcrumbs>
-    <q-breadcrumbs-el :to="{name: 'pilots'}">Pilots</q-breadcrumbs-el>
-    <q-breadcrumbs-el>{{secondPilot.name}}</q-breadcrumbs-el>
-  </q-breadcrumbs>
 
-  <h1>{{secondPilot.name}}</h1>
-
-  Flights:
-  {{ commonFlights }}
-
-  Total time together: {{minutesToHumanReadable(totalFlightTime)}}
+  Editace copilota
 
 </template>
diff --git a/src/pages/profile/forms/FlightEditPage.vue b/src/pages/profile/forms/EditFlightPage.vue
similarity index 92%
rename from src/pages/profile/forms/FlightEditPage.vue
rename to src/pages/profile/forms/EditFlightPage.vue
index 4776417..020f5ba 100644
--- a/src/pages/profile/forms/FlightEditPage.vue
+++ b/src/pages/profile/forms/EditFlightPage.vue
@@ -9,7 +9,7 @@ import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAirportsStore} from "stores/Airports";
 import {useMeta, useQuasar} from "quasar";
 import {storeToRefs} from "pinia";
-import {flightName} from "src/composables/flight";
+import {flightName} from "src/composables/objects/flight";
 import FlightFormCopilot from "components/flights/form/FlightFormCopilot.vue";
 import {useCopilotsStore} from "stores/Copilots";
 import FlightFormNotes from "components/flights/form/FlightFormNotes.vue";
@@ -19,6 +19,8 @@ import PhotosList from "components/photos/PhotosList.vue";
 import {confirmObject, successObject} from "src/composables/dialog";
 import PhotoForm from "components/flights/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";
 
 useMeta({title: "Editace letu"});
 
@@ -31,17 +33,8 @@ const locations = storeToRefs(usePointsOfInterestStore()).items;
 const airports = storeToRefs(useAirportsStore()).items;
 const copilots = storeToRefs(useCopilotsStore()).items;
 
-let flight = ref({});
 const disabledSteps = computed(() => flight.value.solo ? ["copilot"] : [flight.value.solo]);
 
-const loading = ref(false);
-const fetchFlight = (flightId) => {
-  loading.value = true;
-  useFlightsStore().fetchDetail(flightId)
-    .then(f => flight.value = f)
-    .finally(() => loading.value = false);
-}
-
 const formStep = ref("");
 watch(() => route.params.step, (val) => formStep.value = val);
 
@@ -104,7 +97,7 @@ const openPhotoEdit = (photo) => {
 </script>
 
 <template>
-  <div v-if="loading">loading</div>
+  <FlightEditSkeleton v-if="loading" />
 
   <template v-else>
     <q-breadcrumbs :key="loading">
@@ -145,7 +138,7 @@ const openPhotoEdit = (photo) => {
           @edit="openPhotoEdit"
           @delete="confirmPhotoDelete"
         />
-        <PhotoForm v-model="openEdit" :photo="editPhoto" @save="handlePhotoUpdate"/>
+        <PhotoForm v-model="openEdit" :locations="locations" :photo="editPhoto" @save="handlePhotoUpdate"/>
 
         <FlightFormPhotos
           :flight="flight"
diff --git a/src/pages/profile/forms/EditPointOfInterestPage.vue b/src/pages/profile/forms/EditPointOfInterestPage.vue
new file mode 100644
index 0000000..b63c658
--- /dev/null
+++ b/src/pages/profile/forms/EditPointOfInterestPage.vue
@@ -0,0 +1,27 @@
+<script setup>
+import POIEditSkeleton from "components/poi/POIEditSkeleton.vue";
+import {fetchPoi, loading, poi} from "src/composables/objects/poi";
+import {onMounted} from "vue";
+import {useRoute} from "vue-router";
+import POIEditForm from "components/poi/POIEditForm.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+
+const poiId = parseInt(useRoute().params.id);
+
+onMounted(() => {
+  fetchPoi(poiId)
+})
+
+const handleSave = (data) => {
+  usePointsOfInterestStore().update(poiId, data).then(respData => {
+    console.log(respData);
+  });
+}
+
+</script>
+
+<template>
+  <POIEditSkeleton v-if="loading" />
+
+  <POIEditForm :poi="poi" v-else @save="handleSave"/>
+</template>
diff --git a/src/pages/profile/forms/NewCopilotPage.vue b/src/pages/profile/forms/NewCopilotPage.vue
new file mode 100644
index 0000000..3b7ca4b
--- /dev/null
+++ b/src/pages/profile/forms/NewCopilotPage.vue
@@ -0,0 +1,25 @@
+<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";
+
+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"});
+  }).finally(() => {
+    isRequestPending.value = true;
+  })
+}
+</script>
+
+<template>
+  <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
+</template>
diff --git a/src/pages/profile/forms/FlightLogPage.vue b/src/pages/profile/forms/NewFlightPage.vue
similarity index 100%
rename from src/pages/profile/forms/FlightLogPage.vue
rename to src/pages/profile/forms/NewFlightPage.vue
diff --git a/src/pages/profile/forms/NewPointOfInterestPage.vue b/src/pages/profile/forms/NewPointOfInterestPage.vue
new file mode 100644
index 0000000..3b7ca4b
--- /dev/null
+++ b/src/pages/profile/forms/NewPointOfInterestPage.vue
@@ -0,0 +1,25 @@
+<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";
+
+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"});
+  }).finally(() => {
+    isRequestPending.value = true;
+  })
+}
+</script>
+
+<template>
+  <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
+</template>
diff --git a/src/pages/profile/lists/AircraftsPage.vue b/src/pages/profile/lists/AircraftsPage.vue
index 6c72184..d806a14 100644
--- a/src/pages/profile/lists/AircraftsPage.vue
+++ b/src/pages/profile/lists/AircraftsPage.vue
@@ -1,28 +1,19 @@
 <script setup>
-import {useAircraftsStore} from "stores/Aircrafts";
-import {onMounted, ref} from "vue";
-import {storeToRefs} from "pinia";
+import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
-import AddFAB from "components/FAB.vue";
 import AircraftsListSkeleton from "components/aircrafts/AircraftsListSkeleton.vue";
+import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
+import FAB from "components/FAB.vue";
 
-const aircraftStore = useAircraftsStore();
-const aircrafts = storeToRefs(aircraftStore).items;
-
-let loading = ref(false);
 onMounted(() => {
-  loading.value = true
-  aircraftStore.fetch().finally(() => {
-    loading.value = false
-  });
+ fetchAircrafts();
 })
 </script>
 
 <template>
-  <h4>Letadla</h4>
-
   <AircraftsListSkeleton v-if="loading" />
-  <AircraftsList :items="aircrafts" v-if="!loading"/>
 
-  <AddFAB mode="add" :router-link="{name: 'addAircraft'}"/>
+  <AircraftsList :items="aircrafts" v-else />
+
+  <FAB mode="add" :router-link="{name: 'addAircraft'}"/>
 </template>
diff --git a/src/pages/profile/lists/FlightsPage.vue b/src/pages/profile/lists/FlightsPage.vue
index 83a7057..73b5ea2 100644
--- a/src/pages/profile/lists/FlightsPage.vue
+++ b/src/pages/profile/lists/FlightsPage.vue
@@ -1,23 +1,17 @@
 <script setup>
-import {onMounted, ref} from "vue";
-import {useFlightsStore} from "stores/Flights";
-import {useMeta} from "quasar";
+import {onMounted} from "vue";
+import {useQuasar} from "quasar";
 import FlightsList from "components/flights/FlightsList.vue";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
-import {storeToRefs} from "pinia";
-import AddFAB from "components/FAB.vue";
+import FAB from "components/FAB.vue";
+import {fetchFlights, flights, handleDeleteFlight, loading} from "src/composables/objects/flight";
+import {useAppStore} from "stores/App";
 
-useMeta({title: "Moje lety"});
+const $q = useQuasar();
 
-const flightsStore = useFlightsStore();
-const flights = storeToRefs(flightsStore).items;
-
-const loading = ref(false);
+useAppStore().setPageTitle("Moje lety")
 onMounted(() => {
-  loading.value = true;
-  flightsStore.fetch().finally(() => {
-    loading.value = false;
-  });
+  fetchFlights();
 })
 </script>
 
@@ -36,8 +30,7 @@ onMounted(() => {
     </q-banner>
   </div>
 
-  <FlightsList :items="flights" v-else/>
+  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
 
-
-  <AddFAB mode="add" :router-link="{name: 'addFlight'}"/>
+  <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
diff --git a/src/pages/profile/lists/PointsOfInterestPage.vue b/src/pages/profile/lists/PointsOfInterestPage.vue
index fb40581..e2b6513 100644
--- a/src/pages/profile/lists/PointsOfInterestPage.vue
+++ b/src/pages/profile/lists/PointsOfInterestPage.vue
@@ -1,31 +1,22 @@
 <script setup>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {computed, onMounted, ref} from "vue";
-import {storeToRefs} from "pinia";
-
-const poiStore = usePointsOfInterestStore();
+import {onMounted} from "vue";
+import POIListSkeleton from "components/poi/POIListSkeleton.vue";
+import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/poi";
+import {useAppStore} from "stores/App";
+import POIList from "components/poi/POIList.vue";
+import FAB from "components/FAB.vue";
 
 onMounted(() => {
-  poiStore.fetch();
-})
+  fetchPOIList();
+});
 
-const pointsOfInterest = computed(() => poiStore.groupByTypes);
-const availableTypes = computed(() => Object.keys(pointsOfInterest.value));
+useAppStore().setPageTitle("Zajímavá místa")
 </script>
 
 <template>
-  {{ pointsOfInterest }}
-  <div v-for="type of availableTypes" :key="type">
-    <h2>{{ poiStore.pointTypeName(type) }}</h2>
+  <POIListSkeleton v-if="loading"/>
 
-    <q-list bordered separator>
-      <q-item clickable v-ripple v-for="poi of pointsOfInterest[type]" :key="poi">
-        <q-item-section>
-          <router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
-            {{ poi.name }}
-          </router-link>
-        </q-item-section>
-      </q-item>
-    </q-list>
-  </div>
+  <POIList v-else :items="pointsOfInterest"/>
+
+  <FAB :router-link="{name: 'addPOI'}" mode="add" />
 </template>
diff --git a/src/pages/profile/lists/SecondPilotPage.vue b/src/pages/profile/lists/SecondPilotPage.vue
index cb98b27..2014837 100644
--- a/src/pages/profile/lists/SecondPilotPage.vue
+++ b/src/pages/profile/lists/SecondPilotPage.vue
@@ -1,29 +1,20 @@
 <script setup>
-import {storeToRefs} from "pinia";
-import {useCopilotsStore} from "stores/Copilots";
 import {onMounted} from "vue";
-
-const pilotsStore = useCopilotsStore();
+import CopilotListSkeleton from "components/copilots/CopilotListSkeleton.vue";
+import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot";
+import CopilotsList from "components/copilots/CopilotsList.vue";
+import FAB from "components/FAB.vue";
 
 onMounted(() => {
-  pilotsStore.fetch();
+  fetchCopilots();
 })
-
-const secondPilots = storeToRefs(pilotsStore).items;
-
 </script>
 
 <template>
-<q-list bordered separator>
-      <q-item clickable v-ripple v-for="pilot of secondPilots" :key="pilot">
-        <q-item-label>
-          <router-link :to="{name: 'pilotDetail', params: {id: pilot.id }}">
-          {{ pilot.name }}
-            </router-link>
-        </q-item-label>
-        <q-item-section>
-          section
-        </q-item-section>
-      </q-item>
-    </q-list>
+  <CopilotListSkeleton v-if="loading" />
+
+  <CopilotsList :items="copilots" />
+
+  <FAB :router-link="{name: 'addCopilot'}" mode="add" />
+
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index f9088dc..630dc23 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { route } from 'quasar/wrappers'
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 import {useUserStore} from "stores/User";
+import {useAppStore} from "stores/App";
 
 /*
  * If not building with SSR mode, you can
@@ -32,6 +33,8 @@ export default route(function (/* { store, ssrContext } */) {
       const userStore = useUserStore();
       // const $q = useQuasar();
 
+      useAppStore().resetAfterRouteChange();
+
       userStore.setupCredentials().then(()=>{
         if (!userStore.user.id) {
           // console.log("neni prihlaseny")
diff --git a/src/router/routes.js b/src/router/routes.js
index b23379b..49f2303 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -18,13 +18,17 @@ const routes = [
     children: [
       {path: '', name: "profile", component: () => import('pages/profile/ProfilePage.vue')},
       {path: 'my-flights', name: "myFlights", component: () => import('pages/profile/lists/FlightsPage.vue')},
-      {path: 'my-flights/add', name: "addFlight", component: () => import('pages/profile/forms/FlightLogPage.vue')},
+      {path: 'my-flights/add', name: "addFlight", component: () => import('pages/profile/forms/NewFlightPage.vue')},
       {path: 'my-flights/:id', name: "flightDetail", component: () => import('pages/profile/details/FlightDetailPage.vue')},
-      {path: 'my-flights/:id/edit/:step?', name: "flightEdit", component: () => import('pages/profile/forms/FlightEditPage.vue')},
+      {path: 'my-flights/:id/edit/:step?', name: "flightEdit", component: () => import('pages/profile/forms/EditFlightPage.vue')},
       {path: 'poi', name: "poi", component: () => import('pages/profile/lists/PointsOfInterestPage.vue')},
+      {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/SecondPilotPage.vue')},
-      {path: 'pilots/:id', name: "pilotDetail", component: () => import('pages/profile/details/SecondPilotDetailPage.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/details/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/App.js b/src/stores/App.js
index 6af63d2..2d3f2b2 100644
--- a/src/stores/App.js
+++ b/src/stores/App.js
@@ -1,14 +1,25 @@
 import {defineStore} from 'pinia'
-import {useQuasar} from "quasar";
+import {useMeta} from "quasar";
 
 export const useAppStore = defineStore('App', {
   state: () => ({
     pageTitle: null,
-    fabButton: {icon: null, label: null, action: {}}
+    breadcrumbs: []
   }),
-
-  getters: {},
-
   actions: {
+    resetAfterRouteChange() {
+      this.setPageTitle("");
+      this.setBreadcrumbs([]);
+    },
+    setPageTitle(pageTitle) {
+      this.pageTitle = pageTitle;
+      useMeta({title: pageTitle !== '' ? `${pageTitle} - Polétání.cz` : 'Polétání.cz'});
+
+
+      console.log("setPageTitle:", pageTitle);
+    },
+    setBreadcrumbs(breadcrumbs) {
+      this.breadcrumbs = breadcrumbs;
+    }
   }
 })
diff --git a/src/stores/Copilots.js b/src/stores/Copilots.js
index 152b990..9cbf16a 100644
--- a/src/stores/Copilots.js
+++ b/src/stores/Copilots.js
@@ -1,6 +1,6 @@
 import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo";
-import {COPILOTS_LIST} from "src/graphql/queries/copilots";
+import {COPILOTS_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
 
 export const useCopilotsStore = defineStore('SecondPilots', {
   state: () => ({
@@ -13,6 +13,9 @@ export const useCopilotsStore = defineStore('SecondPilots', {
     create(formData) {
       console.log("not implemented");
     },
+    fetchDetail(copilotId) {
+      return apolloWrapper.query(COPILOTS_DETAIL, {id: copilotId}).then(({data}) => data.copilot);
+    },
     fetch() {
      return apolloWrapper.query(COPILOTS_LIST).then(result => {
         this.items = result.data.copilots;
diff --git a/src/stores/Flights.js b/src/stores/Flights.js
index 75dd8e5..1612485 100644
--- a/src/stores/Flights.js
+++ b/src/stores/Flights.js
@@ -1,7 +1,7 @@
 import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo"
 import {FLIGHT_DETAIL, FLIGHTS_LIST} from "src/graphql/queries/flights";
-import {EDIT_FLIGHT, CREATE_FLIGHT} from "src/graphql/mutations/flight";
+import {EDIT_FLIGHT, CREATE_FLIGHT, DELETE_FLIGHT} from "src/graphql/mutations/flight";
 
 export const useFlightsStore = defineStore('Flights', {
   state: () => ({
@@ -38,16 +38,20 @@ export const useFlightsStore = defineStore('Flights', {
     fetch() {
       return apolloWrapper
         .query(FLIGHTS_LIST)
-        .then((result) => {
-          this.items = result.data.flights;
+        .then(({data}) => {
+          this.items = data.flights;
 
-          return result.data.flights;
+          return data.flights;
         });
     },
-    deleteItem(id) {
-      const idx = this.items.indexOf(this.items.find(f => f.id === id));
-      this.items.splice(idx, 1);
-      console.log("maxu let ID " + id + " na indexu " + idx);
-    }
-  }
-})
+    delete(id) {
+      return apolloWrapper.mutate(DELETE_FLIGHT, {id}).then(({data}) => {
+
+        const idx = this.items.indexOf(this.items.find(f => f.id === id));
+        this.items.splice(idx, 1);
+
+        return data.deleteFlight;
+      })
+    },
+  },
+});
diff --git a/src/stores/PointsOfInterest.js b/src/stores/PointsOfInterest.js
index 39bfb9d..c105701 100644
--- a/src/stores/PointsOfInterest.js
+++ b/src/stores/PointsOfInterest.js
@@ -1,6 +1,7 @@
 import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo";
-import {POI_LIST} from "src/graphql/queries/poi";
+import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
+import {EDIT_POI} from "src/graphql/mutations/poi";
 
 export const usePointsOfInterestStore = defineStore('PointsOfInterest', {
   state: () => ({
@@ -18,42 +19,27 @@ export const usePointsOfInterestStore = defineStore('PointsOfInterest', {
       console.log('item', item);
       return item;
     },
-    // pointTypeName() {
-    //   return (typeName) => {
-    //     const typeToNameMap = {
-    //       poi: "General POI",
-    //       airport: "Airport",
-    //     }
-    //     return typeToNameMap[typeName] || "Unknown";
-    //   }
-    // },
-    // groupByTypes() {
-    //   const groupedByType = {};
-    //   for (const item of this.items) {
-    //     if (!groupedByType[item.type]) groupedByType[item.type] = [];
-    //     groupedByType[item.type].push(item);
-    //   }
-    //   return groupedByType;
-    // }
   },
 
   actions: {
-    fetchDetail(poiId) {
-      console.log("fetch poi detail");
-      this.items.push({id: poiId, "name": "Zamek " + poiId, "type": "poi", "location": {"lat": 50, "lng": 10}});
+    update(id, input) {
+      return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
+        console.log("Pridat update POI ve store");
+        return data.data.editPointOfInterest;
+      })
+    },
+
+    fetchDetail(id) {
+      if (typeof id !== "number") {
+        id = parseInt(id);
+      }
+      return apolloWrapper.query(POI_DETAIL, {id}).then(result => result.data.pointOfInterest);
     },
     fetch() {
       return apolloWrapper.query(POI_LIST).then(result => {
         this.items = result.data.pointsOfInterest;
         return result.data.pointsOfInterest;
       });
-
-      // console.log("fetch poi");
-      // this.items = [
-      //   {id: 1, "name": "LKLT", private: false, "type": "airport", "location": {"lat": 50, "lng": 10}},
-      //   {id: 2, "name": "Hrad", "type": "poi", "location": {"lat": 50, "lng": 10}},
-      //   {id: 3, "name": "Zamek", "type": "poi", "location": {"lat": 50, "lng": 10}},
-      // ]
     }
   }
 })