Redesign timeline cards and drilldown UX

This commit is contained in:
2026-02-22 21:19:43 +03:00
parent ec54d3249e
commit 5a6a1c9d4d
20 changed files with 2923 additions and 200 deletions

View File

@@ -124,31 +124,19 @@
<section class="card">
<h2>Movement & Events</h2>
{{if .Events}}
<div class="timeline">
{{range .Events}}
<div class="event">
<div>
<div class="time" title="{{formatTimeFull .EventTime}}">{{formatTime .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="asset-timeline-panel-{{.Asset.ID}}" class="timeline-panel"></div>
<div class="meta">Timeline groups similar events per day and shows source (ingest / csv / manual edit).</div>
</section>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
initTimelinePanel({
rootId: 'asset-timeline-panel-{{.Asset.ID}}',
apiBase: '/api/history/assets/{{.Asset.ID}}/timeline',
detailBase: '/api/history/assets/{{.Asset.ID}}/events'
});
});
</script>
<script>
const assetEditToggle = document.getElementById('asset-edit-toggle');
const assetEditCancel = document.getElementById('asset-edit-cancel');