From 6bc3564a5e824bb33f9e1a10e650f1162f6fd345 Mon Sep 17 00:00:00 2001
From: Mashintime <awh@brainless.us>
Date: Mon, 15 Jan 2024 13:49:39 -0500
Subject: [PATCH] Save grid enabled state and a few other tweaks to grid enable

---
 gui/src/components/dynamic_components.vue | 23 +++++++++++++++--------
 gui/src/store/settingsStore.js            |  2 ++
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/gui/src/components/dynamic_components.vue b/gui/src/components/dynamic_components.vue
index b5507f38..8cbb5ebb 100644
--- a/gui/src/components/dynamic_components.vue
+++ b/gui/src/components/dynamic_components.vue
@@ -38,7 +38,6 @@ import { Scatter } from "vue-chartjs";
 let count = ref(0);
 let grid = null; // DO NOT use ref(null) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
 let items = ref([]);
-let gridEnabledLocal = ref(true);
 class gridWidget {
   //Contains the vue component
   component2;
@@ -356,6 +355,7 @@ onMounted(() => {
       },
       false,
     );
+    setGridEditState();
 });
 function onChange(event, changeItems) {
   // update item position
@@ -432,9 +432,15 @@ function remove(widget) {
   grid.removeWidget(selector, false);
   saveGridLayout();
 }
-function disableGrid() {
-  gridEnabledLocal.value = !gridEnabledLocal.value
-  if (gridEnabledLocal.value)
+function toggleGridEdit() {
+  //Toggle setting
+  settingsStore.local.grid_enabled = !settingsStore.local.grid_enabled
+  setGridEditState();
+}
+function setGridEditState()
+{
+  //Apply grid state setting (allows/disallows moving, resizing, showing remove icon)
+  if (settingsStore.local.grid_enabled)
     grid.enable();
   else
     grid.disable();
@@ -487,7 +493,7 @@ function quickfill() {
           <button
             @click="remove(w)"
             class="btn-close grid-stack-floaty-btn"
-            :class="gridEnabledLocal === true ? 'visible':'invisible'"
+            :class="settingsStore.local.grid_enabled === true ? 'visible':'invisible'"
           ></button>
           <component :is="w.component2" />
         </div>
@@ -506,12 +512,13 @@ function quickfill() {
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
         Manage grid widgets &nbsp;<button
-        class="btn btn-sm btn-outline-info"
+        class="btn btn-sm"
+        :class="settingsStore.local.grid_enabled == true ? 'btn-outline-success' : 'btn-outline-danger'"
         type="button"
-        @click="disableGrid"
+        @click="toggleGridEdit"
         title="Lock/unloack changes to grid"
       >
-        <i class="bi" :class="gridEnabledLocal == true ? 'bi-unlock-fill' : 'bi-lock-fill'"></i>
+        <i class="bi" :class="settingsStore.local.grid_enabled == true ? 'bi-unlock-fill' : 'bi-lock-fill'"></i>
       </button>&nbsp;
       </h5>
 
diff --git a/gui/src/store/settingsStore.js b/gui/src/store/settingsStore.js
index 989c9201..9ee10885 100644
--- a/gui/src/store/settingsStore.js
+++ b/gui/src/store/settingsStore.js
@@ -21,6 +21,7 @@ nconf.defaults({
     enable_sys_notification: false,
     grid_layout: "[]",
     grid_preset: "[]",
+    grid_enabled: true,
   },
 });
 
@@ -36,6 +37,7 @@ export const settingsStore = reactive({
     enable_sys_notification: false,
     grid_layout: "[]",
     grid_preset: "[]",
+    grid_enabled: true,
   },
   remote: {
     AUDIO: {