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:
parent
a283ad9c66
commit
97bd93ed5c
2 changed files with 57 additions and 36 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue