Set active class on current forecast tab

We define a JS TagController which is instantated 3
times, once for each tag.

There's some magic (or convention) being used here:

TARGET

`static targets = [ "day" ]` identifies the DOM element
to which we wish to bind: `"data-tab-target" = "day"`

We then refer to this element with `this.dayTarget`

CLASS HELPER

`static classes = [ "active" ]`

similar to the `dayTarget` we can now reference our active
class as `this.activeClass`

As we've now got 4 data attributes I've used the Rails
[`tag()` method][] so that we can group our data attributes
under the `data` key which I think helps readability:

```
<%= tag.div class: "tab py-4 ...",
data: {
  date: forecast.date.to_s,
  controller: "tab",
  "tab-active-class": "active",
  "tab-target": "day"
} do
%>
```

[`tag()` method][]:
https://apidock.com/rails/ActionView/Helpers/TagHelper/tag

app/javascript/controllers/index.js

@@ -4,6 +4,5 @@
 
 import { application } from "./application"
 
-import ForecastsController from "./forecasts_controller"
-application.register("forecasts", ForecastsController)
-
+import TabController from "./tab_controller"
+application.register("tab", TabController)

app/javascript/controllers/tab_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="tab"
+export default class extends Controller {
+  static classes = [ "active" ]
+  static targets = [ "day" ]
+
+  connect() {
+  }
+
+  switch_tab() {
+    this.makeAllTabsInactive()
+    this.dayTarget.classList.toggle(this.activeClass)
+  }
+
+  makeAllTabsInactive() {
+    document.querySelectorAll('.tabs .tab').forEach(
+      (el) => el.classList.remove(this.activeClass)
+    )
+  }
+}

app/views/styled_forecasts/_day_tab.html.erb

@@ -1,19 +1,31 @@
-<div class="tab py-4 flex-1 <%= day %> mx-2 px-1 text-center daqi-low border-b-0 border-l-2 border-r-2 border-t-2 border-gray-300" data-date="<%= forecast.date %>" >
-  <%= link_to update_styled_forecast_path(day: day), data: { turbo_frame: "day_predictions" } do %>
-    <div class="day">
-      <%= forecast.date == Date.today ? 'Today' : forecast.date.strftime('%A') %>
-    </div>
-    <div class="date">
-      <%= forecast.date.strftime("%d %B") %>
-    </div>
-    <div class="daqi-marker text-4xl py-2 text-green-600">
-      ●
-    </div>
-    <div class="daqi-label text-base">
-      <%= forecast.air_pollution.label.capitalize %>
-    </div>
-    <div class="daqi-value font-normal">
-      Index <%= forecast.air_pollution.value %>/10
-    </div>
-  <% end %>
-</div>
+<%= tag.div class: "tab py-4 flex-1 #{day} mx-2 px-1 text-center daqi-low border-b-0 border-l-2 border-r-2 border-t-2 border-gray-300 #{day == :today ? "active" : ''}",
+  data: {
+    date: forecast.date.to_s,
+    controller: "tab",
+    "tab-active-class": "active",
+    "tab-target": "day"
+  } do
+  %>
+<%=
+      link_to update_styled_forecast_path(day: day),
+      data: {
+        turbo_frame: "day_predictions",
+        action: "click->tab#switch_tab"
+    } do %>
+  <div class="day">
+    <%= forecast.date == Date.today ? 'Today' : forecast.date.strftime('%A') %>
+  </div>
+  <div class="date">
+    <%= forecast.date.strftime("%d %B") %>
+  </div>
+  <div class="daqi-marker text-4xl py-2 text-green-600">
+    ●
+  </div>
+  <div class="daqi-label text-base">
+    <%= forecast.air_pollution.label.capitalize %>
+  </div>
+  <div class="daqi-value font-normal">
+    Index <%= forecast.air_pollution.value %>/10
+  </div>
+<% end %>
+<% end %>

app/views/styled_forecasts/_forecast_tabs.html.erb

@@ -2,7 +2,10 @@
   <header class="text-xl px-4 font-bold">
     Air pollution
   </header>
-  <div class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold" data-turbo-prefetch="false">
+  <div
+    class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold"
+    data-turbo-prefetch="false"
+    >
     <%= render "day_tab", forecast: @forecasts.first, day: :today %>
     <%= render "day_tab", forecast: @forecasts.second, day: :tomorrow %>
     <%= render "day_tab", forecast: @forecasts.third, day: :day_after_tomorrow %>

app/views/styled_forecasts/show.html.erb

@@ -1,8 +1,6 @@
-<div data-controller="forecasts">
-  <%= render partial: "styled_forecasts/location" %>
-  <%= render partial: "styled_forecasts/forecast_tabs", forecasts: @forecasts %>
-  <%= render partial: "styled_forecasts/predictions", locals: { forecast: @forecasts.first } %>
-  <%= render partial: "sharing" %>
-  <%= render partial: "learning" %>
-  <%= render partial: "subscribe" %>
-</div>
+<%= render partial: "styled_forecasts/location" %>
+<%= render partial: "styled_forecasts/forecast_tabs", forecasts: @forecasts %>
+<%= render partial: "styled_forecasts/predictions", locals: { forecast: @forecasts.first } %>
+<%= render partial: "sharing" %>
+<%= render partial: "learning" %>
+<%= render partial: "subscribe" %>

spec/feature_steps/forecast_steps.rb

@@ -111,6 +111,27 @@ def and_i_see_predicted_uv_level_v2
     expect_prediction_v2(category: "ultraviolet-rays-uv", value: "Low")
   end
 
+  def then_i_see_that_the_tomorrow_tab_is_active
+    expect(page).to have_css(".tab.tomorrow.active")
+
+    expect(page).not_to have_css(".tab.today.active")
+    expect(page).not_to have_css(".tab.day_after_tomorrow.active")
+  end
+
+  def and_i_see_that_the_today_tab_is_active
+    expect(page).to have_css(".tab.today.active")
+
+    expect(page).not_to have_css(".tab.tomorrow.active")
+    expect(page).not_to have_css(".tab.day_after_tomorrow.active")
+  end
+
+  def then_i_see_that_the_day_after_tomorrow_tab_is_active
+    expect(page).to have_css(".tab.day_after_tomorrow.active")
+
+    expect(page).not_to have_css(".tab.today.active")
+    expect(page).not_to have_css(".tab.tomorrow.active")
+  end
+
   def and_i_see_predicted_uv_level_for_tomorrow
     expect_styled_prediction(category: :"ultraviolet-rays-uv", level: :moderate)
   end

spec/features/visitors/view_styled_forecasts_spec.rb

@@ -24,6 +24,8 @@
     visit root_path
     when_i_select_view_forecasts_v2
     then_i_see_the_forecasts_page_v2
+
+    and_i_see_that_the_today_tab_is_active
     and_i_see_predicted_air_pollution_status_for_each_day_v2
     and_i_see_predicted_uv_level_v2
     and_i_see_predicted_pollen_level_v2
@@ -40,7 +42,7 @@
     when_i_select_view_forecasts_v2
     and_i_switch_to_the_tab_for_tomorrow
 
-    # then I see that the _tomorrow_ tab is active
+    then_i_see_that_the_tomorrow_tab_is_active
     and_i_see_predicted_uv_level_for_tomorrow
     and_i_see_predicted_pollen_level_for_tomorrow
     and_i_see_predicted_temperature_level_for_tomorrow
@@ -56,7 +58,7 @@
     when_i_select_view_forecasts_v2
     and_i_switch_to_the_tab_for_day_after_tomorrow
 
-    # then I see that the _day_after_tomorrow_ tab is active
+    then_i_see_that_the_day_after_tomorrow_tab_is_active
     and_i_see_predicted_uv_level_for_day_after_tomorrow
     and_i_see_predicted_pollen_level_for_day_after_tomorrow
     and_i_see_predicted_temperature_level_for_day_after_tomorrow