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}
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
def render(assigns) do
~H"""
<Layouts.app flash={@flash}>
<div class="flex flex-col h-[calc(100vh-4rem)]">
<div class="flex items-center gap-4 p-3 bg-base-200 rounded-t-lg flex-wrap">
<h2 class="text-lg font-bold">Propagation Map</h2>
<div class="flex gap-1 flex-wrap">
<button
:for={band <- @bands}
phx-click="select_band"
value={band.freq_mhz}
class={[
"btn btn-sm",
if(@selected_band == band.freq_mhz, do: "btn-primary", else: "btn-ghost")
]}
>
{band.label}
</button>
</div>
<div :if={@valid_time} class="ml-auto text-sm text-base-content/60">
Updated: {Calendar.strftime(@valid_time, "%Y-%m-%d %H:%M UTC")}
<div class="relative w-screen h-screen">
<%!-- Full-page map --%>
<div
id="propagation-map"
phx-hook="PropagationMap"
phx-update="ignore"
data-scores={Jason.encode!(@scores)}
class="absolute inset-0 z-0"
>
</div>
<%!-- 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">
<.icon name="hero-home" class="size-4" />
</.link>
<div class="dropdown">
<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>
<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
id="propagation-map"
phx-hook="PropagationMap"
phx-update="ignore"
data-scores={Jason.encode!(@scores)}
class="flex-1 rounded-b-lg z-0"
>
<div :if={@valid_time} class="badge badge-ghost bg-base-100/90 shadow text-xs">
{Calendar.strftime(@valid_time, "%H:%M UTC")}
</div>
</div>
</Layouts.app>
</div>
<Layouts.flash_group flash={@flash} />
"""
end
end

View file

@ -4,30 +4,29 @@ defmodule MicrowavepropWeb.MapLiveTest do
import Phoenix.LiveViewTest
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")
assert html =~ "Propagation Map"
assert html =~ "propagation-map"
assert html =~ ~s(id="propagation-map")
assert html =~ ~s(phx-hook="PropagationMap")
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")
assert html =~ "10 GHz"
assert html =~ "24 GHz"
assert html =~ "47 GHz"
assert html =~ "75 GHz"
assert html =~ "241 GHz"
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")
assert html =~ "btn-primary"
assert html =~ ~s(class="active")
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")
assert html =~ ~s(id="propagation-map")
assert html =~ "data-scores"
assert html =~ "phx-hook"
end
end