98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<script setup>
|
|
|
|
import {computed} from "vue";
|
|
import {textEllipsis} from "src/composables/utils";
|
|
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {useFlightPlanUtils} from "src/composables/flightPlan";
|
|
import {useQuasar} from "quasar";
|
|
import {useUnitsConvertors} from "src/composables/units";
|
|
import CloudCoverIcon from "components/weather/CloudCoverIcon.vue";
|
|
|
|
const props = defineProps({
|
|
flightPlan: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
|
|
const columns = [
|
|
|
|
{
|
|
label: 'Místo',
|
|
align: "left",
|
|
name: 'place',
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: 'Teplota',
|
|
name: 'temperature',
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: 'Vítr',
|
|
name: 'wind',
|
|
},
|
|
{
|
|
align: 'right',
|
|
label: 'Oblačnost',
|
|
name: 'clouds',
|
|
},
|
|
];
|
|
|
|
const {screen} = useQuasar();
|
|
const {getMarkersFrom} = useFlightPlanUtils();
|
|
const {kmhToKnots} = useUnitsConvertors();
|
|
|
|
const markers = getMarkersFrom(props.flightPlan);
|
|
</script>
|
|
|
|
<template>
|
|
<q-table
|
|
:grid="screen.xs"
|
|
:dense="screen.lt.md"
|
|
flat bordered
|
|
hide-bottom
|
|
:title="flightPlan.name"
|
|
:rows="markers"
|
|
:columns="columns"
|
|
:rows-per-page-options="[0]"
|
|
>
|
|
<template v-slot:body-cell-place="props">
|
|
<q-td :props="props">
|
|
{{ props.row.name }}
|
|
</q-td>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-temperature="props">
|
|
<q-td :props="props">
|
|
{{ props.row.weatherInfo.temperatureSurface }}° C
|
|
<br>
|
|
Rosný bod {{ props.row.weatherInfo.dewpointSurface }}° C
|
|
</q-td>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-wind="props">
|
|
<q-td :props="props">
|
|
<q-icon name="navigation" :style="`transform: rotate(${props.row.weatherInfo.windDirectionSurface}deg)`"/>
|
|
<br>
|
|
{{ props.row.weatherInfo.windDirectionSurface }}°
|
|
<br>
|
|
{{ kmhToKnots(props.row.weatherInfo.windSpeedSurface) }} kt
|
|
</q-td>
|
|
</template>
|
|
|
|
<template v-slot:body-cell-clouds="props">
|
|
<q-td :props="props">
|
|
<CloudCoverIcon :cloudcover="props.row.weatherInfo.cloudcoverTotal"/>
|
|
<br>
|
|
celkové pokrytí oblačností {{ props.row.weatherInfo.cloudcoverTotal }} %
|
|
<br>
|
|
nízké mraky {{ props.row.weatherInfo.cloudcoverLow }} %
|
|
</q-td>
|
|
</template>
|
|
|
|
|
|
</q-table>
|
|
</template>
|