Zaklad pro zadavani novych letu

src/components/flights/FlightsList.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {minutesToHumanReadable} from "src/composables/timeUtils";
+import {computed} from "vue";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+});
+
+
+const $q = useQuasar();
+const deleteFlight = (flightId) => {
+  $q.dialog({
+    title: 'Potvrzení',
+    message: 'Opravdu chceš smazat tento let?',
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    // flightsStore.deleteItem(flightId);
+  })
+}
+
+
+const totalFlightTime = computed(() => {
+  return props.items.reduce((acc, flight) => acc + flight.flightDurationMinutes, 0);
+})
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-12 col-md-4 col-lg-3" v-for="flight of 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.takeoffAirport.name }} - {{ flight.landingAirport.name }}
+            </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.takeoffAirport.name }} - {{ flight.landingAirport.name }}
+            </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>
+
+    Total: {{ minutesToHumanReadable(totalFlightTime) }}
+  </div>
+</template>