From 19b078b43c61fb86a153a55925ae2ffab2b4a5a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Wed, 23 Aug 2023 21:40:32 +0200
Subject: [PATCH] Homepage, lepsi POI

---
 .../BasicListSkeleton.vue                     |  0
 .../basicSkeletons/BasicTextSkeleton.vue      | 23 +++++++++++
 .../{ => basicSkeletons}/ListItemSkeleton.vue |  0
 .../flights/FlightDetailSkeleton.vue          | 10 ++---
 .../flights/form/FlightFormBasic.vue          | 18 +++++++--
 src/components/inputs/ComboboxInput.vue       | 26 +++++++++----
 src/components/inputs/DatetimePicker.vue      | 31 ++++-----------
 src/components/poi/POIDetailSkeleton.vue      | 20 +++++++++-
 .../poi/{POIEditForm.vue => POIForm.vue}      | 25 ++++++++++--
 src/components/poi/POIList.vue                | 15 ++++---
 src/graphql/fragments/flight.js               | 33 +---------------
 src/graphql/fragments/flight_list.js          | 34 ++++++++++++++++
 src/graphql/fragments/poi.js                  | 17 ++++++++
 src/graphql/fragments/poi_type.js             | 20 ++++++++++
 src/graphql/queries/aircrafts.js              |  2 +-
 src/graphql/queries/copilots.js               |  7 ++--
 src/graphql/queries/flights.js                |  3 +-
 src/graphql/queries/poi_type.js               | 22 +++++++++++
 .../profile/aircraft/AircraftDetailPage.vue   | 14 ++++---
 src/pages/profile/aircraft/AircraftsPage.vue  |  2 +-
 src/pages/profile/copilot/CopilotsPage.vue    |  2 +-
 src/pages/profile/flight/FlightsPage.vue      |  2 +-
 src/pages/profile/flight/NewFlightPage.vue    |  8 +++-
 .../profile/poi/EditPointOfInterestPage.vue   | 14 +++++--
 .../profile/poi/NewPointOfInterestPage.vue    | 29 ++++++++------
 .../profile/poi/PointOfInterestDetailPage.vue | 21 +++++++++-
 .../profile/poi/PointsOfInterestPage.vue      |  2 +-
 src/stores/Aircrafts.js                       | 12 +++---
 src/stores/Copilots.js                        |  6 ++-
 src/stores/Flights.js                         |  8 +---
 src/stores/PointOfInterestType.js             | 39 +++++++++++++++++++
 src/stores/PointsOfInterest.js                | 33 +++++++++-------
 src/stores/helpers.js                         | 13 +++++++
 33 files changed, 370 insertions(+), 141 deletions(-)
 rename src/components/{ => basicSkeletons}/BasicListSkeleton.vue (100%)
 create mode 100644 src/components/basicSkeletons/BasicTextSkeleton.vue
 rename src/components/{ => basicSkeletons}/ListItemSkeleton.vue (100%)
 rename src/components/poi/{POIEditForm.vue => POIForm.vue} (73%)
 create mode 100644 src/graphql/fragments/flight_list.js
 create mode 100644 src/graphql/fragments/poi_type.js
 create mode 100644 src/graphql/queries/poi_type.js
 create mode 100644 src/stores/PointOfInterestType.js
 create mode 100644 src/stores/helpers.js

diff --git a/src/components/BasicListSkeleton.vue b/src/components/basicSkeletons/BasicListSkeleton.vue
similarity index 100%
rename from src/components/BasicListSkeleton.vue
rename to src/components/basicSkeletons/BasicListSkeleton.vue
diff --git a/src/components/basicSkeletons/BasicTextSkeleton.vue b/src/components/basicSkeletons/BasicTextSkeleton.vue
new file mode 100644
index 0000000..1403436
--- /dev/null
+++ b/src/components/basicSkeletons/BasicTextSkeleton.vue
@@ -0,0 +1,23 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  lines: {
+    type: Number,
+    required: false,
+    default: 3
+  },
+  paragraphs: {
+    type: Number,
+    required: false,
+    default: 1
+  }
+})
+</script>
+
+<template>
+  <div v-for="i in paragraphs" :key="i">
+    <q-skeleton type="text" :width="randomInt(80, 100)+'%'" v-for="j in lines - 1" :key="j"/>
+    <q-skeleton type="text" :width="randomInt(15, 100)+'%'"/>
+  </div>
+</template>
diff --git a/src/components/ListItemSkeleton.vue b/src/components/basicSkeletons/ListItemSkeleton.vue
similarity index 100%
rename from src/components/ListItemSkeleton.vue
rename to src/components/basicSkeletons/ListItemSkeleton.vue
diff --git a/src/components/flights/FlightDetailSkeleton.vue b/src/components/flights/FlightDetailSkeleton.vue
index 06502c4..7940e33 100644
--- a/src/components/flights/FlightDetailSkeleton.vue
+++ b/src/components/flights/FlightDetailSkeleton.vue
@@ -1,6 +1,7 @@
 <script setup>
 import {randomInt} from "src/composables/random";
-import ListItemSkeleton from "components/ListItemSkeleton.vue";
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 </script>
 
 <template>
@@ -25,11 +26,8 @@ import ListItemSkeleton from "components/ListItemSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-      <q-skeleton
-        v-for="i in randomInt(5,8)" :key="i"
-        type="text" :width="randomInt(90, 100)+'%'"
-      />
-        </article>
+        <BasicTextSkeleton :lines="randomInt(5, 10)" :paragraphs="randomInt(1, 3)" />
+      </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>
     </q-card-section>
diff --git a/src/components/flights/form/FlightFormBasic.vue b/src/components/flights/form/FlightFormBasic.vue
index 792a8ac..1b1e169 100644
--- a/src/components/flights/form/FlightFormBasic.vue
+++ b/src/components/flights/form/FlightFormBasic.vue
@@ -5,6 +5,7 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
+import {isRequired} from "src/composables/form/rules";
 
 const props = defineProps({
     aircrafts: {
@@ -34,7 +35,13 @@ const formData = reactive({
   description: "",
 });
 
-const rules = {};
+const rules = {
+  aircraft: [isRequired],
+  takeoffDatetime: [isRequired],
+  takeoffAirport: [isRequired],
+  landingDatetime: [isRequired],
+  landingAirport: [isRequired],
+};
 watch(() => props.flight, (newVal) => {
   if (newVal) {
     setDefaultData(formData, newVal);
@@ -50,7 +57,8 @@ const aircrafts = computed(() => {
 
 watch(() => formData.takeoffDatetime, () => {
   if (!formData.landingDatetime) {
-    formData.landingDatetime = formData.takeoffDatetime;
+    formData.landingDatetime = structuredClone(formData.takeoffDatetime);
+    formData.landingDatetime.setTime(formData.landingDatetime.getTime() + 3600 * 1000);
   }
 });
 watch(() => formData.takeoffAirport, () => {
@@ -71,10 +79,10 @@ watch(() => formData.takeoffAirport, () => {
 
           <q-card-section>
             <ComboboxInput
+              :rules="rules.aircraft"
               v-bind="commonProps"
               :options="aircrafts"
               v-model="formData.aircraft"
-              :key="formData.aircraft"
               label="Letadlo"
             />
           </q-card-section>
@@ -90,12 +98,14 @@ watch(() => formData.takeoffAirport, () => {
           <q-card-section>
             <DatetimePicker
               v-model="formData.takeoffDatetime"
+              :rules="rules.takeoffDatetime"
               label="Datum a čas vzletu: "
               v-bind="commonProps"
             />
 
             <ComboboxInput
               :options="airports"
+              :rules="rules.takeoffAirport"
               v-model="formData.takeoffAirport"
               label="Letiště vzletu"
               v-bind="commonProps"
@@ -115,6 +125,7 @@ watch(() => formData.takeoffAirport, () => {
             <DatetimePicker
               v-model="formData.landingDatetime"
               :min-date="formData.takeoffDatetime"
+              :rules="rules.landingDatetime"
               label="Datum a čas přistání"
               v-bind="commonProps"
             />
@@ -124,6 +135,7 @@ watch(() => formData.takeoffAirport, () => {
               v-model="formData.landingAirport"
               label="Letiště přistání"
               v-bind="commonProps"
+              :rules="rules.landingAirport"
               :enable-new-values="false"
             />
           </q-card-section>
diff --git a/src/components/inputs/ComboboxInput.vue b/src/components/inputs/ComboboxInput.vue
index 9ff92a2..f0374c1 100644
--- a/src/components/inputs/ComboboxInput.vue
+++ b/src/components/inputs/ComboboxInput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {ref, watch} from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -19,6 +19,16 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  optionLabel: {
+    type: String,
+    required: false,
+    default: "name"
+  },
+  optionValue: {
+    type: String,
+    required: false,
+    default: "id"
+  }
 })
 
 const model = ref({});
@@ -32,6 +42,9 @@ watch(model, (val) => {
 
   let value = val;
   if (typeof val === 'string') value = {name: val};
+  if (value['__typename']) {
+    delete value['__typename'];
+  }
   emit("update:modelValue", value);
 })
 
@@ -72,7 +85,6 @@ const filterFn = (val, update, abort) => {
     availableOptions.value = availableOptions.value.map(i => ({id: i.id, name: i.name}))
   })
 }
-
 </script>
 
 <template>
@@ -80,23 +92,23 @@ const filterFn = (val, update, abort) => {
     v-model="model"
     use-input
     input-debounce="100"
-    :display-value="`${model?.name || ''}`"
+    :display-value="`${model ? model[optionLabel] : ''}`"
     :rules="rules"
     @filter="filterFn"
     @input-value="inputValueChanged"
     @blur="handleOnBlur"
     @clear="clearValue"
     :options="availableOptions"
-    option-label="name"
-    option-value="id"
+    :option-label="optionLabel"
+    :option-value="optionValue"
     :new-value-mode="enableNewValues ? 'add' : 'toggle'"
     clear-icon="clear"
     :v-bind="$attrs"
   >
-    <template v-slot:no-option>
+    <template v-slot:no-option v-if="enableNewValues">
       <q-item v-if="inputValue">
         <q-item-section avatar>
-          <q-avatar text-color="green" size="32px"  icon="add" />
+          <q-avatar text-color="green" size="32px" icon="add"/>
         </q-item-section>
         <q-item-section class="text-grey">
           <span>Vytvořit novou hodnotu <q-chip>{{ inputValue }}</q-chip></span>
diff --git a/src/components/inputs/DatetimePicker.vue b/src/components/inputs/DatetimePicker.vue
index b90a041..1d14196 100644
--- a/src/components/inputs/DatetimePicker.vue
+++ b/src/components/inputs/DatetimePicker.vue
@@ -15,35 +15,18 @@ const props = defineProps({
   minDate: {
     type: [String, Date],
     required: false
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => ([]),
   }
 })
 
 let dateModel = ref("");
 let timeModel = ref("");
-
 let originalTime, originalDate;
 
-// onMounted(() => {
-// let emitDefaultValue = false;
-// if (props.modelValue) {
-//   let modelVal = props.modelValue;
-//   if (typeof modelVal === 'string') {
-//     modelVal = parseDate(props.modelValue);
-//     emitDefaultValue = true;
-//   }
-//
-//   dateModel.value = formatDatetime(modelVal, "YYYY-MM-DD");
-//   timeModel.value = formatDatetime(modelVal, "HH:mm:ss");
-// }
-//
-// setOriginalValues();
-// if (emitDefaultValue) {
-//   emitModelUpdate();
-// }
-// });
-// TODO: ^^ by asi slo prepsat do watchera, viz ComboboxInput
-
-
 const publicModel = computed(() => {
   if (!dateModel.value) {
     return "";
@@ -57,6 +40,8 @@ const popupProxy = ref(null);
 const model = computed(() => dateModel.value + "T" + timeModel.value);
 const emit = defineEmits(['update:modelValue']);
 const emitModelUpdate = () => {
+  if (dateModel.value === '' || timeModel.value === '') return;
+
   const val = parseDate(model.value);
   emit("update:modelValue", val);
 
@@ -128,7 +113,7 @@ watch(() => props.modelValue, (newVal) => {
 </script>
 
 <template>
-  <q-input readonly v-bind="commonProps" v-model="publicModel">
+  <q-input readonly v-bind="commonProps" v-model="publicModel" :rules="rules">
     <template #append>
       <q-icon name="event"/>
     </template>
diff --git a/src/components/poi/POIDetailSkeleton.vue b/src/components/poi/POIDetailSkeleton.vue
index e7ef873..a052fca 100644
--- a/src/components/poi/POIDetailSkeleton.vue
+++ b/src/components/poi/POIDetailSkeleton.vue
@@ -1,5 +1,21 @@
-<script setup></script>
+<script setup>
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+</script>
 
 <template>
-  <em>POI detail skeleton</em>
+  <div>
+
+    <BasicTextSkeleton :lines="randomInt(4, 8)" />
+
+    <q-skeleton type="rect" width="100%" class="q-my-lg" height="400px"/>
+
+    <div class="row">
+      <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
+        <q-card class="q-my-sm q-mx-sm">
+          <q-skeleton type="rect" width="100%" height="200px"/>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/components/poi/POIEditForm.vue b/src/components/poi/POIForm.vue
similarity index 73%
rename from src/components/poi/POIEditForm.vue
rename to src/components/poi/POIForm.vue
index cf598fa..b4f4d78 100644
--- a/src/components/poi/POIEditForm.vue
+++ b/src/components/poi/POIForm.vue
@@ -5,25 +5,36 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import MapGPSInput from "components/inputs/MapGPSInput.vue";
 import {useQuasar} from "quasar";
 import {errorObject} from "src/composables/dialog";
+import {commonProps} from "src/composables/inputs";
+import {isRequired} from "src/composables/form/rules";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
   poi: {
     type: Object,
     required: false,
     default: () => ({})
+  },
+  types: {
+    type: Array,
+    required: false,
+    default: () => ([])
   }
 })
 
 const formData = reactive({
   name: null,
+  description: null,
   gpsLatitude: null,
   gpsLongitude: null,
+  type: null,
   isPublic: false,
 });
 
 const poiNameForMap = ref("");
 onMounted(() => {
   setDefaultData(formData, props.poi);
+  // formData.type = {id: poi.type.id, name: poi.type.name};
   poiNameForMap.value = props.poi.name;
 })
 
@@ -35,6 +46,10 @@ const resetMap = () => {
   showResetMapButton.value = false;
 }
 
+const rules = {
+  name: [isRequired]
+}
+
 const zoom = ref(10);
 const $q = useQuasar();
 const handlePositionNotFound = () => {
@@ -46,19 +61,17 @@ const handlePositionNotFound = () => {
 <template>
   <FormWrapper v-model="formData">
     <q-input
-      class="q-my-lg"
-      outlined
-      standout
       v-model="formData.name"
       @change="showResetMapButton=true"
       label="Jméno bodu"
+      v-bind="commonProps"
+      :rules="rules.name"
     >
       <template #append v-if="showResetMapButton">
         <q-btn @click="resetMap" icon="gps_fixed" round flat text-color="green" title="Nastav pozici na mapě"/>
       </template>
     </q-input>
 
-
     <MapGPSInput
       v-if="poiNameForMap"
       :key="poiNameForMap"
@@ -69,6 +82,10 @@ const handlePositionNotFound = () => {
       @not-found="handlePositionNotFound"
     />
 
+    <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis" />
+
+    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps" />
+
     <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
   </FormWrapper>
 </template>
diff --git a/src/components/poi/POIList.vue b/src/components/poi/POIList.vue
index d57a77e..0b7dce8 100644
--- a/src/components/poi/POIList.vue
+++ b/src/components/poi/POIList.vue
@@ -8,14 +8,19 @@ const props = defineProps({
 </script>
 <template>
   <q-list bordered separator>
-    <q-item clickable v-ripple v-for="poi of items" :key="poi">
+    <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="{name: 'poiDetail', params: {id: poi.id}}">
       <q-item-section avatar>
-        <q-avatar icon="place" color="primary" text-color="white"/>
+        <q-avatar :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
-        <router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
-          {{ poi.name }}
-        </router-link>
+        {{ poi.name }}
+        <div class="text-secondary" v-if="poi.type">
+        {{ poi.type.name }}
+
+        </div>
+      </q-item-section>
+      <q-item-section side top v-if="poi.isPublic">
+        <q-icon name="visibility"></q-icon>
       </q-item-section>
     </q-item>
   </q-list>
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 6eac5e8..49d4d7d 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_AIRCRAFT_BASIC_INFO, FRAGMENT_AIRCRAFT_FULL_INFO} from "src/graphql/fragments/aircraft";
+import {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";
@@ -77,34 +77,3 @@ ${FRAGMENT_AIRPORT_INFO}
 ${FRAGMENT_POI_FULL_INFO}
 ${FRAGMENT_WEATHER_FULL_INFO}
 `;
-
-export const FRAGMENT_FLIGHT_LIST_INFO = gql`
-fragment flightListInfo on Flight {
-  id
-  name
-  takeoffDatetime
-  landingDatetime
-  durationMinCalculated
-  isPublic
-
-  coverPhoto {
-    thumbnailUrl
-  }
-
-  takeoffAirport {
-    ...airportInfo
-  }
-
-  landingAirport {
-    ...airportInfo
-  }
-
-  aircraft {
-    ...aircraftBasicInfo
-  }
-}
-
-${FRAGMENT_AIRPORT_INFO}
-${FRAGMENT_AIRCRAFT_BASIC_INFO}
-`
-
diff --git a/src/graphql/fragments/flight_list.js b/src/graphql/fragments/flight_list.js
new file mode 100644
index 0000000..9fd843c
--- /dev/null
+++ b/src/graphql/fragments/flight_list.js
@@ -0,0 +1,34 @@
+import gql from "graphql-tag";
+import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
+import {FRAGMENT_AIRCRAFT_BASIC_INFO} from "src/graphql/fragments/aircraft";
+
+export const FRAGMENT_FLIGHT_LIST_INFO = gql`
+fragment flightListInfo on Flight {
+  id
+  name
+  takeoffDatetime
+  landingDatetime
+  durationMinCalculated
+  isPublic
+
+  coverPhoto {
+    thumbnailUrl
+  }
+
+  takeoffAirport {
+    ...airportInfo
+  }
+
+  landingAirport {
+    ...airportInfo
+  }
+
+  aircraft {
+    ...aircraftBasicInfo
+  }
+}
+
+${FRAGMENT_AIRPORT_INFO}
+${FRAGMENT_AIRCRAFT_BASIC_INFO}
+`;
+
diff --git a/src/graphql/fragments/poi.js b/src/graphql/fragments/poi.js
index 6cb3695..ac8f1a6 100644
--- a/src/graphql/fragments/poi.js
+++ b/src/graphql/fragments/poi.js
@@ -1,9 +1,15 @@
 import gql from "graphql-tag";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
 export const FRAGMENT_POI_LIST_INFO = gql`
 fragment pointOfInterestListInfo on PointOfInterest {
   id
   name
+  isPublic
+  type {
+    id
+    name
+  }
 }
 `;
 
@@ -11,9 +17,18 @@ export const FRAGMENT_POI_FULL_INFO = gql`
 fragment pointOfInterestFullInfo on PointOfInterest {
   id
   name
+  description
   isPublic
   gpsLatitude
   gpsLongitude
+  createdById
+  type {
+    id
+    name
+  }
+  flights {
+    ...flightListInfo
+  }
   photos {
     thumbnailUrl
     url
@@ -21,4 +36,6 @@ fragment pointOfInterestFullInfo on PointOfInterest {
     description
   }
 }
+
+${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/graphql/fragments/poi_type.js b/src/graphql/fragments/poi_type.js
new file mode 100644
index 0000000..06f54ef
--- /dev/null
+++ b/src/graphql/fragments/poi_type.js
@@ -0,0 +1,20 @@
+import gql from "graphql-tag";
+
+export const FRAGMENT_POI_TYPE_LIST_INFO = gql`
+fragment poiTypeListInfo on PointOfInterestType {
+  id
+  name
+  icon
+  isPublic
+}
+`;
+
+export const FRAGMENT_POI_TYPE_FULL_INFO = gql`
+fragment poiTypeFullInfo on PointOfInterestType {
+  id
+  name
+  icon
+  isPublic
+  createdById
+}
+`;
diff --git a/src/graphql/queries/aircrafts.js b/src/graphql/queries/aircrafts.js
index 0f4b219..fa5553a 100644
--- a/src/graphql/queries/aircrafts.js
+++ b/src/graphql/queries/aircrafts.js
@@ -1,6 +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";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
 export const AIRCRAFTS_LIST = gql`
 query AircraftsList {
diff --git a/src/graphql/queries/copilots.js b/src/graphql/queries/copilots.js
index 2e68e32..1bc2036 100644
--- a/src/graphql/queries/copilots.js
+++ b/src/graphql/queries/copilots.js
@@ -1,5 +1,5 @@
 import gql from "graphql-tag";
-import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight";
+// import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 import {FRAGMENT_COPILOT_FULL_INFO, FRAGMENT_COPILOT_LIST_INFO} from "src/graphql/fragments/copilot";
 
 export const COPILOTS_LIST = gql`
@@ -18,11 +18,12 @@ query copilot($id: Int!) {
     ...copilotFullInfo
 
     flights {
-      ...flightListInfo
+    id
+    name
+
     }
   }
 }
 
 ${FRAGMENT_COPILOT_FULL_INFO}
-${FRAGMENT_FLIGHT_LIST_INFO}
 `;
diff --git a/src/graphql/queries/flights.js b/src/graphql/queries/flights.js
index 9e6533e..8c9489c 100644
--- a/src/graphql/queries/flights.js
+++ b/src/graphql/queries/flights.js
@@ -1,5 +1,6 @@
 import gql from "graphql-tag";
-import {FRAGMENT_FLIGHT_FULL_INFO, FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight";
+import {FRAGMENT_FLIGHT_FULL_INFO} from "src/graphql/fragments/flight";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
 export const FLIGHTS_LIST = gql`
 query FlightsList($username: String) {
diff --git a/src/graphql/queries/poi_type.js b/src/graphql/queries/poi_type.js
new file mode 100644
index 0000000..00bf651
--- /dev/null
+++ b/src/graphql/queries/poi_type.js
@@ -0,0 +1,22 @@
+import gql from "graphql-tag";
+import {FRAGMENT_POI_TYPE_FULL_INFO, FRAGMENT_POI_TYPE_LIST_INFO} from "src/graphql/fragments/poi_type";
+
+export const POI_TYPE_LIST = gql`
+query poiTypeList {
+  pointOfInterestTypes {
+    ...poiTypeListInfo
+  }
+}
+
+${FRAGMENT_POI_TYPE_LIST_INFO}
+`;
+
+export const POI_TYPE_DETAIL = gql`
+query poiTypeDetail($id: Int!) {
+  pointOfInterestType(id: $id) {
+    ...poiTypeFullInfo
+  }
+}
+
+${FRAGMENT_POI_TYPE_FULL_INFO}
+`;
diff --git a/src/pages/profile/aircraft/AircraftDetailPage.vue b/src/pages/profile/aircraft/AircraftDetailPage.vue
index 1c41359..547850c 100644
--- a/src/pages/profile/aircraft/AircraftDetailPage.vue
+++ b/src/pages/profile/aircraft/AircraftDetailPage.vue
@@ -53,12 +53,6 @@ watch(aircraft, (newVal) => {
             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">
@@ -66,6 +60,14 @@ watch(aircraft, (newVal) => {
       </q-card-actions>
     </q-card>
 
+    <q-card class="flight-detail-card" flat>
+      <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>
+
     <FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>
   </template>
 
diff --git a/src/pages/profile/aircraft/AircraftsPage.vue b/src/pages/profile/aircraft/AircraftsPage.vue
index 70a17a8..9bd2bae 100644
--- a/src/pages/profile/aircraft/AircraftsPage.vue
+++ b/src/pages/profile/aircraft/AircraftsPage.vue
@@ -3,7 +3,7 @@ import {onMounted} from "vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import {aircrafts, fetchAircrafts, loading} from "src/composables/objects/aircraft";
 import FAB from "components/FAB.vue";
-import BasicListSkeleton from "components/BasicListSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 onMounted(() => {
   fetchAircrafts();
diff --git a/src/pages/profile/copilot/CopilotsPage.vue b/src/pages/profile/copilot/CopilotsPage.vue
index b7b86d1..502c9b9 100644
--- a/src/pages/profile/copilot/CopilotsPage.vue
+++ b/src/pages/profile/copilot/CopilotsPage.vue
@@ -4,7 +4,7 @@ import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot"
 import CopilotsList from "components/copilots/CopilotsList.vue";
 import FAB from "components/FAB.vue";
 import {useAppStore} from "stores/App";
-import BasicListSkeleton from "components/BasicListSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/BasicInfoBanner.vue";
 
 onMounted(() => {
diff --git a/src/pages/profile/flight/FlightsPage.vue b/src/pages/profile/flight/FlightsPage.vue
index 0d39569..f23cb30 100644
--- a/src/pages/profile/flight/FlightsPage.vue
+++ b/src/pages/profile/flight/FlightsPage.vue
@@ -30,7 +30,7 @@ onMounted(() => {
     </q-banner>
   </div>
 
-  <FlightsList class="q-mx-md q-my-md" v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
+  <FlightsList v-else :items="flights" @delete="handleDeleteFlight($q, $event)" />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>
diff --git a/src/pages/profile/flight/NewFlightPage.vue b/src/pages/profile/flight/NewFlightPage.vue
index ba70a1e..757896c 100644
--- a/src/pages/profile/flight/NewFlightPage.vue
+++ b/src/pages/profile/flight/NewFlightPage.vue
@@ -24,7 +24,6 @@ onMounted(() => {
   ]);
 });
 
-
 const aircrafts = storeToRefs(useAircraftsStore()).items;
 const locations = storeToRefs(usePointsOfInterestStore()).items;
 const airports = storeToRefs(useAirportsStore()).items;
@@ -39,5 +38,10 @@ const handleSave = (formData) => {
 
 <template>
   <FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
-  <FlightFormBasic @save="handleSave" :aircrafts="aircrafts" :airports="airports" :locations="locations" />
+  <FlightFormBasic
+    @save="handleSave"
+    :aircrafts="aircrafts"
+    :airports="airports"
+    :locations="locations"
+  />
 </template>
diff --git a/src/pages/profile/poi/EditPointOfInterestPage.vue b/src/pages/profile/poi/EditPointOfInterestPage.vue
index c699569..978031d 100644
--- a/src/pages/profile/poi/EditPointOfInterestPage.vue
+++ b/src/pages/profile/poi/EditPointOfInterestPage.vue
@@ -2,12 +2,14 @@
 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 {useRoute, useRouter} from "vue-router";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAppStore} from "stores/App";
 import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
+import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
+import {storeToRefs} from "pinia";
+import POIForm from "components/poi/POIForm.vue";
 
 const poiId = parseInt(useRoute().params.id);
 
@@ -20,12 +22,18 @@ onMounted(() => {
       {label: "Editace"},
     ]);
   });
+
+  usePointsOfInterestTypeStore().fetch();
 })
 
+const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).items;
+
 const $q = useQuasar();
+const router = useRouter();
 const handleSave = (data) => {
   usePointsOfInterestStore().update(poiId, data).then(respData => {
     $q.notify(successObject("Úspěšně uloženo"));
+    router.push({name: "poiDetail", params: {id: poiId}});
   });
 }
 </script>
@@ -33,5 +41,5 @@ const handleSave = (data) => {
 <template>
   <POIEditSkeleton v-if="loading"/>
 
-  <POIEditForm :poi="poi" v-else @save="handleSave"/>
+  <POIForm :poi="poi" :types="poiTypes" v-else @save="handleSave"/>
 </template>
diff --git a/src/pages/profile/poi/NewPointOfInterestPage.vue b/src/pages/profile/poi/NewPointOfInterestPage.vue
index 3b7ca4b..0c91cf8 100644
--- a/src/pages/profile/poi/NewPointOfInterestPage.vue
+++ b/src/pages/profile/poi/NewPointOfInterestPage.vue
@@ -1,25 +1,32 @@
 <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 POIForm from "components/poi/POIForm.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {successObject} from "src/composables/dialog";
+import {useAppStore} from "stores/App";
+import {storeToRefs} from "pinia";
 
-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;
+const handleSave = (formData) => {
+  usePointsOfInterestStore().create(formData).then(() => {
+    $q.notify(successObject("Místo úspěšně uloženo"));
+    router.push({name: "poi"});
   })
 }
+
+const isRequestPending = storeToRefs(usePointsOfInterestStore()).isMutationRunning;
+
+useAppStore().setPageTitle("Nové zajímavé místo");
+useAppStore().setBreadcrumbs([
+  {to: "poi", label: "Zajímavá místa"},
+  {label: "Nové"},
+])
 </script>
 
 <template>
-  <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
+  <POIForm @save="handleSave" :is-request-pending="isRequestPending"/>
 </template>
diff --git a/src/pages/profile/poi/PointOfInterestDetailPage.vue b/src/pages/profile/poi/PointOfInterestDetailPage.vue
index df059fe..2e1cb71 100644
--- a/src/pages/profile/poi/PointOfInterestDetailPage.vue
+++ b/src/pages/profile/poi/PointOfInterestDetailPage.vue
@@ -7,6 +7,12 @@ import {fetchPoi, loading, poi} from "src/composables/objects/poi";
 import PhotosList from "components/photos/PhotosList.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
+import {useUserStore} from "stores/User";
+import {storeToRefs} from "pinia";
+import BasicInfoBanner from "components/BasicInfoBanner.vue";
+import FlightsList from "components/flights/FlightsList.vue";
+
+const loggedUser = storeToRefs(useUserStore()).user;
 
 onMounted(() => {
   fetchPoi(useRoute().params.id).then(() => {
@@ -16,7 +22,6 @@ onMounted(() => {
       {label: poi.value.name},
     ])
   });
-
 })
 </script>
 
@@ -24,6 +29,7 @@ onMounted(() => {
   <POIDetailSkeleton v-if="loading || !poi"/>
 
   <template v-else>
+    <article v-html="poi.description" />
 
     <EmbeddedMap
       v-if="poi.gpsLatitude && poi.gpsLongitude"
@@ -31,12 +37,23 @@ onMounted(() => {
       :gps-longitude="poi.gpsLongitude"
       :zoom="13"
     />
+    <BasicInfoBanner v-else>
+      Tento bod nemá nastavenou polohu. Po nastavení polohy tu bude zobrazena mapa.
+    </BasicInfoBanner>
 
     <PhotosList
       :photos="poi.photos"
       :show-actions="false"
+      v-if="poi.photos.length > 0"
     />
-    <FAB :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
+
+    <BasicInfoBanner v-else>
+      Pokud přidáš toto místo k nějaké fotce, zobrazí se tu.
+    </BasicInfoBanner>
+
+    <FlightsList :items="poi.flights" />
+
+    <FAB v-if="poi.createdById === loggedUser.id" :router-link="{name: 'poiEdit', params:{id: poi.id}}" mode="edit"/>
   </template>
 
 </template>
diff --git a/src/pages/profile/poi/PointsOfInterestPage.vue b/src/pages/profile/poi/PointsOfInterestPage.vue
index ea2742f..0665b4b 100644
--- a/src/pages/profile/poi/PointsOfInterestPage.vue
+++ b/src/pages/profile/poi/PointsOfInterestPage.vue
@@ -4,7 +4,7 @@ import {fetchPOIList, loading, pointsOfInterest} from "src/composables/objects/p
 import {useAppStore} from "stores/App";
 import POIList from "components/poi/POIList.vue";
 import FAB from "components/FAB.vue";
-import BasicListSkeleton from "components/BasicListSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 
 onMounted(() => {
   fetchPOIList();
diff --git a/src/stores/Aircrafts.js b/src/stores/Aircrafts.js
index e432169..9899ef6 100644
--- a/src/stores/Aircrafts.js
+++ b/src/stores/Aircrafts.js
@@ -2,6 +2,7 @@ import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo";
 import {AIRCRAFT_DETAIL, AIRCRAFTS_LIST} from "src/graphql/queries/aircrafts";
 import {CREATE_AIRCRAFT, DELETE_AIRCRAFT, EDIT_AIRCRAFT} from "src/graphql/mutations/aircrafts";
+import {deleteFromItems, updateInItems} from "stores/helpers";
 
 export const useAircraftsStore = defineStore('Aircrafts', {
   state: () => ({
@@ -29,17 +30,16 @@ export const useAircraftsStore = defineStore('Aircrafts', {
     },
     delete(id) {
       return apolloWrapper.mutate(DELETE_AIRCRAFT, {id}).then(({data}) => {
-        const idx = this.items.findIndex(a => a.id === id);
-        console.log(idx);
-        this.items.splice(idx, 1);
+        deleteFromItems(this.items, 'id', id);
 
         return data;
       });
     },
     update(id, formData) {
       return apolloWrapper.mutate(EDIT_AIRCRAFT, {id: id, input: formData}).then(({data}) => {
-        console.log("Pridat update ve storu")
-        return data.editAircraft;
+        const aircraft = data.editAircraft;
+        updateInItems(this.items, 'id', aircraft);
+        return aircraft;
       });
     },
     fetch() {
@@ -47,7 +47,7 @@ export const useAircraftsStore = defineStore('Aircrafts', {
         .query(AIRCRAFTS_LIST)
         .then((result) => {
           this.items = result.data.aircrafts;
-          return result.data.aircrafts;
+          return this.items;
         });
     }
   }
diff --git a/src/stores/Copilots.js b/src/stores/Copilots.js
index cd237df..e3d79c7 100644
--- a/src/stores/Copilots.js
+++ b/src/stores/Copilots.js
@@ -2,6 +2,7 @@ import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo";
 import {COPILOT_DETAIL, COPILOTS_LIST} from "src/graphql/queries/copilots";
 import {CREATE_COPILOT, EDIT_COPILOT} from "src/graphql/mutations/copilot";
+import {updateInItems} from "stores/helpers";
 
 export const useCopilotsStore = defineStore('SecondPilots', {
   state: () => ({
@@ -28,7 +29,10 @@ export const useCopilotsStore = defineStore('SecondPilots', {
     },
     update(id, formData) {
       return apolloWrapper.mutate(EDIT_COPILOT, {id: id, input: formData}).then(({data}) => {
-        return data.editCopilot;
+        const copilot = data.editCopilot;
+
+        updateInItems(this.items, "id", copilot);
+        return copilot;
       });
     },
   }
diff --git a/src/stores/Flights.js b/src/stores/Flights.js
index 7468539..fe11aa7 100644
--- a/src/stores/Flights.js
+++ b/src/stores/Flights.js
@@ -2,6 +2,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, DELETE_FLIGHT} from "src/graphql/mutations/flight";
+import {updateInItems} from "stores/helpers";
 
 export const useFlightsStore = defineStore('Flights', {
   state: () => ({
@@ -26,12 +27,7 @@ export const useFlightsStore = defineStore('Flights', {
     update(id, formData) {
       return apolloWrapper.mutate(EDIT_FLIGHT, {id: id, input: formData}).then(({data}) => {
         const flight = data.editFlight;
-        const idx = this.items.findIndex(item => item.id === id);
-        if (idx < 0) {
-          this.items.push(flight)
-        } else {
-          this.items[idx] = flight;
-        }
+        updateInItems(this.items, "id", flight);
 
         return flight;
       });
diff --git a/src/stores/PointOfInterestType.js b/src/stores/PointOfInterestType.js
new file mode 100644
index 0000000..cc10ded
--- /dev/null
+++ b/src/stores/PointOfInterestType.js
@@ -0,0 +1,39 @@
+import {defineStore} from 'pinia'
+import {apolloWrapper} from "src/graphql/apollo";
+import {POI_TYPE_DETAIL, POI_TYPE_LIST} from "src/graphql/queries/poi_type";
+
+export const usePointsOfInterestTypeStore = defineStore('PointsOfInterestType', {
+  state: () => ({
+    items: []
+  }),
+
+
+  actions: {
+    // create(input) {
+    //   return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
+    //     const poi = data.data.createPointOfInterest;
+    //     this.items.push(poi);
+    //     return poi;
+    //   })
+    // },
+    // 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_TYPE_DETAIL, {id}).then(result => result.data.pointOfInterest);
+    },
+    fetch() {
+      return apolloWrapper.query(POI_TYPE_LIST).then(result => {
+        this.items = result.data.pointOfInterestTypes;
+        return result.data.pointOfInterestTypes;
+      });
+    }
+  }
+})
diff --git a/src/stores/PointsOfInterest.js b/src/stores/PointsOfInterest.js
index c105701..d90a1a8 100644
--- a/src/stores/PointsOfInterest.js
+++ b/src/stores/PointsOfInterest.js
@@ -1,32 +1,39 @@
 import {defineStore} from 'pinia'
 import {apolloWrapper} from "src/graphql/apollo";
 import {POI_DETAIL, POI_LIST} from "src/graphql/queries/poi";
-import {EDIT_POI} from "src/graphql/mutations/poi";
+import {CREATE_POI, EDIT_POI} from "src/graphql/mutations/poi";
+import {updateInItems} from "stores/helpers";
+
 
 export const usePointsOfInterestStore = defineStore('PointsOfInterest', {
   state: () => ({
-    items: []
+    items: [],
+    isMutationRunning: false,
   }),
 
   getters: {
     getDetail: (state) => (poiId) => {
-      console.log(poiId, state.items, state.items.length);
-      const item = state.items.find(p => {
-          console.log(p, poiId);
-          return p.id === poiId
-        }
-      );
-      console.log('item', item);
-      return item;
+      return state.items.find(p => p.id === poiId);
     },
   },
 
   actions: {
+    create(input) {
+      this.isMutationRunning = true;
+      return apolloWrapper.mutate(CREATE_POI, {input}).then((data) => {
+        const poi = data.data.createPointOfInterest;
+        this.items.push(poi);
+        return poi;
+      }).finally(() => this.isMutationRunning = false);
+    },
     update(id, input) {
+      this.isMutationRunning = true;
+
       return apolloWrapper.mutate(EDIT_POI, {id, input}).then((data) => {
-        console.log("Pridat update POI ve store");
-        return data.data.editPointOfInterest;
-      })
+        const poi = data.data.editPointOfInterest;
+        updateInItems(this.items, "id", poi);
+        return poi;
+      }).finally(() => this.isMutationRunning = false);
     },
 
     fetchDetail(id) {
diff --git a/src/stores/helpers.js b/src/stores/helpers.js
new file mode 100644
index 0000000..dacd588
--- /dev/null
+++ b/src/stores/helpers.js
@@ -0,0 +1,13 @@
+export const updateInItems = (items, key, data) => {
+  const idx = items.findIndex(i => i[key] === data[key]);
+  if (idx >= 0)
+    items[idx] = data;
+  else items.push(data);
+}
+
+export const deleteFromItems = (items, key, value) => {
+  const idx = items.findIndex(a => a[key] === value);
+  if (idx < 0) return;
+
+  items.splice(idx, 1);
+}