From 04a1bacb2b5b8acd475a76881eb23b60871af56e Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Sat, 21 Dec 2024 23:56:21 +0000
Subject: [PATCH] Add temperature "feels like" toggle

---
 WebDisplay/src/pages/kiosk.vue | 35 +++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index 0466ea3..43853fb 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -9,6 +9,8 @@
     import LongPressButton from '@/components/LongPressButton.vue';
     import PressureTrendArrow from '@/components/PressureTrendArrow.vue';
 
+    const showFeelsLike = ref(false);
+
     const weatherStore = useWeatherStore();
     weatherStore.start();
 
@@ -39,6 +41,26 @@
         }
     }
 
+    function getTemperature(): string {
+        if (showFeelsLike.value && weatherStore.current?.WindChill) {
+            return weatherStore.current?.WindChill?.toFixed(0) + '°';
+        } else if (showFeelsLike.value && weatherStore.current?.HeatIndex) {
+            return weatherStore.current?.HeatIndex?.toFixed(0) + '°';
+        } else {
+            return weatherStore.current?.Temperature?.toFixed(0) + '°';
+        }
+    }
+
+    function getTemperatureClass(): string {
+        if (showFeelsLike.value && weatherStore.current?.WindChill) {
+            return 'temperature-wind-chill';
+        } else if (showFeelsLike.value && weatherStore.current?.HeatIndex) {
+            return 'temperature-heat-index';
+        } else {
+            return '';
+        }
+    }
+
     setInterval(() => (currentTime.value = new Date()), 1000);
 </script>
 
@@ -57,8 +79,10 @@
             </div>
             <div
                 class="kiosk-temperature text-center pb-3"
+                :class="getTemperatureClass()"
+                @click="showFeelsLike = !showFeelsLike"
                 v-if="weatherStore.current">
-                {{ weatherStore.current?.Temperature?.toFixed(0) + '°' }}
+                {{ getTemperature() }}
             </div>
             <div
                 class="kiosk-humidity text-center pb-3"
@@ -285,6 +309,7 @@
     .kiosk-national-days {
         grid-area: kiosk-national-days;
         overflow: auto;
+        scrollbar-width: thin;
     }
 
     .warning {
@@ -294,4 +319,12 @@
     .normal {
         color: #208b20;
     }
+
+    .temperature-wind-chill {
+        color: #4d4dff;
+    }
+
+    .temperature-heat-index {
+        color: #ff4d4d;
+    }
 </style>