From eba0012e71df7f00e6de2b476794f795ea3a9e3a Mon Sep 17 00:00:00 2001
From: nick <coachward0742@gmail.com>
Date: Fri, 12 Jun 2026 01:31:20 -0600
Subject: [PATCH] webui: highlight individual temperature sensors

---
 .../overland-controller.ino                   | 54 ++++++-------------
 1 file changed, 16 insertions(+), 38 deletions(-)

diff --git a/firmware/esp32/overland-controller/overland-controller.ino b/firmware/esp32/overland-controller/overland-controller.ino
index b6ec730..37e2ea5 100644
--- a/firmware/esp32/overland-controller/overland-controller.ino
+++ b/firmware/esp32/overland-controller/overland-controller.ino
@@ -981,11 +981,22 @@ function render(data){
     `<div class="item"><span>No cell data</span><strong class="muted">--</strong></div>`;
 
   const visibleTemps=(data.temps||[]).filter(t=>t.enabled && t.online && typeof t.temperature_f==="number");
-  $("temps").innerHTML=visibleTemps.map(t=>`
-    <div class="item">
+  $("temps").innerHTML=visibleTemps.map(t=>{
+    const alertActive =
+      !!t.high_alert ||
+      (
+        t.high_alert_enabled &&
+        typeof t.temperature_f === "number" &&
+        typeof t.high_alert_f === "number" &&
+        t.temperature_f > t.high_alert_f
+      );
+
+    return `
+    <div class="item ${alertActive ? 'temp-alert' : ''}">
       <span>${t.name||t.id}</span>
-      <strong class="good">${temp(t.temperature_f)}</strong>
-    </div>`).join("");
+      <strong class="${alertActive ? '' : 'good'}">${temp(t.temperature_f)}</strong>
+    </div>`;
+  }).join("");
 
   $("relays").innerHTML=(data.relays||[]).map(r=>`
     <div class="item">
@@ -1177,40 +1188,7 @@ function tempDisplayGroup(t){
   return String(t.name || "").trim().toLowerCase();
 }
 
-function applyTempAlertStyles(data){
-  const temps = data && Array.isArray(data.temps) ? data.temps : [];
-  const active = temps.filter(tempHighAlertActive);
-
-  document.querySelectorAll(".temp-alert").forEach(el => el.classList.remove("temp-alert"));
-  if (!active.length) return;
-
-  const alertKeys = new Set();
-  active.forEach(t => {
-    const name = String(t.name || "").trim().toLowerCase();
-    const group = tempDisplayGroup(t);
-    if (name) alertKeys.add(name);
-    if (group) alertKeys.add(group);
-    if (group === "fridge") alertKeys.add("fridge");
-    if (group === "cabin") alertKeys.add("cabin");
-    if (group === "outside") alertKeys.add("outside");
-  });
-
-  const candidates = document.querySelectorAll(
-    ".tempConfigCard, [id^='tempName'], [id^='tempAddress'], .temps, #temps, #tempConfigList > *"
-  );
-
-  candidates.forEach(el => {
-    const card = el.closest(".tempConfigCard") || el;
-    const text = (card.textContent || "").toLowerCase();
-
-    for (const key of alertKeys) {
-      if (key && text.includes(key)) {
-        card.classList.add("temp-alert");
-        return;
-      }
-    }
-  });
-}
+function applyTempAlertStyles(data) { return; }
 
 function renderConfigControls(data){
   const cfg=data.config||{};