Save grid enabled state and a few other tweaks to grid enable

This commit is contained in:
Mashintime 2024-01-15 13:49:39 -05:00
parent 66e23be799
commit 6bc3564a5e
2 changed files with 17 additions and 8 deletions

View file

@ -38,7 +38,6 @@ import { Scatter } from "vue-chartjs";
let count = ref(0); 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 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 items = ref([]);
let gridEnabledLocal = ref(true);
class gridWidget { class gridWidget {
//Contains the vue component //Contains the vue component
component2; component2;
@ -356,6 +355,7 @@ onMounted(() => {
}, },
false, false,
); );
setGridEditState();
}); });
function onChange(event, changeItems) { function onChange(event, changeItems) {
// update item position // update item position
@ -432,9 +432,15 @@ function remove(widget) {
grid.removeWidget(selector, false); grid.removeWidget(selector, false);
saveGridLayout(); saveGridLayout();
} }
function disableGrid() { function toggleGridEdit() {
gridEnabledLocal.value = !gridEnabledLocal.value //Toggle setting
if (gridEnabledLocal.value) 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(); grid.enable();
else else
grid.disable(); grid.disable();
@ -487,7 +493,7 @@ function quickfill() {
<button <button
@click="remove(w)" @click="remove(w)"
class="btn-close grid-stack-floaty-btn" class="btn-close grid-stack-floaty-btn"
:class="gridEnabledLocal === true ? 'visible':'invisible'" :class="settingsStore.local.grid_enabled === true ? 'visible':'invisible'"
></button> ></button>
<component :is="w.component2" /> <component :is="w.component2" />
</div> </div>
@ -506,12 +512,13 @@ function quickfill() {
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasGridItemsLabel"> <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
Manage grid widgets &nbsp;<button 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" type="button"
@click="disableGrid" @click="toggleGridEdit"
title="Lock/unloack changes to grid" 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; </button>&nbsp;
</h5> </h5>

View file

@ -21,6 +21,7 @@ nconf.defaults({
enable_sys_notification: false, enable_sys_notification: false,
grid_layout: "[]", grid_layout: "[]",
grid_preset: "[]", grid_preset: "[]",
grid_enabled: true,
}, },
}); });
@ -36,6 +37,7 @@ export const settingsStore = reactive({
enable_sys_notification: false, enable_sys_notification: false,
grid_layout: "[]", grid_layout: "[]",
grid_preset: "[]", grid_preset: "[]",
grid_enabled: true,
}, },
remote: { remote: {
AUDIO: { AUDIO: {