93 lines
2.0 KiB
Vue
93 lines
2.0 KiB
Vue
<script setup>
|
|
import {computed} from "vue";
|
|
import {useFlightPlanCalculations} from "src/composables/flightPlan";
|
|
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {useQuasar} from "quasar";
|
|
import {textEllipsis} from "src/composables/utils";
|
|
|
|
const props = defineProps({
|
|
flightPlan: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
plannedSpeed: {
|
|
type: Number,
|
|
required: true,
|
|
}
|
|
});
|
|
|
|
const columns = [
|
|
{
|
|
// name: 'from',
|
|
label: 'Z',
|
|
align: "left",
|
|
field: 'from'
|
|
},
|
|
{
|
|
label: 'Do',
|
|
align: "left",
|
|
field: 'to'
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: 'Kurz',
|
|
field: 'bearing',
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: 'Vzdálenost',
|
|
field: 'distance',
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: 'Čas',
|
|
field: 'duration',
|
|
},
|
|
];
|
|
|
|
const {getDuration, getTotalDuration, getTotalDistance} = useFlightPlanCalculations();
|
|
|
|
const data = computed(() => props.flightPlan.navlog.map((item) => ({
|
|
from: textEllipsis(item.from.name, 30),
|
|
to: textEllipsis(item.to.name, 30),
|
|
distance: `${item.distance} km`,
|
|
bearing: `${item.bearing} °`,
|
|
duration: minutesToHumanReadable(getDuration(item.distance, props.plannedSpeed)),
|
|
})));
|
|
|
|
const {screen} = useQuasar();
|
|
</script>
|
|
|
|
<template>
|
|
<q-table
|
|
:grid="screen.xs"
|
|
:dense="screen.lt.md"
|
|
flat bordered
|
|
hide-bottom
|
|
:title="flightPlan.name"
|
|
:rows="data"
|
|
:columns="columns"
|
|
:rows-per-page-options="[0]"
|
|
>
|
|
<template #bottom-row="{cols}">
|
|
<tr class="summary">
|
|
<td v-for="col in cols" :key="col.field" :class="{'text-right': col.align === 'right'}">
|
|
<template v-if="col.field === 'duration'">
|
|
{{ minutesToHumanReadable(getTotalDuration(flightPlan, plannedSpeed)) }}
|
|
</template>
|
|
<template v-else-if="col.field === 'distance'">
|
|
{{ getTotalDistance(flightPlan) }} km
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</q-table>
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
.summary {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|