From b4170f532907cb03b603a874e4d1d77002b46eb4 Mon Sep 17 00:00:00 2001 From: Mashintime Date: Sat, 9 Dec 2023 01:08:15 -0500 Subject: [PATCH] Grid changes --- gui/src/components/dynamic_components2.vue | 250 ++++++++++++++++----- gui/src/js/eventHandler.js | 2 +- 2 files changed, 198 insertions(+), 54 deletions(-) diff --git a/gui/src/components/dynamic_components2.vue b/gui/src/components/dynamic_components2.vue index f3d3f9ac..928a7c39 100644 --- a/gui/src/components/dynamic_components2.vue +++ b/gui/src/components/dynamic_components2.vue @@ -20,56 +20,62 @@ import grid_activities from "./grid_activities.vue"; import { stateDispatcher } from "../js/eventHandler"; let count = ref(0); -let info = ref(""); -let gridFloat = ref(false); -let color = ref("black"); -let gridInfo = ref(""); 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([]); class gridWidget { + //Contains the vue component component2; + //Initial size and location if autoplace is false size; + //Text for dynamic button text; - constructor(component, size, text) { + //if true add when quick fill button is clicked + quickFill; + //Auto place; true to add where ever it fits; false uses position information + autoPlace; + constructor(component, size, text, quickfill,autoPlace) { this.component2 = component; this.size = size; this.text = text; + this.quickFill=quickfill; + this.autoPlace = autoPlace; } } const gridWidgets = [ new gridWidget( active_heard_stations, - { x: 0, y: 0, w: 7, h: 20 }, - "Heard stations", + { x: 0, y: 0, w: 16, h: 40 }, + "Heard stations",true,true ), new gridWidget( active_stats, - { x: 0, y: 0, w: 4, h: 35 }, - "Stats (waterfall, etc)", + { x: 16, y: 26, w: 8, h: 69 }, + "Stats (waterfall, etc)",true,true ), - new gridWidget(active_audio_level, { x: 0, y: 0, w: 4, h: 13 }, "Audio"), + new gridWidget(active_audio_level, { x: 16, y: 0, w: 8, h: 26 }, "Audio",true,true), new gridWidget( active_rig_control, - { x: 0, y: 0, w: 6, h: 12 }, - "Rig control", + { x: 6, y: 40, w: 10, h: 30 }, + "Rig control",true,true ), - new gridWidget(active_broadcats, { x: 1, y: 1, w: 4, h: 12 }, "Broadcats"), + new gridWidget(active_broadcats, { x: 6, y: 70, w: 10, h: 25 }, "Broadcats",true,true), new gridWidget( mini_heard_stations, - { x: 1, y: 1, w: 3, h: 27 }, - "Mini Heard stations", + { x: 1, y: 1, w: 6, h: 54 }, + "Mini Heard stations",false,true ), - new gridWidget(s_meter, { x: 1, y: 1, w: 2, h: 4 }, "S-Meter"), - new gridWidget(dbfs_meter, { x: 1, y: 1, w: 2, h: 4 }, "Dbfs Meter"), - new gridWidget(grid_activities, { x: 1, y: 1, w: 3, h: 27 }, "Activities"), + new gridWidget(s_meter, { x: 1, y: 1, w: 4, h: 8 }, "S-Meter",false,true), + new gridWidget(dbfs_meter, { x: 1, y: 1, w: 4, h: 8 }, "Dbfs Meter",false,true), + new gridWidget(grid_activities, { x: 0, y: 40, w: 6, h: 55 }, "Activities",true,true), ]; onMounted(() => { grid = GridStack.init({ - // DO NOT user grid.value = GridStack.init(), see above + // DO NOT use grid.value = GridStack.init(), see above float: true, - cellHeight: "10px", + cellHeight: "5px", minRow: 50, margin: 5, + column: 24, draggable: { scroll: true, }, @@ -80,25 +86,18 @@ onMounted(() => { grid.on("dragstop", function (event, element) { const node = element.gridstackNode; - info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`; + console.info(`Moved #${node.id} to ${node.x}.${node.y}. Dimensions: ${node.w}x${node.h}`) }); grid.on("change", onChange); - // gridFloat.value = grid.float(); }); -function changeFloat() { - gridFloat.value = !gridFloat.value; - grid.float(gridFloat.value); -} - function onChange(event, changeItems) { - updateInfo(); // update item position changeItems.forEach((item) => { var widget = items.value.find((w) => w.id == item.id); if (!widget) { - alert("Widget not found: " + item.id); + console.error("Widget not found: " + item.id); return; } widget.x = item.x; @@ -107,46 +106,41 @@ function onChange(event, changeItems) { widget.h = item.h; }); } + function addNewWidget2(componentToAdd) { const node = items[count.value] || { ...componentToAdd.size }; node.id = "w_" + count.value++; node.component2 = shallowRef({ ...componentToAdd.component2 }); + node.autoPlace=componentToAdd.autoPlace; items.value.push(node); nextTick(() => { grid.makeWidget(node.id); - updateInfo(); }); } -function removeLastWidget() { - if (count.value == 0) return; - var id = `w_${count.value - 1}`; - var index = items.value.findIndex((w) => w.id == id); - if (index < 0) return; - var removed = items.value[index]; - remove(removed); -} - function remove(widget) { var index = items.value.findIndex((w) => w.id == widget.id); items.value.splice(index, 1); const selector = `#${widget.id}`; grid.removeWidget(selector, false); - updateInfo(); } -function updateInfo() { - color.value = - grid.engine.nodes.length == items.value.length ? "black" : "red"; - gridInfo.value = `Grid engine: ${grid.engine.nodes.length}, widgets: ${items.value.length}`; -} -function showModal() { - new Modal("#tileModal", {}).show(); +function clearAllItems() { + grid.removeAll(false); + count.value=0; + items.value=[]; } function quickfill() { gridWidgets.forEach(async (gw) => { - await addNewWidget2(gw); + if (gw.quickFill === true){ + gw.autoPlace=false; + await addNewWidget2(gw); + //Reset autoplace value + gw.autoPlace=true; + } + }); + } @@ -158,7 +152,7 @@ function quickfill() { data-bs-target="#offcanvasGridItems" aria-controls="offcanvasGridItems" > - +
@@ -173,7 +167,7 @@ function quickfill() { :gs-id="w.id" :id="w.id" :key="w.id" - :gs-auto-position="true" + :gs-auto-position=w.autoPlace >
+ Manage grid widgets +
+
+   + +
+
+
@@ -428,4 +431,145 @@ function quickfill() { .grid-container { overflow-y: auto; } +.gs-24 > .grid-stack-item { + width: 4.167%; +} +.gs-24 > .grid-stack-item[gs-x="1"] { + left: 4.167%; +} +.gs-24 > .grid-stack-item[gs-w="2"] { + width: 8.333%; +} +.gs-24 > .grid-stack-item[gs-x="2"] { + left: 8.333%; +} +.gs-24 > .grid-stack-item[gs-w="3"] { + width: 12.5%; +} +.gs-24 > .grid-stack-item[gs-x="3"] { + left: 12.5%; +} +.gs-24 > .grid-stack-item[gs-w="4"] { + width: 16.667%; +} +.gs-24 > .grid-stack-item[gs-x="4"] { + left: 16.667%; +} +.gs-24 > .grid-stack-item[gs-w="5"] { + width: 20.833%; +} +.gs-24 > .grid-stack-item[gs-x="5"] { + left: 20.833%; +} +.gs-24 > .grid-stack-item[gs-w="6"] { + width: 25%; +} +.gs-24 > .grid-stack-item[gs-x="6"] { + left: 25%; +} +.gs-24 > .grid-stack-item[gs-w="7"] { + width: 29.167%; +} +.gs-24 > .grid-stack-item[gs-x="7"] { + left: 29.167%; +} +.gs-24 > .grid-stack-item[gs-w="8"] { + width: 33.333%; +} +.gs-24 > .grid-stack-item[gs-x="8"] { + left: 33.333%; +} +.gs-24 > .grid-stack-item[gs-w="9"] { + width: 37.5%; +} +.gs-24 > .grid-stack-item[gs-x="9"] { + left: 37.5%; +} +.gs-24 > .grid-stack-item[gs-w="10"] { + width: 41.667%; +} +.gs-24 > .grid-stack-item[gs-x="10"] { + left: 41.667%; +} +.gs-24 > .grid-stack-item[gs-w="11"] { + width: 45.833%; +} +.gs-24 > .grid-stack-item[gs-x="11"] { + left: 45.833%; +} +.gs-24 > .grid-stack-item[gs-w="12"] { + width: 50%; +} +.gs-24 > .grid-stack-item[gs-x="12"] { + left: 50%; +} +.gs-24 > .grid-stack-item[gs-w="13"] { + width: 54.167%; +} +.gs-24 > .grid-stack-item[gs-x="13"] { + left: 54.167%; +} +.gs-24 > .grid-stack-item[gs-w="14"] { + width: 58.333%; +} +.gs-24 > .grid-stack-item[gs-x="14"] { + left: 58.333%; +} +.gs-24 > .grid-stack-item[gs-w="15"] { + width: 62.5%; +} +.gs-24 > .grid-stack-item[gs-x="15"] { + left: 62.5%; +} +.gs-24 > .grid-stack-item[gs-w="16"] { + width: 66.667%; +} +.gs-24 > .grid-stack-item[gs-x="16"] { + left: 66.667%; +} +.gs-24 > .grid-stack-item[gs-w="17"] { + width: 70.833%; +} +.gs-24 > .grid-stack-item[gs-x="17"] { + left: 70.833%; +} +.gs-24 > .grid-stack-item[gs-w="18"] { + width: 75%; +} +.gs-24 > .grid-stack-item[gs-x="18"] { + left: 75%; +} +.gs-24 > .grid-stack-item[gs-w="19"] { + width: 79.167%; +} +.gs-24 > .grid-stack-item[gs-x="19"] { + left: 79.167%; +} +.gs-24 > .grid-stack-item[gs-w="20"] { + width: 83.333%; +} +.gs-24 > .grid-stack-item[gs-x="20"] { + left: 83.333%; +} +.gs-24 > .grid-stack-item[gs-w="21"] { + width: 87.5%; +} +.gs-24 > .grid-stack-item[gs-x="21"] { + left: 87.5%; +} +.gs-24 > .grid-stack-item[gs-w="22"] { + width: 91.667%; +} +.gs-24 > .grid-stack-item[gs-x="22"] { + left: 91.667%; +} +.gs-24 > .grid-stack-item[gs-w="23"] { + width: 95.833%; +} +.gs-24 > .grid-stack-item[gs-x="23"] { + left: 95.833%; +} +.gs-24 > .grid-stack-item[gs-w="24"] { + width: 100%; +} diff --git a/gui/src/js/eventHandler.js b/gui/src/js/eventHandler.js index 48c047ce..37188a6f 100644 --- a/gui/src/js/eventHandler.js +++ b/gui/src/js/eventHandler.js @@ -23,7 +23,7 @@ export function connectionFailed(endpoint, event) { } export function stateDispatcher(data) { data = JSON.parse(data); - console.log(data); + //console.log(data); stateStore.modem_connection = "connected";