composables, mazani letu, skeletony

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>
 
 

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>

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>

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>

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>

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>

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"

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>

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>

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>

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>

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>

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>

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>