112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<script setup>
|
|
import FormWrapper from "components/FormWrapper.vue";
|
|
import {onMounted, reactive, ref, watch} from "vue";
|
|
import ComboboxInput from "components/inputs/ComboboxInput.vue";
|
|
import {commonProps} from "src/composables/inputs";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [Number, String],
|
|
},
|
|
locations: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
flight: {
|
|
type: Object,
|
|
required: false
|
|
}
|
|
});
|
|
|
|
const formData = reactive({
|
|
track: [],
|
|
gpxTrack: null
|
|
});
|
|
const removeTrackItem = (index) => {
|
|
formData.track.splice(index, 1);
|
|
}
|
|
|
|
const poi = ref(null);
|
|
const addTrackItem = (item) => {
|
|
formData.track.push(item);
|
|
poi.value = null;
|
|
}
|
|
watch(poi, (newVal) => {
|
|
if (newVal?.name) {
|
|
addTrackItem(newVal);
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
for (const i in props.flight.track) {
|
|
const poiInfo = props.flight.track[i].pointOfInterest;
|
|
formData.track.push({
|
|
id: poiInfo.id,
|
|
name: poiInfo.name
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<FormWrapper v-model="formData">
|
|
|
|
<q-file v-model="formData.gpxTrack" v-bind="commonProps" label="Trasa v GPX" hint="Slouží pro vykreslení kompletní a detailní trasy"/>
|
|
|
|
<template v-if="flight.gpxTrackUrl">
|
|
<q-icon name="check" color="green" /> Trasa nahrána
|
|
</template>
|
|
|
|
<ComboboxInput
|
|
v-bind="commonProps"
|
|
v-model="poi"
|
|
:key="formData.track.length"
|
|
:options="locations"
|
|
@select="addTrackItem"
|
|
clearable
|
|
label="Otočný bod"
|
|
hint="Nastav významné otočné body"
|
|
/>
|
|
|
|
<q-list bordered>
|
|
<q-item-label header>Trasa</q-item-label>
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar color="primary" text-color="white" icon="flight_takeoff"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ flight.takeoffAirport.name }}
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item v-for="(item, index) in formData.track" :key="item">
|
|
<q-item-section avatar>
|
|
<q-avatar size="32px" color="secondary" text-color="white">{{ index + 1 }}.</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<span>
|
|
{{ item.name }}
|
|
|
|
<q-badge color="green" v-if="!item.id">
|
|
<q-icon name="add"/>
|
|
</q-badge>
|
|
</span>
|
|
|
|
</q-item-section>
|
|
<q-item-section top side>
|
|
<q-btn @click="removeTrackItem(index)" flat dense round icon="delete" text-color="red"/>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar color="primary" text-color="white" icon="flight_land"/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{ flight.landingAirport.name }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</FormWrapper>
|
|
</template>
|