ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test: improve css

Browse Source
This commit is contained in:
nate
2026-03-19 12:08:06 +04:00
parent 437b493567
commit c1392a7dd9
13 changed files with 282 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/detail.ejs
+23 -23
View File
@@ -23,43 +23,43 @@
<div class="flex items-center justify-between mb-8">
<div>
<div class="flex items-center gap-3">
<span id="status-dot"><%~ lastPing ? (lastPing.up ? '<span class="inline-block w-2.5 h-2.5 rounded-full bg-green-400 mr-2" title="Up"></span>' : '<span class="inline-block w-2.5 h-2.5 rounded-full bg-red-400 mr-2" title="Down"></span>') : '<span class="inline-block w-2.5 h-2.5 rounded-full bg-gray-600 mr-2" title="Unknown"></span>' %></span>
<span id="status-dot"><%~ lastPing ? (lastPing.up ? '<span class="inline-block w-2.5 h-2.5 rounded-full dot-up mr-2" title="Up"></span>' : '<span class="inline-block w-2.5 h-2.5 rounded-full dot-down mr-2" title="Down"></span>') : '<span class="inline-block w-2.5 h-2.5 rounded-full dot-unknown mr-2" title="Unknown"></span>' %></span>
<h2 id="monitor-name" class="text-xl font-semibold text-gray-100"><%= m.name %></h2>
</div>
<p id="monitor-url" class="text-sm text-gray-500 mt-1"><%= m.url %></p>
</div>
<div class="flex items-center gap-3">
<form action="/dashboard/monitors/<%= m.id %>/toggle" method="POST" class="inline">
<button type="submit" id="toggle-btn" class="text-sm px-4 py-2 rounded-lg border transition-colors <%= m.enabled ? 'border-gray-700 hover:border-gray-600 text-gray-300' : 'border-green-800 hover:border-green-700 text-green-400' %>"><%= m.enabled ? 'Pause' : 'Resume' %></button>
<button type="submit" id="toggle-btn" class="btn-secondary text-sm px-4 py-2 <%= m.enabled ? '' : '!border-green-800/50 !text-green-400 hover:!border-green-700/60' %>"><%= m.enabled ? 'Pause' : 'Resume' %></button>
</form>
<form action="/dashboard/monitors/<%= m.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete this monitor? This cannot be undone.')">
<button type="submit" id="delete-btn" class="text-sm px-4 py-2 rounded-lg border border-red-900/50 text-red-400 hover:bg-red-900/20 transition-colors">Delete</button>
<button type="submit" id="delete-btn" class="text-sm px-4 py-2 rounded-lg border border-red-900/30 text-red-400 hover:bg-red-900/20 hover:border-red-800/40 transition-colors">Delete</button>
</form>
</div>
</div>
<!-- Stats row -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
<div class="stat-card rounded-xl p-4">
<div class="text-xs text-gray-500 mb-1">Status</div>
<div id="stat-status" class="text-lg font-semibold"><%~ lastPing ? (lastPing.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>') : '<span class="text-gray-500">—</span>' %></div>
</div>
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
<div class="stat-card rounded-xl p-4">
<div class="text-xs text-gray-500 mb-1">Avg Latency</div>
<div id="stat-latency" class="text-lg font-semibold text-gray-200"><%= avgLatency != null ? avgLatency + 'ms' : '—' %></div>
</div>
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
<div class="stat-card rounded-xl p-4">
<div class="text-xs text-gray-500 mb-1">Uptime</div>
<div id="stat-uptime" class="text-lg font-semibold text-gray-200"><%= uptime != null ? uptime + '%' : '—' %></div>
</div>
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
<div class="stat-card rounded-xl p-4">
<div class="text-xs text-gray-500 mb-1">Last Ping</div>
<div id="stat-last" class="text-lg font-semibold text-gray-200"><%~ lastPing ? it.timeAgoSSR(lastPing.checked_at) : '—' %></div>
</div>
</div>
<!-- Latency chart -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4 mb-8">
<div class="card-static p-4 mb-8">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm text-gray-400">Response Time</h3>
<div id="chart-legend" class="flex gap-3 text-xs text-gray-500"></div>
@@ -68,7 +68,7 @@
<!-- SSR SVG chart (works without JS, replaced by canvas when JS loads) -->
<div id="chart-ssr" class="w-full h-full"><%~ it.latencyChartSSR(chartPings) %></div>
<canvas id="chart-canvas" class="w-full h-full hidden"></canvas>
<div id="chart-tooltip" class="absolute hidden bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-xs pointer-events-none z-10 shadow-lg" style="min-width:140px"></div>
<div id="chart-tooltip" class="absolute hidden card-static px-3 py-2 text-xs pointer-events-none z-10" style="min-width:140px"></div>
<div id="chart-crosshair" class="absolute top-0 bottom-0 w-px bg-gray-600/50 pointer-events-none hidden"></div>
<span id="chart-ymax" class="absolute top-1 left-2 text-gray-600 text-xs pointer-events-none"></span>
<span id="chart-ymin" class="absolute bottom-1 left-2 text-gray-600 text-xs pointer-events-none"></span>
@@ -76,22 +76,22 @@
</div>
<!-- Status bar -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4 mb-8">
<div class="card-static p-4 mb-8">
<h3 class="text-sm text-gray-400 mb-3">Status History</h3>
<div id="status-bar" class="flex gap-0.5 h-8 rounded overflow-hidden">
<div id="status-bar" class="flex gap-0.5 h-8 rounded-lg overflow-hidden">
<% if (barPings.length > 0) { %>
<% barPings.forEach(function(c) { %>
<div class="flex-1 <%= c.up ? 'bg-green-500/70' : 'bg-red-500/70' %>" title="<%= new Date(c.checked_at).toLocaleString() %> — <%= c.up ? 'Up' : 'Down' %> <%= c.latency_ms ? c.latency_ms + 'ms' : '' %>"></div>
<div class="flex-1 rounded-sm <%= c.up ? 'bg-green-500/70' : 'bg-red-500/70' %>" title="<%= new Date(c.checked_at).toLocaleString() %> — <%= c.up ? 'Up' : 'Down' %> <%= c.latency_ms ? c.latency_ms + 'ms' : '' %>"></div>
<% }) %>
<% } else { %>
<div class="flex-1 bg-gray-800 text-center text-xs text-gray-600 leading-8">No data</div>
<div class="flex-1 bg-gray-800/50 text-center text-xs text-gray-600 leading-8 rounded-lg">No data</div>
<% } %>
</div>
</div>
<!-- Recent pings table -->
<div class="bg-gray-900 border border-gray-800 rounded-xl mb-8 overflow-hidden">
<div class="px-4 py-3 border-b border-gray-800">
<div class="card-static mb-8 overflow-hidden">
<div class="px-4 py-3 border-b divider">
<h3 class="text-sm text-gray-400">Recent Pings</h3>
</div>
<div class="overflow-x-auto">
@@ -113,9 +113,9 @@
<th class="text-left px-4 py-2 font-medium">Error</th>
</tr>
</thead>
<tbody id="pings-table" class="divide-y divide-gray-800/50">
<tbody id="pings-table" class="divide-y divide-border-subtle">
<% pings.slice(0, 30).forEach(function(c) { %>
<tr class="hover:bg-gray-800/50">
<tr class="table-row-alt">
<td class="px-4 py-2"><%~ c.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>' %></td>
<td class="px-4 py-2 text-gray-300"><%= c.status_code != null ? c.status_code : '—' %></td>
<td class="px-4 py-2 text-gray-300"><%= c.latency_ms != null ? c.latency_ms + 'ms' : '—' %></td>
@@ -131,9 +131,9 @@
</div>
<!-- Edit form -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
<div class="card-static p-6">
<h3 class="text-sm text-gray-400 mb-4">Edit Monitor</h3>
<%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800', border: 'border-gray-700' }, plan: it.plan }) %>
<%~ include('./partials/monitor-form', { _form: { monitor: m, isEdit: true, prefix: 'edit-', bg: 'bg-gray-800/50', border: 'border-border-subtle' }, plan: it.plan }) %>
</div>
</div>
</main>
@@ -465,8 +465,8 @@
? '<span class="text-green-400">Up</span>'
: '<span class="text-red-400">Down</span>';
document.getElementById('status-dot').innerHTML = ping.up
? '<span class="inline-block w-2.5 h-2.5 rounded-full bg-green-400 mr-2"></span>'
: '<span class="inline-block w-2.5 h-2.5 rounded-full bg-red-400 mr-2"></span>';
? '<span class="inline-block w-2.5 h-2.5 rounded-full dot-up mr-2"></span>'
: '<span class="inline-block w-2.5 h-2.5 rounded-full dot-down mr-2"></span>';
// Avg latency
if (_latCount > 0)
@@ -483,7 +483,7 @@
const bar = document.getElementById('status-bar');
if (bar) {
const seg = document.createElement('div');
seg.className = `flex-1 ${ping.up ? 'bg-green-500/70' : 'bg-red-500/70'}`;
seg.className = `flex-1 rounded-sm ${ping.up ? 'bg-green-500/70' : 'bg-red-500/70'}`;
seg.title = `${new Date(ping.checked_at).toLocaleString()} — ${ping.up ? 'Up' : 'Down'}${ping.latency_ms ? ' ' + ping.latency_ms + 'ms' : ''}`;
bar.prepend(seg);
while (bar.children.length > 60) bar.removeChild(bar.lastChild);
@@ -493,7 +493,7 @@
const tbody = document.getElementById('pings-table');
if (tbody) {
const tr = document.createElement('tr');
tr.className = 'hover:bg-gray-800/50';
tr.className = 'table-row-alt';
const regionFlags = {'eu-central':'🇩🇪','us-west':'🇺🇸'};
const regionDisplay = ping.region ? `${regionFlags[ping.region] || '🌐'} ${ping.region}` : '—';
tr.innerHTML = `