125 lines
3.8 KiB
Vue
125 lines
3.8 KiB
Vue
<script setup>
|
|
import {computed, ref, watch} from "vue";
|
|
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {useFlightPlanCalculations, useFlightPlanUtils} from "src/composables/flightPlan";
|
|
|
|
const props = defineProps({
|
|
flightPlan: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
isFullscreen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
insertPosition: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(["open", "change-insert-position", "fullscreen-toggle"])
|
|
|
|
const {getDuration, getTotalDistance, getTotalDuration} = useFlightPlanCalculations();
|
|
const totalDistance = computed(() => getTotalDistance(props.flightPlan));
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-list bordered class="q-ml-md-md q-pt-md">
|
|
<q-item class="mobile-hide">
|
|
<q-item-section>
|
|
<div style="display: flex; justify-content: space-between">
|
|
<q-btn
|
|
@click="emits('change-insert-position', 0)"
|
|
icon="add"
|
|
:color="insertPosition === 0 ? 'primary' : 'grey'"
|
|
size="sm"
|
|
>
|
|
<template v-if="insertPosition === 0">Přidávám na začátek</template>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
@click='emits("fullscreen-toggle")'
|
|
size="sm"
|
|
round
|
|
:icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-scroll-area class="mobile-hide" style="height: 55vh">
|
|
<template v-for="(segment, i) in props.flightPlan.track" :key="segment">
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label>{{ segment.from.name }}</q-item-label>
|
|
<q-item-label caption class="q-pa-sm q-ml-sm" style="border-left: solid 1px" v-if="segment.distance">
|
|
|
|
{{ segment.bearing }}°,
|
|
{{ segment.distance }} km,
|
|
{{ minutesToHumanReadable(getDuration(segment.distance, props.flightPlan.plannedSpeed)) }}
|
|
|
|
<q-btn
|
|
@click="emits('change-insert-position', i+1)"
|
|
icon="add"
|
|
size="xs"
|
|
round
|
|
class="q-ml-sm"
|
|
:color="insertPosition === i+1 ? 'primary' : 'grey'"
|
|
/>
|
|
</q-item-label>
|
|
<q-item-label>
|
|
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item dense v-if="segment.to && i === props.flightPlan.track.length - 1">
|
|
<q-item-section>
|
|
<q-item-label>
|
|
{{ segment.to.name }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
<q-item>
|
|
<q-item-section v-if="flightPlan.track.length">
|
|
<div>
|
|
<q-btn
|
|
@click="emits('change-insert-position', flightPlan.track.length + 1)"
|
|
icon="add"
|
|
size="sm"
|
|
:color="insertPosition === flightPlan.track.length + 1? 'primary' : 'grey'"
|
|
>
|
|
<template v-if="insertPosition === flightPlan.track.length + 1">Přidávám na konec</template>
|
|
</q-btn>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-scroll-area>
|
|
|
|
<template v-if="totalDistance">
|
|
<q-item class="mobile-hide">
|
|
<q-item-section>
|
|
<q-separator/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section>
|
|
Celková vzdálenost: {{ totalDistance }} km
|
|
<br>
|
|
Plánovaná doba letu: {{ minutesToHumanReadable(getTotalDuration(props.flightPlan, props.flightPlan.plannedSpeed)) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-btn @click="emits('open')" color="secondary">
|
|
{{ totalDistance ? 'Upravit trasu' : 'Sestavit trasu' }}
|
|
</q-btn>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</template>
|