bvandeusen
525f6eedbd
Milestone 72 phase B — Grafana-style drag-resize grid for dashboard widgets: - DashboardWidget: replace `position` with a 12-col grid placement (grid_x/grid_y/grid_w/grid_h). Migration 0021 backfills the old position order into a 3-up grid (4 cols x 4 cells each) and drops position. - View + share render a static CSS grid from x/y/w/h: fixed cell height (h * 70px) with the body scrolling, so the arranged layout is what's shown; collapses to a single column under 820px. - Edit view: Gridstack.js 12.6.0 (vanilla, CDN, pinned) — drag the title bar to move, drag a corner/edge to resize; every change autosaves to a new /d/<id>/edit/layout endpoint. Replaces the SortableJS position reorder. - add_widget appends at the bottom-left; remove no longer renumbers. _get_widgets now orders by grid position (drives DOM + mobile fallback order). Note: Gridstack drag-resize is browser-only, so CI can't exercise it — needs an operator visual check of the edit experience. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
59 lines
2.5 KiB
HTML
59 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
{% from "_macros.html" import crumbs %}
|
|
{% block title %}Edit: {{ dashboard.name }} — Steward{% endblock %}
|
|
{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), ("Dashboards", "/dashboards/"), ("Edit " ~ dashboard.name, "")]) }}{% endblock %}
|
|
{% block head %}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack.min.css">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
|
|
<h1 class="page-title" style="margin-bottom:0;">Edit: {{ dashboard.name }}</h1>
|
|
<a href="/d/{{ dashboard.id }}" class="btn btn-ghost btn-sm">Done</a>
|
|
</div>
|
|
{% include "dashboard/_edit_panels.html" %}
|
|
{% endblock %}
|
|
{% block extra_scripts %}
|
|
<script src="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack-all.min.js"></script>
|
|
<script>
|
|
(function () {
|
|
// (Re)initialise the drag-resize grid. Called on first load and after every
|
|
// HTMX swap (add/remove re-renders #edit-panels with fresh markup, so the old
|
|
// grid DOM is gone and we bind to the new container).
|
|
function initGrid() {
|
|
var el = document.querySelector('.grid-stack');
|
|
if (!el || el.gridstack) return; // already bound to this node
|
|
var dashId = el.dataset.dashId;
|
|
var grid = GridStack.init({
|
|
column: 12,
|
|
cellHeight: 70,
|
|
margin: 8,
|
|
float: false, // compact upward, no floating gaps
|
|
handle: '.panel-drag', // drag by the title bar; buttons stay clickable
|
|
resizable: { handles: 'e, se, s' },
|
|
}, el);
|
|
function save() {
|
|
var items = grid.save(false).map(function (n) {
|
|
return { id: parseInt(n.id, 10), x: n.x, y: n.y, w: n.w, h: n.h };
|
|
});
|
|
fetch('/d/' + dashId + '/edit/layout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ items: items }),
|
|
});
|
|
}
|
|
grid.on('change', save);
|
|
}
|
|
document.addEventListener('DOMContentLoaded', initGrid);
|
|
document.addEventListener('htmx:afterSwap', initGrid);
|
|
})();
|
|
</script>
|
|
<style>
|
|
/* Each Gridstack panel reads as a card; the title bar is the drag handle. */
|
|
.edit-panel { background:var(--bg-card); border:1px solid var(--border-mid); border-radius:6px;
|
|
padding:0.7rem 0.85rem; height:100%; overflow:hidden; }
|
|
.panel-drag { display:flex; align-items:center; gap:0.5rem; cursor:grab; user-select:none; }
|
|
.panel-drag:active { cursor:grabbing; }
|
|
.grid-stack-item-content { inset:0; }
|
|
</style>
|
|
{% endblock %}
|