Skip to content

Commit

Permalink
Use native select element for zone selector
Browse files Browse the repository at this point in the history
Using the native HTML element saves us a load of overhead and is more accessible.
  • Loading branch information
jdudley1123 committed Nov 18, 2024
1 parent e06c7b4 commit b8c918e
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 66 deletions.
3 changes: 2 additions & 1 deletion app/controllers/forecasts_controller.rb
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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
16 changes: 0 additions & 16 deletions app/javascript/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
56 changes: 7 additions & 49 deletions app/views/forecasts/_location_selector.html.erb
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit b8c918e

Please sign in to comment.