Nastrel nove podoby detailu letu
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user