From 8a5789840c6a22e784ca5d443daab3f064fbc7e9 Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Mon, 27 May 2024 14:27:35 +0200
Subject: [PATCH] dashboard: work around gridstack serialization inconsistency
 and cleanup the BaseWidget slightly
 (https://github.com/opnsense/core/issues/7480)

---
 .../mvc/app/views/OPNsense/Core/dashboard.volt    | 14 ++------------
 src/opnsense/www/js/opnsense_widget_manager.js    | 15 +++++++++++----
 src/opnsense/www/js/widgets/BaseWidget.js         |  5 -----
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Core/dashboard.volt b/src/opnsense/mvc/app/views/OPNsense/Core/dashboard.volt
index a61e7e455..7537c791e 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Core/dashboard.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Core/dashboard.volt
@@ -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: {
diff --git a/src/opnsense/www/js/opnsense_widget_manager.js b/src/opnsense/www/js/opnsense_widget_manager.js
index 5d3b9a078..92d752649 100644
--- a/src/opnsense/www/js/opnsense_widget_manager.js
+++ b/src/opnsense/www/js/opnsense_widget_manager.js
@@ -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",
diff --git a/src/opnsense/www/js/widgets/BaseWidget.js b/src/opnsense/www/js/widgets/BaseWidget.js
index 93349b16e..55b4474b7 100644
--- a/src/opnsense/www/js/widgets/BaseWidget.js
+++ b/src/opnsense/www/js/widgets/BaseWidget.js
@@ -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;
     }