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}
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue