andros
bdd181425b
Docker Compose project with automated Playwright benchmarks comparing django-liveview 2.2.0 against Phoenix LiveView 1.0 across 6 scenarios.
75 lines
2.7 KiB
Plaintext
75 lines
2.7 KiB
Plaintext
<div class="max-w-4xl mx-auto py-10 px-4">
|
|
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-bold">Alert Dashboard</h1>
|
|
<span class="text-sm text-gray-400">Phoenix LiveView</span>
|
|
</div>
|
|
<span id="ws-status" class={"text-xs px-2 py-1 rounded #{if @ws_ready, do: "bg-green-100 text-green-700", else: "bg-yellow-100 text-yellow-700"}"}>
|
|
<%= if @ws_ready, do: "connected", else: "connecting..." %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6 mb-6">
|
|
<div class="bg-white rounded-lg shadow px-6 py-4">
|
|
<div class="text-sm text-gray-500">Total alerts</div>
|
|
<div class="text-3xl font-bold" id="alert-count"><%= @count %></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 mb-6">
|
|
<button
|
|
id="add-alert-btn"
|
|
phx-click="add_alert"
|
|
class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2 rounded-lg transition-colors">
|
|
+ Add Alert
|
|
</button>
|
|
<form phx-change="search" class="flex-1">
|
|
<input
|
|
id="search-input"
|
|
type="text"
|
|
placeholder="Filter alerts..."
|
|
value={@search}
|
|
phx-debounce="0"
|
|
name="query"
|
|
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
</form>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-100 text-gray-600 uppercase text-xs">
|
|
<tr>
|
|
<th class="text-left px-4 py-3 w-28">Type</th>
|
|
<th class="text-left px-4 py-3">Description</th>
|
|
<th class="text-left px-4 py-3 w-40">Created</th>
|
|
<th class="px-4 py-3 w-20"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="alerts-tbody">
|
|
<%= for alert <- @alerts do %>
|
|
<tr id={"alert-#{alert.id}"} class="border-b border-gray-100 hover:bg-gray-50">
|
|
<td class="px-4 py-3">
|
|
<span class={type_class(alert.alert_type)}><%= alert.alert_type %></span>
|
|
</td>
|
|
<td class="px-4 py-3"><%= alert.description %></td>
|
|
<td class="px-4 py-3 text-gray-400 text-xs"><%= format_time(alert.inserted_at) %></td>
|
|
<td class="px-4 py-3 text-right">
|
|
<button
|
|
class="delete-btn text-red-500 hover:text-red-700 text-xs font-semibold"
|
|
phx-click="delete_alert"
|
|
phx-value-id={alert.id}>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
<%= if @alerts == [] do %>
|
|
<div class="text-center py-12 text-gray-400" id="empty-state">No alerts yet.</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
</div>
|