From ab5f5d2dfc41b2da053aeceef5ff956220e722f8 Mon Sep 17 00:00:00 2001
From: JoshBaneyCS <joshnbaney@gmail.com>
Date: Wed, 23 Apr 2025 02:07:21 +0000
Subject: [PATCH] Update public/trends.html

---
 public/trends.html | 105 ++++++++++++++++++++++++++++-----------------
 1 file changed, 65 insertions(+), 40 deletions(-)
diff --git a/public/trends.html b/public/trends.html
index b0392ed..11045ae 100644
--- a/public/trends.html
+++ b/public/trends.html
@@ -1,53 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="/favicon.ico">
-  <link rel="stylesheet" href="styles.css">
-  <title>Trend Graph</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="styles.css" />
+  <!-- DataTables CSS for table styling, sorting arrows, etc. -->
+  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
+  <title>Trend Graph & Table</title>
 </head>
 <body>
-<header class="main-header">
-  <img src="/image/logo.png" class="logo" alt="Amazon Logo">
-  <span class="header-title"> | Fuego - Heat Tracker</span>
-  <button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
-  <button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
-  <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
-</header>
+  <header class="main-header">
+    <img src="/image/logo.png" class="logo" alt="Amazon Logo" />
+    <span class="header-title"> | Fuego - Heat Tracker</span>
+    <button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
+    <button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
+    <button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
+  </header>
 
-<div class="page-container">
-  <h1>Trend Analysis</h1>
+  <div class="page-container">
+    <h1>Trend Analysis</h1>
 
-  <div id="trend-controls" style="text-align:center; margin-bottom:1rem;">
-    <!-- Interval slider -->
-    <label for="periodSlider">Interval: <strong><span id="periodLabel">Daily</span></strong></label><br/>
-    <input type="range" id="periodSlider" min="0" max="4" step="1" value="1">
+    <div id="trend-controls" style="text-align:center; margin-bottom:1rem;">
+      <!-- Interval slider -->
+      <label for="periodSlider">
+        Interval: <strong><span id="periodLabel">Daily</span></strong>
+      </label><br/>
+      <input type="range" id="periodSlider" min="0" max="4" step="1" value="1" />
 
-    <!-- Metric/stat toggles -->
-    <div id="metricToggles" style="margin-top:1rem;">
-      <!-- temperature -->
-      <label><input type="checkbox" data-metric="temp" data-stat="avg" checked> Temp Avg</label>
-      <label><input type="checkbox" data-metric="temp" data-stat="min" checked> Temp Min</label>
-      <label><input type="checkbox" data-metric="temp" data-stat="max" checked> Temp Max</label>
-      <!-- humidity -->
-      <label><input type="checkbox" data-metric="hum"  data-stat="avg" checked> Hum Avg</label>
-      <label><input type="checkbox" data-metric="hum"  data-stat="min" checked> Hum Min</label>
-      <label><input type="checkbox" data-metric="hum"  data-stat="max" checked> Hum Max</label>
-      <!-- heat index -->
-      <label><input type="checkbox" data-metric="hi"   data-stat="avg" checked> HI Avg</label>
-      <label><input type="checkbox" data-metric="hi"   data-stat="min" checked> HI Min</label>
-      <label><input type="checkbox" data-metric="hi"   data-stat="max" checked> HI Max</label>
+      <!-- Metric/stat toggles -->
+      <div id="metricToggles" style="margin-top:1rem;">
+        <label><input type="checkbox" data-metric="temp" data-stat="avg" checked /> Temp Avg</label>
+        <label><input type="checkbox" data-metric="temp" data-stat="min" checked /> Temp Min</label>
+        <label><input type="checkbox" data-metric="temp" data-stat="max" checked /> Temp Max</label>
+        <label><input type="checkbox" data-metric="hum"  data-stat="avg" checked /> Hum Avg</label>
+        <label><input type="checkbox" data-metric="hum"  data-stat="min" checked /> Hum Min</label>
+        <label><input type="checkbox" data-metric="hum"  data-stat="max" checked /> Hum Max</label>
+        <label><input type="checkbox" data-metric="hi"   data-stat="avg" checked /> HI Avg</label>
+        <label><input type="checkbox" data-metric="hi"   data-stat="min" checked /> HI Min</label>
+        <label><input type="checkbox" data-metric="hi"   data-stat="max" checked /> HI Max</label>
+      </div>
+    </div>
+
+    <div class="chart-container">
+      <canvas id="trendChart"></canvas>
+    </div>
+
+    <!-- Table container -->
+    <div class="table-container">
+      <table id="trendTable" class="display" style="width:100%">
+        <thead>
+          <tr>
+            <th>Date/Time</th>
+            <th>Temperature (°F)</th>
+            <th>Humidity (%)</th>
+            <th>Heat Index</th>
+            <th>Location</th>
+            <th>Direction</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- populated dynamically -->
+        </tbody>
+      </table>
     </div>
   </div>
 
-  <div class="chart-container">
-    <canvas id="trendChart"></canvas>
-  </div>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
-<script src="scripts/trends.js"></script>
+  <!-- Chart.js and zoom plugin -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
+  <!-- jQuery + DataTables -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+  <!-- Your trends logic -->
+  <script src="scripts/trends.js"></script>
 </body>
 </html>
