Prace s mapou, refresh tokenu (tak nejak), uprava vypisu POI, pridani breadcrumbs

src/pages/profile/ProfilePage.vue

@@ -1,7 +1,17 @@
 <script setup>
 import {useUserStore} from "stores/User";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
 
 const loggedUser = useUserStore().user
+
+onMounted(() => {
+  useUserStore().setupCredentials();
+  setInterval(() => {
+    useFlightsStore().fetch();
+  }, 1000);
+})
+
 </script>
 
 <template>

src/pages/profile/details/AircraftDetailPage.vue

@@ -39,11 +39,11 @@ watch(aircraft, (newVal) => {
   <AircraftDetailSkeleton v-if="loading || !aircraft"/>
   <template v-else>
 
-    <h1>{{ aircraft.callSign }}</h1>
-
+    <q-card>
     <q-img :src="aircraft.photoUrl"/>
 
-    <q-list>
+      <q-card-section>
+        <q-list>
       <q-item>
         Výrobce: {{ aircraft.manufacturer }}
       </q-item>
@@ -53,7 +53,16 @@ watch(aircraft, (newVal) => {
       </q-item>
 
     </q-list>
-    <q-btn @click="confirmDelete(aircraft.id)">Delete</q-btn>
+      </q-card-section>
+
+      <q-card-actions align="right">
+    <q-btn @click="confirmDelete(aircraft.id)" icon="delete" text-color="red" rounded flat/>
+
+      </q-card-actions>
+    </q-card>
+
+
+
 
     <!--    <h2>Limits</h2>-->
     <!--    Wind: {{ aircraft.limits.wind.frontKt }}/{{ aircraft.limits.wind.sideKt }} kt-->

src/pages/profile/details/CopilotDetailPage.vue

@@ -1,22 +1,21 @@
 <script setup>
 import {useRoute} from "vue-router";
-import {computed, onMounted} from "vue";
-import {storeToRefs} from "pinia";
-import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {onMounted} from "vue";
 import {copilot, fetchCopilot, loading} from "src/composables/objects/copilot";
-import {useFlightsStore} from "stores/Flights";
 import CopilotDetailSkeleton from "components/copilots/CopilotDetailSkeleton.vue";
+import {useAppStore} from "stores/App";
+import FAB from "components/FAB.vue";
+import FlightsList from "components/flights/FlightsList.vue";
 
-const copilotId = parseInt(useRoute().params.copilotId);
+const copilotId = parseInt(useRoute().params.id);
 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);
+  fetchCopilot(copilotId).then(() => {
+    useAppStore().setPageTitle(copilot.value.name);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "pilots"}, label: "Kopiloti"},
+      {label: copilot.value.name}
+    ])
+  });
 })
 </script>
 
@@ -24,16 +23,12 @@ const totalFlightTime = computed(() => {
   <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>
+    <h3>Společné lety</h3>
+    <q-banner v-if="copilot.flights.length === 0" class="bg-light-blue text-white">
+      Zatím žádné společné lety
+    </q-banner>
+    <FlightsList :items="copilot.flights" v-else/>
 
-    <h1>{{ copilot.name }}</h1>
-
-    Flights:
-    {{ commonFlights }}
-
-    Total time together: {{ minutesToHumanReadable(totalFlightTime) }}
+    <FAB mode="edit" :router-link="{name: 'pilotEdit', params: {id: copilotId}}"/>
   </template>
 </template>

src/pages/profile/details/FlightDetailPage.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {useRoute, useRouter} from "vue-router";
-import {onMounted, watch} from "vue";
+import {computed, onMounted, watch} from "vue";
 import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
 import {fetchFlight, flight, flightName, handleDeleteFlight, loading} from "src/composables/objects/flight";
 import {useAppStore} from "stores/App";
@@ -8,6 +8,8 @@ import PhotosList from "components/photos/PhotosList.vue";
 import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
 import {useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
+import MapWithMarkers from "components/MapWithMarkers.vue";
+import FAB from "components/FAB.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -34,13 +36,30 @@ const handleDeleteAndRedirect = () => {
   })
 }
 
+const flightPath = computed(() => {
+  const path = [{
+    lat: flight.value.takeoffAirport.gpsLatitude,
+    lng: flight.value.takeoffAirport.gpsLongitude
+  }];
+
+  for (const poi of flight.value.track) {
+    path.push({lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude});
+  }
+
+  path.push({
+    lat: flight.value.landingAirport.gpsLatitude,
+    lng: flight.value.landingAirport.gpsLongitude
+  });
+
+  return path;
+});
 </script>
 
 <template>
   <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <template v-else>
-    <q-card class="q-mx-md q-my-md">
+    <q-card class="q-mx-md-lg q-my-md">
       <q-parallax
         :src="flight.coverPhoto.url"
         v-if="flight.coverPhoto"
@@ -50,22 +69,23 @@ const handleDeleteAndRedirect = () => {
       <q-card-section>
         <FlightBasicInfo :flight="flight"/>
 
-        <article v-html="flight.description"/>
+        <article class="q-my-lg" v-html="flight.description"/>
 
-        <ul>
-          <li v-for="poi in flight.track" :key="poi.pointOfInterest.id">
-            {{ poi.pointOfInterest.name }}
-          </li>
-        </ul>
+        <MapWithMarkers
+          style="width: 100%; height: 500px;"
+          :show-as-track="true"
+          :markers="flightPath"
+        />
 
         <PhotosList :photos="flight.photos" :show-actions="false"/>
       </q-card-section>
 
       <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=""/>-->
+
+    <FAB :router-link="{name: 'flightEdit', params:{id: flight.id}}" mode="edit"/>
+
   </template>
 </template>

src/pages/profile/details/PointOfInterestDetailPage.vue

@@ -4,11 +4,19 @@ import {useRoute} from "vue-router";
 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";
+import {useAppStore} from "stores/App";
+import MapWithMarker from "components/MapWithMarkers.vue";
 
 onMounted(() => {
-  fetchPoi(useRoute().params.id);
+  fetchPoi(useRoute().params.id).then(() => {
+    useAppStore().setPageTitle(`${poi.value.name}`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "poi"}, label: "Zajímavá místa"},
+      {label: poi.value.name},
+    ])
+  });
+
 })
 </script>
 
@@ -16,7 +24,13 @@ onMounted(() => {
   <POIDetailSkeleton v-if="loading || !poi"/>
 
   <template v-else>
-    <h1>{{ poi.name }}</h1>
+
+    <MapWithMarker
+      v-if="poi.gpsLongitude && poi.gpsLatitude"
+      style="width: 100%; height: 500px;"
+      :zoom="13"
+      :markers="[{lat: poi.gpsLatitude, lng: poi.gpsLongitude}]"
+    />
 
     <PhotosList
       :photos="poi.photos"

src/pages/profile/forms/EditCopilotPage.vue

@@ -1,31 +1,30 @@
 <script setup>
-import {useCopilotsStore} from "stores/Copilots";
+import {onMounted} from "vue";
+import {loading, copilot, fetchCopilot} from "src/composables/objects/copilot";
+import {useAppStore} from "stores/App";
+import CopilotEditSkeleton from "components/copilots/CopilotEditSkeleton.vue";
+import CopilotEditForm from "components/copilots/CopilotEditForm.vue";
 import {useRoute} from "vue-router";
-import {useFlightsStore} from "stores/Flights";
-import {computed, onMounted} from "vue";
-import {storeToRefs} from "pinia";
-import {minutesToHumanReadable} from "src/composables/datetimeUtils";
 
-const secondPilotStore = useCopilotsStore();
-const flightsStore = useFlightsStore();
-const route = useRoute();
+const copilotId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  flightsStore.fetch();
-})
+  fetchCopilot(copilotId).then(() => {
+    useAppStore().setPageTitle(`${copilot.value.name} - editace`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "pilots"}, label: "Kopiloti"},
+      {to: {name: "pilotDetail", params: {id: copilotId}}, label: copilot.value.name},
+      {label: "Editace"}
+    ])
+  })
+});
 
-const secondPilot = {id: 1, name: "Franta Karel"};
-const flights = storeToRefs(flightsStore).items;
-
-const commonFlights = computed(() => flights.value.filter(f => f.secondPilot.id === secondPilot.id))
-
-const totalFlightTime = computed(() => {
-  return commonFlights.value.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
-})
 </script>
 
 <template>
+<CopilotEditSkeleton v-if="loading" />
+
+  <CopilotEditForm v-else />
 
-  Editace copilota
 
 </template>

src/pages/profile/forms/EditFlightPage.vue

@@ -97,7 +97,7 @@ const openPhotoEdit = (photo) => {
 </script>
 
 <template>
-  <FlightEditSkeleton v-if="loading" />
+  <FlightEditSkeleton v-if="loading"/>
 
   <template v-else>
     <q-breadcrumbs :key="loading">
@@ -133,17 +133,18 @@ const openPhotoEdit = (photo) => {
       </q-tab-panel>
 
       <q-tab-panel name="photos">
+        <FlightFormPhotos
+          :flight="flight"
+          @save="handlePhotosUpload"
+        />
+
+        <PhotoForm v-model="openEdit" :locations="locations" :photo="editPhoto" @save="handlePhotoUpdate"/>
+
         <PhotosList
           :photos="flight.photos"
           @edit="openPhotoEdit"
           @delete="confirmPhotoDelete"
         />
-        <PhotoForm v-model="openEdit" :locations="locations" :photo="editPhoto" @save="handlePhotoUpdate"/>
-
-        <FlightFormPhotos
-          :flight="flight"
-          @save="handlePhotosUpload"
-        />
       </q-tab-panel>
 
       <q-tab-panel name="notes">

src/pages/profile/forms/EditPointOfInterestPage.vue

@@ -5,23 +5,33 @@ import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import POIEditForm from "components/poi/POIEditForm.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {useAppStore} from "stores/App";
+import {useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
 
 const poiId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchPoi(poiId)
+  fetchPoi(poiId).then(() => {
+    useAppStore().setPageTitle(`${poi.value.name} - editace`);
+    useAppStore().setBreadcrumbs([
+      {to: {name: "poi"}, label: "Zajímavá místa"},
+      {to: {name: "poiDetail", params: {id: poiId}}, label: poi.value.name},
+      {label: "Editace"},
+    ]);
+  });
 })
 
+const $q = useQuasar();
 const handleSave = (data) => {
   usePointsOfInterestStore().update(poiId, data).then(respData => {
-    console.log(respData);
+    $q.notify(successObject("Úspěšně uloženo"));
   });
 }
-
 </script>
 
 <template>
-  <POIEditSkeleton v-if="loading" />
+  <POIEditSkeleton v-if="loading"/>
 
   <POIEditForm :poi="poi" v-else @save="handleSave"/>
 </template>

src/pages/profile/lists/AircraftsPage.vue

@@ -13,7 +13,7 @@ onMounted(() => {
 <template>
   <AircraftsListSkeleton v-if="loading" />
 
-  <AircraftsList :items="aircrafts" v-else />
+  <AircraftsList class="q-my-lg" :items="aircrafts" v-else />
 
   <FAB mode="add" :router-link="{name: 'addAircraft'}"/>
 </template>

src/pages/profile/lists/CopilotsPage.vue

@@ -4,17 +4,19 @@ 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";
+import {useAppStore} from "stores/App";
 
 onMounted(() => {
   fetchCopilots();
+  useAppStore().setPageTitle("Spolucestující");
 })
 </script>
 
 <template>
-  <CopilotListSkeleton v-if="loading" />
-
-  <CopilotsList :items="copilots" />
-
-  <FAB :router-link="{name: 'addCopilot'}" mode="add" />
+  <CopilotListSkeleton v-if="loading"/>
 
+  <template v-else>
+    <CopilotsList class="q-my-lg" :items="copilots"/>
+    <FAB :router-link="{name: 'addCopilot'}" mode="add"/>
+  </template>
 </template>

src/pages/profile/lists/FlightsPage.vue

@@ -19,7 +19,7 @@ onMounted(() => {
   <FlightsListSkeleton v-if="loading"/>
 
   <div class="q-pa-md q-gutter-sm" v-else-if="!loading && flights.length === 0">
-    <q-banner class="bg-light-blue text-white ">
+    <q-banner class="bg-light-blue text-white">
       <template v-slot:avatar>
         <q-icon name="info"/>
       </template>

src/pages/profile/lists/PointsOfInterestPage.vue

@@ -16,7 +16,7 @@ useAppStore().setPageTitle("Zajímavá místa")
 <template>
   <POIListSkeleton v-if="loading"/>
 
-  <POIList v-else :items="pointsOfInterest"/>
+  <POIList v-else class="q-my-lg" :items="pointsOfInterest"/>
 
   <FAB :router-link="{name: 'addPOI'}" mode="add" />
 </template>