Mapa s trasami letu u eventu, drobna uprava vizualu eventu

src/components/event/EventBasicInfo.vue

@@ -0,0 +1,22 @@
+<script setup>
+import {FORMAT_DATE, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+
+const props = defineProps({
+  event: {
+    type: Object,
+    required: true
+  }
+})
+
+</script>
+
+<template>
+  <q-chip icon="date_range" v-if="event.dateFrom || event.dateTo">
+    <template v-if="event.dateFrom !== event.dateTo">
+      {{ formatDatetime(event.dateFrom, FORMAT_DATE) }} - {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
+    </template>
+    <template v-else>
+      {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
+    </template>
+  </q-chip>
+</template>

src/components/event/EventFlightsMap.vue

@@ -0,0 +1,62 @@
+<script setup>
+import MapWithMarkers from "components/map/MapWithMarkers.vue";
+import {ref} from "vue";
+import {useEventsStore} from "stores/Events";
+import {minutesToHumanReadable} from "../../composables/datetimeUtils";
+import {pluralize} from "../../composables/utils";
+
+const props = defineProps({
+  event: {
+    type: Object,
+    required: true
+  },
+  onlyPublic: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const tracks = ref([]);
+const totalTime = ref(0);
+const totalFlights = ref(0);
+
+useEventsStore().fetchFlightsTracks({
+  eventId: props.event.id,
+  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>

src/components/event/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "event",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@kvacek.cz:poletani.cz/app.git"
+  },
+  "private": true
+}

src/components/flights/FlightsList.vue

@@ -5,6 +5,7 @@ import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import {computed} from "vue";
 import LoadMoreList from "components/LoadMoreList.vue";
+import {pluralize} from "../../composables/utils";
 
 const props = defineProps({
   items: {
@@ -37,16 +38,8 @@ const routeDetail = (flight) => {
   else
     return {name: "flightDetail", params: {id: flight.id}}
 };
-
-const pluralize = (count, singular, plural, pluralMore) => {
-  if (count === 1) return singular;
-  else if (count < 5) return plural;
-  else return pluralMore;
-}
 const loadMoreCount = computed(() => {
-  const remaining = props.totalItemsCount - props.items.length;
-
-  return Math.min(props.itemsPerPage, remaining);
+  return Math.min(props.itemsPerPage, props.totalItemsCount - props.items.length);
 });
 
 </script>

src/components/map/MapWithMarkers.vue

@@ -1,14 +1,20 @@
 <script setup>
 import MapWrapper from "components/map/MapWrapper.vue";
 import {Marker, Polyline, InfoWindow} from "vue3-google-map";
-import {computed, onMounted, ref} from "vue";
-import {axios} from "boot/axios";
+import {computed} from "vue";
 
 
 const props = defineProps({
   gpxTrack: {
     type: Object,
     required: false,
+    default: () => {
+    }
+  },
+  tracks: {
+    type: Array,
+    required: false,
+    default: () => []
   },
   markers: {
     type: Array,
@@ -26,12 +32,47 @@ const props = defineProps({
   }
 })
 
-const track = ref([]);
 const bounds = computed(() => {
   const photosTransformed = props.photos.map(p => ({position: {lat: p.gpsLatitude, lng: p.gpsLongitude}}));
-  const allData = [...props.markers, ...track.value, ...photosTransformed];
-  return allData.filter(i => !!i.position).map(i => i.position);
+  const coordinates = [
+    ...[...props.markers, ...photosTransformed].filter(i => !!i.position).map(i => i.position),
+    ...(props.gpxTrack || []),
+    ...(props.tracks || []).flat()
+  ];
+
+  const minLat = Math.min(...coordinates.map(i => i.lat));
+  const maxLat = Math.max(...coordinates.map(i => i.lat));
+  const minLng = Math.min(...coordinates.map(i => i.lng));
+  const maxLng = Math.max(...coordinates.map(i => i.lng));
+
+  return [
+    {lat: minLat, lng: minLng},
+    {lat: minLat, lng: maxLng},
+    {lat: maxLat, lng: minLng},
+    {lat: maxLat, lng: maxLng},
+  ];
 });
+
+
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+const getColor = (i) => {
+  const colors = [
+    '#FF0000',
+    '#5733FF', '#4bec41', '#8d3f25',
+    '#33A1FF', '#6d7e59', '#FF3333', '#0e1c48',
+    '#A133FF', '#FFFF33', '#c9decc'
+  ]
+  return colors[i] || getRandomColor()
+}
+
+
 </script>
 
 <template>
@@ -47,6 +88,12 @@ const bounds = computed(() => {
       <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
     </template>
 
+    <template v-if="tracks && tracks.length > 0">
+      <template v-for="(track, i) in tracks" :key="track">
+        <Polyline :options="{path: track, geodesic: false, strokeColor: getColor(i), strokeOpacity: 1, strokeWeight: 3}"/>
+      </template>
+    </template>
+
     <Marker v-if="highlightPosition" :options="{position: highlightPosition, icon: '/mapIcons/currentPosition32x32.png'}"/>
 
   </MapWrapper>