graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: NetBox sync direction cards now clickable via phx-click instead of hidden radio buttons

Browse source
This commit is contained in:
Graham McIntire 2026-02-14 14:41:29 -06:00
parent eb120807b6
commit 44e9d20d35
2 changed files with 55 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/towerops_web/live/org/settings_live.ex
View file

@ -310,6 +310,11 @@ defmodule ToweropsWeb.Org.SettingsLive do
end
@impl true
def handle_event("set_netbox_sync_direction", %{"direction" => direction}, socket) do
netbox_config = Map.put(socket.assigns.netbox_config, "sync_direction", direction)
{:noreply, assign(socket, :netbox_config, netbox_config)}
end
def handle_event("validate_integration", %{"integration" => params}, socket) do
integration = get_current_integration(socket)

114
lib/towerops_web/live/org/settings_live.html.heex
View file

@ -1137,34 +1137,26 @@
<p class="text-xs text-gray-500 dark:text-gray-400 mb-4 ml-6">
Choose how data flows between TowerOps and NetBox. You can change this later.
</p>
<input
type="hidden"
name="integration[sync_direction]"
value={@netbox_config["sync_direction"] || "pull"}
/>
<div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
<label class={[
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
if(
@netbox_config["sync_direction"] in [
"pull",
"",
nil
],
do:
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
else:
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
)
]}>
<input
type="radio"
name="integration[sync_direction]"
value="pull"
checked={
@netbox_config["sync_direction"] in [
"pull",
"",
nil
]
}
class="sr-only"
/>
<div
phx-click="set_netbox_sync_direction"
phx-value-direction="pull"
class={[
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
if(
@netbox_config["sync_direction"] in ["pull", "", nil],
do:
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
else:
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
)
]}
>
<div class="flex flex-col">
<span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
<.icon name="hero-arrow-down-tray" class="h-4 w-4 text-indigo-600" />
@ -1174,24 +1166,21 @@
NetBox is the source of truth. Import devices, sites, and IPs from NetBox into TowerOps.
</span>
</div>
</label>
<label class={[
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
if(
@netbox_config["sync_direction"] == "push",
do:
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
else:
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
)
]}>
<input
type="radio"
name="integration[sync_direction]"
value="push"
class="sr-only"
checked={@netbox_config["sync_direction"] == "push"}
/>
</div>
<div
phx-click="set_netbox_sync_direction"
phx-value-direction="push"
class={[
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
if(
@netbox_config["sync_direction"] == "push",
do:
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
else:
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
)
]}
>
<div class="flex flex-col">
<span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
<.icon name="hero-arrow-up-tray" class="h-4 w-4 text-orange-600" />
@ -1201,24 +1190,21 @@
TowerOps is the source of truth. Push discovered devices and monitoring data to NetBox.
</span>
</div>
</label>
<label class={[
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all focus:outline-none",
if(
@netbox_config["sync_direction"] == "both",
do:
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
else:
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
)
]}>
<input
type="radio"
name="integration[sync_direction]"
value="both"
class="sr-only"
checked={@netbox_config["sync_direction"] == "both"}
/>
</div>
<div
phx-click="set_netbox_sync_direction"
phx-value-direction="both"
class={[
"relative flex cursor-pointer rounded-lg border p-4 shadow-xs transition-all",
if(
@netbox_config["sync_direction"] == "both",
do:
"border-indigo-600 ring-2 ring-indigo-600 bg-indigo-50 dark:bg-indigo-900/20",
else:
"border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20 hover:shadow-md"
)
]}
>
<div class="flex flex-col">
<span class="flex items-center gap-1.5 text-sm font-semibold text-gray-900 dark:text-white">
<.icon
@ -1230,7 +1216,7 @@
Merge data from both systems. Conflicts resolved by most-recently-updated. Requires write token.
</span>
</div>
</label>
</div>
</div>
</div>