Joseph Doherty
f1478c5a19
Adds drag-to-resize and drag-to-reorder column UX to AuditResultsGrid, with chosen widths + column order persisted in browser sessionStorage. - wwwroot/js/audit-grid.js: dependency-free helper — pointer-driven resize handles, native HTML5 drag-and-drop reorder, and a sessionStorage save/load wrapper (mirrors treeview-storage.js). - AuditResultsGrid: renders a resize handle per <th>, makes headers draggable, applies persisted widths via a --audit-col-width custom property, and wires reorder into the existing ColumnOrder / OrderedColumns() mechanism. JS-invokable OnColumnResized / OnColumnReordered persist + re-render. A stored order naming an unknown column degrades gracefully (drops unknown keys, appends missing columns in default order); widths clamp to a 64px minimum. - AuditResultsGrid.razor.css: subtle scoped styling for the resize handle affordance and the reorder drop-target highlight. - App.razor references audit-grid.js alongside the other scripts. - Tests: 6 new bUnit tests for the load/apply/persist logic and graceful degradation; a new AuditGridColumnTests Playwright suite for the drag UX + reload persistence. Audit page bUnit tests set loose JSInterop mode since the grid now calls into audit-grid.js.
84 lines
3.3 KiB
Plaintext
84 lines
3.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<base href="/" />
|
|
<title>ScadaLink</title>
|
|
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
|
|
<link href="/ScadaLink.Host.styles.css" rel="stylesheet" />
|
|
<link href="_content/ScadaLink.CentralUI/css/site.css" rel="stylesheet" />
|
|
<HeadOutlet @rendermode="InteractiveServer" />
|
|
</head>
|
|
<body>
|
|
<Routes @rendermode="InteractiveServer" />
|
|
|
|
<div id="reconnect-modal">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="spinner-border text-primary mb-3" role="status">
|
|
<span class="visually-hidden">Reconnecting...</span>
|
|
</div>
|
|
<h5>Connection Lost</h5>
|
|
<p class="text-muted mb-0">Attempting to reconnect to the server. Please wait...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/_framework/blazor.web.js"
|
|
autostart="false"></script>
|
|
<script>
|
|
// Reconnection overlay for failover behavior. After a docker redeploy
|
|
// (or other server-side restart), Blazor exhausts its retry budget and
|
|
// leaves the user staring at a stuck "Reconnect failed" overlay. Auto-
|
|
// reload in that case so the user lands on a fresh circuit instead of
|
|
// having to manually refresh.
|
|
Blazor.start({
|
|
circuit: {
|
|
reconnectionOptions: {
|
|
maxRetries: 8,
|
|
retryIntervalMilliseconds: 1500
|
|
},
|
|
reconnectionHandler: {
|
|
onConnectionDown: () => { /* default overlay */ },
|
|
onConnectionUp: () => {
|
|
var m = document.getElementById('reconnect-modal');
|
|
if (m) m.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (typeof Blazor !== 'undefined') {
|
|
Blazor.addEventListener?.('enhancedload', () => {
|
|
var m = document.getElementById('reconnect-modal');
|
|
if (m) m.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
|
|
// When Blazor gives up reconnecting, it adds the
|
|
// `components-reconnect-failed` class to the reconnect modal element.
|
|
// Watch for it and auto-reload so the user gets a fresh circuit.
|
|
var mo = new MutationObserver(() => {
|
|
var m = document.getElementById('reconnect-modal');
|
|
if (!m) return;
|
|
if (m.classList.contains('components-reconnect-failed')) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
mo.observe(document.documentElement, {
|
|
attributes: true,
|
|
subtree: true,
|
|
attributeFilter: ['class']
|
|
});
|
|
</script>
|
|
<script src="/js/treeview-storage.js"></script>
|
|
<script src="_content/ScadaLink.CentralUI/js/monaco-init.js"></script>
|
|
<script src="_content/ScadaLink.CentralUI/js/audit-grid.js"></script>
|
|
<script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|