Merge pull request #105 from dxw/change-day

Make map update when day tab changes
dxw · Nov 15, 2024 · f119c33 · f119c33
2 parents 7d53a9f + 80271c1
commit f119c33
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/app/components/day_tab_component.html.erb b/app/components/day_tab_component.html.erb
@@ -4,12 +4,13 @@
     controller: "tab",
     "tab-active-class": "active",
     "tab-inactive-class": "inactive",
-    "tab-target": "dayPrediction"
+    "tab-target": "dayPrediction",
+    "map-target": "daySelector",
   } do
   %>
 <%= link_to update_forecast_path(day: @day, format: :turbo_stream),
       data: {
-        action: "click->tab#switch_tab"
+        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') %>

diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
@@ -4,7 +4,7 @@ import "@maptiler/leaflet-maptilersdk";
 import * as zones from "../zone_boundaries/zone-boundaries";
 
 export default class MapController extends Controller {
-  static targets = ["map", "pollutantSelector"];
+  static targets = ["map", "pollutantSelector", "daySelector"];
 
   layers = {};
   controls = {};
@@ -190,7 +190,8 @@ export default class MapController extends Controller {
 
   updateMap() {
     const pollutant = this.pollutantSelectorTarget.value;
-    const newSettings = { pollutant: pollutant };
+    const date = this.daySelector.dataset.date;
+    const newSettings = { pollutant: pollutant, date: date };
     this.settings = Object.assign({}, this.defaultMapSettings, newSettings);
 
     this.updatePollutionLayer();

diff --git a/app/views/forecasts/show.html.erb b/app/views/forecasts/show.html.erb
@@ -1,8 +1,10 @@
-<%= render partial: "forecasts/location" %>
-<%= render partial: "forecasts/forecast_tabs", cerc_forecasts: @forecasts %>
-<%= render partial: "forecasts/map" %>
-<%= render partial: "forecasts/predictions", locals: { forecast: @forecasts.first } %>
-<%= render partial: "sharing" %>
+<div data-controller="map">
+  <%= render partial: "forecasts/location" %>
+  <%= render partial: "forecasts/forecast_tabs", cerc_forecasts: @forecasts %>
+  <%= render partial: "forecasts/map" %>
+  <%= render partial: "forecasts/predictions", locals: { forecast: @forecasts.first } %>
+  <%= render partial: "sharing" %>
+</div>
 <%= render partial: "learning" %>
 <%= render partial: "subscribe" %>
 <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>