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.
dxw · Nov 5, 2024 · a8cdf0b · a8cdf0b
1 parent 16567ec
commit a8cdf0b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/app/components/day_tab_component.html.erb b/app/components/day_tab_component.html.erb
@@ -4,29 +4,29 @@
     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">
     <%= @forecast.date.strftime("%d %B") %>
   </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
@@ -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);
+      }
+    });
+  }
 }