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

{{define "targets_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 "targets_content" .}}
</main>
</div>
</div>
<script>
(function () {
  var maxLines = 20;
  function resize(el) {
    var cs = getComputedStyle(el);
    var lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
    var paddingV = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
    var borderV = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
    var maxHeight = Math.round(lineHeight * maxLines + paddingV + borderV);
    el.style.height = 'auto';
    var next = Math.min(el.scrollHeight, maxHeight);
    el.style.height = next + 'px';
    el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
  }
  function bind(el) {
    if (el.dataset.autosizeBound) return;
    el.dataset.autosizeBound = '1';
    el.addEventListener('input', function () { resize(el); });
    // An element inside a hidden (display:none) edit row reports
    // scrollHeight 0 — sizing it now would wrongly collapse it to ~0px
    // and that inline height sticks around after the row is later shown.
    // Skip the initial measurement here; toggleEditRow re-measures once
    // the row is actually visible.
    if (el.offsetParent !== null) resize(el);
  }
  function bindAll() {
    document.querySelectorAll('textarea.autosize').forEach(bind);
  }
  document.addEventListener('DOMContentLoaded', bindAll);
  document.body.addEventListener('htmx:afterSwap', bindAll);

  // Shared by every row's "Изменить"/"Отмена" buttons (see targets_table).
  window.toggleEditRow = function (name) {
    var row = document.getElementById('edit-' + name);
    if (!row) return;
    row.hidden = !row.hidden;
    if (!row.hidden) {
      var ta = row.querySelector('textarea.autosize');
      if (ta) { bind(ta); resize(ta); }
    }
  };
})();
</script>
</body>
</html>
{{end}}

{{define "targets_content"}}
<div class="topbar"><h1>Цели проверки</h1></div>
<p class="muted" style="margin-bottom:16px">Группа целей — именованный список URL/адресов, на который затем ссылаются типы проверок.</p>

<div id="targets-stats-wrap">{{template "targets_stats_inner" .}}</div>

<div class="panel">
<div class="panel-head"><h2>Новая группа целей</h2></div>
<div class="panel-body">
<form hx-post="/targets" hx-target="#targets-table-wrap" hx-swap="innerHTML" hx-on::after-request="this.reset()">
<div class="field-row">
<div class="field" style="flex: 0 1 200px;">
<label for="new-group-name">Имя новой группы</label>
<input type="text" id="new-group-name" name="name" placeholder="web" required>
</div>
<div class="field" style="flex: 1 1 380px;">
<label for="new-group-targets">Цели (по одной на строку или через запятую)</label>
<textarea id="new-group-targets" name="targets" rows="2" class="autosize" placeholder="https://hub.docker.com&#10;https://github.com" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Создать</button>
</div>
</form>
</div>
</div>

<div id="targets-table-wrap">
{{template "targets_table" .}}
</div>
{{end}}

{{/* Stat-grid content only, shared by the initial page render (plain,
     inside #targets-stats-wrap above) and the OOB update below (targets
     mutations only swap #targets-table-wrap, so the stats need their own
     out-of-band refresh to stay live — same pattern as layout.html's
     banner_inner/error_banner split). */}}
{{define "targets_stats_inner"}}
<div class="stat-grid cols-4">
<div class="stat-card accented"><span class="value">{{.Stats.Groups}}</span><span class="label">групп целей</span></div>
<div class="stat-card"><span class="value">{{.Stats.TotalTargets}}</span><span class="label">адресов всего</span></div>
<div class="stat-card"><span class="value">{{.Stats.CheckTypesUsing}}</span><span class="label">типа проверок ссылаются</span></div>
<div class="stat-card{{if gt .Stats.Unused 0}} warn{{end}}"><span class="value">{{.Stats.Unused}}</span><span class="label">без типа проверки</span></div>
</div>
{{end}}

{{define "targets_stats_oob"}}<div id="targets-stats-wrap" hx-swap-oob="true">{{template "targets_stats_inner" .}}</div>{{end}}

{{define "targets_table"}}
<div class="panel">
<div class="table-scroll">
<table>
<thead><tr><th>Группа</th><th>Цели</th><th>Используется в</th><th></th></tr></thead>
<tbody>
{{range .Items}}
<tr>
<td data-label="Группа">
<span class="group-name"><span class="mono" style="font-weight:600">{{.Name}}</span><span class="count">{{len .Targets}} {{pluralAddr (len .Targets)}}</span></span>
</td>
<td data-label="Цели">
<div class="chip-list">{{range .Targets}}<span class="chip">{{.}}</span>{{end}}</div>
</td>
<td data-label="Используется в">
{{if .UsedBy}}<div class="used-by">{{range .UsedBy}}<span class="pill {{if .Enabled}}pill-success{{else}}pill-neutral{{end}}">{{.Name}}{{if not .Enabled}} (выкл.){{end}}</span>{{end}}</div>
{{else}}<span class="muted">не используется ни одним типом проверки</span>{{end}}
</td>
<td data-label="">
<div class="actions">
<button type="button" class="btn btn-ghost btn-sm" onclick="toggleEditRow('{{.Name}}')">Изменить</button>
<button class="btn btn-danger-ghost btn-sm" hx-delete="/targets/{{.Name}}" hx-target="#targets-table-wrap" hx-swap="innerHTML" hx-confirm="Удалить группу {{.Name}}?">Удалить</button>
</div>
</td>
</tr>
<tr class="edit-row" id="edit-{{.Name}}" hidden>
<td colspan="4">
<form class="inline-form" hx-put="/targets/{{.Name}}" hx-target="#targets-table-wrap" hx-swap="innerHTML">
<textarea name="targets" rows="2" class="autosize">{{join .Targets "\n"}}</textarea>
<button type="submit" class="btn btn-primary btn-sm">Сохранить</button>
<button type="button" class="btn btn-ghost btn-sm" onclick="toggleEditRow('{{.Name}}')">Отмена</button>
</form>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{if .Items}}<div class="section-note">Колонка «Используется в» показывает типы проверок (<a href="/check-types" style="color:var(--accent)">/check-types</a>), которые ссылаются на группу; пусто — группа ничем не используется. «Изменить» разворачивает поле для редактирования только для этой группы.</div>{{end}}
</div>
{{if not .Items}}<p class="muted">Групп целей нет.</p>{{end}}
{{end}}