Redesign timeline cards and drilldown UX
This commit is contained in:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user