411 lines
17 KiB
Text
411 lines
17 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_scope={@current_scope}
|
|
active_page="coverage"
|
|
unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
|
|
>
|
|
<%!-- Top bar: title, status, actions. Compact so the map can dominate. --%>
|
|
<div class="mb-4 flex items-start justify-between gap-4">
|
|
<div class="min-w-0">
|
|
<.breadcrumb items={[
|
|
%{label: t("Dashboard"), navigate: ~p"/dashboard"},
|
|
%{label: t("Coverage"), navigate: ~p"/coverage"},
|
|
%{label: @coverage.name}
|
|
]} />
|
|
<h1 class="text-xl font-bold text-gray-900 dark:text-white truncate">
|
|
{@coverage.name}
|
|
</h1>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
<.icon name="hero-map-pin" class="h-4 w-4 inline" />
|
|
<.link navigate={~p"/sites/#{@coverage.site_id}"} class="hover:underline">
|
|
{@coverage.site && @coverage.site.name}
|
|
</.link>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<span class={[
|
|
"inline-flex items-center px-2.5 py-1 rounded text-sm font-medium",
|
|
status_badge_class(@coverage.status)
|
|
]}>
|
|
{@coverage.status}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
phx-click="toggle_params"
|
|
class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
|
|
title={t("Toggle parameters panel")}
|
|
>
|
|
<.icon name="hero-adjustments-horizontal" class="h-4 w-4" />
|
|
{if @show_params, do: t("Hide details"), else: t("Details")}
|
|
</button>
|
|
<.link
|
|
navigate={~p"/coverage/#{@coverage.id}/edit"}
|
|
class="btn text-sm !py-1 !px-3 border border-gray-300 bg-transparent dark:border-gray-600 gap-1.5"
|
|
>
|
|
<.icon name="hero-pencil-square" class="h-4 w-4" /> {t("Edit")}
|
|
</.link>
|
|
<.button phx-click="recompute" variant="primary">
|
|
<.icon name="hero-arrow-path" class="h-4 w-4" /> {t("Recompute")}
|
|
</.button>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Status banners (queued / computing / failed). --%>
|
|
<%= if @coverage.status == "computing" do %>
|
|
<div class="mb-4 rounded-lg border border-yellow-200 bg-yellow-50 dark:border-yellow-900/50 dark:bg-yellow-900/20 p-4">
|
|
<div class="flex items-start gap-3">
|
|
<.icon
|
|
name="hero-arrow-path"
|
|
class="h-5 w-5 text-yellow-700 dark:text-yellow-400 animate-spin shrink-0"
|
|
/>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-yellow-900 dark:text-yellow-200">
|
|
{t("Computing coverage…")}
|
|
</p>
|
|
<div class="mt-1 flex items-center gap-3">
|
|
<div class="flex-1 h-2 bg-yellow-200 dark:bg-yellow-900 rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full bg-yellow-600 dark:bg-yellow-500 transition-all"
|
|
style={"width: #{@coverage.progress_pct}%"}
|
|
>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm text-yellow-800 dark:text-yellow-300 font-mono shrink-0">
|
|
{@coverage.progress_pct}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @coverage.status == "failed" do %>
|
|
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-900/20 p-4">
|
|
<div class="flex items-start gap-3">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="h-5 w-5 text-red-700 dark:text-red-400 flex-shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="text-sm font-medium text-red-900 dark:text-red-200">
|
|
{t("Compute failed")}
|
|
</p>
|
|
<p :if={@coverage.error_message} class="mt-1 text-sm text-red-800 dark:text-red-300">
|
|
{@coverage.error_message}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @coverage.status == "queued" do %>
|
|
<div class="mb-4 rounded-lg border border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20 p-4">
|
|
<p class="text-sm text-blue-900 dark:text-blue-200">
|
|
<.icon name="hero-clock" class="h-4 w-4 inline" />
|
|
{t("Coverage is queued. Compute will start shortly.")}
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%!-- Map area. cnHeat-style: full-bleed, controls float above as panels. --%>
|
|
<%= cond do %>
|
|
<% @coverage.png_path && @coverage.status == "ready" -> %>
|
|
<div
|
|
id="coverage-multi-map"
|
|
phx-hook="MultiCoverageMap"
|
|
phx-update="ignore"
|
|
class="relative h-[78vh] w-full rounded-lg border border-gray-200 dark:border-white/10 bg-gray-100 dark:bg-gray-800 overflow-hidden"
|
|
data-coverages={Jason.encode!(coverages_payload([@coverage]))}
|
|
data-enabled={Jason.encode!([@coverage.id])}
|
|
>
|
|
</div>
|
|
|
|
<%!-- LOS / NLOS toggle + SM install-height slider (left) --%>
|
|
<div
|
|
class="pointer-events-none fixed top-32 left-6 z-[1100]"
|
|
id="coverage-height-control"
|
|
>
|
|
<div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg p-3 flex flex-col items-center gap-2 w-24">
|
|
<div class="flex w-full text-[10px] font-medium border border-gray-200 dark:border-white/10 rounded overflow-hidden">
|
|
<button
|
|
type="button"
|
|
id="coverage-mode-los"
|
|
data-mode="los"
|
|
class="flex-1 px-1 py-1 text-gray-900 dark:text-white bg-blue-100 dark:bg-blue-900/40"
|
|
>
|
|
LOS
|
|
</button>
|
|
<button
|
|
type="button"
|
|
id="coverage-mode-nlos"
|
|
data-mode="nlos"
|
|
class="flex-1 px-1 py-1 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
|
|
>
|
|
NLOS
|
|
</button>
|
|
</div>
|
|
<span
|
|
id="coverage-mode-label"
|
|
class="text-[10px] font-medium text-gray-700 dark:text-gray-300 text-center leading-tight"
|
|
>
|
|
{t("Height above clutter")}
|
|
</span>
|
|
<input
|
|
id="coverage-height-slider"
|
|
type="range"
|
|
min="0"
|
|
max="5"
|
|
step="1"
|
|
value="1"
|
|
class="cursor-pointer"
|
|
style="writing-mode: vertical-lr; direction: rtl; height: 200px; width: 24px;"
|
|
/>
|
|
<span id="coverage-height-label" class="text-xs font-mono text-center">10 ft</span>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Parameters / actions panel (right). Toggleable via header button. --%>
|
|
<%= if @show_params do %>
|
|
<div
|
|
class="pointer-events-none fixed top-32 right-6 z-[1100] w-80 max-h-[70vh] overflow-y-auto"
|
|
id="coverage-params-panel"
|
|
>
|
|
<div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg">
|
|
<div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
|
|
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
{t("Parameters")}
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
phx-click="toggle_params"
|
|
class="text-gray-500 hover:text-gray-700 dark:text-gray-400"
|
|
>
|
|
<.icon name="hero-x-mark" class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div class="p-3 space-y-1">
|
|
<dl class="space-y-1.5 text-sm">
|
|
<.param_row
|
|
label={t("Antenna")}
|
|
value={(@antenna && @antenna.model) || @coverage.antenna_slug}
|
|
/>
|
|
<.param_row
|
|
:if={
|
|
not is_nil(@coverage.device_id) and Ecto.assoc_loaded?(@coverage.device) and
|
|
not is_nil(@coverage.device)
|
|
}
|
|
label={t("Device")}
|
|
value={@coverage.device.name || @coverage.device.ip_address}
|
|
/>
|
|
<.param_row
|
|
:if={@antenna}
|
|
label={t("Manufacturer")}
|
|
value={@antenna.manufacturer}
|
|
/>
|
|
<.param_row
|
|
:if={@antenna}
|
|
label={t("Antenna gain")}
|
|
value={"#{@antenna.gain_dbi} dBi"}
|
|
/>
|
|
<.param_row label={t("Frequency")} value={format_ghz(@coverage.frequency_mhz)} />
|
|
<.param_row label={t("TX power")} value={"#{@coverage.tx_power_dbm} dBm"} />
|
|
<.param_row label={t("EIRP")} value={"#{Float.round(@eirp_dbm, 1)} dBm"} />
|
|
<.param_row
|
|
label={t("Height above ground")}
|
|
value={format_ft(@coverage.height_agl_m)}
|
|
/>
|
|
<.param_row label={t("Azimuth")} value={"#{@coverage.azimuth_deg}°"} />
|
|
<.param_row label={t("Tilt")} value={"#{@coverage.downtilt_deg}°"} />
|
|
<.param_row label={t("Range")} value={format_mi(@coverage.radius_m)} />
|
|
<.param_row
|
|
:if={@coverage.foliage_tuning && @coverage.foliage_tuning > 0}
|
|
label={t("Foliage tuning")}
|
|
value={"#{@coverage.foliage_tuning}"}
|
|
/>
|
|
<.param_row
|
|
:if={@coverage.computed_at}
|
|
label={t("Computed at")}
|
|
value={Calendar.strftime(@coverage.computed_at, "%Y-%m-%d %H:%M UTC")}
|
|
/>
|
|
</dl>
|
|
<button
|
|
type="button"
|
|
phx-click="delete"
|
|
data-confirm={t("Delete this coverage?")}
|
|
class="mt-3 w-full text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
<.icon name="hero-trash" class="h-4 w-4 inline" /> {t("Delete coverage")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%!-- Opacity + RSSI filter + legend (bottom-center). --%>
|
|
<div class="pointer-events-none fixed bottom-6 left-1/2 -translate-x-1/2 z-[1100] w-[640px] max-w-[90vw]">
|
|
<div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg p-3 space-y-2">
|
|
<div class="flex items-center gap-3">
|
|
<label
|
|
for="coverage-opacity-slider"
|
|
class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16"
|
|
>
|
|
{t("Opacity")}
|
|
</label>
|
|
<input
|
|
id="coverage-opacity-slider"
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value="70"
|
|
class="flex-1 cursor-pointer"
|
|
/>
|
|
<span id="coverage-opacity-label" class="text-xs font-mono w-10 text-right">70%</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<label
|
|
for="coverage-rssi-slider"
|
|
class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16"
|
|
>
|
|
{t("Min RSSI")}
|
|
</label>
|
|
<input
|
|
id="coverage-rssi-slider"
|
|
type="range"
|
|
min="-100"
|
|
max="-40"
|
|
step="1"
|
|
value="-100"
|
|
class="flex-1 cursor-pointer"
|
|
/>
|
|
<span id="coverage-rssi-label" class="text-xs font-mono w-16 text-right">
|
|
-100 dBm
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-1 text-[10px] font-mono text-gray-700 dark:text-gray-300">
|
|
<span class="w-3 h-3 rounded inline-block" style="background:rgb(0,200,0)"></span>
|
|
<span>≥-50</span>
|
|
<span class="w-3 h-3 rounded inline-block ml-2" style="background:rgb(200,230,0)">
|
|
</span>
|
|
<span>-65</span>
|
|
<span class="w-3 h-3 rounded inline-block ml-2" style="background:rgb(255,165,0)">
|
|
</span>
|
|
<span>-75</span>
|
|
<span class="w-3 h-3 rounded inline-block ml-2" style="background:rgb(220,60,60)">
|
|
</span>
|
|
<span>-85</span>
|
|
<span class="w-3 h-3 rounded inline-block ml-2" style="background:rgb(100,0,0)">
|
|
</span>
|
|
<span>≤-95 dBm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%!-- Distance Tool side panel — opens on map click. --%>
|
|
<%= if @probe do %>
|
|
<div
|
|
class="pointer-events-none fixed top-32 left-32 z-[1100] w-[360px] max-w-[90vw] max-h-[60vh] overflow-y-auto"
|
|
id="coverage-probe-panel"
|
|
>
|
|
<div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg">
|
|
<div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
|
|
<div class="flex items-center gap-2 text-xs font-mono text-gray-700 dark:text-gray-300">
|
|
<.icon name="hero-map-pin" class="h-4 w-4 text-blue-500" />
|
|
<span>
|
|
{:erlang.float_to_binary(@probe.lat * 1.0, decimals: 5)}, {:erlang.float_to_binary(
|
|
@probe.lon * 1.0,
|
|
decimals: 5
|
|
)}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
phx-click="close_probe"
|
|
class="text-gray-500 hover:text-gray-700 dark:text-gray-400"
|
|
>
|
|
<.icon name="hero-x-mark" class="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
<div class="px-3 py-2 border-b border-gray-200 dark:border-white/10 flex items-center gap-3">
|
|
<span class="text-xs text-gray-700 dark:text-gray-300">{t("Units:")}</span>
|
|
<label class="flex items-center gap-1 text-xs cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="probe-units"
|
|
checked={@probe_units == "ft"}
|
|
phx-click="set_probe_units"
|
|
phx-value-units="ft"
|
|
/> ft
|
|
</label>
|
|
<label class="flex items-center gap-1 text-xs cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="probe-units"
|
|
checked={@probe_units == "m"}
|
|
phx-click="set_probe_units"
|
|
phx-value-units="m"
|
|
/> m
|
|
</label>
|
|
</div>
|
|
<table class="min-w-full text-xs">
|
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
|
<tr>
|
|
<th class="px-3 py-1.5 text-left font-medium text-gray-700 dark:text-gray-300">
|
|
{t("Tower")}
|
|
</th>
|
|
<th class="px-3 py-1.5 text-right font-medium text-gray-700 dark:text-gray-300">
|
|
{t("Distance")}
|
|
</th>
|
|
<th class="px-3 py-1.5 text-right font-medium text-gray-700 dark:text-gray-300">
|
|
RSSI
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-white/10">
|
|
<%= for row <- @probe.rows do %>
|
|
<tr>
|
|
<td class="px-3 py-1.5 font-medium text-gray-900 dark:text-gray-100 truncate">
|
|
{row.coverage.name}
|
|
</td>
|
|
<td class="px-3 py-1.5 text-right font-mono text-gray-700 dark:text-gray-300">
|
|
{fmt_distance(row.distance_m, @probe_units)}
|
|
</td>
|
|
<td class={[
|
|
"px-3 py-1.5 text-right font-mono",
|
|
cond do
|
|
row.rssi == :no_coverage ->
|
|
"text-gray-400"
|
|
|
|
is_number(row.rssi) and row.rssi >= -75 ->
|
|
"text-green-600 dark:text-green-400 font-bold"
|
|
|
|
is_number(row.rssi) and row.rssi >= -85 ->
|
|
"text-yellow-600 dark:text-yellow-400"
|
|
|
|
is_number(row.rssi) ->
|
|
"text-red-600 dark:text-red-400"
|
|
|
|
true ->
|
|
"text-gray-400"
|
|
end
|
|
]}>
|
|
{fmt_rssi(row.rssi)}
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% true -> %>
|
|
<div class="h-[78vh] w-full rounded-lg border border-gray-200 dark:border-white/10 flex items-center justify-center bg-gray-50 dark:bg-gray-900 text-center px-6">
|
|
<div>
|
|
<.icon name="hero-signal-slash" class="h-12 w-12 mx-auto text-gray-400 mb-2" />
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{t("No heatmap available yet. Run compute to generate the coverage prediction.")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</Layouts.authenticated>
|