104 lines
2.9 KiB
Vue
104 lines
2.9 KiB
Vue
<script setup>
|
|
import {flight} from "src/composables/objects/flight";
|
|
import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import WeatherInfo from "components/weather/WeatherInfo.vue";
|
|
|
|
const props = defineProps({
|
|
flight: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
showCopilots: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-list bordered separator>
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-icon name="flight"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ flight.aircraft.callSign }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-icon name="event"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-icon name="flight_takeoff"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div>
|
|
<strong>{{ flight.takeoffAirport.name }}</strong>,
|
|
čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
|
|
|
|
<WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item v-for="poi in flight.track" :key="poi.id">
|
|
<q-item-section avatar>
|
|
<q-icon name="place"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ poi.pointOfInterest.name }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-icon name="flight_land"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div>
|
|
<strong>{{ flight.landingAirport.name }}</strong>,
|
|
čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
|
|
<WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-icon name="schedule"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ minutesToHumanReadable(flight.durationMinCalculated) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="flight.copilots?.length > 0">
|
|
<q-list>
|
|
<q-item v-for="copilot in flight.copilots" :key="copilot.id">
|
|
<q-item-section avatar>
|
|
<q-icon name="people"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<router-link :to="{name: 'copilotDetail', params: {id: copilot.id}}">
|
|
{{ copilot.name }}
|
|
</router-link>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-item>
|
|
|
|
</q-list>
|
|
</template>
|