68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<script setup>
|
|
import MapWithMarkers from "components/map/MapWithMarkers.vue";
|
|
import {ref} from "vue";
|
|
import {useEventsStore} from "stores/Events";
|
|
import {minutesToHumanReadable} from "src/composables/datetimeUtils";
|
|
import {pluralize} from "src/composables/utils";
|
|
|
|
const props = defineProps({
|
|
eventId: {
|
|
type: Number,
|
|
required: false
|
|
},
|
|
eventUrlSlug: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
onlyPublic: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const tracks = ref([]);
|
|
const totalTime = ref(0);
|
|
const totalFlights = ref(0);
|
|
|
|
useEventsStore().fetchFlightsTracks({
|
|
eventId: props.eventId,
|
|
eventUrlSlug: props.eventUrlSlug,
|
|
onlyPublic: props.onlyPublic
|
|
}).then((data) => {
|
|
if (!data.flights) return;
|
|
|
|
totalFlights.value = data.flights.length;
|
|
|
|
for (const flightTrack of data.flights) {
|
|
totalTime.value += flightTrack.durationMinCalculated;
|
|
|
|
if (flightTrack.gpxTrack) {
|
|
tracks.value.push(flightTrack.gpxTrack.coordinates);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<template v-if="tracks.length > 1">
|
|
<h3>Trasy letů</h3>
|
|
|
|
<MapWithMarkers
|
|
style="width: 100%; height: 500px;"
|
|
:tracks="tracks"
|
|
/>
|
|
|
|
<div class="text-center q-my-md">
|
|
<q-chip>
|
|
<q-avatar>{{ totalFlights }}</q-avatar>
|
|
{{ pluralize(totalFlights, "let", "lety", "letů") }}
|
|
</q-chip>
|
|
|
|
<q-chip icon="schedule">
|
|
{{ minutesToHumanReadable(totalTime) }}
|
|
</q-chip>
|
|
</div>
|
|
|
|
</template>
|
|
</template>
|