Vertikalni profil trasy - zaklad

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/graphql/fragments/flightPlan.js

@@ -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.