From a8cdf0b7169d1b617b5b7043994d64dbd0dba598 Mon Sep 17 00:00:00 2001
From: Patrick Fleming <patrick.fleming@dxw.com>
Date: Tue, 5 Nov 2024 15:59:44 +0000
Subject: [PATCH] Update alert stylings for air pollution tabs

If today has an alert, we always want to display the alert stylings. For tomorrow and the day after tomorrow, if they have alerts, we only want to display the alert stylings when the tab is selected.

I have opted for a slightly verbose Javascript implementation that extends the Stimulus code that was already in place, rather than bringing the tabs into the Turbo stream that is already in place for this action. However, if any part of this design becomes any more complex, this would probably be a good candidate to refactor along those lines.
---
 app/components/day_tab_component.html.erb    | 10 +++---
 app/javascript/controllers/tab_controller.js | 37 ++++++++++++++++++--
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/components/day_tab_component.html.erb b/app/components/day_tab_component.html.erb
index a3121624..4512e15f 100644
--- a/app/components/day_tab_component.html.erb
+++ b/app/components/day_tab_component.html.erb
@@ -4,14 +4,14 @@
     controller: "tab",
     "tab-active-class": "active",
     "tab-inactive-class": "inactive",
-    "tab-target": "day"
+    "tab-target": "dayPrediction"
   } do
   %>
 <%= link_to update_styled_forecast_path(day: @day, format: :turbo_stream),
       data: {
         action: "click->tab#switch_tab"
     } do %>
-  <div class="day">
+  <div class="day" data-tab-target="day">
     <%= @forecast.date == Date.today ? 'Today' : @forecast.date.strftime('%A') %>
   </div>
   <div class="date">
@@ -19,14 +19,14 @@
   </div>
   <div class="daqi-symbol flex justify-center items-center daqi-marker text-4xl py-2 h-14">
     <div class="size-9 rounded-full <%= daqi_indicator_colour_class %>"></div>
-    <% if @forecast.air_pollution.value > 6 %>
-      <%= render partial: "shared/icons/exclamation_triangle" %>
+    <% if @forecast.air_pollution.value > 3 %>
+      <%= render partial: "shared/icons/exclamation_triangle", locals: {forecast: @forecast} %>
     <% end %>
   </div>
   <div class="daqi-label text-base">
     <%= @forecast.air_pollution.label.capitalize %>
   </div>
-  <div class="daqi-value font-normal">
+  <div class="daqi-value font-normal" data-tab-target="daqiValue">
     Index <%= @forecast.air_pollution.value %>/10
   </div>
 <% end %>
diff --git a/app/javascript/controllers/tab_controller.js b/app/javascript/controllers/tab_controller.js
index 793b2e45..6a640a0b 100644
--- a/app/javascript/controllers/tab_controller.js
+++ b/app/javascript/controllers/tab_controller.js
@@ -3,14 +3,21 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="tab"
 export default class extends Controller {
   static classes = ["active", "inactive"];
-  static targets = ["day"];
+  static targets = ["dayPrediction", "day", "daqiValue"];
 
   connect() {}
 
   switch_tab() {
     this.makeAllTabsInactive();
-    this.dayTarget.classList.toggle(this.activeClass);
-    this.dayTarget.classList.toggle(this.inactiveClass);
+    this.removeDaqiAlertClasses();
+    if (
+      this.dayTarget.innerText !== "Today" &&
+      this.daqiValueTarget.innerText[6] > 3
+    ) {
+      this.addDaqiAlertClass();
+    }
+    this.dayPredictionTarget.classList.toggle(this.activeClass);
+    this.dayPredictionTarget.classList.toggle(this.inactiveClass);
   }
 
   makeAllTabsInactive() {
@@ -19,4 +26,28 @@ export default class extends Controller {
       el.classList.add(this.inactiveClass);
     });
   }
+
+  addDaqiAlertClass() {
+    const daqiLevel = this.daqiValueTarget.innerText[6];
+
+    this.dayPredictionTarget.classList.add(
+      `daqi-alert-after-today-selected-level-${daqiLevel}`
+    );
+  }
+
+  removeDaqiAlertClasses() {
+    document.querySelectorAll(".tabs .tab").forEach((el) => {
+      const daqiAlertClassRegex = new RegExp(
+        "daqi-alert-after-today-selected-level-(\\d{1,2})"
+      );
+
+      const fullClassName = Array.from(el.classList).find((className) =>
+        className.match(daqiAlertClassRegex)
+      );
+
+      if (fullClassName) {
+        el.classList.remove(fullClassName);
+      }
+    });
+  }
 }