Fix Overview layout: stats panel, filter panel, then tables (in that order)

Placing the filter form outside the polled div (so the poll can't wipe out
typed/selected values) put it before the stat-grid, since both used to
live inside that same polled block — stats ended up after the filter
instead of before it, as it always was.

Splits the stat-grid out into its own #overview-stats div, positioned
before the filter form; the actual poll target is now #overview-tables
(just the two tables). Since #overview-stats no longer polls directly,
/overview/fragment now also renders it as an out-of-band swap alongside
the main #overview-tables response — the same hx-swap-oob idiom already
used for the shared error banner — so the stat counts still refresh every
tick even though they're outside the polled element.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ayurishchevandClaude Sonnet 5 committed 2026-09-23 12:13:23 +03:00
1 parent 281c9188a2
commit 3e33841ada
9 files changed
+72 -15

No files matched your search

+12 -8
View File
@@ -24,20 +24,24 @@
<h1>Обзор</h1>
</div>
<form id="overview-filter" class="panel" onsubmit="return false">
<div id="overview-stats">
{{template "overview_stats" .}}
</div>
<form id="overview-filter" class="panel" onsubmit="return false" style="margin-top:16px">
<div class="panel-body field-row">
<div class="field" style="flex:1 1 260px">
<label for="overview-q">Поиск по IP</label>
<input type="search" id="overview-q" name="q" value="{{.Query}}" placeholder="203.0.113.10"
hx-get="/overview/fragment" hx-target="#overview-live" hx-swap="innerHTML"
hx-get="/overview/fragment" hx-target="#overview-tables" hx-swap="innerHTML"
hx-include="#overview-filter" hx-trigger="input changed delay:300ms"
hx-sync="#overview-live:queue last">
hx-sync="#overview-tables:queue last">
</div>
<div class="field">
<label for="overview-status">Статус</label>
<select id="overview-status" name="status"
hx-get="/overview/fragment" hx-target="#overview-live" hx-swap="innerHTML"
hx-include="#overview-filter" hx-trigger="change" hx-sync="#overview-live:queue last">
hx-get="/overview/fragment" hx-target="#overview-tables" hx-swap="innerHTML"
hx-include="#overview-filter" hx-trigger="change" hx-sync="#overview-tables:queue last">
<option value="">Все</option>
<option value="pass" {{if eq .StatusFilter "pass"}}selected{{end}}>pass</option>
<option value="partial" {{if eq .StatusFilter "partial"}}selected{{end}}>partial</option>
@@ -51,8 +55,8 @@
не показываются.</p>
</form>
<div id="overview-live" hx-get="/overview/fragment" hx-trigger="every {{.PollSeconds}}s"
hx-include="#overview-filter" hx-sync="#overview-live:queue last" hx-swap="innerHTML">
{{template "overview_fragment" .}}
<div id="overview-tables" hx-get="/overview/fragment" hx-trigger="every {{.PollSeconds}}s"
hx-include="#overview-filter" hx-sync="#overview-tables:queue last" hx-swap="innerHTML">
{{template "overview_tables" .}}
</div>
{{end}}
@@ -1,4 +1,4 @@
{{define "overview_fragment"}}
{{define "overview_stats"}}
<div class="stat-grid">
<div class="stat-card accented"><span class="value">{{.Status.TotalIPs}}</span><span class="label">всего IP</span></div>
<div class="stat-card"><span class="value">{{.Status.TotalValidators}}</span><span class="label">валидаторов</span></div>
@@ -6,7 +6,17 @@
<div class="stat-card{{if eq $state "failed"}} bad{{else if eq $state "checking"}} accented{{end}}"><span class="value">{{$count}}</span><span class="label">{{$state}}</span></div>
{{end}}
</div>
{{end}}
{{/* Out-of-band counterpart of overview_stats, appended to every
/overview/fragment response alongside overview_tables (the actual
hx-target) — same OOB idiom as templates/layout.html's error_banner.
Needed because overview_stats lives outside the polled #overview-tables
div (see overview.html) so the DOM order can be stats -> filter form ->
tables, yet the stat counts still refresh on every poll tick. */}}
{{define "overview_stats_oob"}}<div id="overview-stats" hx-swap-oob="true">{{template "overview_stats" .}}</div>{{end}}
{{define "overview_tables"}}
<h2 class="section-title">Текущая проверка</h2>
{{if .CurrentItems}}
<div class="panel">