Merge pull request #115 from dxw/cleanup-1

Cleanup
dxw · Nov 18, 2024 · 6a6a5be · 6a6a5be
2 parents b20c401 + b8c918e
commit 6a6a5be
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 73 deletions.
diff --git a/app/components/day_tab_component.html.erb b/app/components/day_tab_component.html.erb
@@ -5,7 +5,6 @@
     "tab-active-class": "active",
     "tab-inactive-class": "inactive",
     "tab-target": "dayPrediction",
-    "map-target": "daySelector",
   } do
   %>
 <%= link_to update_forecast_path(day: @day, format: :turbo_stream),

diff --git a/app/controllers/forecasts_controller.rb b/app/controllers/forecasts_controller.rb
@@ -1,6 +1,7 @@
 class ForecastsController < ApplicationController
   def show
     @maptiler_api_key = ENV.fetch("MAPTILER_API_KEY")
+    @zone = zone
     @forecasts = CercForecastService.latest_forecasts_for(zone).data
   end
 
@@ -33,6 +34,6 @@ def forecast_for_day(day, forecasts)
   def zone
     return Zone.default unless params[:zone]
 
-    Zone.find_by(cerc_id: params[:zone])
+    Zone.find_by(name: params[:zone])
   end
 end
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -8,21 +8,5 @@ document.addEventListener("DOMContentLoaded", function () {
   hamburgerMenu.addEventListener("click", function () {
     menuList.classList.toggle("hidden");
   });
-
-  const locationButton = document.getElementById("location-selector-button");
-  const locationList = document.getElementById("location-selector-list");
-
-  locationButton &&
-    locationButton.addEventListener("click", function () {
-      locationList.classList.toggle("hidden");
-    });
-
-  locationList &&
-    locationList.addEventListener("click", function (e) {
-      const newSelectedZone = e.target.innerText;
-      const selectedZone = document.getElementById("selected-zone");
-      selectedZone.innerText = newSelectedZone;
-      locationList.classList.toggle("hidden");
-    });
 });
 import "./controllers";
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
@@ -209,7 +209,7 @@ export default class MapController extends Controller {
 
   updateMap() {
     const pollutant = this.pollutantSelectorTarget.value;
-    const date = this.daySelector.dataset.date;
+    const date = this.daySelectorTarget.querySelector(".active").dataset.date;
     const newSettings = { pollutant: pollutant, date: date };
     this.settings = Object.assign({}, this.defaultMapSettings, newSettings);
 

diff --git a/app/views/forecasts/_forecast_tabs.html.erb b/app/views/forecasts/_forecast_tabs.html.erb
@@ -5,6 +5,7 @@
   <div
     class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold border-b-[3px] border-black"
     data-turbo-prefetch="false"
+    data-map-target="daySelector"
     >
     <%= render(DayTabComponent.new(forecast: @forecasts.first, day: :today)) %>
     <%= render(DayTabComponent.new(forecast: @forecasts.second, day: :tomorrow)) %>

diff --git a/app/views/forecasts/_location.html.erb b/app/views/forecasts/_location.html.erb
@@ -1,8 +1,4 @@
-<div class="inner p-4">
-  <h2 class="text-xl font-bold">
-    Air quality forecast
-  </h2>
-</div>
+
 <div class="location p-4 pt-2">
   <%= render partial: "location_selector" %>
   <a href="#" class="change-location block underline text-xs">

diff --git a/app/views/forecasts/_location_selector.html.erb b/app/views/forecasts/_location_selector.html.erb
@@ -1,50 +1,8 @@
-<div>
-  <div class="relative mt-2">
-    <button id="location-selector-button" type="button" class="relative w-full cursor-default rounded-full bg-white py-3 pl-3 mb-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
-      <span class="flex items-center">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
-        </svg>
-        <span id="selected-zone" class="ml-3 block truncate">Southwark, London</span>
-      </span>
-      <span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
-        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
-          <path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" />
-        </svg>
-      </span>
-    </button>
-    <!--
-      HIDDEN FOR NOW UNTIL WE IMPLEMENT A JS HANDLER
-
-      Select popover, show/hide based on select state.
-
-      Entering: ""
-        From: ""
-        To: ""
-      Leaving: "transition ease-in duration-100"
-        From: "opacity-100"
-        To: "opacity-0"
-    -->
-    <ul id="location-selector-list" class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
-      <!--
-        Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
-
-        Highlighted: "bg-indigo-600 text-white", Not Highlighted: "text-gray-900"
-      -->
-      <% zones = JSON.parse(File.read(Rails.root.join('config', 'list-of-zones.json'))).map(&:to_s) %>
-      <% zones.each do |zone| %>
-        <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" id="listbox-option-0" role="option">
-          <div class="flex items-center">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
-            </svg>
-            <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
-            <span class="ml-3 block truncate font-normal"><%= zone %></span>
-          </div>
-        </li>
-      <% end %>
-    </ul>
-  </div>
+<div class="relative inline-block w-full text-left p-4">
+  <%= form_tag(false, method: :get) do %>
+    <%= select_tag :zone, 
+    options_for_select(Zone.all.order(:name).map(&:name), @zone.name),
+    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"
+    %>
+  <% end %>
 </div>
diff --git a/app/views/forecasts/show.html.erb b/app/views/forecasts/show.html.erb
@@ -1,3 +1,9 @@
+<div class="inner p-4">
+  <h2 class="text-xl font-bold">
+    Air quality forecast
+  </h2>
+</div>
+
 <div data-controller="map">
   <%= render partial: "forecasts/location" %>
   <%= render partial: "forecasts/forecast_tabs", cerc_forecasts: @forecasts %>