Add authenticated layout to form and show pages
- Add authenticated layout with navigation to equipment/site forms and show pages - Remove remaining DaisyUI classes from detail pages - Update buttons to use proper component variants - Ensure consistent styling across all authenticated pages
This commit is contained in:
parent
dffa46dfde
commit
f7b681e8f7
4 changed files with 278 additions and 272 deletions
|
|
@ -1,13 +1,13 @@
|
|||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>
|
||||
{if @live_action == :new, do: "Add new equipment to monitor", else: "Update equipment details"}
|
||||
</:subtitle>
|
||||
</.header>
|
||||
<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 mt-8">
|
||||
<.form for={@form} id="equipment-form" phx-change="validate" phx-submit="save">
|
||||
<div class="space-y-4">
|
||||
<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 />
|
||||
|
|
@ -33,10 +33,10 @@
|
|||
|
||||
<.input field={@form[:monitoring_enabled]} type="checkbox" label="Enable Monitoring" />
|
||||
|
||||
<div class="flex gap-2">
|
||||
<.button phx-disable-with="Saving...">Save Equipment</.button>
|
||||
<.link navigate={~p"/orgs/#{@organization.slug}/equipment"} class="btn">Cancel</.link>
|
||||
<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>
|
||||
</div>
|
||||
</.form>
|
||||
</div>
|
||||
</.form>
|
||||
</div>
|
||||
</Layouts.authenticated>
|
||||
|
|
|
|||
|
|
@ -1,150 +1,154 @@
|
|||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>{@equipment.ip_address}</:subtitle>
|
||||
<:actions>
|
||||
<.button phx-click="trigger_check" class="btn-sm btn-primary">
|
||||
<.icon name="hero-arrow-path" class="w-4 h-4" /> Check Now
|
||||
</.button>
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/edit"}
|
||||
class="btn btn-sm"
|
||||
>
|
||||
<.icon name="hero-pencil" class="w-4 h-4" /> Edit
|
||||
</.link>
|
||||
<.button phx-click="delete" data-confirm="Are you sure?" class="btn-error btn-sm">
|
||||
<.icon name="hero-trash" class="w-4 h-4" /> Delete
|
||||
</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
<Layouts.authenticated flash={@flash} current_organization={@current_organization}>
|
||||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>{@equipment.ip_address}</:subtitle>
|
||||
<:actions>
|
||||
<.button phx-click="trigger_check" variant="primary">
|
||||
<.icon name="hero-arrow-path" class="h-4 w-4" /> Check Now
|
||||
</.button>
|
||||
<.button navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{@equipment.id}/edit"}>
|
||||
<.icon name="hero-pencil" class="h-4 w-4" /> Edit
|
||||
</.button>
|
||||
<.button
|
||||
phx-click="delete"
|
||||
data-confirm="Are you sure?"
|
||||
class="bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600"
|
||||
>
|
||||
<.icon name="hero-trash" class="h-4 w-4" /> Delete
|
||||
</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Equipment Details</h3>
|
||||
<dl class="space-y-3">
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Status</dt>
|
||||
<dd class="mt-1">
|
||||
<span class={[
|
||||
"badge badge-lg",
|
||||
@equipment.status == :up && "badge-success",
|
||||
@equipment.status == :down && "badge-error",
|
||||
@equipment.status == :unknown && "badge-ghost"
|
||||
]}>
|
||||
{@equipment.status |> to_string() |> String.upcase()}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Site</dt>
|
||||
<dd class="mt-1">
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@equipment.site.id}"}
|
||||
class="link link-primary"
|
||||
>
|
||||
{@equipment.site.name}
|
||||
</.link>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">IP Address</dt>
|
||||
<dd class="mt-1 font-mono">{@equipment.ip_address}</dd>
|
||||
</div>
|
||||
|
||||
<%= if @equipment.description do %>
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">
|
||||
Equipment Details
|
||||
</h3>
|
||||
<dl class="space-y-4">
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Description</dt>
|
||||
<dd class="mt-1">{@equipment.description}</dd>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Status</dt>
|
||||
<dd class="mt-1">
|
||||
<span class={[
|
||||
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
||||
@equipment.status == :up &&
|
||||
"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
||||
@equipment.status == :down &&
|
||||
"bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
||||
@equipment.status == :unknown &&
|
||||
"bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
|
||||
]}>
|
||||
{@equipment.status |> to_string() |> String.upcase()}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Monitoring</dt>
|
||||
<dd class="mt-1">
|
||||
<%= if @equipment.monitoring_enabled do %>
|
||||
<span class="badge badge-success">Enabled</span>
|
||||
<% else %>
|
||||
<span class="badge badge-ghost">Disabled</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Site</dt>
|
||||
<dd class="mt-1">
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@equipment.site.id}"}
|
||||
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
{@equipment.site.name}
|
||||
</.link>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Check Interval</dt>
|
||||
<dd class="mt-1">{@equipment.check_interval_seconds} seconds</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">IP Address</dt>
|
||||
<dd class="mt-1 font-mono text-zinc-900 dark:text-zinc-100">{@equipment.ip_address}</dd>
|
||||
</div>
|
||||
|
||||
<%= if @equipment.description do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Description</dt>
|
||||
<dd class="mt-1 text-zinc-900 dark:text-zinc-100">{@equipment.description}</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Monitoring</dt>
|
||||
<dd class="mt-1">
|
||||
<%= if @equipment.monitoring_enabled do %>
|
||||
<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||
Enabled
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
|
||||
Disabled
|
||||
</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Check Interval</dt>
|
||||
<dd class="mt-1 text-zinc-900 dark:text-zinc-100">
|
||||
{@equipment.check_interval_seconds} seconds
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">
|
||||
Monitoring History
|
||||
</h3>
|
||||
<dl class="space-y-4">
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Last Checked</dt>
|
||||
<dd class="mt-1 text-zinc-900 dark:text-zinc-100">
|
||||
<%= if @equipment.last_checked_at do %>
|
||||
{Calendar.strftime(@equipment.last_checked_at, "%Y-%m-%d %H:%M:%S UTC")}
|
||||
<% else %>
|
||||
<span class="text-zinc-500 dark:text-zinc-500">Never</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Last Status Change</dt>
|
||||
<dd class="mt-1 text-zinc-900 dark:text-zinc-100">
|
||||
<%= if @equipment.last_status_change_at do %>
|
||||
{Calendar.strftime(@equipment.last_status_change_at, "%Y-%m-%d %H:%M:%S UTC")}
|
||||
<% else %>
|
||||
<span class="text-zinc-500 dark:text-zinc-500">Never</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Monitoring History</h3>
|
||||
<dl class="space-y-3">
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Last Checked</dt>
|
||||
<dd class="mt-1">
|
||||
<%= if @equipment.last_checked_at do %>
|
||||
{Calendar.strftime(@equipment.last_checked_at, "%Y-%m-%d %H:%M:%S UTC")}
|
||||
<% else %>
|
||||
<span class="text-base-content/40">Never</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Recent Checks</h3>
|
||||
<%= if Enum.empty?(@recent_checks) do %>
|
||||
<div class="text-zinc-600 dark:text-zinc-400 text-center py-8">
|
||||
No monitoring checks yet
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Last Status Change</dt>
|
||||
<dd class="mt-1">
|
||||
<%= if @equipment.last_status_change_at do %>
|
||||
{Calendar.strftime(@equipment.last_status_change_at, "%Y-%m-%d %H:%M:%S UTC")}
|
||||
<% else %>
|
||||
<.table id="recent-checks" rows={@recent_checks}>
|
||||
<:col :let={check} label="Status">
|
||||
<span class={[
|
||||
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
||||
check.status == :success &&
|
||||
"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
||||
check.status == :failure && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
|
||||
]}>
|
||||
{check.status |> to_string() |> String.upcase()}
|
||||
</span>
|
||||
</:col>
|
||||
<:col :let={check} label="Response Time">
|
||||
<%= if check.response_time_ms do %>
|
||||
{check.response_time_ms}ms
|
||||
<% else %>
|
||||
<span class="text-base-content/40">Never</span>
|
||||
<span class="text-zinc-500 dark:text-zinc-500">-</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</:col>
|
||||
<:col :let={check} label="Checked At">
|
||||
{Calendar.strftime(check.checked_at, "%Y-%m-%d %H:%M:%S UTC")}
|
||||
</:col>
|
||||
</.table>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<h3 class="text-lg font-semibold mb-4">Recent Checks</h3>
|
||||
<%= if Enum.empty?(@recent_checks) do %>
|
||||
<div class="text-base-content/60 text-center py-8">
|
||||
No monitoring checks yet
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Response Time</th>
|
||||
<th>Checked At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<%= for check <- @recent_checks do %>
|
||||
<tr>
|
||||
<td>
|
||||
<span class={[
|
||||
"badge",
|
||||
check.status == :success && "badge-success",
|
||||
check.status == :failure && "badge-error"
|
||||
]}>
|
||||
{check.status |> to_string() |> String.upcase()}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<%= if check.response_time_ms do %>
|
||||
{check.response_time_ms}ms
|
||||
<% else %>
|
||||
<span class="text-base-content/40">-</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td>{Calendar.strftime(check.checked_at, "%Y-%m-%d %H:%M:%S UTC")}</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</Layouts.authenticated>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>
|
||||
{if @live_action == :new,
|
||||
do: "Add a new site to your organization",
|
||||
else: "Update site details"}
|
||||
</:subtitle>
|
||||
</.header>
|
||||
<Layouts.authenticated flash={@flash} current_organization={@organization}>
|
||||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>
|
||||
{if @live_action == :new,
|
||||
do: "Add a new site to your organization",
|
||||
else: "Update site details"}
|
||||
</:subtitle>
|
||||
</.header>
|
||||
|
||||
<div class="max-w-2xl mt-8">
|
||||
<.form for={@form} id="site-form" phx-change="validate" phx-submit="save">
|
||||
<div class="space-y-4">
|
||||
<div class="max-w-2xl">
|
||||
<.form for={@form} id="site-form" phx-change="validate" phx-submit="save">
|
||||
<.input field={@form[:name]} type="text" label="Site Name" required />
|
||||
|
||||
<.input
|
||||
|
|
@ -24,10 +24,10 @@
|
|||
|
||||
<.input field={@form[:description]} type="textarea" label="Description" />
|
||||
|
||||
<div class="flex gap-2">
|
||||
<.button phx-disable-with="Saving...">Save Site</.button>
|
||||
<.link navigate={~p"/orgs/#{@organization.slug}/sites"} class="btn">Cancel</.link>
|
||||
<div class="flex gap-3 mt-6">
|
||||
<.button phx-disable-with="Saving..." variant="primary">Save Site</.button>
|
||||
<.button navigate={~p"/orgs/#{@organization.slug}/sites"}>Cancel</.button>
|
||||
</div>
|
||||
</div>
|
||||
</.form>
|
||||
</div>
|
||||
</.form>
|
||||
</div>
|
||||
</Layouts.authenticated>
|
||||
|
|
|
|||
|
|
@ -1,108 +1,110 @@
|
|||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>{@site.location}</:subtitle>
|
||||
<:actions>
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@site.id}/edit"}
|
||||
class="btn btn-sm"
|
||||
>
|
||||
<.icon name="hero-pencil" class="w-4 h-4" /> Edit
|
||||
</.link>
|
||||
<.button phx-click="delete" data-confirm="Are you sure?" class="btn-error btn-sm">
|
||||
<.icon name="hero-trash" class="w-4 h-4" /> Delete
|
||||
</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">Site Details</h3>
|
||||
<dl class="space-y-2">
|
||||
<%= if @site.parent_site do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Parent Site</dt>
|
||||
<dd class="mt-1">
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@site.parent_site.id}"}
|
||||
class="link link-primary"
|
||||
>
|
||||
{@site.parent_site.name}
|
||||
</.link>
|
||||
</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @site.location do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Location</dt>
|
||||
<dd class="mt-1">{@site.location}</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @site.description do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-base-content/60">Description</dt>
|
||||
<dd class="mt-1">{@site.description}</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
</dl>
|
||||
|
||||
<%= if @site.child_sites != [] do %>
|
||||
<div class="mt-6">
|
||||
<h4 class="text-sm font-semibold mb-2">Child Sites</h4>
|
||||
<ul class="space-y-1">
|
||||
<li :for={child <- @site.child_sites}>
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{child.id}"}
|
||||
class="link link-primary text-sm"
|
||||
>
|
||||
{child.name}
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold">Equipment</h3>
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/equipment/new?site_id=#{@site.id}"}
|
||||
class="btn btn-sm btn-primary"
|
||||
<Layouts.authenticated flash={@flash} current_organization={@current_organization}>
|
||||
<.header>
|
||||
{@page_title}
|
||||
<:subtitle>{@site.location}</:subtitle>
|
||||
<:actions>
|
||||
<.button navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@site.id}/edit"}>
|
||||
<.icon name="hero-pencil" class="h-4 w-4" /> Edit
|
||||
</.button>
|
||||
<.button
|
||||
phx-click="delete"
|
||||
data-confirm="Are you sure?"
|
||||
class="bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600"
|
||||
>
|
||||
<.icon name="hero-plus" class="w-4 h-4" /> Add Equipment
|
||||
</.link>
|
||||
<.icon name="hero-trash" class="h-4 w-4" /> Delete
|
||||
</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
|
||||
<div class="mt-8 grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-zinc-900 dark:text-zinc-100">Site Details</h3>
|
||||
<dl class="space-y-4">
|
||||
<%= if @site.parent_site do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Parent Site</dt>
|
||||
<dd class="mt-1">
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{@site.parent_site.id}"}
|
||||
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
{@site.parent_site.name}
|
||||
</.link>
|
||||
</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @site.location do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Location</dt>
|
||||
<dd class="mt-1 text-zinc-900 dark:text-zinc-100">{@site.location}</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @site.description do %>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Description</dt>
|
||||
<dd class="mt-1 text-zinc-900 dark:text-zinc-100">{@site.description}</dd>
|
||||
</div>
|
||||
<% end %>
|
||||
</dl>
|
||||
|
||||
<%= if @site.child_sites != [] do %>
|
||||
<div class="mt-6">
|
||||
<h4 class="text-sm font-semibold mb-3 text-zinc-900 dark:text-zinc-100">Child Sites</h4>
|
||||
<ul class="space-y-2">
|
||||
<li :for={child <- @site.child_sites}>
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/sites/#{child.id}"}
|
||||
class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
>
|
||||
{child.name}
|
||||
</.link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= if @equipment == [] do %>
|
||||
<p class="text-sm text-base-content/60">No equipment at this site yet.</p>
|
||||
<% else %>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
:for={eq <- @equipment}
|
||||
class="flex items-center justify-between p-3 bg-base-200 rounded"
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Equipment</h3>
|
||||
<.button
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/equipment/new?site_id=#{@site.id}"}
|
||||
variant="primary"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium">{eq.name}</p>
|
||||
<p class="text-sm text-base-content/60">{eq.ip_address}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class={[
|
||||
"badge badge-sm",
|
||||
eq.status == :up && "badge-success",
|
||||
eq.status == :down && "badge-error",
|
||||
eq.status == :unknown && "badge-ghost"
|
||||
]}>
|
||||
{eq.status |> to_string() |> String.upcase()}
|
||||
</span>
|
||||
<.link
|
||||
navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{eq.id}"}
|
||||
class="btn btn-xs"
|
||||
>
|
||||
View
|
||||
</.link>
|
||||
<.icon name="hero-plus" class="h-4 w-4" /> Add Equipment
|
||||
</.button>
|
||||
</div>
|
||||
|
||||
<%= if @equipment == [] do %>
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">No equipment at this site yet.</p>
|
||||
<% else %>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
:for={eq <- @equipment}
|
||||
class="flex items-center justify-between rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900"
|
||||
>
|
||||
<div>
|
||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">{eq.name}</p>
|
||||
<p class="text-sm text-zinc-600 dark:text-zinc-400">{eq.ip_address}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class={[
|
||||
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
|
||||
eq.status == :up &&
|
||||
"bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
||||
eq.status == :down && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
|
||||
eq.status == :unknown &&
|
||||
"bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
|
||||
]}>
|
||||
{eq.status |> to_string() |> String.upcase()}
|
||||
</span>
|
||||
<.button navigate={~p"/orgs/#{@current_organization.slug}/equipment/#{eq.id}"}>
|
||||
View
|
||||
</.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layouts.authenticated>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue