Nastrel nove podoby detailu letu

This commit is contained in:
Michal Kváček
2026-01-19 22:26:14 +01:00
parent 33e7aa6e36
commit 348025afee
6 changed files with 260 additions and 66 deletions
+37 -21
View File
@@ -3,6 +3,8 @@ 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: {
@@ -25,6 +27,8 @@ const routeDetail = (flight) => {
else
return {name: "flightDetail", params: {id: flight.id}}
};
const $q = useQuasar()
</script>
<template>
@@ -40,36 +44,42 @@ const routeDetail = (flight) => {
clickable
:to="routeDetail(flight)"
>
<q-item-section avatar>
<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="text-secondary" v-if="props.public">
<q-icon name="support_agent"/>
@{{ flight.pilot.publicUsername }}
</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" 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">
<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 class="text-secondary" v-if="flight.event">
<q-icon name="event"/>
{{ flight.event.name }}
</div>
</div>
</q-item-section>
@@ -92,3 +102,9 @@ const routeDetail = (flight) => {
</template>
</q-infinite-scroll>
</template>
<style>
.list-secondary-info div {
padding: 0 1em;
}
</style>