Vertikalni profil trasy - zaklad

src/components/flightPlans/FlightPlanMap.vue

@@ -43,12 +43,12 @@ const handleMarkerClick = (marker) => {
 }
 
 const markers = ref([]);
-watch(() => props.flightPlan.track, (newVal) => {
+watch(() => props.flightPlan.navlog, (newVal) => {
   markers.value = getMarkersFrom(props.flightPlan);
 }, {immediate: true, deep: true});
 
 const track = computed(() => markers.value.map(m => ({lat: m.gpsLatitude, lng: m.gpsLongitude})));
-const trackAids = computed(() => props.flightPlan.track.map(p => ({
+const trackAids = computed(() => props.flightPlan.navlog.map(p => ({
     ...p,
     anchorPoint: 'CENTER',
     bearing: p.bearing,

src/components/flightPlans/FlightPlanRouteTable.vue

@@ -47,7 +47,7 @@ const columns = [
 
 const {getDuration, getTotalDuration, getTotalDistance} = useFlightPlanCalculations();
 
-const data = computed(() => props.flightPlan.track.map((item) => ({
+const data = computed(() => props.flightPlan.navlog.map((item) => ({
   from: textEllipsis(item.from.name, 30),
   to: textEllipsis(item.to.name, 30),
   distance: `${item.distance} km`,

src/components/flightPlans/FlightPlanSideControls.vue

@@ -48,7 +48,7 @@ const totalDistance = computed(() => getTotalDistance(props.flightPlan));
     </q-item>
 
     <q-scroll-area class="mobile-hide" style="height: 55vh">
-      <template v-for="(segment, i) in props.flightPlan.track" :key="segment">
+      <template v-for="(segment, i) in props.flightPlan.navlog" :key="segment">
         <q-item dense>
           <q-item-section>
             <q-item-label>{{ segment.from.name }}</q-item-label>
@@ -70,7 +70,7 @@ const totalDistance = computed(() => getTotalDistance(props.flightPlan));
           </q-item-section>
         </q-item>
 
-        <q-item dense v-if="segment.to && i === props.flightPlan.track.length - 1">
+        <q-item dense v-if="segment.to && i === props.flightPlan.navlog.length - 1">
           <q-item-section>
             <q-item-label>
               {{ segment.to.name }}
@@ -79,15 +79,15 @@ const totalDistance = computed(() => getTotalDistance(props.flightPlan));
         </q-item>
       </template>
       <q-item>
-        <q-item-section v-if="flightPlan.track.length">
+        <q-item-section v-if="flightPlan.navlog.length">
           <div>
             <q-btn
-              @click="emits('change-insert-position', flightPlan.track.length + 1)"
+              @click="emits('change-insert-position', flightPlan.navlog.length + 1)"
               icon="add"
               size="sm"
-              :color="insertPosition === flightPlan.track.length + 1? 'primary' : 'grey'"
+              :color="insertPosition === flightPlan.navlog.length + 1? 'primary' : 'grey'"
             >
-              <template v-if="insertPosition === flightPlan.track.length + 1">Přidávám na konec</template>
+              <template v-if="insertPosition === flightPlan.navlog.length + 1">Přidávám na konec</template>
             </q-btn>
           </div>
         </q-item-section>

src/components/flightPlans/FlightPlanVerticalProfile.vue

@@ -0,0 +1,45 @@
+<template>
+  <Line :data="chartAltitudeData" :options="chartOptions"/>
+</template>
+
+<script setup>
+import {Line} from "vue-chartjs";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  }
+});
+
+const timestamp = props.flightPlan.track.points.map(i => i.timestamp);
+const terrainElevation = props.flightPlan.track.points.map(i => i.terrainElevation || 0);
+
+
+const chartOptions = {
+  plugins: {
+    tooltip: {
+      mode: 'index',
+      intersect: false,
+    }
+  },
+}
+const chartLabels = timestamp.map(t => {
+  // TODO: zakomponovat i nazvy otocnych bodu
+  const datetime = new Date(t);
+  return datetime.getHours() + ":" + datetime.getMinutes();
+});
+
+
+const chartAltitudeData = {
+  labels: chartLabels,
+  datasets: [{
+    backgroundColor: "rgba(148,94,40,0.7)",
+    borderColor: "#945e28",
+    label: "Nadmořská výška země (m)",
+    data: terrainElevation,
+    fill: true,
+    pointRadius: 1,
+  }]
+};
+</script>

src/composables/flightPlan.js

@@ -10,11 +10,11 @@ export const useFlightPlanUtils = () => {
   }
 
   const getMarkersFrom = (flightPlan) => {
-    const segments = flightPlan.track.length;
+    const segments = flightPlan.navlog.length;
 
-    const markers = flightPlan.track.map(m => m.from);
+    const markers = flightPlan.navlog.map(m => m.from);
-    if (segments > 0 && flightPlan.track[segments - 1].to) {
+    if (segments > 0 && flightPlan.navlog[segments - 1].to) {
-      markers.push(flightPlan.track[segments - 1].to);
+      markers.push(flightPlan.navlog[segments - 1].to);
     }
 
     return markers;
@@ -27,16 +27,16 @@ export const useFlightPlanCalculations = () => {
   const getDuration = (distance, speed) => Math.round(distance / speed * 60)
 
   const getTotalDistance = (flightPlan) => {
-    if (!flightPlan.track.length) return null;
+    if (!flightPlan.navlog.length) return null;
 
-    return Math.round(flightPlan.track.map(t => t.distance).reduce((a, b) => a + b));
+    return Math.round(flightPlan.navlog.map(t => t.distance).reduce((a, b) => a + b));
   }
 
   const getTotalDuration = (flightPlan, plannedSpeed = undefined) => {
     if (!plannedSpeed) plannedSpeed = flightPlan.plannedSpeed;
-    if (!flightPlan.track.length) return null;
+    if (!flightPlan.navlog.length) return null;
 
-    return flightPlan.track.map(t => getDuration(t.distance, plannedSpeed)).reduce((a, b) => a + b)
+    return flightPlan.navlog.map(t => getDuration(t.distance, plannedSpeed)).reduce((a, b) => a + b)
   }
 
   return {getDuration, getTotalDistance, getTotalDuration}

src/graphql/fragments/flightPlan.js

@@ -32,7 +32,7 @@ fragment flightPlanFullInfo on FlightPlan {
       thumbnailUrl
     }
   }
-  track {
+  navlog {
     bearing
     distance
     from {
@@ -42,6 +42,15 @@ fragment flightPlanFullInfo on FlightPlan {
       ...flightPlanMarker
     }
   }
+
+  track {
+    points {
+      gpsLatitude
+      gpsLongitude
+      timestamp
+      terrainElevation
+    }
+  }
 }
 
 ${FRAGMENT_FLIGHT_PLAN_MARKER}

src/pages/profile/flightPlanner/FlightPlanEditPage.vue

@@ -28,6 +28,7 @@ import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
 import FlightFromPlanForm from "components/flightPlans/FlightFromPlanForm.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import FlightPlanVerticalProfile from "components/flightPlans/FlightPlanVerticalProfile.vue";
 
 const {flightPlan} = storeToRefs(useFlightPlansStore());
 const flightPlanName = computed(() => flightPlan.value.name || "Nepojmenovaný plán");
@@ -161,6 +162,12 @@ const createNewFlightFromPlan = (formData) => {
       Navigační štítek
     </q-tab>
 
+
+    <q-tab name="verticalProfile">
+      <q-icon name="navigation"/>
+      Výškový profil
+    </q-tab>
+
     <q-tab name="flight" v-if="flightPlan.aircraft">
       <q-icon name="flight"/>
       Let
@@ -214,6 +221,10 @@ const createNewFlightFromPlan = (formData) => {
       />
     </q-tab-panel>
 
+    <q-tab-panel name="verticalProfile">
+      <FlightPlanVerticalProfile :flight-plan="flightPlan" />
+    </q-tab-panel>
+
     <q-tab-panel name="flight" v-if="flightPlan.aircraft">
       <BasicInfoBanner v-if="!takeoffAirport || !landingAirport" color="error">
         V plánu nemáš žádné letiště vzletu nebo přistání. Pro import letu musíš nahrát trasu.