Fix geocode u poi
This commit is contained in:
@@ -4,7 +4,6 @@ import {Marker, CustomMarker, Polyline} from "vue3-google-map";
|
||||
import MapWrapper from "components/map/MapWrapper.vue";
|
||||
import {useFlightPlanObjects, useFlightPlanUtils} from "src/composables/flightPlan";
|
||||
import {useGeocode} from "src/composables/geocoding";
|
||||
import AltitudeLimit from "components/AltitudeLimit.vue";
|
||||
|
||||
const props = defineProps({
|
||||
flightPlan: {
|
||||
@@ -32,7 +31,7 @@ const emits = defineEmits(["markers-changed", "change-insert-position"]);
|
||||
|
||||
const {center} = useGeocode();
|
||||
|
||||
const {markerObject, googleMapsMarkerObject, infoWindowObject, editableNameTypes} = useFlightPlanObjects();
|
||||
const {markerObject, googleMapsMarkerObject, editableNameTypes} = useFlightPlanObjects();
|
||||
const {getMarkersFrom} = useFlightPlanUtils();
|
||||
|
||||
const mapWrap = ref(null);
|
||||
@@ -108,6 +107,6 @@ const handleMarkerMove = async (idx, event) => {
|
||||
@dragend="handleMarkerMove(i, $event.latLng)"
|
||||
/>
|
||||
</template>
|
||||
<Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0202', strokeOpacity: 0.5, strokeWeight: 5}"/>
|
||||
<Polyline :options="{path: track, geodesic: true, strokeColor: '#ff00ff', strokeOpacity: 1, strokeWeight: 3}"/>
|
||||
</MapWrapper>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup>
|
||||
|
||||
import {formatDatetime} from "../../composables/datetimeUtils";
|
||||
import {formatDatetime} from "src/composables/datetimeUtils";
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
@@ -23,7 +22,7 @@ const props = defineProps({
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
{{ flightPlan.name }}
|
||||
{{ flightPlan.name || "Nepojmenovaný plán" }}
|
||||
</q-item-label>
|
||||
<q-item-label caption v-if="flightPlan.plannedTakeoffDatetime">
|
||||
{{ formatDatetime(flightPlan.plannedTakeoffDatetime) }}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script setup>
|
||||
import {Marker} from "vue3-google-map";
|
||||
import {onMounted} from "vue";
|
||||
import {onMounted, ref} from "vue";
|
||||
import MapWrapper from "components/map/MapWrapper.vue";
|
||||
import {useGeocode} from "src/composables/geocoding";
|
||||
import axios from "axios";
|
||||
|
||||
const props = defineProps({
|
||||
gpsLatitude: {
|
||||
@@ -20,20 +21,28 @@ const props = defineProps({
|
||||
});
|
||||
const emits = defineEmits(["update:gpsLatitude", "update:gpsLongitude", "notFound"]);
|
||||
|
||||
const {emitModels, setCoordinatesFromGeocode, searchGeocode, center, zoom} = useGeocode(emits);
|
||||
const emitModels = (lat, lng) => {
|
||||
emits("update:gpsLatitude", lat);
|
||||
emits("update:gpsLongitude", lng);
|
||||
}
|
||||
|
||||
const {searchGeocode, center} = useGeocode(emits);
|
||||
const markerDropped = (position) => {
|
||||
emitModels(position.latLng.lat(), position.latLng.lng());
|
||||
}
|
||||
|
||||
const zoom = ref(8);
|
||||
onMounted(() => {
|
||||
if (props.gpsLatitude && props.gpsLongitude) {
|
||||
center.value.lng = props.gpsLongitude;
|
||||
center.value.lat = props.gpsLatitude
|
||||
} else if (props.label) {
|
||||
searchGeocode(props.label).then(result => {
|
||||
|
||||
searchGeocode(props.label).then(results => {
|
||||
if (!results) return;
|
||||
center.value = results[0].geometry.location;
|
||||
emitModels(center.value.lat, center.value.lng);
|
||||
zoom.value = 13;
|
||||
});
|
||||
setCoordinatesFromGeocode(props.label);
|
||||
} else {
|
||||
console.error("Set either label or gps coordinates.");
|
||||
}
|
||||
@@ -42,7 +51,17 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MapWrapper style="width: 100%; height: 500px" :center="center" :zoom="zoom" v-bind="$attrs">
|
||||
<Marker :options="{ position: center, title: label, draggable: true }" @dragend="markerDropped"/>
|
||||
<MapWrapper
|
||||
:show-info-window="false"
|
||||
:show-layer-controls="false"
|
||||
style="width: 100%; height: 500px"
|
||||
:center="center"
|
||||
:zoom="zoom"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<Marker
|
||||
:options="{ position: center, title: label, draggable: true }"
|
||||
@dragend="markerDropped"
|
||||
/>
|
||||
</MapWrapper>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import {Circle, GoogleMap, CustomControl, CustomMarker, Polygon} from "vue3-google-map";
|
||||
import {GoogleMap, CustomControl, CustomMarker, Polygon} from "vue3-google-map";
|
||||
import {computed, ref, watch} from "vue";
|
||||
import {useBasicVectorOperations, useVectorUtilities} from "src/graphql/fragments/vectorUtilities";
|
||||
import {useVectorUtilities} from "src/graphql/fragments/vectorUtilities";
|
||||
import {useAirspaceColors} from "src/composables/airspaces";
|
||||
import AirspaceInfoWindow from "components/map/AirspaceInfoWindow.vue";
|
||||
import {useFlightPlanObjects} from "src/composables/flightPlan";
|
||||
@@ -117,8 +117,7 @@ const airportsOnMap = computed(() => {
|
||||
return props.airports.filter(a => a.gpsLatitude && a.gpsLongitude).filter(a => a.icaoCode.length === 6 ? displayAirspaceLayers.value.FIELDSTRIP : displayAirspaceLayers.value.AIRPORTS);
|
||||
});
|
||||
|
||||
const {isPointInPolygon, vectorDistanceToKm} = useVectorUtilities();
|
||||
const {vectorDistance} = useBasicVectorOperations();
|
||||
const {isPointInPolygon} = useVectorUtilities();
|
||||
|
||||
const getAirspacesAtCoordinates = (clickCoordinates) => {
|
||||
const airspacesUnderClick = []
|
||||
@@ -163,7 +162,6 @@ const handleReportingPointClick = (airport, reportingPoint) => {
|
||||
const airspacesUnderClick = getAirspacesAtCoordinates(position);
|
||||
highlightedAirspaces.value = [];
|
||||
|
||||
|
||||
emitMapClick({position, airport, reportingPoint, airspaces: airspacesUnderClick})
|
||||
}
|
||||
|
||||
@@ -173,7 +171,6 @@ const handleAirportClick = (airport) => {
|
||||
const airspacesUnderClick = getAirspacesAtCoordinates(position);
|
||||
highlightedAirspaces.value = [];
|
||||
|
||||
|
||||
emitMapClick({position, airport, airspaces: airspacesUnderClick})
|
||||
}
|
||||
</script>
|
||||
@@ -189,7 +186,7 @@ const handleAirportClick = (airport) => {
|
||||
ref="mapRef"
|
||||
>
|
||||
<AirspaceInfoWindow
|
||||
v-if="infoWindow.active"
|
||||
v-if="showInfoWindow && infoWindow.active"
|
||||
:info-window="infoWindow"
|
||||
:highlighted-airspaces="highlightedAirspaces"
|
||||
@close="infoWindow.active=false"
|
||||
|
||||
@@ -49,7 +49,6 @@ const {pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
|
||||
const {airspaces: airspacesData, areAirspacesLoading: isQueryRunning} = storeToRefs(useAirspacesStore())
|
||||
const {airports} = storeToRefs(useAirportsStore());
|
||||
const {aircrafts: aircraftsData} = storeToRefs(useAircraftsStore());
|
||||
const {copilots: copilotsData} = storeToRefs(useCopilotsStore());
|
||||
const aircrafts = computed(() => aircraftsData.value.map(a => ({id: a.id, name: a.callSign})));
|
||||
|
||||
|
||||
@@ -58,7 +57,7 @@ const {markerObject} = useFlightPlanObjects();
|
||||
|
||||
const formData = ref({
|
||||
name: flightPlan.value?.name || null,
|
||||
isDefaultName: flightPlan.value?.isDefaultName || false,
|
||||
isDefaultName: flightPlan.value ? flightPlan.value.isDefaultName : true,
|
||||
isEditableByCopilot: flightPlan.value?.isEditableByCopilot || false,
|
||||
isPublic: flightPlan.value?.isPublic || false,
|
||||
plannedTakeoffDatetime: flightPlan.value?.plannedTakeoffDatetime || null,
|
||||
@@ -70,9 +69,6 @@ const openedTab = ref("route");
|
||||
const flightPlannerDialogOpen = ref(false);
|
||||
const flightPlanMarkers = ref(getMarkersFrom(flightPlan.value));
|
||||
|
||||
const autoFlightName = computed(() => flightPlanMarkers.value.map(m => m.name).join(" - "))
|
||||
|
||||
|
||||
const handleMarkersChanges = (markers) => {
|
||||
flightPlanMarkers.value = markers;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user