composables, mazani letu, skeletony

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>