Graham McIntire
7d4f7dd7d4
- Add active_page attribute to authenticated layout - Update nav_link component to show active state with border and text styling - Update all LiveView templates to pass active_page parameter - Fix datetime truncation issues in tests and schemas for :utc_datetime fields - Fix dashboard test assertions for equipment status text
114 lines
4.3 KiB
Text
114 lines
4.3 KiB
Text
<Layouts.authenticated
|
|
flash={@flash}
|
|
current_organization={@current_organization}
|
|
active_page="sites"
|
|
>
|
|
<.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-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>
|
|
|
|
<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"
|
|
>
|
|
<.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>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</Layouts.authenticated>
|