117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
<script setup>
|
|
import MapWithMarkers from "components/map/MapWithMarkers.vue";
|
|
import {computed, reactive, ref} from "vue";
|
|
import {Line} from "vue-chartjs"
|
|
|
|
const props = defineProps({
|
|
flight: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
photos: {
|
|
type: Array,
|
|
required: false,
|
|
}
|
|
})
|
|
|
|
|
|
const mapPhotos = computed(() => props.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
|
|
const poisWithGPS = computed(() => props.flight.track.map(poi => poi.pointOfInterest || poi.airport));
|
|
|
|
const mapMarkers = [props.flight.takeoffAirport].concat(poisWithGPS.value).concat([props.flight.landingAirport]);
|
|
const pointsOfInterests = computed(() => mapMarkers
|
|
.filter(marker => marker.gpsLatitude && marker.gpsLongitude)
|
|
.map(
|
|
marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
|
|
));
|
|
|
|
const gpxTrack = props.flight.gpxTrack ? reactive(props.flight.gpxTrack) : null;
|
|
const displayMap = computed(() => {
|
|
return (
|
|
!!gpxTrack ||
|
|
mapPhotos.value.length > 0 ||
|
|
poisWithGPS.value.length > 0 ||
|
|
props.flight.landingAirport.id !== props.flight.takeoffAirport.id
|
|
)
|
|
});
|
|
|
|
let chartSpeedData, chartAltitudeData = null;
|
|
if (gpxTrack) {
|
|
const chartLabels = gpxTrack.time.map(t => {
|
|
const datetime = new Date(t);
|
|
return datetime.getHours() + ":" + datetime.getMinutes();
|
|
});
|
|
chartSpeedData = {
|
|
labels: chartLabels,
|
|
datasets: [{
|
|
backgroundColor: "#38bd3e",
|
|
borderColor: "#38bd3e",
|
|
label: "Rychlost (km/h)",
|
|
data: gpxTrack.speed,
|
|
pointRadius: 1,
|
|
}]
|
|
};
|
|
|
|
chartAltitudeData = {
|
|
labels: chartLabels,
|
|
datasets: [{
|
|
backgroundColor: "#9ae3ff",
|
|
borderColor: "#9ae3ff",
|
|
label: "Nadmořská výška letu (m)",
|
|
data: gpxTrack.altitude,
|
|
pointRadius: 1,
|
|
}]
|
|
};
|
|
|
|
if (gpxTrack.terrainElevation.length > 0) {
|
|
chartAltitudeData.datasets.push(
|
|
{
|
|
backgroundColor: "rgba(148,94,40,0.7)",
|
|
borderColor: "#945e28",
|
|
label: "Nadmořská výška země (m)",
|
|
data: gpxTrack.terrainElevation,
|
|
fill: true,
|
|
pointRadius: 1,
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
const currentPositionMarker = ref(null);
|
|
const drawCurrentPositionMarker = (e) => {
|
|
const res = e.chart.getElementsAtEventForMode(e, 'nearest', {intersect: false});
|
|
if (res.length === 0) {
|
|
currentPositionMarker.value = null;
|
|
return;
|
|
}
|
|
const idx = res[0].index;
|
|
currentPositionMarker.value = props.flight.gpxTrack.coordinates[idx];
|
|
}
|
|
|
|
const chartOptions = {
|
|
plugins: {
|
|
tooltip: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
}
|
|
},
|
|
onClick: drawCurrentPositionMarker,
|
|
onHover: drawCurrentPositionMarker,
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<MapWithMarkers
|
|
v-if="displayMap"
|
|
style="width: 100%; height: 500px;"
|
|
:gpx-track="flight.gpxTrack?.coordinates || []"
|
|
:markers="pointsOfInterests"
|
|
:highlight-position="currentPositionMarker"
|
|
:photos="mapPhotos"
|
|
/>
|
|
|
|
<Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
|
|
<Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
|
|
|
|
</template>
|