From fa72cf804e1fac5432dad69b29de0b17a3579f8b Mon Sep 17 00:00:00 2001
From: John Bowdre <john@bowdre.net>
Date: Fri, 9 Feb 2024 21:47:31 -0600
Subject: [PATCH] make rainfall icon dynamic

---
 tempest.html | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/tempest.html b/tempest.html
index 184df39..dd0543e 100644
--- a/tempest.html
+++ b/tempest.html
@@ -29,6 +29,13 @@
         { upper: Infinity, label: 'hot' }
       ];
 
+      var rainRanges = [
+        { upper: 0.02, label: 'none' },
+        { upper: 0.2, label: 'light' },
+        { upper: 1.4, label: 'moderate' },
+        { upper: Infinity, label: 'heavy' }
+      ]
+
       // weather code inspired by https://kris.omg.lol
       // fetch from API proxy
       fetch('https://paste.jbowdre.lol/tempest.json/raw')
@@ -52,6 +59,7 @@
           tempLabel = (tempRanges.find(range => res.feels_like < range.upper)).label;
           humidity = `${res.relative_humidity}% humidity`;
           wind = `${res.wind_gust}mph (${(res.wind_gust*1.609344).toFixed(1)}kph) from ${(res.wind_direction_cardinal).toLowerCase()}`;
+          precipLabel = (rainRanges.find(range => res.precip_accum_local_day < range.upper)).label;
           precipToday = `${res.precip_accum_local_day}" of rain today`;
           pressureTrend = res.pressure_trend;
           pressure = `${res.station_pressure}inhg and ${pressureTrend}`;
@@ -65,6 +73,7 @@
           document.getElementById('temp').innerHTML = temp;
           document.getElementById('humidity').innerHTML = humidity;
           document.getElementById('wind').innerHTML = wind;
+          document.getElementsByClassName('fa-droplet-slash')[0].classList = CLASS_MAP_RAIN[precipLabel];
           document.getElementById('precipToday').innerHTML = precipToday;
           document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
           document.getElementById('pressure').innerHTML = pressure;
@@ -77,6 +86,14 @@
       'falling': 'fa-solid fa-arrow-trend-down'
       }
 
+      // change the rainfall icon
+      const CLASS_MAP_RAIN = {
+        'none': 'fa-solid fa-droplet-slash',
+        'light': 'fa-solid fa-glass-water-droplet',
+        'moderate': 'fa-solid fa-glass-water',
+        'heavy': 'fa-solid fa-bucket'
+      }
+
       // change the temperature icon
       const CLASS_MAP_TEMP = {
       'hot': 'fa-solid fa-thermometer-full',
@@ -116,7 +133,7 @@
       <li>Temperature: <i class='fa-solid fa-temperature-half'></i> <span id="temp"></span></li>
       <li>Humidity: <span id="humidity"></span></li>
       <li>Wind: <span id="wind"></span></li>
-      <li>Precipitation: <span id="precipToday"></span></li>
+      <li>Precipitation: <i class='fa-solid fa-droplet-slash'></i><span id="precipToday"></span></li>
       <li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure"></span></li>
       <li><i>Last Update: <span id="time"></span></i></li>
   </body>