dashboard: work around gridstack serialization inconsistency and cleanup the BaseWidget slightly (https://github.com/opnsense/core/issues/7480)

This commit is contained in:
Stephan de Wit 2024-05-27 14:27:35 +02:00
parent 0eb3e61c67
commit 8a5789840c
3 changed files with 13 additions and 21 deletions

View File

@ -45,19 +45,9 @@ $( document ).ready(function() {
let widgetManager = new WidgetManager({
float: false,
columnOpts: {
columnMax: 7,
breakpoints: [
{w:500, c:1},
{w:700, c:2},
{w:850, c:3},
{w:1100, c:4},
{w:1250, c:5},
{w:1600, c:5},
{w:1800, c:6},
{w:2000, c:7}
]
columnWidth: 300
},
margin: 10,
margin: 5,
alwaysShowResizeHandle: false,
sizeToContent: true,
resizable: {

View File

@ -186,11 +186,10 @@ class WidgetManager {
}
widget.setTranslations(this.widgetTranslations[id]);
widget.setTitle(this.widgetTranslations[id].title);
// setup generic panels
let content = widget.getMarkup();
let $panel = this._makeWidget(id, widget.title, content);
let $panel = this._makeWidget(id, this.widgetTranslations[id].title, content);
if (id in this.widgetConfigurations) {
this.widgetConfigurations[id].content = $panel.prop('outerHTML');
@ -273,9 +272,17 @@ class WidgetManager {
$('#save-spinner').addClass('show');
$('#save-grid').prop('disabled', true);
//this.grid.cellHeight('auto', false);
let items = this.grid.save(false);
//this.grid.cellHeight(1, false);
items.forEach(({item}) => {
// XXX the gridstack save() behavior is inconsistent with the responsive columnWidth option,
// as the calculation will return impossible values for the x, y, w and h attributes.
// For now, the gs-{x,y,w,h} attributes are a better representation of the grid for layout persistence
let elem = $(this.widgetHTMLElements[item.id]);
item.x = parseInt(elem.attr('gs-x')) ?? 1;
item.y = parseInt(elem.attr('gs-y')) ?? 1;
item.w = parseInt(elem.attr('gs-w')) ?? 1;
item.h = parseInt(elem.attr('gs-h')) ?? 1;
});
$.ajax({
type: "POST",

View File

@ -28,7 +28,6 @@ export default class BaseWidget {
constructor(config) {
this.config = config;
this.id = null;
this.title = "";
this.translations = {};
this.tickTimeout = 5000; // Default tick timeout
this.resizeHandles = "all"
@ -42,10 +41,6 @@ export default class BaseWidget {
this.id = id;
}
setTitle(title) {
this.title = title;
}
setTranslations(translations) {
this.translations = translations;
}