63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<script setup>
|
|
import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {computed} from "vue";
|
|
import {useQuasar} from "quasar";
|
|
import {useFlightsStore} from "stores/Flights";
|
|
import {flightName} from "../../composables/objects/flight";
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
routeDetail: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({name: 'flightDetail', params: {}})
|
|
},
|
|
displayVisibilityInfo: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-list bordered separator class="q-mx-md q-my-md">
|
|
<q-item
|
|
v-for="flight of items" :key="flight"
|
|
ripple
|
|
clickable
|
|
:to="{name: routeDetail.name, params:{...routeDetail.params, id: flight.id}}"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-avatar size="100px">
|
|
<div v-if="flight.coverPhoto" :style="`width: 100px; height: 100px; background-image: url('${flight.coverPhoto.thumbnailUrl}'); background-size: cover`"></div>
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ flightName(flight) }}
|
|
<div class="text-secondary">
|
|
<q-icon name="flight_takeoff"/>
|
|
{{ formatDatetime(flight.takeoffDatetime) }}
|
|
</div>
|
|
<div class="text-secondary">
|
|
<q-icon name="schedule"/>
|
|
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
|
|
|
|
</div>
|
|
<div class="text-secondary">
|
|
<q-icon name="flight"/>
|
|
{{ flight.aircraft.callSign }}
|
|
</div>
|
|
</q-item-section>
|
|
|
|
<q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">
|
|
<q-icon name="visibility"></q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</template>
|