Skip to content

Commit

Permalink
Drive tab change through a form
Browse files Browse the repository at this point in the history
Following the same pattern we established for the zone selector, we remove the link from each tab and instead add a hidden form field and submit the form when a tab is clicked on.
  • Loading branch information
jdudley1123 committed Nov 18, 2024
1 parent 871f3ca commit 0f3aa7a
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 58 deletions.
10 changes: 2 additions & 8 deletions app/components/day_tab_component.html.erb
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
<%= tag.div class: "tab py-4 flex-1 #{@day} mx-2 px-1 text-center #{classes}",
data: {
date: @forecast.date.to_s,
controller: "tab",
"tab-active-class": "active",
"tab-inactive-class": "inactive",
day: @day,
"tab-target": "dayPrediction",
action: "click->tab#changeTab",
} do
%>
<%= link_to update_forecast_path(day: @day, format: :turbo_stream),
data: {
action: "click->tab#switch_tab click->map#updateMap",
} do %>
<div class="day" data-tab-target="day">
<%= @forecast.date == Date.today ? 'Today' : @forecast.date.strftime('%A') %>
</div>
Expand All @@ -30,4 +25,3 @@
Index <%= @forecast.air_pollution.value %>/10
</div>
<% end %>
<% end %>
60 changes: 12 additions & 48 deletions app/javascript/controllers/tab_controller.js
Original file line number Diff line number Diff line change
@@ -1,59 +1,23 @@
import { Controller } from "@hotwired/stimulus";

// Connects to data-controller="tab"
export default class extends Controller {
static classes = ["active", "inactive"];
static targets = ["dayPrediction", "day", "daqiValue"];
export default class TabController extends Controller {
static targets = ["daySelector"];

connect() {}

switch_tab() {
this.makeAllTabsInactive();
this.removeDaqiAlertClasses();
changeTab(event) {
const selectedDay = event.currentTarget.dataset.day;

this.addAlertClassIfNotTodayAndHasAirQualityAlert();
this.dayPredictionTarget.classList.toggle(this.activeClass);
this.dayPredictionTarget.classList.toggle(this.inactiveClass);
}

makeAllTabsInactive() {
document.querySelectorAll(".tabs .tab").forEach((el) => {
el.classList.remove(this.activeClass);
el.classList.add(this.inactiveClass);
});
}

addAlertClassIfNotTodayAndHasAirQualityAlert() {
const daqiValue = this.getDaqiValue();
if (this.dayTarget.innerText !== "Today" && daqiValue > 3) {
this.addDaqiAlertClass();
}
}
// Add the new date to the URL
const url = new URL(window.location.href);
url.searchParams.set("day", selectedDay);
window.history.pushState({}, "", url);

addDaqiAlertClass() {
const daqiValue = this.getDaqiValue();
this.dayPredictionTarget.classList.add(
`daqi-alert-after-today-selected-level-${daqiValue}`
);
}

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);
}
});
}
// Update contents of daySelector
this.daySelectorTarget.value = selectedDay;

getDaqiValue() {
return this.daqiValueTarget.innerText.split("/")[0].split(" ")[1];
// Submit the form to reload the turbo frame
this.daySelectorTarget.form.requestSubmit();
}
}
1 change: 1 addition & 0 deletions app/views/forecasts/_location_selector.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
class: "inline-flex flex-row w-full justify-left gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50",
data: { controller: "prediction", "prediction-target": "zoneSelector", action: "change->prediction#changeZone" }
%>
<%= hidden_field_tag :day, @day, data: { "tab-target": "daySelector" } %>
<% end %>
</div>
4 changes: 2 additions & 2 deletions spec/support/features/forecast_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ def view_forecasts
def switch_to_tab_for(day)
case day
when :tomorrow
find(".tab.tomorrow a").trigger("click")
find(".tab.tomorrow").trigger("click")
when :day_after_tomorrow
find(".tab.day_after_tomorrow a").trigger("click")
find(".tab.day_after_tomorrow").trigger("click")
else
raise "day: #{day} not expected"
end
Expand Down

0 comments on commit 0f3aa7a

Please sign in to comment.