Zaklad pro zadavani novych letu

2023-06-06 07:35:04 +02:00
parent 9d843c62a6
commit 25bf93589e
19 changed files with 413 additions and 197 deletions
@@ -0,0 +1,43 @@
+<script setup>
+import {onMounted, ref} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {useMeta} from "quasar";
+import FlightsList from "components/flights/FlightsList.vue";
+import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
+import {storeToRefs} from "pinia";
+import AddFAB from "components/AddFAB.vue";
+
+useMeta({title: "Moje lety"});
+
+const flightsStore = useFlightsStore();
+const flights = storeToRefs(flightsStore).items;
+
+const loading = ref(false);
+onMounted(() => {
+  loading.value = true;
+  flightsStore.fetch().finally(() => {
+    loading.value = false;
+  });
+})
+</script>
+
+<template>
+  <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 ">
+      <template v-slot:avatar>
+        <q-icon name="info"/>
+      </template>
+      Nemáš zaznamenaný žádný let.
+      <template v-slot:action>
+        <q-btn flat color="white" :to="{name: 'addFlight'}" label="Přidat let"/>
+      </template>
+    </q-banner>
+  </div>
+
+  <FlightsList :items="flights" v-else/>
+
+
+  <AddFAB :router-link="{name: 'addFlight'}"/>
+</template>
@@ -1,76 +0,0 @@
-<script setup>
-import {computed, onMounted} from "vue";
-import {useFlightsStore} from "stores/Flights";
-import {minutesToHumanReadable} from "src/composables/timeUtils";
-import {useMeta, useQuasar} from "quasar";
-
-useMeta({title: "Moje lety"});
-
-const flightsStore = useFlightsStore();
-onMounted(() => {
-  flightsStore.fetch();
-})
-const totalFlightTime = computed(() => {
-  return flightsStore.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
-})
-
-const $q = useQuasar();
-const deleteFlight = (flightId) => {
-  $q.dialog({
-    title: 'Potvrzení',
-    message: 'Opravdu chceš smazat tento let?',
-    cancel: true,
-    persistent: true
-  }).onOk(() => {
-    flightsStore.deleteItem(flightId);
-  })
-}
-
-</script>
-
-<template>
-  <div class="row">
-    <div class="col-12 col-md-4 col-lg-3" v-for="flight of flightsStore.items" :key="flight">
-
-      <q-card class="q-my-sm q-mx-sm">
-        <q-img :src="flight.titlePhotoUrl" v-if="flight.titlePhotoUrl">
-          <div class="absolute-bottom text-center text-h6">
-            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}" class="text-white">
-              {{ flight.takeOffLocation }} - {{ flight.landingLocation }}
-            </router-link>
-          </div>
-        </q-img>
-        <q-card-section>
-          <div class="text-h6" v-if="!flight.titlePhotoUrl">
-            <router-link :to="{name: 'flightDetail', params:{id: flight.id}}">
-              {{ flight.takeOffLocation }} - {{ flight.landingLocation }}
-            </router-link>
-          </div>
-          <div class="text-subtitle2">{{ minutesToHumanReadable(flight.flightDurationMinutes) }}</div>
-          <div class="text-secondary">
-            <q-icon name="today"/>
-            {{ flight.date }}
-          </div>
-          <div class="text-secondary">
-            <q-icon name="plane"/>
-            {{ flight.aircraft.name }}
-          </div>
-        </q-card-section>
-
-        <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>
-      </q-card>
-
-    </div>
-  </div>
-  Total: {{ minutesToHumanReadable(totalFlightTime) }}
-
-  <q-page-sticky location="bottom" :offset="[30, 30]">
-    <q-fab icon="add" color="primary" label="Add flight" @click="$router.push({name: 'addFlight'})"/>
-  </q-page-sticky>
-</template>