From 46499f0d12f58d9fe030a05a7280531ee2393cf6 Mon Sep 17 00:00:00 2001
From: John Bowdre <john@bowdre.net>
Date: Thu, 8 Feb 2024 21:46:09 -0600
Subject: [PATCH] add test weather page

---
 weather_test.html | 85 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 weather_test.html
diff --git a/weather_test.html b/weather_test.html
new file mode 100644
index 0000000..ab148d8
--- /dev/null
+++ b/weather_test.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous">
+    <title>Weather Test</title>
+    <script>
+      // based on https://kris.omg.lol
+      // fetch from API proxy
+      fetch('https://paste.jbowdre.lol/tempest.json/raw')
+        .then(res => res.json())
+        .then(function(res){
+
+          // format data
+          localTime = res.time;
+          var localTime = parseInt(localTime);
+          var localTime = localTime*1000;
+          var localTime = new Date(localTime);
+          var localDate = localTime.toLocaleDateString();
+          var localTime = localTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false});
+          var localTime =  localDate + " " + localTime;
+          conditions = res.conditions;
+          temp = (res.air_temperature)+ "° F ("+(((res.air_temperature-32)*5)/9).toFixed(1) + "° C)";
+          humidity = res.relative_humidity + "%";
+          wind = res.wind_gust + " mph (" + (res.wind_gust*1.609344).toFixed(1)+ " kph) " + res.wind_direction_cardinal;
+          precipToday = res.precip_accum_local_day + " in";
+          pressureTrend = res.pressure_trend;
+          pressure = (res.station_pressure).toFixed(2) + " inHg and " + pressureTrend.slice(0,1).toUpperCase() + pressureTrend.slice(1);
+          icon = res.icon;
+
+          // display data
+          document.getElementById('time').innerHTML = localTime;
+          document.getElementsByClassName('fa-cloud-sun-rain')[0].classList = CLASS_MAP_WX[icon];
+          document.getElementById('conditions').innerHTML = conditions;
+          document.getElementById('temp').innerHTML = temp;
+          document.getElementById('humidity').innerHTML = humidity;
+          document.getElementById('wind').innerHTML = wind;
+          document.getElementById('precipToday').innerHTML = precipToday;
+          document.getElementsByClassName('fa-arrow-right-long')[0].classList = CLASS_MAP_PRESS[pressureTrend];
+          document.getElementById('pressure').innerHTML = pressure;
+        });
+
+      // change the pressure icon
+      const CLASS_MAP_PRESS = {
+      'steady': 'fa-solid fa-arrow-right-long',
+      'rising': 'fa-solid fa-arrow-trend-up',
+      'falling': 'fa-solid fa-arrow-trend-down'
+      }
+
+      // Change the weather icon
+      const CLASS_MAP_WX = {
+      'clear-day': 'fa-solid fa-sun',
+      'clear-night': 'fa-solid fa-moon',
+      'cloudy': 'fa-solid fa-cloud',
+      'foggy': 'fa-solid fa-cloud-showers-smog',
+      'partly-cloudy-day': 'fa-solid fa-clouds-sun',
+      'partly-cloudy-night': 'fa-solid fa-clouds-moon',
+      'possibly-rainy-day': 'fa-solid fa-cloud-sun-rain',
+      'possibly-rainy-night': 'fa-solid fa-cloud-moon-rain',
+      'possibly-sleet-day': 'fa-solid fa-cloud-meatball',
+      'possibly-sleet-night': 'fa-solid fa-cloud-moon-rain',
+      'possibly-snow-day': 'fa-solid fa-snowflake',
+      'possibly-snow-night': 'fa-solid fa-snowflake',
+      'possibly-thunderstorm-day': 'fa-solid fa-cloud-bolt',
+      'possibly-thunderstorm-night': 'fa-solid fa-cloud-bolt',
+      'rainy': 'fa-solid fa-cloud-showers-heavy',
+      'sleet': 'fa-solid fa-cloud-rain',
+      'snow': 'fa-solid fa-snowflake',
+      'thunderstorm': 'fa-solid fa-cloud-bolt',
+      'windy': 'fa-solid fa-wind',
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Huntsville Wx</h1>
+    <ul>
+      <li>Conditions: <i class='fa-solid fa-cloud-sun-rain'></i><span id="conditions"></span></li>
+      <li>Temperature: <span id="temp"></span></li>
+      <li>Humidity: <span id="humidity"></span></li>
+      <li>Wind: <span id="wind"></span></li>
+      <li>Precipitation Today: <span id="precipToday"></span></li>
+      <li>Pressure: <i class='fa-solid fa-arrow-right-long'></i><span id="pressure"></span></li>
+      <li><i style="font-size:0.9rem;font-style:italic">Last Update: <span id="time"></span></i></li>
+  </body>
+</html>
\ No newline at end of file
