From 786c59cc4a577f816af33884ba509faa1b723ccf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Kv=C3=A1=C4=8Dek?= <michal.kvacek@performax.cz>
Date: Mon, 9 Sep 2024 17:41:34 +0200
Subject: [PATCH] Zobrazeni pocasi po trase planu

---
 ...uteTable.vue => FlightPlanNavLogTable.vue} |  1 -
 .../flightPlans/FlightPlanWeatherInfo.vue     | 97 +++++++++++++++++++
 src/components/weather/WeatherInfo.vue        |  5 +-
 src/composables/units.js                      |  9 +-
 src/graphql/fragments/flightPlan.js           |  7 ++
 .../flightPlanner/FlightPlanEditPage.vue      | 14 ++-
 .../public/pilotProfile/FlightPlanDetail.vue  |  2 +-
 7 files changed, 126 insertions(+), 9 deletions(-)
 rename src/components/flightPlans/{FlightPlanRouteTable.vue => FlightPlanNavLogTable.vue} (98%)
 create mode 100644 src/components/flightPlans/FlightPlanWeatherInfo.vue

diff --git a/src/components/flightPlans/FlightPlanRouteTable.vue b/src/components/flightPlans/FlightPlanNavLogTable.vue
similarity index 98%
rename from src/components/flightPlans/FlightPlanRouteTable.vue
rename to src/components/flightPlans/FlightPlanNavLogTable.vue
index 169e336..dc52535 100644
--- a/src/components/flightPlans/FlightPlanRouteTable.vue
+++ b/src/components/flightPlans/FlightPlanNavLogTable.vue
@@ -18,7 +18,6 @@ const props = defineProps({
 
 const columns = [
   {
-    // name: 'from',
     label: 'Z',
     align: "left",
     field: 'from'
diff --git a/src/components/flightPlans/FlightPlanWeatherInfo.vue b/src/components/flightPlans/FlightPlanWeatherInfo.vue
new file mode 100644
index 0000000..a0e8088
--- /dev/null
+++ b/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>
diff --git a/src/components/weather/WeatherInfo.vue b/src/components/weather/WeatherInfo.vue
index 9d3bd9f..0c36955 100644
--- a/src/components/weather/WeatherInfo.vue
+++ b/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>
diff --git a/src/composables/units.js b/src/composables/units.js
index 18c2c1d..1674b46 100644
--- a/src/composables/units.js
+++ b/src/composables/units.js
@@ -1,3 +1,8 @@
-export const ktToKph = (speedInKt) => {
-  return speedInKt;
+export const useUnitsConvertors = () => {
+
+  const kmhToKnots = (speedKmh) => {
+    return Math.round(speedKmh * 0.53996);
+  }
+
+  return {kmhToKnots}
 }
diff --git a/src/graphql/fragments/flightPlan.js b/src/graphql/fragments/flightPlan.js
index cf2c0db..4f99af8 100644
--- a/src/graphql/fragments/flightPlan.js
+++ b/src/graphql/fragments/flightPlan.js
@@ -1,4 +1,5 @@
 import gql from "graphql-tag";
+import {FRAGMENT_WEATHER_FULL_INFO} from "src/graphql/fragments/flight";
 
 export const FRAGMENT_FLIGHT_PLAN_MARKER = gql`
 fragment flightPlanMarker on FlightPlanMarker {
@@ -9,7 +10,13 @@ fragment flightPlanMarker on FlightPlanMarker {
   gpsLongitude
   pointOfInterestId
   airportId
+
+  weatherInfo {
+    ...weatherFullInfo
+  }
 }
+
+${FRAGMENT_WEATHER_FULL_INFO}
 `
 
 export const FRAGMENT_FLIGHT_PLAN_FULL_INFO = gql`
diff --git a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
index 1f4abe4..90a7497 100644
--- a/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
+++ b/src/pages/profile/flightPlanner/FlightPlanEditPage.vue
@@ -22,12 +22,13 @@ import FlightPlanSideControls from "components/flightPlans/FlightPlanSideControl
 import {useAircraftsStore} from "stores/Aircrafts";
 import {errorObject, successObject} from "src/composables/dialog";
 import {useQuasar} from "quasar";
-import FlightPlanRouteTable from "components/flightPlans/FlightPlanRouteTable.vue";
+import FlightPlanNavLogTable from "components/flightPlans/FlightPlanNavLogTable.vue";
 import FlightPlanForm from "components/flightPlans/FlightPlanForm.vue";
 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 FlightPlanWeatherInfo from "components/flightPlans/FlightPlanWeatherInfo.vue";
 
 const {flightPlan} = storeToRefs(useFlightPlansStore());
 const flightPlanName = computed(() => flightPlan.value.name || "Nepojmenovaný plán");
@@ -156,6 +157,11 @@ const createNewFlightFromPlan = (formData) => {
       Informace
     </q-tab>
 
+     <q-tab name="weather">
+      <q-icon name="mdi-weather-windy"/>
+      Počasí
+    </q-tab>
+
     <q-tab name="navLog">
       <q-icon name="navigation"/>
       Navigační štítek
@@ -208,12 +214,16 @@ const createNewFlightFromPlan = (formData) => {
     </q-tab-panel>
 
     <q-tab-panel name="navLog">
-      <FlightPlanRouteTable
+      <FlightPlanNavLogTable
         :flight-plan="flightPlan"
         :planned-speed="flightPlan.plannedSpeed"
       />
     </q-tab-panel>
 
+    <q-tab-panel name="weather">
+      <FlightPlanWeatherInfo :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.
diff --git a/src/pages/public/pilotProfile/FlightPlanDetail.vue b/src/pages/public/pilotProfile/FlightPlanDetail.vue
index 5179ff1..89e9804 100644
--- a/src/pages/public/pilotProfile/FlightPlanDetail.vue
+++ b/src/pages/public/pilotProfile/FlightPlanDetail.vue
@@ -21,7 +21,7 @@ import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {useAirportsStore} from "stores/Airports";
 import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {useFlightPlanCalculations, useFlightPlanUtils} from "src/composables/flightPlan";
-import FlightPlanRouteTable from "components/flightPlans/FlightPlanRouteTable.vue";
+import FlightPlanRouteTable from "components/flightPlans/FlightPlanNavLogTable.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";