58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
{{define "stations"}}
|
|
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-3">
|
|
<h2 class="text-sm font-semibold text-slate-700">Station Status</h2>
|
|
{{if .IsLive}}
|
|
<span class="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
|
|
<span class="live-dot h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Live
|
|
</span>
|
|
{{end}}
|
|
</div>
|
|
{{if .Rows}}
|
|
<div class="p-3">
|
|
<table class="min-w-full text-sm">
|
|
<thead>
|
|
<tr class="text-left text-xs font-semibold uppercase tracking-wide text-slate-400">
|
|
<th class="px-3 py-2">Station</th>
|
|
<th class="px-3 py-2 text-right">Sudah</th>
|
|
<th class="px-3 py-2 text-right">Belum</th>
|
|
<th class="px-3 py-2 text-right">Total</th>
|
|
<th class="px-3 py-2 w-40">Progress</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-50">
|
|
{{range .Rows}}
|
|
<tr class="station-row hover:bg-slate-50 transition-colors"
|
|
data-station-key="{{.Station | stationShort}}"
|
|
data-processed="{{.Processed}}"
|
|
data-pending="{{.Pending}}"
|
|
data-total="{{.Total}}">
|
|
<td class="px-3 py-2.5 font-medium text-slate-700">
|
|
{{.Station | stationShort}}
|
|
</td>
|
|
<td class="num px-3 py-2.5 text-right font-semibold text-slate-900">{{.Processed}}</td>
|
|
<td class="num px-3 py-2.5 text-right text-amber-600">{{.Pending}}</td>
|
|
<td class="num px-3 py-2.5 text-right text-slate-400">{{.Total}}</td>
|
|
<td class="px-3 py-2.5">
|
|
<div class="flex items-center gap-2">
|
|
<div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
|
<div class="h-full rounded-full transition-all"
|
|
style="width: {{printf "%.1f" .Pct}}%; background: {{if ge .Pct 90.0}}#10b981{{else if ge .Pct 60.0}}#3b50a0{{else}}#f59e0b{{end}}">
|
|
</div>
|
|
</div>
|
|
<span class="num text-xs font-semibold {{if ge .Pct 90.0}}text-emerald-600{{else if ge .Pct 60.0}}text-brand-600{{else}}text-amber-600{{end}}">
|
|
{{printf "%.0f%%" .Pct}}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
<div class="px-5 py-8 text-center text-sm text-slate-400">
|
|
Belum ada data station pada tanggal ini.
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|