INIT commit
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user