poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Vicemene funkcni mapova cast planovace

Browse Source
This commit is contained in:
Michal Kváček
2024-04-29 06:45:29 +02:00
parent bc0b5e2f15
commit 0760e6fb1c
9 changed files with 111 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/flightPlans/FlightPlanMap.vue
+9 -3
View File
@@ -37,8 +37,14 @@ const {getMarkersFrom} = useFlightPlanUtils();
const infoWindow = ref(infoWindowObject({}));
const handleMapClick = ({clickCoordinates, airspaces, airport}) => {
infoWindow.value = infoWindowObject({active: true, airspaces, position: clickCoordinates, airport})
const handleMapClick = ({clickCoordinates, airspaces, airport, reportingPoint}) => {
infoWindow.value = infoWindowObject({
active: true,
position: clickCoordinates,
airspaces,
airport,
reportingPoint,
})
}
const handleMarkerClick = (marker) => {
@@ -81,7 +87,6 @@ const handleMarkerMove = async (idx, event) => {
</script>
<template>
vkladam na pozici {{ insertPosition }}
<MapWrapper
style="width: 100%; height: 100%; min-height: 500px"
:center="center"
@@ -89,6 +94,7 @@ const handleMarkerMove = async (idx, event) => {
:airspaces-data="airspaceData"
:airports="airports"
v-bind="$attrs"
:fullscreen-control="false"
@map-click="handleMapClick"
>
<AirspaceInfoWindow
src/components/flightPlans/FlightPlanMarkersList.vue
+3
View File
@@ -55,6 +55,7 @@ const totalTime = computed(() => {
</q-item-section>
</q-item>
<q-scroll-area style="height: 50vh">
<template v-for="(segment, i) in props.flightPlan.track" :key="segment">
<q-item dense>
<q-item-section>
@@ -79,6 +80,7 @@ const totalTime = computed(() => {
</q-item-section>
</q-item>
<q-item dense v-if="segment.to && i === props.flightPlan.track.length - 1">
<q-item-section>
<q-item-label>
@@ -87,6 +89,7 @@ const totalTime = computed(() => {
</q-item-section>
</q-item>
</template>
</q-scroll-area>
<q-item>
<q-item-section>
<div>
src/components/flightPlans/FlightPlanRoute.vue
+7
View File
@@ -42,8 +42,15 @@ 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}`,
src/components/map/MapWrapper.vue
+37 -19
View File
@@ -58,6 +58,7 @@ const displayAirspaceLayers = ref({
TMA: true,
RMZ: false,
ATZ: true,
PARA: false,
DANGER: false,
PROHIBIT: true,
RESTRICT: true,
@@ -68,29 +69,29 @@ const displayAirspaceLayers = ref({
const airspaces = computed(() => {
const colorsMap = {
C: "#800080",
D: "#800080",
CTR: "#00ff00",
P: "#FF0000",
TMA: "#800080",
CTR: "#366e36",
PROHIBIT: "#FF0000",
RMZ: "#FFdd00",
R: "#ff6a00",
Q: "#FFA500",
PGZ: "#008000",
GSEC: "#008000",
RESTRICT: "#ff6a00",
DANGER: "#FFA500",
TRAGA: "#008000",
ATZ: "#4e7cfc",
FIR: '#ffffff'
FIR: '#ffffff',
PARA: "#000000"
}
return props.airspacesData
.filter(airspace => !!colorsMap[airspace.type])
.filter(airspace => {
if (['C', 'D'].includes(airspace.type)) return displayAirspaceLayers.value.TMA;
if (['PGZ', 'GSEC'].includes(airspace.type)) return displayAirspaceLayers.value.TRAGA;
if (['TMA'].includes(airspace.type)) return displayAirspaceLayers.value.TMA;
if (['TRAGA'].includes(airspace.type)) return displayAirspaceLayers.value.TRAGA;
if (airspace.type === 'CTR') return displayAirspaceLayers.value.CTR;
if (airspace.type === 'RMZ') return displayAirspaceLayers.value.RMZ;
if (airspace.type === 'Q') return displayAirspaceLayers.value.DANGER;
if (airspace.type === 'P') return displayAirspaceLayers.value.PROHIBIT;
if (airspace.type === 'R') return displayAirspaceLayers.value.RESTRICT;
if (airspace.type === 'DANGER') return displayAirspaceLayers.value.DANGER;
if (airspace.type === 'PROHIBIT') return displayAirspaceLayers.value.PROHIBIT;
if (airspace.type === 'RESTRICT') return displayAirspaceLayers.value.RESTRICT;
if (airspace.type === 'PARA') return displayAirspaceLayers.value.PARA;
if (airspace.type === 'ATZ') return displayAirspaceLayers.value.ATZ;
return true;
})
@@ -101,7 +102,7 @@ const airspaces = computed(() => {
strokeOpacity: 0.3,
strokeWeight: 3,
fillColor: colorsMap[airspace.type],
fillOpacity: 0,
fillOpacity: ["PROHIBIT", "RESTRICT"].includes(airspace.type) ? 0.1 : 0,
};
if (airspace.mapBounds.length > 0) {
@@ -146,6 +147,11 @@ const handleMapClick = (e) => {
emits("map-click", {airspaces: getAirspacesAtCoordinates(clickCoordinates), clickCoordinates});
}
const handleReportingPointClick = (airport, reportingPoint) => {
const position = {lat: reportingPoint.gpsLatitude, lng: reportingPoint.gpsLongitude};
emits("map-click", {clickCoordinates: position, airport, reportingPoint})
}
const handleAirportClick = (airport) => {
const position = {lat: airport.gpsLatitude, lng: airport.gpsLongitude};
emits("map-click", {clickCoordinates: position, airport})
@@ -163,10 +169,11 @@ const handleAirportClick = (airport) => {
ref="mapRef"
>
<template v-for="airspace in airspaces" :key="airspace.name">
<Polygon :options="airspace" @click=handleMapClick v-if="airspace.path"/>
<Circle :options="airspace" @click=handleMapClick v-if="airspace.center && airspace.radius"/>
<Polygon :options="airspace" @click="handleMapClick" />
</template>
<slot/>
<template v-for="airport in airportsOnMap" :key="airport.icaoCode">
<CustomMarker
:options="{position: {lat: airport.gpsLatitude, lng: airport.gpsLongitude}, anchorPoint: 'CENTER'}"
@@ -174,13 +181,23 @@ const handleAirportClick = (airport) => {
>
<q-chip size="xs">{{ airport.icaoCode }}</q-chip>
</CustomMarker>
<template v-if="displayAirspaceLayers.CTR">
<CustomMarker
v-for="reportingPoint in airport.reportingPoints" :key="reportingPoint.id"
:options="{position: {lat: reportingPoint.gpsLatitude, lng: reportingPoint.gpsLongitude, anchorPoint: 'CENTER'}}"
@click.stop="handleReportingPointClick(airport, reportingPoint)"
:title="`${airport.icaoCode}: ${reportingPoint.name}`"
>
<q-icon name="mdi-triangle"/>
</CustomMarker>
</template>
</template>
<slot/>
<CustomControl position="BOTTOM_CENTER" class="text-center" v-if="showLayerControls">
<q-card class="q-my-md q-mx-auto q-px-lg" style="max-width: 98%;">
<q-checkbox v-model="displayAirspaceLayers.CTR" label="M/CTR"/>
<q-checkbox v-model="displayAirspaceLayers.CTR" label="CTR"/>
<q-checkbox v-model="displayAirspaceLayers.TMA" label="TMA"/>
<q-checkbox v-model="displayAirspaceLayers.RMZ" label="RMZ"/>
<q-checkbox v-model="displayAirspaceLayers.ATZ" label="ATZ"/>
@@ -188,6 +205,7 @@ const handleAirportClick = (airport) => {
<q-checkbox v-model="displayAirspaceLayers.PROHIBIT" label="Zakázané prostory"/>
<q-checkbox v-model="displayAirspaceLayers.RESTRICT" label="TRA"/>
<q-checkbox v-model="displayAirspaceLayers.TRAGA" label="TRAGA"/>
<q-checkbox v-model="displayAirspaceLayers.PARA" label="PARA"/>
<q-checkbox v-model="displayAirspaceLayers.AIRPORTS" label="Letiště"/>
<q-checkbox v-model="displayAirspaceLayers.FIELDSTRIP" label="SLZ plochy"/>
</q-card>
src/composables/flightPlan.js
+8 -2
View File
@@ -52,7 +52,7 @@ export const useFlightPlanObjects = () => {
}
}
const infoWindowObject = ({active, position, marker, poi, airport, airspaces}) => {
const infoWindowObject = ({active, position, marker, poi, airport, reportingPoint, airspaces}) => {
if (!position) position = {};
if (!position.lat) position.lat = 0;
if (!position.lng) position.lng = 0;
@@ -60,9 +60,15 @@ export const useFlightPlanObjects = () => {
let title = null;
if (airport) {
if (!reportingPoint) {
title = `${airport.icaoCode} (${airport.name})`;
position.lat = airport.gpsLatitude;
position.lng = airport.gpsLongitude;
} else {
title = `${airport.icaoCode}:${reportingPoint.name}`
position.lat = reportingPoint.gpsLatitude;
position.lng = reportingPoint.gpsLongitude;
}
}
if (marker) {
@@ -77,7 +83,7 @@ export const useFlightPlanObjects = () => {
position.lng = poi.gpsLongitude;
}
return {title, active, position, airspaces, poi, marker, airport};
return {title, active, position, airspaces, poi, marker, airport, reportingPoint};
};
return {markerObject, googleMapsMarkerObject, googleMapsCustomMarkerObject, infoWindowObject, editableNameTypes}
src/graphql/fragments/airport.js
+6
View File
@@ -7,5 +7,11 @@ export const FRAGMENT_AIRPORT_INFO = gql`
icaoCode
gpsLatitude
gpsLongitude
reportingPoints {
id
gpsLatitude
gpsLongitude
name
}
}
`;
src/graphql/queries/airports.js
+4 -5
View File
@@ -1,13 +1,12 @@
import gql from "graphql-tag";
import {FRAGMENT_AIRPORT_INFO} from "src/graphql/fragments/airport";
export const AIRPORTS_LIST = gql`
query AirportsList {
airports {
id
name
icaoCode
gpsLatitude
gpsLongitude
...airportInfo
}
}
${FRAGMENT_AIRPORT_INFO}
`;
src/graphql/queries/airspace.js
+1 -5
View File
@@ -6,11 +6,7 @@ export const AIRSPACE_LIST = gql`
airspaces {
name
type
mapCenter {
lat
lng
}
radius
mapBounds {
lat
lng
src/pages/profile/flightPlanner/FlightPlanEditPage.vue
+1 -1
View File
@@ -107,7 +107,7 @@ const insertAtPosition = ref(flightPlanMarkers.value.length);
@markers-changed="handleMarkersChanges"
/>
</div>
<div class="col-12 col-md-5 col-lg-3">
<div class="col-12 col-md-5 col-lg-2">
<FlightPlanMarkersList
:insert-position="insertAtPosition"
:flight-plan="flightPlan"