From c2f112dfc97bb5dc5004e93c7cd7c45a83fca013 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Fri, 20 Dec 2024 17:59:39 +0000
Subject: [PATCH] Add wind and pressure to kiosk

---
 WebDisplay/components.d.ts                    |  1 +
 WebDisplay/src/components/CurrentWeather.vue  | 50 ++----------------
 .../src/components/PressureTrendArrow.vue     | 52 +++++++++++++++++++
 WebDisplay/src/pages/kiosk.vue                | 28 +++++++++-
 4 files changed, 85 insertions(+), 46 deletions(-)
 create mode 100644 WebDisplay/src/components/PressureTrendArrow.vue

diff --git a/WebDisplay/components.d.ts b/WebDisplay/components.d.ts
index b5ea2fc..4e1d418 100644
--- a/WebDisplay/components.d.ts
+++ b/WebDisplay/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     IndoorSummary: typeof import('./src/components/IndoorSummary.vue')['default']
     LongPressButton: typeof import('./src/components/LongPressButton.vue')['default']
     NationalDays: typeof import('./src/components/NationalDays.vue')['default']
+    PressureTrendArrow: typeof import('./src/components/PressureTrendArrow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TimeRange: typeof import('./src/components/TimeRange.vue')['default']
diff --git a/WebDisplay/src/components/CurrentWeather.vue b/WebDisplay/src/components/CurrentWeather.vue
index 920d4e9..bbbf555 100644
--- a/WebDisplay/src/components/CurrentWeather.vue
+++ b/WebDisplay/src/components/CurrentWeather.vue
@@ -1,28 +1,10 @@
 <script setup lang="ts">
     import { useWeatherStore } from '@/stores/weatherStore';
-    import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
     import { ShortenWindDirection } from '@/windFormatter';
+    import PressureTrendArrow from './PressureTrendArrow.vue';
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
-
-    const rotationClass = (pressureDifference: number | undefined) => {
-        if (!pressureDifference) {
-            return '';
-        } else if (Math.abs(pressureDifference) <= 1.0) {
-            return '';
-        } else if (pressureDifference > 1.0 && pressureDifference <= 2.0) {
-            return 'up-low';
-        } else if (pressureDifference > 2.0) {
-            return 'up-high';
-        } else if (pressureDifference < -1.0 && pressureDifference >= -2.0) {
-            return 'down-low';
-        } else if (pressureDifference < -2.0) {
-            return 'down-high';
-        }
-
-        return '';
-    };
 </script>
 
 <template>
@@ -65,13 +47,10 @@
                     <tr>
                         <td className="weather-current-header">Pressure</td>
                         <td colspan="3">
-                            {{ weatherStore.current?.Pressure && ConvertPascalToInchesOfMercury(weatherStore.current?.Pressure)?.toFixed(2) }}"
-                            <span
+                            {{ weatherStore.current?.Pressure && (weatherStore.current?.Pressure / 100).toFixed(2) }} mbar
+                            <PressureTrendArrow
                                 class="pressure-trend-arrow"
-                                :class="rotationClass(weatherStore.current?.PressureDifferenceThreeHour)"
-                                :title="'3 Hour Change: ' + weatherStore.current?.PressureDifferenceThreeHour?.toFixed(1)">
-                                ➜
-                            </span>
+                                :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
                         </td>
                     </tr>
                     <tr>
@@ -115,25 +94,6 @@
     }
 
     .pressure-trend-arrow {
-        display: inline-block;
-        position: relative;
-        left: 6px;
-        transform: scale(1.25);
-    }
-
-    .down-high {
-        transform: rotate(60deg) scale(1.25);
-    }
-
-    .down-low {
-        transform: rotate(25deg) scale(1.25);
-    }
-
-    .up-high {
-        transform: rotate(-60deg) scale(1.25);
-    }
-
-    .up-low {
-        transform: rotate(-25deg) scale(1.25);
+        scale: 1.25;
     }
 </style>
diff --git a/WebDisplay/src/components/PressureTrendArrow.vue b/WebDisplay/src/components/PressureTrendArrow.vue
new file mode 100644
index 0000000..4108aa4
--- /dev/null
+++ b/WebDisplay/src/components/PressureTrendArrow.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+    const props = defineProps(['pressureDifference']);
+
+    function rotationClass(pressureDifference: number | undefined) {
+        if (!pressureDifference) {
+            return '';
+        } else if (Math.abs(pressureDifference) <= 1.0) {
+            return '';
+        } else if (pressureDifference > 1.0 && pressureDifference <= 2.0) {
+            return 'up-low';
+        } else if (pressureDifference > 2.0) {
+            return 'up-high';
+        } else if (pressureDifference < -1.0 && pressureDifference >= -2.0) {
+            return 'down-low';
+        } else if (pressureDifference < -2.0) {
+            return 'down-high';
+        }
+
+        return '';
+    }
+</script>
+
+<template>
+    <span
+        class="pressure-trend-arrow"
+        :class="rotationClass(props.pressureDifference)"
+        :title="'3 Hour Change: ' + props.pressureDifference.toFixed(1)">
+        ➜
+    </span>
+</template>
+
+<style scoped>
+    .pressure-trend-arrow {
+        display: inline-block;
+    }
+
+    .down-high {
+        transform: rotate(60deg);
+    }
+
+    .down-low {
+        transform: rotate(25deg);
+    }
+
+    .up-high {
+        transform: rotate(-60deg);
+    }
+
+    .up-low {
+        transform: rotate(-25deg);
+    }
+</style>
diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index 6543bda..de581d3 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -4,8 +4,10 @@
     import { useLaundryStore } from '@/stores/laundryStore';
     import { usePowerStore } from '@/stores/powerStore';
     import { useHomeAssistantStore } from '@/stores/homeAssistantStore';
+    import { ShortenWindDirection } from '@/windFormatter';
     import CalendarAgenda from '@/components/CalendarAgenda.vue';
     import LongPressButton from '@/components/LongPressButton.vue';
+    import PressureTrendArrow from '@/components/PressureTrendArrow.vue';
 
     const weatherStore = useWeatherStore();
     weatherStore.start();
@@ -63,6 +65,19 @@
                 v-if="weatherStore.current">
                 {{ weatherStore.current?.Humidity?.toFixed(0) + '%' }}
             </div>
+            <div
+                class="kiosk-wind text-center pb-3"
+                v-if="weatherStore.current">
+                {{ weatherStore.current?.WindSpeed?.toFixed(0) + '&hairsp;' + ShortenWindDirection(weatherStore.current?.WindDirection) }}
+            </div>
+            <div
+                class="kiosk-pressure text-center pb-3"
+                v-if="weatherStore.current">
+                <span>
+                    {{ (weatherStore.current?.Pressure! / 100).toFixed(0) }}
+                </span>
+                <PressureTrendArrow :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
+            </div>
             <div
                 class="kiosk-generation text-center pt-4"
                 v-if="powerStore.current">
@@ -170,7 +185,7 @@
 
         display: grid;
         grid-template-columns: repeat(2, 50%);
-        grid-template-rows: repeat(6, auto) 1fr;
+        grid-template-rows: repeat(7, auto) 1fr;
         grid-column-gap: 0px;
         grid-row-gap: 0px;
 
@@ -178,6 +193,7 @@
             'kiosk-time kiosk-time'
             'kiosk-date kiosk-date'
             'kiosk-temperature kiosk-humidity'
+            'kiosk-wind kiosk-pressure'
             'kiosk-generation kiosk-consumption'
             'kiosk-washer kiosk-dryer'
             'kiosk-garage-door kiosk-house-alarm';
@@ -218,6 +234,16 @@
         grid-area: kiosk-humidity;
     }
 
+    .kiosk-wind {
+        font-size: 2rem;
+        grid-area: kiosk-wind;
+    }
+
+    .kiosk-pressure {
+        font-size: 2rem;
+        grid-area: kiosk-pressure;
+    }
+
     .kiosk-generation {
         grid-area: kiosk-generation;
     }