Make /map full-page Leaflet with band dropdown

- Remove Layouts.app wrapper so map fills entire viewport
- Replace band buttons with daisyUI dropdown selector
- Overlay controls (home button, band picker, timestamp) on top-left
- Keep Leaflet's standard zoom controls
This commit is contained in:
Graham McIntire 2026-03-30 17:27:21 -05:00
parent a283ad9c66
commit 97bd93ed5c
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
2 changed files with 57 additions and 36 deletions

View file

@ -57,40 +57,62 @@ defmodule MicrowavepropWeb.MapLive do
{:noreply, socket} {:noreply, socket}
end end
defp selected_label(bands, selected_band) do
case Enum.find(bands, &(&1.freq_mhz == selected_band)) do
nil -> "Select Band"
band -> band.label
end
end
@impl true @impl true
def render(assigns) do def render(assigns) do
~H""" ~H"""
<Layouts.app flash={@flash}> <div class="relative w-screen h-screen">
<div class="flex flex-col h-[calc(100vh-4rem)]"> <%!-- Full-page map --%>
<div class="flex items-center gap-4 p-3 bg-base-200 rounded-t-lg flex-wrap"> <div
<h2 class="text-lg font-bold">Propagation Map</h2> id="propagation-map"
<div class="flex gap-1 flex-wrap"> phx-hook="PropagationMap"
<button phx-update="ignore"
:for={band <- @bands} data-scores={Jason.encode!(@scores)}
phx-click="select_band" class="absolute inset-0 z-0"
value={band.freq_mhz} >
class={[ </div>
"btn btn-sm",
if(@selected_band == band.freq_mhz, do: "btn-primary", else: "btn-ghost") <%!-- Top-left controls overlay --%>
]} <div class="absolute top-3 left-14 z-[1000] flex items-center gap-2">
> <.link navigate="/" class="btn btn-sm bg-base-100/90 shadow border-base-300">
{band.label} <.icon name="hero-home" class="size-4" />
</button> </.link>
</div>
<div :if={@valid_time} class="ml-auto text-sm text-base-content/60"> <div class="dropdown">
Updated: {Calendar.strftime(@valid_time, "%Y-%m-%d %H:%M UTC")} <div tabindex="0" role="button" class="btn btn-sm bg-base-100/90 shadow border-base-300">
<.icon name="hero-signal" class="size-4" />
{selected_label(@bands, @selected_band)}
<.icon name="hero-chevron-down" class="size-3" />
</div> </div>
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box shadow-lg w-44 mt-1 p-1"
>
<li :for={band <- @bands}>
<button
phx-click="select_band"
value={band.freq_mhz}
class={[if(@selected_band == band.freq_mhz, do: "active")]}
>
{band.label}
</button>
</li>
</ul>
</div> </div>
<div
id="propagation-map" <div :if={@valid_time} class="badge badge-ghost bg-base-100/90 shadow text-xs">
phx-hook="PropagationMap" {Calendar.strftime(@valid_time, "%H:%M UTC")}
phx-update="ignore"
data-scores={Jason.encode!(@scores)}
class="flex-1 rounded-b-lg z-0"
>
</div> </div>
</div> </div>
</Layouts.app> </div>
<Layouts.flash_group flash={@flash} />
""" """
end end
end end

View file

@ -4,30 +4,29 @@ defmodule MicrowavepropWeb.MapLiveTest do
import Phoenix.LiveViewTest import Phoenix.LiveViewTest
describe "mount" do describe "mount" do
test "renders the propagation map page", %{conn: conn} do test "renders full-page map", %{conn: conn} do
{:ok, _lv, html} = live(conn, ~p"/map") {:ok, _lv, html} = live(conn, ~p"/map")
assert html =~ "Propagation Map" assert html =~ ~s(id="propagation-map")
assert html =~ "propagation-map" assert html =~ ~s(phx-hook="PropagationMap")
end end
test "renders all band selector buttons", %{conn: conn} do test "renders band dropdown with all bands", %{conn: conn} do
{:ok, _lv, html} = live(conn, ~p"/map") {:ok, _lv, html} = live(conn, ~p"/map")
assert html =~ "10 GHz" assert html =~ "10 GHz"
assert html =~ "24 GHz" assert html =~ "24 GHz"
assert html =~ "47 GHz" assert html =~ "47 GHz"
assert html =~ "75 GHz" assert html =~ "75 GHz"
assert html =~ "241 GHz"
end end
test "defaults to 10 GHz band selected", %{conn: conn} do test "defaults to 10 GHz selected", %{conn: conn} do
{:ok, _lv, html} = live(conn, ~p"/map") {:ok, _lv, html} = live(conn, ~p"/map")
assert html =~ "btn-primary" assert html =~ ~s(class="active")
end end
test "includes map container with data-scores", %{conn: conn} do test "includes data-scores attribute", %{conn: conn} do
{:ok, _lv, html} = live(conn, ~p"/map") {:ok, _lv, html} = live(conn, ~p"/map")
assert html =~ ~s(id="propagation-map")
assert html =~ "data-scores" assert html =~ "data-scores"
assert html =~ "phx-hook"
end end
end end