120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<script setup>
|
|
import {computed, ref, watch} from "vue";
|
|
import FlightPlanPlaceInput from "components/flightPlans/FlightPlanPlaceInput.vue";
|
|
import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
|
|
|
|
const props = defineProps({
|
|
markers: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
pointsOfInterest: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
airports: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(["markers-changed"]);
|
|
|
|
const model = ref(props.markers);
|
|
const removeMarker = (idx) => {
|
|
model.value.splice(idx, 1);
|
|
}
|
|
const swapMarkers = (idx1, idx2) => {
|
|
const tmp = model.value[idx1];
|
|
model.value[idx1] = model.value[idx2];
|
|
model.value[idx2] = tmp;
|
|
};
|
|
const handlePlaceSelect = (modelVal) => {
|
|
console.log(modelVal);
|
|
model.value.push(modelVal);
|
|
}
|
|
|
|
watch(() => model.value, () => {
|
|
emits("markers-changed", model.value);
|
|
}, {deep: true});
|
|
|
|
const {getIcon} = useFlightPlanUtils();
|
|
const {editableNameTypes} = useFlightPlanObjects();
|
|
|
|
const allPlacesOptions = computed(() => {
|
|
|
|
const reportingPoints = props.airports.map(a => a.reportingPoints.map(r => ({...r, airport: a}))).flat()
|
|
return [
|
|
...props.pointsOfInterest.map(poi => ({...poi, type: "poi"})),
|
|
...reportingPoints.map(r => ({
|
|
...r,
|
|
name: `${r.airport.icaoCode}:${r.name}`,
|
|
type: "reportingPoint"
|
|
})),
|
|
...props.airports.map(airport => ({
|
|
...airport,
|
|
name: `${airport.icaoCode} - ${airport.name}`,
|
|
type: "airport",
|
|
}))
|
|
].map(i => ({...i, disabled: !i.gpsLatitude || !i.gpsLongitude}));
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<q-scroll-area style="height: 60vh;">
|
|
<q-list bordered separator class="full-width">
|
|
<q-item v-for="(marker, i) in model" :key="marker">
|
|
<q-item-section side>
|
|
<q-icon :name="getIcon(marker.type)"></q-icon>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<div>
|
|
<q-btn
|
|
v-if="i > 0"
|
|
text-color="primary"
|
|
size="16px"
|
|
flat dense round icon="arrow_upward"
|
|
@click="swapMarkers(i, i-1)"
|
|
/>
|
|
<q-btn
|
|
v-if="i < model.length - 1"
|
|
text-color="primary"
|
|
flat dense round icon="arrow_downward"
|
|
size="16px"
|
|
@click="swapMarkers(i, i+1)"
|
|
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<div class="cursor-pointer" v-if="editableNameTypes.includes(marker.type)">
|
|
{{ marker.name }}
|
|
<q-icon name="edit"/>
|
|
<q-popup-edit v-model="marker.name" v-slot="scope">
|
|
<q-input v-model="scope.value" autofocus @keyup.enter="scope.set">
|
|
<template #append>
|
|
<q-icon name="edit"/>
|
|
</template>
|
|
</q-input>
|
|
</q-popup-edit>
|
|
</div>
|
|
<template v-else>
|
|
{{ marker.name }}
|
|
</template>
|
|
</q-item-section>
|
|
<q-item-section side class="text-right">
|
|
<q-btn size="12px" @click="removeMarker(i)" flat dense round color="red" icon="delete"/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
|
|
<FlightPlanPlaceInput
|
|
:options="allPlacesOptions"
|
|
@select="handlePlaceSelect"
|
|
/>
|
|
</template>
|