Graham McIntire
89a5cfefd2
Owner / admin click "Edit" on /rover-locations/:id and the marker
becomes draggable. As they drag, the JS hook pushes `location_dragged`
events with the new lat/lon; the LiveView updates `working_lat` /
`working_lon` / `grid` so the page shows the live preview without
writing to the DB. "Save" persists via Rover.update_location, "Cancel"
reverts both the assigns and the marker position.
Implementation notes:
- Switched the map marker from L.circleMarker to a draggable L.marker
with a divIcon (CircleMarker has no `dragging` handler).
- A second `draggingDotIcon` (amber, larger, grab cursor) makes the
edit affordance obvious.
- Server <-> hook coordination uses push_event:
set_marker_draggable / reset_marker. Drag results come back on
pushEvent("location_dragged", { lat, lon }).
- Coordinates row binds to working_lat/working_lon so the displayed
decimals + derived grid update on every drag, not only on save.
263 lines
8 KiB
Elixir
263 lines
8 KiB
Elixir
defmodule MicrowavepropWeb.RoverLocationsLive.Show do
|
|
@moduledoc "Detail page for a single rover location, with a map + marker."
|
|
use MicrowavepropWeb, :live_view
|
|
|
|
alias Microwaveprop.Accounts.User
|
|
alias Microwaveprop.Radio.Maidenhead
|
|
alias Microwaveprop.Repo
|
|
alias Microwaveprop.Rover
|
|
alias Microwaveprop.Rover.Location
|
|
|
|
@impl true
|
|
def mount(%{"id" => id}, _session, socket) do
|
|
case load_location(id) do
|
|
%Location{} = loc ->
|
|
{:ok,
|
|
assign(socket,
|
|
page_title: "Rover Location",
|
|
location: loc,
|
|
editing: false,
|
|
working_lat: loc.lat,
|
|
working_lon: loc.lon,
|
|
grid: Maidenhead.from_latlon(loc.lat, loc.lon, 10)
|
|
)}
|
|
|
|
nil ->
|
|
{:ok,
|
|
socket
|
|
|> put_flash(:error, "Location not found.")
|
|
|> push_navigate(to: ~p"/rover-locations")}
|
|
end
|
|
end
|
|
|
|
@impl true
|
|
def handle_event("toggle_edit", _params, socket) do
|
|
if can_modify?(socket.assigns[:current_scope], socket.assigns.location) do
|
|
{:noreply,
|
|
socket
|
|
|> assign(editing: true)
|
|
|> push_event("set_marker_draggable", %{draggable: true})}
|
|
else
|
|
{:noreply, put_flash(socket, :error, "You can only edit your own locations.")}
|
|
end
|
|
end
|
|
|
|
def handle_event("cancel_edit", _params, socket) do
|
|
loc = socket.assigns.location
|
|
|
|
{:noreply,
|
|
socket
|
|
|> assign(
|
|
editing: false,
|
|
working_lat: loc.lat,
|
|
working_lon: loc.lon,
|
|
grid: Maidenhead.from_latlon(loc.lat, loc.lon, 10)
|
|
)
|
|
|> push_event("reset_marker", %{lat: loc.lat, lon: loc.lon})
|
|
|> push_event("set_marker_draggable", %{draggable: false})}
|
|
end
|
|
|
|
# Hook fires this on `dragend` with the marker's new coordinates.
|
|
# We only update the working preview — persistence waits for save.
|
|
def handle_event("location_dragged", %{"lat" => lat, "lon" => lon}, socket) when is_number(lat) and is_number(lon) do
|
|
{:noreply,
|
|
assign(socket,
|
|
working_lat: lat,
|
|
working_lon: lon,
|
|
grid: Maidenhead.from_latlon(lat, lon, 10)
|
|
)}
|
|
end
|
|
|
|
def handle_event("save_edit", _params, socket) do
|
|
case current_user(socket.assigns[:current_scope]) do
|
|
%User{} = user ->
|
|
attrs = %{lat: socket.assigns.working_lat, lon: socket.assigns.working_lon}
|
|
|
|
case Rover.update_location(user, socket.assigns.location.id, attrs) do
|
|
{:ok, updated} ->
|
|
updated = Repo.preload(updated, :user)
|
|
|
|
{:noreply,
|
|
socket
|
|
|> assign(
|
|
location: updated,
|
|
editing: false,
|
|
working_lat: updated.lat,
|
|
working_lon: updated.lon,
|
|
grid: Maidenhead.from_latlon(updated.lat, updated.lon, 10)
|
|
)
|
|
|> put_flash(:info, "Location updated.")
|
|
|> push_event("set_marker_draggable", %{draggable: false})}
|
|
|
|
{:error, :not_found} ->
|
|
{:noreply, put_flash(socket, :error, "You can only edit your own locations.")}
|
|
|
|
{:error, %Ecto.Changeset{}} ->
|
|
{:noreply, put_flash(socket, :error, "Could not save those coordinates.")}
|
|
end
|
|
|
|
_ ->
|
|
{:noreply, put_flash(socket, :error, "Sign in required.")}
|
|
end
|
|
end
|
|
|
|
def handle_event("delete", _params, socket) do
|
|
case current_user(socket.assigns[:current_scope]) do
|
|
%User{} = user ->
|
|
case Rover.delete_location(user, socket.assigns.location.id) do
|
|
{:ok, _} ->
|
|
{:noreply,
|
|
socket
|
|
|> put_flash(:info, "Location removed.")
|
|
|> push_navigate(to: ~p"/rover-locations")}
|
|
|
|
{:error, :not_found} ->
|
|
{:noreply, put_flash(socket, :error, "You can only delete your own locations.")}
|
|
end
|
|
|
|
_ ->
|
|
{:noreply, put_flash(socket, :error, "Sign in required.")}
|
|
end
|
|
end
|
|
|
|
defp load_location(id) do
|
|
case Ecto.UUID.cast(id) do
|
|
{:ok, uuid} -> Location |> Repo.get(uuid) |> Repo.preload(:user)
|
|
:error -> nil
|
|
end
|
|
end
|
|
|
|
defp current_user(scope) do
|
|
case scope do
|
|
%{user: %User{} = user} -> user
|
|
_ -> nil
|
|
end
|
|
end
|
|
|
|
defp can_modify?(scope, %Location{user_id: user_id}) do
|
|
case current_user(scope) do
|
|
%User{is_admin: true} -> true
|
|
%User{id: ^user_id} when not is_nil(user_id) -> true
|
|
_ -> false
|
|
end
|
|
end
|
|
|
|
defp status_label(:good), do: "Good"
|
|
defp status_label(:bad), do: "Bad"
|
|
defp status_label(_), do: ""
|
|
|
|
defp status_class(:good), do: "badge badge-success"
|
|
defp status_class(:bad), do: "badge badge-error"
|
|
defp status_class(_), do: "badge"
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<Layouts.app flash={@flash} current_scope={@current_scope} max_width="max-w-5xl">
|
|
<.header>
|
|
Rover Location
|
|
<:subtitle>
|
|
<span class={status_class(@location.status)}>{status_label(@location.status)}</span>
|
|
{@grid}
|
|
<span :if={@editing} class="ml-2 badge badge-warning">Editing — drag the marker</span>
|
|
</:subtitle>
|
|
<:actions>
|
|
<.link navigate={~p"/rover-locations"} class="btn btn-ghost btn-sm">
|
|
<.icon name="hero-arrow-left" class="w-4 h-4" /> Back
|
|
</.link>
|
|
|
|
<button
|
|
:if={can_modify?(@current_scope, @location) and not @editing}
|
|
type="button"
|
|
phx-click="toggle_edit"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
<.icon name="hero-pencil-square" class="w-4 h-4" /> Edit
|
|
</button>
|
|
|
|
<button
|
|
:if={@editing}
|
|
type="button"
|
|
phx-click="save_edit"
|
|
class="btn btn-primary btn-sm"
|
|
>
|
|
<.icon name="hero-check" class="w-4 h-4" /> Save
|
|
</button>
|
|
|
|
<button
|
|
:if={@editing}
|
|
type="button"
|
|
phx-click="cancel_edit"
|
|
class="btn btn-ghost btn-sm"
|
|
>
|
|
Cancel
|
|
</button>
|
|
|
|
<button
|
|
:if={can_modify?(@current_scope, @location) and not @editing}
|
|
type="button"
|
|
phx-click="delete"
|
|
data-confirm="Delete this location?"
|
|
class="btn btn-ghost btn-sm text-error"
|
|
>
|
|
<.icon name="hero-trash" class="w-4 h-4" /> Delete
|
|
</button>
|
|
</:actions>
|
|
</.header>
|
|
|
|
<div class="card bg-base-100 border border-base-300 p-4 mb-4">
|
|
<dl class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2 text-sm">
|
|
<div>
|
|
<dt class="text-base-content/60">Grid</dt>
|
|
<dd class="font-mono">{@grid}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-base-content/60">Coordinates</dt>
|
|
<dd class="font-mono">
|
|
{Float.round(@working_lat, 6)}, {Float.round(@working_lon, 6)}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-base-content/60">Status</dt>
|
|
<dd>
|
|
<span class={status_class(@location.status)}>
|
|
{status_label(@location.status)}
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-base-content/60">Added</dt>
|
|
<dd>{Calendar.strftime(@location.inserted_at, "%Y-%m-%d %H:%M UTC")}</dd>
|
|
</div>
|
|
<div :if={@location.user}>
|
|
<dt class="text-base-content/60">Submitted by</dt>
|
|
<dd>
|
|
<.link
|
|
navigate={~p"/u/#{@location.user.callsign}"}
|
|
class="link link-primary font-mono"
|
|
>
|
|
{@location.user.callsign}
|
|
</.link>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div :if={@location.notes && @location.notes != ""} class="mt-4">
|
|
<h3 class="text-sm text-base-content/60 mb-1">Notes</h3>
|
|
<p class="whitespace-pre-line text-sm">{@location.notes}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id={"location-map-#{@location.id}"}
|
|
phx-hook="LocationMap"
|
|
phx-update="ignore"
|
|
data-lat={@location.lat}
|
|
data-lon={@location.lon}
|
|
class="h-[70vh] rounded border border-base-300 z-0"
|
|
>
|
|
</div>
|
|
</Layouts.app>
|
|
"""
|
|
end
|
|
end
|