Zobrazeni pocasi po trase planu

src/components/flightPlans/FlightPlanNavLogTable.vue

@@ -18,7 +18,6 @@ const props = defineProps({
 
 const columns = [
   {
-    // name: 'from',
     label: 'Z',
     align: "left",
     field: 'from'

src/components/flightPlans/FlightPlanWeatherInfo.vue

@@ -0,0 +1,97 @@
+<script setup>
+
+import {computed} from "vue";
+import {textEllipsis} from "src/composables/utils";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useFlightPlanUtils} from "src/composables/flightPlan";
+import {useQuasar} from "quasar";
+import {useUnitsConvertors} from "src/composables/units";
+import CloudCoverIcon from "components/weather/CloudCoverIcon.vue";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  }
+})
+
+
+const columns = [
+
+  {
+    label: 'Místo',
+    align: "left",
+    name: 'place',
+  },
+  {
+    align: 'right',
+    label: 'Teplota',
+    name: 'temperature',
+  },
+  {
+    align: 'right',
+    label: 'Vítr',
+    name: 'wind',
+  },
+  {
+    align: 'right',
+    label: 'Oblačnost',
+    name: 'clouds',
+  },
+];
+
+const {screen} = useQuasar();
+const {getMarkersFrom} = useFlightPlanUtils();
+const {kmhToKnots} = useUnitsConvertors();
+
+const markers = getMarkersFrom(props.flightPlan);
+</script>
+
+<template>
+  <q-table
+    :grid="screen.xs"
+    :dense="screen.lt.md"
+    flat bordered
+    hide-bottom
+    :title="flightPlan.name"
+    :rows="markers"
+    :columns="columns"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:body-cell-place="props">
+      <q-td :props="props">
+        {{ props.row.name }}
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-temperature="props">
+      <q-td :props="props">
+        {{ props.row.weatherInfo.temperatureSurface }}° C
+        <br>
+        Rosný bod {{ props.row.weatherInfo.dewpointSurface }}° C
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-wind="props">
+      <q-td :props="props">
+        <q-icon name="navigation" :style="`transform: rotate(${props.row.weatherInfo.windDirectionSurface}deg)`"/>
+        <br>
+        {{ props.row.weatherInfo.windDirectionSurface }}°
+        <br>
+        {{ kmhToKnots(props.row.weatherInfo.windSpeedSurface) }} kt
+      </q-td>
+    </template>
+
+    <template v-slot:body-cell-clouds="props">
+      <q-td :props="props">
+            <CloudCoverIcon :cloudcover="props.row.weatherInfo.cloudcoverTotal"/>
+        <br>
+        celkové pokrytí oblačností {{ props.row.weatherInfo.cloudcoverTotal }} %
+        <br>
+        nízké mraky {{ props.row.weatherInfo.cloudcoverLow }} %
+      </q-td>
+    </template>
+
+
+  </q-table>
+</template>

src/components/weather/WeatherInfo.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {ref} from "vue";
 import CloudCoverIcon from "components/weather/CloudCoverIcon.vue";
+import {useUnitsConvertors} from "src/composables/units";
 
 const props = defineProps({
   weather: {
@@ -9,9 +10,7 @@ const props = defineProps({
   }
 })
 
-const kmhToKnots = (speedKmh) => {
-  return Math.round(speedKmh * 0.53996);
-}
+const {kmhToKnots} = useUnitsConvertors();
 
 const openDetail = ref(false);
 </script>