111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<script setup>
|
|
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {flightName} from "src/composables/flight";
|
|
import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
|
|
import {useInfiniteScroll} from "src/composables/pagination";
|
|
import {useQuasar} from "quasar";
|
|
import {computed} from "vue";
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
public: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
...useInfiniteScroll().propsDef
|
|
});
|
|
|
|
const emits = defineEmits([...useInfiniteScroll().emitsDef])
|
|
const {emitLoadMore, hasMoreData} = useInfiniteScroll(emits, props)
|
|
|
|
const routeDetail = (flight) => {
|
|
if (props.public)
|
|
return {name: "publicFlightDetail", params: {username: flight.pilot.publicUsername, flightSlug: flight.urlSlug}}
|
|
else
|
|
return {name: "flightDetail", params: {id: flight.id}}
|
|
};
|
|
|
|
const $q = useQuasar()
|
|
</script>
|
|
|
|
<template>
|
|
<q-infinite-scroll
|
|
:disable="!hasMoreData"
|
|
@load="emitLoadMore"
|
|
:offset="250"
|
|
>
|
|
<q-list bordered separator>
|
|
<q-item
|
|
v-for="flight of items" :key="flight"
|
|
ripple
|
|
clickable
|
|
:to="routeDetail(flight)"
|
|
>
|
|
|
|
|
|
<q-item-section avatar class="gt-xs">
|
|
<AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
|
|
<q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-img v-if="flight.titlePhoto" class="lt-sm" :src="flight.titlePhoto.thumbnailUrl"/>
|
|
|
|
<div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
|
|
|
|
<div class="flex justify-between justify-sm-start list-secondary-info">
|
|
<div class="text-secondary" v-if="props.public">
|
|
<q-icon name="support_agent"/>
|
|
{{ flight.pilot.publicUsername }}
|
|
</div>
|
|
|
|
<div class="text-secondary" v-if="flight.copilots">
|
|
<q-icon name="person"/>
|
|
{{ flight.pilot.name }}
|
|
{{ flight.copilots }}
|
|
</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>
|
|
</div>
|
|
</q-item-section>
|
|
|
|
<q-item-section side top v-if="!props.public">
|
|
<!-- Zobraz jen v adminu -->
|
|
<q-icon name="visibility" v-if="flight.isPublic"/>
|
|
|
|
<q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
|
|
<q-tooltip>
|
|
Let je sice publikovaný, nemá ale nastavenou URL adresu!
|
|
</q-tooltip>
|
|
</q-icon>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<template v-slot:loading>
|
|
<div class="row justify-center q-my-md">
|
|
<q-spinner-dots color="primary" size="40px"/>
|
|
</div>
|
|
</template>
|
|
</q-infinite-scroll>
|
|
</template>
|
|
|
|
<style>
|
|
.list-secondary-info div {
|
|
padding: 0 1em;
|
|
}
|
|
</style>
|