119 lines
6.3 KiB
HTML
119 lines
6.3 KiB
HTML
{{ define "timeline_pattern.html" }}
|
|
{{ template "demo_doc_start" . }}
|
|
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Grouped timeline cards by day with source/action filters and single drilldown modal." "back_url" "/" "back_text" "← Back to catalog") }}
|
|
|
|
<section class="panel panel-composite" id="timeline-module">
|
|
<div class="panel-subsection" id="timeline-filters">
|
|
<div class="panel-head"><h2>Timeline Filters</h2></div>
|
|
<div class="segmented" style="margin-bottom:10px;">
|
|
<a class="segment {{ if eq .ActionFilter "" }}active{{ end }}" href="{{ index .ActionURLs "" }}">All actions</a>
|
|
<a class="segment {{ if eq .ActionFilter "installation" }}active{{ end }}" href="{{ index .ActionURLs "installation" }}">Installation</a>
|
|
<a class="segment {{ if eq .ActionFilter "removal" }}active{{ end }}" href="{{ index .ActionURLs "removal" }}">Removal</a>
|
|
<a class="segment {{ if eq .ActionFilter "edit" }}active{{ end }}" href="{{ index .ActionURLs "edit" }}">Edit</a>
|
|
</div>
|
|
<div class="segmented">
|
|
<a class="segment {{ if eq .SourceFilter "" }}active{{ end }}" href="{{ index .SourceURLs "" }}">All sources</a>
|
|
<a class="segment {{ if eq .SourceFilter "manual" }}active{{ end }}" href="{{ index .SourceURLs "manual" }}">Manual</a>
|
|
<a class="segment {{ if eq .SourceFilter "ingest" }}active{{ end }}" href="{{ index .SourceURLs "ingest" }}">Ingest</a>
|
|
<a class="segment {{ if eq .SourceFilter "system" }}active{{ end }}" href="{{ index .SourceURLs "system" }}">System</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-subsection panel-subsection-divider" id="timeline-cards">
|
|
<div class="panel-head"><h2>Grouped Cards</h2></div>
|
|
{{ if .Cards }}
|
|
<div class="timeline-cards">
|
|
{{ range .Cards }}
|
|
<article class="timeline-card">
|
|
<div class="timeline-card-top">
|
|
<div>
|
|
<p class="timeline-day">{{ .Day }}</p>
|
|
<h3>{{ .Title }}</h3>
|
|
</div>
|
|
<div class="timeline-meta">
|
|
<span class="status status-review">{{ .Action }}</span>
|
|
<span class="status status-{{ if eq .Source "manual" }}ready{{ else if eq .Source "ingest" }}warning{{ else }}review{{ end }}">{{ .Source }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-summary-grid">
|
|
<div>
|
|
<div class="meta">Models / Types</div>
|
|
<div class="chip-row">{{ range .SummaryLeft }}<span class="chip">{{ . }}</span>{{ end }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="meta">Slots / Scope</div>
|
|
<div class="chip-row">{{ range .SummaryRight }}<span class="chip">{{ . }}</span>{{ end }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-card-actions">
|
|
<span class="meta">{{ .Count }} event(s)</span>
|
|
<a class="btn btn-secondary" href="{{ .OpenURL }}">Open details</a>
|
|
</div>
|
|
</article>
|
|
{{ end }}
|
|
</div>
|
|
{{ else }}
|
|
<div class="notice">No timeline cards match current filters.</div>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
|
|
{{ if .OpenCard }}
|
|
<div class="demo-modal-backdrop">
|
|
<section class="demo-modal timeline-modal">
|
|
<div class="demo-modal-titlebar">
|
|
<a class="demo-modal-close-dot" href="{{ .ClearCardURL }}" aria-label="Close modal"></a>
|
|
<div class="demo-modal-title">{{ .OpenCard.Title }}</div>
|
|
</div>
|
|
<div class="demo-modal-body">
|
|
<p class="meta">{{ .OpenCard.Day }} · {{ .OpenCard.Source }} · {{ .OpenCard.Action }}</p>
|
|
<form id="timeline-drilldown" class="filters" method="get" action="/patterns/timeline#timeline-drilldown" style="margin-top:12px;">
|
|
<input type="hidden" name="action" value="{{ .ActionFilter }}">
|
|
<input type="hidden" name="source" value="{{ .SourceFilter }}">
|
|
<input type="hidden" name="open" value="{{ .OpenCard.ID }}">
|
|
<label>Filter events in card
|
|
<input type="search" name="q" value="{{ .CardSearch }}" placeholder="serial / slot / model / source">
|
|
</label>
|
|
<div></div><div></div>
|
|
<div class="filter-actions">
|
|
<button class="btn btn-primary btn-pair" type="submit">Apply</button>
|
|
<a class="btn btn-ghost btn-pair" href="{{ .ClearCardURL }}">Reset</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="timeline-drill-grid">
|
|
<div class="timeline-drill-list">
|
|
{{ if .OpenCard.Items }}
|
|
{{ range .OpenCard.Items }}
|
|
<a class="timeline-item {{ if and $.ActiveEvent (eq $.ActiveEvent.ID .ID) }}active{{ end }}" href="/patterns/timeline?action={{ $.ActionFilter }}&source={{ $.SourceFilter }}&open={{ $.OpenCard.ID }}{{ if $.CardSearch }}&q={{ $.CardSearch }}{{ end }}&event={{ .ID }}#timeline-drilldown">
|
|
<div class="timeline-item-title">{{ .Action }} · {{ .At }}</div>
|
|
<div class="timeline-item-meta">{{ .Entity }} · {{ .Target }}</div>
|
|
<div class="timeline-item-meta">{{ .Slot }} · {{ .Device }} · {{ .Source }}</div>
|
|
</a>
|
|
{{ end }}
|
|
{{ else }}
|
|
<div class="notice">No events match the card filter.</div>
|
|
{{ end }}
|
|
</div>
|
|
<div class="timeline-drill-detail">
|
|
{{ if .ActiveEvent }}
|
|
<h3 style="margin-top:0;">Event Detail</h3>
|
|
<div class="meta">When: {{ .ActiveEvent.At }}</div>
|
|
<div class="meta">Action: {{ .ActiveEvent.Action }}</div>
|
|
<div class="meta">Source: {{ .ActiveEvent.Source }}</div>
|
|
<div class="meta">Entity: {{ .ActiveEvent.Entity }}</div>
|
|
<div class="meta">Target: {{ .ActiveEvent.Target }}</div>
|
|
<div class="meta">Slot / Device: {{ .ActiveEvent.Slot }} · {{ .ActiveEvent.Device }}</div>
|
|
<div class="notice" style="margin-top:12px;">{{ .ActiveEvent.Detail }}</div>
|
|
{{ else }}
|
|
<div class="meta">Select an event to view details.</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{{ end }}
|
|
{{ template "demo_doc_end" . }}
|
|
{{ end }}
|