From 63ae0fa3514fbcb190349b2d5d98637cd31e4489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 4 Sep 2023 15:32:23 +0200
Subject: [PATCH] Lepsi podpora elevace terenu

---
 package.json                              |   2 +
 public/mapIcons/currentPosition.png       | Bin 0 -> 12828 bytes
 public/mapIcons/currentPosition32x32.png  | Bin 0 -> 1054 bytes
 quasar.config.js                          |   1 +
 src/boot/chartJs.js                       |   6 +
 src/components/flights/FlightTrackMap.vue |  93 ++++++++++++---
 src/components/map/MapWithMarkers.vue     |  52 +++------
 src/components/photos/PhotoDetail.vue     | 136 +++++++++++-----------
 src/components/photos/PhotoFormDialog.vue |   2 -
 src/graphql/fragments/flight.js           |  17 ++-
 yarn.lock                                 |  17 +++
 11 files changed, 197 insertions(+), 129 deletions(-)
 create mode 100644 public/mapIcons/currentPosition.png
 create mode 100644 public/mapIcons/currentPosition32x32.png
 create mode 100644 src/boot/chartJs.js

diff --git a/package.json b/package.json
index 40a6a25..6287851 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,13 @@
     "@vue/apollo-option": "^4.0.0-beta.5",
     "apollo-upload-client": "^17.0.0",
     "axios": "^1.4.0",
+    "chart.js": "^4.4.0",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",
     "pinia": "^2.0.33",
     "quasar": "^2.12.0",
     "vue": "^3.2.47",
+    "vue-chartjs": "^5.2.0",
     "vue-inner-image-zoom": "^2.0.0",
     "vue-router": "^4.1.6",
     "vue3-google-map": "^0.15.0"
diff --git a/public/mapIcons/currentPosition.png b/public/mapIcons/currentPosition.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f295259011e48f81cc53266a6c877882647a546
GIT binary patch
literal 12828
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

literal 0
HcmV?d00001

diff --git a/public/mapIcons/currentPosition32x32.png b/public/mapIcons/currentPosition32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dac3977479a837058644027b87843336beb5bfd
GIT binary patch
literal 1054
zcmV+(1mXLMP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80004nX+uL$Nkc;*
zaB^>EX>4Tx04R}tkvmAkP!xv$riu@$4t5Z6$WWc^-~(~2RVYG*P%E_RU~<zJG-*gu
zTpR`0f`gC6s)LKOt`4q(Aou`rb#YR3krK~M3N2zhaJe7<J^$g}{{lk2%rvVb257o%
zrV?>6lU)_NUeSX9`XORMW|lE0NlEzD*FE)8-9`B<|Gqz~Pt92j2#CZnW|%hd2Jy_M
zZE)Tv4zr@H5}y-~n{+|qN3JU#zi}?OEby6OGo6|z4ik%oHdfl06-|wJnmD3rI?Wd{
z9;=+UIBVr9Yu=N;FqG3*mbp%A1PLr+2@++bpo$X8uo0zQC&faF&f`A*Vb?E_OCeVY
zj2sK7K!fc1!T;cQwpM;>(wh{D1D!99^Dzo^?E;OO<9r`GPU8d!J_A>J%U`Jjv!A5b
zT3X}?7}y3bu3MV22VCv|Lr;cm%B~coCFJwK`x$*x78tw*de^+%n&&uu0Me9I@&-6K
z1jY(9d)?>V-R-&k+tbYN2ca)=xt<fFv;Y7A24YJ`L;(K){{a7>y{D4^000SaNLh0L
z04^f{04^f|c%?sf00007bV*G`2j>X^5H>GN(u>jn000?uMObu0Z*6U5Zgc=ca%Ew3
zWn>_CX>@2HM@dakSAh-}0005?Nkl<ZSi|j>(P|Sx6o$VuJL$GbH%+C%t_7obV-bWF
zDfk?|Szp9gsPv*QP`ro*ugn${lT8RQ>28h}nZyMxX18X8kRJ}r?6PP6J@cP`1~%AW
z&5*nw_`WofL>~d7Do3CITOu3)AJUX4Pd=NMK$4)UJOy5Wz6KKDJ;;T%=4+a!x$>F3
z1kzOF>68l*skjPOL}Wir^>#eYxq1--zo50nNVQrtOJM@4(q0Hj<Wp$`wzsYEJlPe|
zLFVz$7^${eTT-YCJWpz>`Ucnm0-yr;ZtT1Hu6ytOO{c)nMFNa~0dNOQ+;}vda+&D@
z4S;w5sI@Jy=i**1!;FAgw-K3{pcbVn3xgmC<TocYh6WId5ULUaPk=+Gfg%_IQ6@Up
zN;H}1aA_-UG-}fC51T;f$b>E)XSVPTxCMzoJ3u5tRIl&H-ELP`QbW(<l`)(f!@0FI
zN;e`PURYwS(q99Coo{XnyUk`*ODAx4_IwQd0D3n!arp$Uu0ATz1-?Jn2OfZ4MhoQ;
z2!c>NPkh&YQ)`VaN+8$iWeg|4DR2ZFWKZXr5Aa2V%QWTls;*>jftUCE$lRb}Se`)M
zEoeLC&(U!)M_+aM#S7hvt+hrqX{qu|gpn#e;82A2@$p`CeI2jHdjD+4;@9iGu)+U~
YpZe3B1vgA{TL1t607*qoM6N<$f)<|2kN^Mx

literal 0
HcmV?d00001

diff --git a/quasar.config.js b/quasar.config.js
index b148bc9..ad05f7d 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -31,6 +31,7 @@ module.exports = configure(function (ctx) {
     boot: [
       "axios",
       "vueInnerImageZoom",
+      "chartJs",
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
diff --git a/src/boot/chartJs.js b/src/boot/chartJs.js
new file mode 100644
index 0000000..41daa61
--- /dev/null
+++ b/src/boot/chartJs.js
@@ -0,0 +1,6 @@
+import {boot} from "quasar/wrappers";
+import {BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Title, Tooltip} from "chart.js";
+
+export default boot(({app}) => {
+  ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, Filler, BarElement, CategoryScale, LinearScale)
+})
diff --git a/src/components/flights/FlightTrackMap.vue b/src/components/flights/FlightTrackMap.vue
index c3c581c..d091aa3 100644
--- a/src/components/flights/FlightTrackMap.vue
+++ b/src/components/flights/FlightTrackMap.vue
@@ -2,6 +2,7 @@
 import {flight} from "src/composables/objects/flight";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
 import {computed, ref} from "vue";
+import {Line} from "vue-chartjs"
 
 const props = defineProps({
   flight: {
@@ -11,24 +12,22 @@ const props = defineProps({
 })
 
 
-const trackWithGPS = computed(() => {
+const mapPhotos = computed(() => flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude));
+const poisWithGPS = computed(() => {
   return flight.value.track.filter(poi => poi.pointOfInterest.gpsLatitude && poi.pointOfInterest.gpsLongitude)
 });
 
-const slider = ref(0);
-
-
 const pointsOfInterests = computed(() => {
   const path = [{
     label: flight.value.takeoffAirport.name,
     position:
       {
-        lat: flight.value.takeoffAirport.gpsLatitude + (slider.value / 1000),
-        lng: flight.value.takeoffAirport.gpsLongitude + (slider.value / 1000)
+        lat: flight.value.takeoffAirport.gpsLatitude,
+        lng: flight.value.takeoffAirport.gpsLongitude
       }
   }];
 
-  for (const poi of trackWithGPS.value) {
+  for (const poi of poisWithGPS.value) {
     path.push({
       label: poi.pointOfInterest.name,
       position: {lat: poi.pointOfInterest.gpsLatitude, lng: poi.pointOfInterest.gpsLongitude}
@@ -47,33 +46,93 @@ const pointsOfInterests = computed(() => {
 });
 
 
-const mapPhotos = computed(() => {
-  return flight.value.photos.filter(photo => photo.gpsLatitude && photo.gpsLongitude)
-});
+const gpxTrack = flight.value.gpxTrack;
 
 const displayMap = computed(() => {
   return (
-    !!flight.value.gpxTrackUrl ||
+    !!gpxTrack ||
     mapPhotos.value.length > 0 ||
-    trackWithGPS.value.length > 0 ||
+    poisWithGPS.value.length > 0 ||
     flight.value.landingAirport.id !== flight.value.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 = flight.value.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-url="flight.gpxTrackUrl"
+    :gpx-track="flight.gpxTrack?.coordinates || []"
     :markers="pointsOfInterests"
+    :highlight-position="currentPositionMarker"
     :photos="mapPhotos"
   />
 
-  {{ pointsOfInterests }}
+  <Line v-if="gpxTrack" :data="chartSpeedData" :options="chartOptions"/>
+  <Line v-if="gpxTrack" :data="chartAltitudeData" :options="chartOptions"/>
 
-  {{ slider }}
-
-  <q-slider v-model.number="slider" :min="-100" :max="100" />
 </template>
diff --git a/src/components/map/MapWithMarkers.vue b/src/components/map/MapWithMarkers.vue
index c9783ce..bd1a431 100644
--- a/src/components/map/MapWithMarkers.vue
+++ b/src/components/map/MapWithMarkers.vue
@@ -6,8 +6,8 @@ import {axios} from "boot/axios";
 
 
 const props = defineProps({
-  gpxTrackUrl: {
-    type: String,
+  gpxTrack: {
+    type: Object,
     required: false,
   },
   markers: {
@@ -15,6 +15,10 @@ const props = defineProps({
     required: false,
     default: () => []
   },
+  highlightPosition: {
+    type: Object,
+    required: false,
+  },
   photos: {
     type: Array,
     required: false,
@@ -23,35 +27,8 @@ const props = defineProps({
 })
 
 const track = ref([]);
-const gpxLoading = ref(!!props.gpxTrackUrl);
 const speed = ref([]);
 const elevation = ref([]);
-onMounted(() => {
-  if (!props.gpxTrackUrl) {
-    return;
-  }
-  gpxLoading.value = true;
-  axios.get(props.gpxTrackUrl)
-    .then(({data}) => (new window.DOMParser()).parseFromString(data, "text/xml"))
-    .then(doc => {
-      const points = [];
-      const nodes = [...doc.getElementsByTagName('trkpt')];
-      nodes.forEach(node => {
-        const lat = parseFloat(node.getAttribute("lat"));
-        const lng = parseFloat(node.getAttribute("lon"));
-
-        console.log(node.childNodes);
-
-        points.push({lat, lng});
-        // speed.value.push(node.getElementsByTagName("extensions").getElementsByTagName("speed"));
-        // elevation.value.push(node.getElementsByTagName("ele").innerText);
-      })
-
-      track.value = points;  // puvodne se bounds bralo z tohodle
-    })
-    .finally(() => gpxLoading.value = false);
-});
-
 
 const bounds = computed(() => {
   const photosTransformed = props.photos.map(p => ({position: {lat: p.gpsLatitude, lng: p.gpsLongitude}}));
@@ -61,22 +38,19 @@ const bounds = computed(() => {
 </script>
 
 <template>
-  <q-spinner v-if="gpxLoading" v-bind="$attrs" />
-
-  speed: {{ speed }}
-  elevation: {{ elevation }}
-
-  <MapWrapper v-bind="$attrs" :bounds="bounds" v-if="!gpxLoading">
+  <MapWrapper v-bind="$attrs" :bounds="bounds">
     <Marker v-for="(marker, idx) in markers" :key="idx" :options="marker"/>
-
     <Marker v-for="(photo, idx) in photos" :key="idx" :options="{icon: '/mapIcons/photo-16x16.png', position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
       <InfoWindow :options="{position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
-        <img :src="photo.thumbnailUrl" />
+        <img :src="photo.thumbnailUrl"/>
       </InfoWindow>
     </Marker>
 
-    <template v-if="track.length > 0">
-      <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
+    <template v-if="gpxTrack && gpxTrack.length > 0">
+      <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
     </template>
+
+    <Marker v-if="highlightPosition" :options="{position: highlightPosition, icon: '/mapIcons/currentPosition32x32.png'}"/>
+
   </MapWrapper>
 </template>
diff --git a/src/components/photos/PhotoDetail.vue b/src/components/photos/PhotoDetail.vue
index 584ed7f..aa0b79c 100644
--- a/src/components/photos/PhotoDetail.vue
+++ b/src/components/photos/PhotoDetail.vue
@@ -1,6 +1,6 @@
 <script setup>
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {computed, onMounted, ref, watch} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {formatDatetime} from "src/composables/datetimeUtils";
 import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
 import {useQuasar} from "quasar";
@@ -28,8 +28,7 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"])
 
-
-const open = computed({
+const isDetailOpened = computed({
   get() {
     return props.modelValue;
   },
@@ -61,16 +60,6 @@ const showDetail = (idx) => {
   photoIndex.value = idx;
 }
 
-const thumbnailsRef = ref(null);
-watch(photoIndex, (newVal) => {
-  if (!thumbnailsRef.value) return;
-  const thumbnailWidth = 200;
-  const thumbnailBarWidth = thumbnailsRef.value.$el.clientWidth;
-  const thumbnailPosition = newVal * thumbnailWidth;
-  const scrollTo = Math.max(0, thumbnailPosition - thumbnailBarWidth/2);
-  thumbnailsRef.value.setScrollPosition("horizontal", scrollTo, 500)
-});
-
 const showExtra = ref(false);
 
 const $q = useQuasar();
@@ -80,94 +69,91 @@ const imageFullscreen = ref(false);
 
 <template>
   <q-dialog
-      v-model="open"
-      full-width
-      :maximized="isMaximized"
+    v-model="isDetailOpened"
+    full-width
+    :maximized="isMaximized"
   >
-    <q-card
-        v-touch-swipe.mouse.left="prevPhoto"
-        v-touch-swipe.mouse.right="nextPhoto"
-        @keyup.left="prevPhoto"
-        @keyup.right="nextPhoto"
-    >
+    <q-card>
       <q-card-section class="bg-black text-white" v-if="isMaximized">
         <div class="row">
           <div class="col">
             <strong>{{ photo.name || defaultTitle }}</strong>
           </div>
-          <div class="col text-right">
-            <q-btn round text-color="white" size="sm" icon="close" @click="open = false"/>
+          <div class="col-1 text-right">
+            <q-btn round text-color="white" size="sm" icon="close" @click="isDetailOpened = false"/>
           </div>
         </div>
-
       </q-card-section>
 
       <q-card-section :class="{'q-pa-none': isMaximized}">
         <div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
-          <div class="text-center">
+          <div
+            class="text-center"
+            v-touch-swipe.mouse.right="prevPhoto"
+            v-touch-swipe.mouse.left="nextPhoto"
+            @keyup.left="prevPhoto"
+            @keyup.right="nextPhoto">
             <inner-image-zoom
-                :move-type="isMaximized ? 'drag' : 'pan'"
-                :zoomScale="0.75"
-                :hide-hint="true"
-                :after-zoom-in="() => imageFullscreen = true"
-                :after-zoom-out="() => imageFullscreen = false"
-                :src="photo.url"
+              :move-type="isMaximized ? 'drag' : 'pan'"
+              :zoomScale="0.75"
+              :hide-hint="true"
+              :after-zoom-in="() => imageFullscreen = true"
+              :after-zoom-out="() => imageFullscreen = false"
+              :src="photo.url"
             />
           </div>
 
           <template v-if="!imageFullscreen">
             <q-btn
-                class="absolute all-pointer-events"
-                round
-                flat
-                icon="info"
-                :text-color="showExtra ? 'primary' : 'white'"
-                style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
-                @click="showExtra = !showExtra"
+              class="absolute all-pointer-events"
+              round
+              flat
+              icon="info"
+              :text-color="showExtra ? 'primary' : 'white'"
+              style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
+              @click="showExtra = !showExtra"
             />
             <q-btn
-                class="absolute all-pointer-events"
-                style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
-                @click="prevPhoto"
-                v-if="photoIndex > 0 && !isMaximized"
-                icon="chevron_left"
-                text-color="white"
-                flat
-                rounded
+              class="absolute all-pointer-events"
+              style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
+              @click="prevPhoto"
+              v-if="photoIndex > 0 && !isMaximized"
+              icon="chevron_left"
+              text-color="white"
+              flat
+              rounded
             />
             <q-btn
-                class="absolute all-pointer-events"
-                style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
-                @click="nextPhoto"
-                v-if="photoIndex < photos.length - 1 && !isMaximized"
-                icon-right="chevron_right"
-                text-color="white"
-                flat
-                rounded
+              class="absolute all-pointer-events"
+              style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
+              @click="nextPhoto"
+              v-if="photoIndex < photos.length - 1 && !isMaximized"
+              icon-right="chevron_right"
+              text-color="white"
+              flat
+              rounded
             />
           </template>
         </div>
 
-        <q-scroll-area ref="thumbnailsRef" style="height: 170px; width: 100%;" v-show="!imageFullscreen">
-          <div class="row no-wrap flex-center">
+        <div class="row" v-show="!imageFullscreen">
+          <div class="col-4 col-md-1 q-pa-sm" v-for="(thumb, idx) in photos" :key="thumb.thumbnailUrl">
             <q-img
-                v-for="(thumb, idx) in photos"
-                :key="thumb.thumbnailUrl"
-                :src="thumb.thumbnailUrl"
-                @click="showDetail(idx)"
-                :style="`width: 150px; ${idx === photoIndex ? 'outline: solid 2px' : ''}`"
-                class="q-ma-sm shadow-5"
+              :src="thumb.thumbnailUrl"
+              @click="showDetail(idx)"
+              :class='{"shadow-5": true, "active-thumbnail": idx === photoIndex}'
             />
           </div>
-        </q-scroll-area>
+
+        </div>
 
         <div class="row">
           <div class="col-12 q-my-md" v-if="showExtra">
             <EmbeddedMap
-                v-if="photo.gpsLatitude && photo.gpsLongitude"
-                class="q-mx-sm"
-                :gps-latitude="photo.gpsLatitude"
-                :gps-longitude="photo.gpsLongitude"
+              v-if="photo.gpsLatitude && photo.gpsLongitude"
+              class="q-mx-sm"
+              :gps-latitude="photo.gpsLatitude"
+              :gps-longitude="photo.gpsLongitude"
             />
 
             <strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
@@ -179,7 +165,7 @@ const imageFullscreen = ref(false);
                   <q-avatar icon="marker"></q-avatar>
                 </q-item-section>
                 <q-item-section>
-                  {{ formatDatetime(photo.exposedAt) }}
+                  {{ photo.pointOfInterest.name }}
                 </q-item-section>
               </q-item>
               <q-item v-if="photo.exposedAt">
@@ -196,7 +182,13 @@ const imageFullscreen = ref(false);
                   <q-avatar icon="height"/>
                 </q-item-section>
                 <q-item-section>
-                  {{ photo.gpsAltitude }} m
+                  Nadmořská výška: {{ photo.gpsAltitude }} m
+                  <br>
+                  <template v-if="photo.terrainElevation">
+                    Výška terénu: {{ photo.terrainElevation }} m
+                    <br>
+                    Výška nad zemí: {{ photo.gpsAltitude - photo.terrainElevation }} m
+                  </template>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -208,6 +200,10 @@ const imageFullscreen = ref(false);
 </template>
 
 <style>
+.active-thumbnail {
+  outline: solid 2px
+}
+
 .iiz {
   width: 100%;
 }
diff --git a/src/components/photos/PhotoFormDialog.vue b/src/components/photos/PhotoFormDialog.vue
index 350b301..6404f6f 100644
--- a/src/components/photos/PhotoFormDialog.vue
+++ b/src/components/photos/PhotoFormDialog.vue
@@ -30,9 +30,7 @@ const setup = (() => {
 
 <template>
   <DialogWrapper :formData="formData" :object-id="photoId" @show="setup">
-    {{ formData }}
     <q-img :src="photo.thumbnailUrl"/>
-
     <q-card-section>
       <FormWrapper :save-button="false">
         <q-input v-model="formData.name" label="Název" v-bind="commonProps"/>
diff --git a/src/graphql/fragments/flight.js b/src/graphql/fragments/flight.js
index 1c95ac6..3ac82fc 100644
--- a/src/graphql/fragments/flight.js
+++ b/src/graphql/fragments/flight.js
@@ -41,8 +41,23 @@ fragment flightFullInfo on Flight {
     id
     name
   }
-
   gpxTrackUrl
+  gpxTrack {
+    coordinates {
+      lat
+      lng
+    }
+    time
+    magneticVariation
+    speed
+    maxSpeed
+    avgSpeed
+    altitude
+    terrainElevation
+    maxAltitude
+    avgAltitude
+  }
+
   track {
     pointOfInterest {
       ...pointOfInterestFullInfo
diff --git a/yarn.lock b/yarn.lock
index 6e29a50..6bf07e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -102,6 +102,11 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -718,6 +723,13 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.0.tgz#df843fdd9ec6bd88d7f07e2b95348d221bd2698c"
+  integrity sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
@@ -2948,6 +2960,11 @@ vite@^2.9.13:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-chartjs@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.2.0.tgz#3d0076ccf8016d1bf8fab5ccd837e7fb81005ded"
+  integrity sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==
+
 vue-demi@*, vue-demi@^0.13.1:
   version "0.13.11"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"