cloud-ip-validator/internal/dashboard/templates/overview.html

{{define "overview_page"}}
<!doctype html>
<html lang="ru">
<head>{{template "html_head" .}}</head>
<body>
<div class="bg-grid"></div>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<div class="shell">
{{template "sidebar_nav" .}}
<div>
{{template "topbar_mobile" .}}
<main class="main">
<div id="error-banner">{{template "banner_inner" .Banner}}</div>
{{template "overview_content" .}}
</main>
</div>
</div>
</body>
</html>
{{end}}

{{define "overview_content"}}
<div class="topbar">
<h1>Обзор</h1>
</div>

<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-tables" hx-swap="innerHTML"
  hx-include="#overview-filter" hx-trigger="input changed delay:300ms"
  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-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>
<option value="fail" {{if eq .StatusFilter "fail"}}selected{{end}}>fail</option>
<option value="cancelled" {{if eq .StatusFilter "cancelled"}}selected{{end}}>cancelled</option>
</select>
</div>
</div>
<p class="muted" style="padding:0 16px 12px">Действует на обе таблицы ниже. Фильтр по статусу — это фильтр по
итоговому результату, поэтому при выборе конкретного статуса строки «Текущей проверки» (у неё ещё нет результата)
не показываются.</p>
</form>

<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}}