towerops/lib/towerops_web/live/equipment_live/form.html.heex
2026-01-03 14:41:28 -06:00

103 lines
3.3 KiB
Text

<Layouts.authenticated flash={@flash} current_organization={@organization}>
<.header>
{@page_title}
<:subtitle>
{if @live_action == :new,
do: "Add new equipment to monitor",
else: "Update equipment details"}
</:subtitle>
</.header>
<div class="max-w-2xl">
<.form for={@form} id="equipment-form" phx-change="validate" phx-submit="save">
<.input field={@form[:name]} type="text" label="Equipment Name" required />
<.input field={@form[:ip_address]} type="text" label="IP Address" required />
<.input
field={@form[:site_id]}
type="select"
label="Site"
required
prompt="Select a site"
options={Enum.map(@available_sites, &{&1.name, &1.id})}
/>
<.input field={@form[:description]} type="textarea" label="Description" />
<.input
field={@form[:check_interval_seconds]}
type="number"
label="Check Interval (seconds)"
min="30"
max="3600"
/>
<.input field={@form[:monitoring_enabled]} type="checkbox" label="Enable Monitoring" />
<div class="mt-8 border-t pt-6">
<h3 class="text-lg font-medium mb-4">SNMP Configuration</h3>
<p class="text-sm text-gray-600 mb-4">
Enable SNMP to discover device details, monitor sensors, and track interface statistics.
</p>
<.input field={@form[:snmp_enabled]} type="checkbox" label="Enable SNMP Monitoring" />
<div
:if={@form[:snmp_enabled].value}
class="mt-4 space-y-4 pl-6 border-l-2 border-blue-200"
>
<.input
field={@form[:snmp_version]}
type="select"
label="SNMP Version"
required
value={@form[:snmp_version].value || "2c"}
options={[{"SNMPv1", "1"}, {"SNMPv2c", "2c"}]}
/>
<.input
field={@form[:snmp_community]}
type="text"
label="Community String"
required
autocomplete="off"
/>
<.input
field={@form[:snmp_port]}
type="number"
label="SNMP Port"
min="1"
max="65535"
value={@form[:snmp_port].value || 161}
/>
<div
:if={@snmp_test_result}
class="rounded-md p-3"
class={[
@snmp_test_result.success && "bg-green-50 text-green-800",
!@snmp_test_result.success && "bg-red-50 text-red-800"
]}
>
<div class="flex items-center gap-2">
<.icon :if={@snmp_test_result.success} name="hero-check-circle" class="w-5 h-5" />
<.icon :if={!@snmp_test_result.success} name="hero-x-circle" class="w-5 h-5" />
<span class="text-sm font-medium">{@snmp_test_result.message}</span>
</div>
</div>
<.button type="button" phx-click="test_snmp" phx-disable-with="Testing...">
Test SNMP Connection
</.button>
</div>
</div>
<div class="flex gap-3 mt-6">
<.button phx-disable-with="Saving..." variant="primary">Save Equipment</.button>
<.button navigate={~p"/orgs/#{@organization.slug}/equipment"}>Cancel</.button>
</div>
</.form>
</div>
</Layouts.authenticated>