70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<script setup>
|
|
import {flight} from "src/composables/objects/flight";
|
|
import MapWithMarkers from "components/map/MapWithMarkers.vue";
|
|
import {computed} from "vue";
|
|
|
|
const props = defineProps({
|
|
flight: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
|
|
const trackWithGPS = computed(() => {
|
|
return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
|
|
});
|
|
|
|
const pointsOfInterests = computed(() => {
|
|
const path = [{
|
|
label: flight.value.takeoffAirport.name,
|
|
position:
|
|
{
|
|
lat: flight.value.takeoffAirport.gpsLatitude,
|
|
lng: flight.value.takeoffAirport.gpsLongitude
|
|
}
|
|
}];
|
|
|
|
for (const poi of trackWithGPS.value) {
|
|
path.push({
|
|
label: poi.pointOfInterest.name,
|
|
position: {lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude}
|
|
});
|
|
}
|
|
|
|
path.push({
|
|
label: flight.value.takeoffAirport.name,
|
|
position: {
|
|
lat: flight.value.landingAirport.gpsLatitude,
|
|
lng: flight.value.landingAirport.gpsLongitude
|
|
}
|
|
});
|
|
|
|
return path;
|
|
});
|
|
|
|
|
|
const mapPhotos = computed(() => {
|
|
return flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude)
|
|
});
|
|
|
|
const displayMap = computed(() => {
|
|
return (
|
|
!!flight.value.gpsTrackUrl ||
|
|
mapPhotos.value.length > 0 ||
|
|
trackWithGPS.value.length > 0 ||
|
|
flight.value.landingAirport.id !== flight.value.takeoffAirport.id
|
|
)
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<MapWithMarkers
|
|
v-if="displayMap"
|
|
style="width: 100%; height: 500px;"
|
|
:gpx-track-url="flight.gpxTrackUrl"
|
|
:markers="pointsOfInterests"
|
|
:photos="mapPhotos"
|
|
/>
|
|
</template>
|