reanimator/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign timeline cards and drilldown UX

Browse Source
This commit is contained in:
Michael Chus
2026-02-22 21:19:43 +03:00
parent ec54d3249e
commit 5a6a1c9d4d
20 changed files with 2923 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
internal/api/ui_component.tmpl
View File

@@ -68,31 +68,19 @@
<section class="card">
<h2>Timeline</h2>
{{if .Events}}
<div class="timeline">
{{range .Events}}
<div class="event">
<div>
<div class="time">{{formatTimeFull .EventTime}}</div>
<div class="pill {{timelineEventClass .EventType}}">{{.EventType}}</div>
</div>
<div>
<div class="detail">Asset {{assetLabel .MachineID $.AssetLabelByID}} · Component {{componentLabel .PartID $.ComponentLabelByID}}</div>
<div class="meta">
Type {{eventComponentType .PartID $.EventComponentByID}} ·
Location {{eventComponentLocation .PartID $.EventComponentByID}} ·
Model {{eventComponentModel .PartID $.EventComponentByID}} ·
Firmware {{if .FirmwareVersion}}{{.FirmwareVersion}}{{else}}{{eventComponentFirmware .PartID $.EventComponentByID}}{{end}}
</div>
</div>
</div>
{{end}}
</div>
{{else}}
<div class="meta">No timeline events.</div>
{{end}}
<div id="component-timeline-panel-{{.Component.ID}}" class="timeline-panel"></div>
<div class="meta">Timeline groups repeated events and lets you drill down to individual history entries.</div>
</section>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
initTimelinePanel({
rootId: 'component-timeline-panel-{{.Component.ID}}',
apiBase: '/api/history/components/{{.Component.ID}}/timeline',
detailBase: '/api/history/components/{{.Component.ID}}/events'
});
});
</script>
<script>
const componentEditToggle = document.getElementById('component-edit-toggle');
const componentEditCancel = document.getElementById('component-edit-cancel');