Test jineho vycitani z gpx

src/components/flights/FlightTrackMap.vue

@@ -1,7 +1,7 @@
 <script setup>
 import {flight} from "src/composables/objects/flight";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 
 const props = defineProps({
   flight: {
@@ -15,13 +15,16 @@ const trackWithGPS = 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,
-        lng: flight.value.takeoffAirport.gpsLongitude
+        lat: flight.value.takeoffAirport.gpsLatitude + (slider.value / 1000),
+        lng: flight.value.takeoffAirport.gpsLongitude + (slider.value / 1000)
       }
   }];
 
@@ -56,6 +59,7 @@ const displayMap = computed(() => {
     flight.value.landingAirport.id !== flight.value.takeoffAirport.id
   )
 });
+
 </script>
 
 <template>
@@ -66,4 +70,10 @@ const displayMap = computed(() => {
     :markers="pointsOfInterests"
     :photos="mapPhotos"
   />
+
+  {{ pointsOfInterests }}
+
+  {{ slider }}
+
+  <q-slider v-model.number="slider" :min="-100" :max="100" />
 </template>

src/components/map/MapWithMarkers.vue

@@ -24,6 +24,8 @@ const props = defineProps({
 
 const track = ref([]);
 const gpxLoading = ref(!!props.gpxTrackUrl);
+const speed = ref([]);
+const elevation = ref([]);
 onMounted(() => {
   if (!props.gpxTrackUrl) {
     return;
@@ -37,7 +39,12 @@ onMounted(() => {
       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
@@ -54,7 +61,11 @@ const bounds = computed(() => {
 </script>
 
 <template>
-  <div v-if="gpxLoading" v-bind="$attrs">Loading</div>
+  <q-spinner v-if="gpxLoading" v-bind="$attrs" />
+
+  speed: {{ speed }}
+  elevation: {{ elevation }}
+
   <MapWrapper v-bind="$attrs" :bounds="bounds" v-if="!gpxLoading">
     <Marker v-for="(marker, idx) in markers" :key="idx" :options="marker"/>