65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<script setup>
|
|
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {flightName} from "src/composables/objects/flight";
|
|
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
routeDetail: {
|
|
type: Object,
|
|
required: false,
|
|
default: () => ({name: 'flightDetail', params: {}})
|
|
},
|
|
displayVisibilityInfo: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-list bordered separator>
|
|
<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>
|
|
<AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.thumbnailUrl"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
|
|
|
|
<div class="text-secondary" v-if="flight.copilot">
|
|
<q-icon name="person"/>
|
|
{{ flight.copilot.name }}
|
|
</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>
|
|
|
|
<div class="text-secondary" v-if="flight.event">
|
|
<q-icon name="event" />
|
|
{{ flight.event.name }}
|
|
</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>
|