mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
Grid changes
This commit is contained in:
parent
c80917187e
commit
b4170f5329
|
@ -20,56 +20,62 @@ import grid_activities from "./grid_activities.vue";
|
||||||
import { stateDispatcher } from "../js/eventHandler";
|
import { stateDispatcher } from "../js/eventHandler";
|
||||||
|
|
||||||
let count = ref(0);
|
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 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([]);
|
||||||
class gridWidget {
|
class gridWidget {
|
||||||
|
//Contains the vue component
|
||||||
component2;
|
component2;
|
||||||
|
//Initial size and location if autoplace is false
|
||||||
size;
|
size;
|
||||||
|
//Text for dynamic button
|
||||||
text;
|
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.component2 = component;
|
||||||
this.size = size;
|
this.size = size;
|
||||||
this.text = text;
|
this.text = text;
|
||||||
|
this.quickFill=quickfill;
|
||||||
|
this.autoPlace = autoPlace;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const gridWidgets = [
|
const gridWidgets = [
|
||||||
new gridWidget(
|
new gridWidget(
|
||||||
active_heard_stations,
|
active_heard_stations,
|
||||||
{ x: 0, y: 0, w: 7, h: 20 },
|
{ x: 0, y: 0, w: 16, h: 40 },
|
||||||
"Heard stations",
|
"Heard stations",true,true
|
||||||
),
|
),
|
||||||
new gridWidget(
|
new gridWidget(
|
||||||
active_stats,
|
active_stats,
|
||||||
{ x: 0, y: 0, w: 4, h: 35 },
|
{ x: 16, y: 26, w: 8, h: 69 },
|
||||||
"Stats (waterfall, etc)",
|
"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(
|
new gridWidget(
|
||||||
active_rig_control,
|
active_rig_control,
|
||||||
{ x: 0, y: 0, w: 6, h: 12 },
|
{ x: 6, y: 40, w: 10, h: 30 },
|
||||||
"Rig control",
|
"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(
|
new gridWidget(
|
||||||
mini_heard_stations,
|
mini_heard_stations,
|
||||||
{ x: 1, y: 1, w: 3, h: 27 },
|
{ x: 1, y: 1, w: 6, h: 54 },
|
||||||
"Mini Heard stations",
|
"Mini Heard stations",false,true
|
||||||
),
|
),
|
||||||
new gridWidget(s_meter, { x: 1, y: 1, w: 2, h: 4 }, "S-Meter"),
|
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: 2, h: 4 }, "Dbfs Meter"),
|
new gridWidget(dbfs_meter, { x: 1, y: 1, w: 4, h: 8 }, "Dbfs Meter",false,true),
|
||||||
new gridWidget(grid_activities, { x: 1, y: 1, w: 3, h: 27 }, "Activities"),
|
new gridWidget(grid_activities, { x: 0, y: 40, w: 6, h: 55 }, "Activities",true,true),
|
||||||
];
|
];
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
grid = GridStack.init({
|
grid = GridStack.init({
|
||||||
// DO NOT user grid.value = GridStack.init(), see above
|
// DO NOT use grid.value = GridStack.init(), see above
|
||||||
float: true,
|
float: true,
|
||||||
cellHeight: "10px",
|
cellHeight: "5px",
|
||||||
minRow: 50,
|
minRow: 50,
|
||||||
margin: 5,
|
margin: 5,
|
||||||
|
column: 24,
|
||||||
draggable: {
|
draggable: {
|
||||||
scroll: true,
|
scroll: true,
|
||||||
},
|
},
|
||||||
|
@ -80,25 +86,18 @@ onMounted(() => {
|
||||||
|
|
||||||
grid.on("dragstop", function (event, element) {
|
grid.on("dragstop", function (event, element) {
|
||||||
const node = element.gridstackNode;
|
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);
|
grid.on("change", onChange);
|
||||||
// gridFloat.value = grid.float();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function changeFloat() {
|
|
||||||
gridFloat.value = !gridFloat.value;
|
|
||||||
grid.float(gridFloat.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onChange(event, changeItems) {
|
function onChange(event, changeItems) {
|
||||||
updateInfo();
|
|
||||||
// update item position
|
// update item position
|
||||||
changeItems.forEach((item) => {
|
changeItems.forEach((item) => {
|
||||||
var widget = items.value.find((w) => w.id == item.id);
|
var widget = items.value.find((w) => w.id == item.id);
|
||||||
if (!widget) {
|
if (!widget) {
|
||||||
alert("Widget not found: " + item.id);
|
console.error("Widget not found: " + item.id);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
widget.x = item.x;
|
widget.x = item.x;
|
||||||
|
@ -107,46 +106,41 @@ function onChange(event, changeItems) {
|
||||||
widget.h = item.h;
|
widget.h = item.h;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addNewWidget2(componentToAdd) {
|
function addNewWidget2(componentToAdd) {
|
||||||
const node = items[count.value] || { ...componentToAdd.size };
|
const node = items[count.value] || { ...componentToAdd.size };
|
||||||
node.id = "w_" + count.value++;
|
node.id = "w_" + count.value++;
|
||||||
node.component2 = shallowRef({ ...componentToAdd.component2 });
|
node.component2 = shallowRef({ ...componentToAdd.component2 });
|
||||||
|
node.autoPlace=componentToAdd.autoPlace;
|
||||||
items.value.push(node);
|
items.value.push(node);
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
grid.makeWidget(node.id);
|
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) {
|
function remove(widget) {
|
||||||
var index = items.value.findIndex((w) => w.id == widget.id);
|
var index = items.value.findIndex((w) => w.id == widget.id);
|
||||||
items.value.splice(index, 1);
|
items.value.splice(index, 1);
|
||||||
const selector = `#${widget.id}`;
|
const selector = `#${widget.id}`;
|
||||||
grid.removeWidget(selector, false);
|
grid.removeWidget(selector, false);
|
||||||
updateInfo();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateInfo() {
|
function clearAllItems() {
|
||||||
color.value =
|
grid.removeAll(false);
|
||||||
grid.engine.nodes.length == items.value.length ? "black" : "red";
|
count.value=0;
|
||||||
gridInfo.value = `Grid engine: ${grid.engine.nodes.length}, widgets: ${items.value.length}`;
|
items.value=[];
|
||||||
}
|
|
||||||
function showModal() {
|
|
||||||
new Modal("#tileModal", {}).show();
|
|
||||||
}
|
}
|
||||||
function quickfill() {
|
function quickfill() {
|
||||||
gridWidgets.forEach(async (gw) => {
|
gridWidgets.forEach(async (gw) => {
|
||||||
|
if (gw.quickFill === true){
|
||||||
|
gw.autoPlace=false;
|
||||||
await addNewWidget2(gw);
|
await addNewWidget2(gw);
|
||||||
|
//Reset autoplace value
|
||||||
|
gw.autoPlace=true;
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -158,7 +152,7 @@ function quickfill() {
|
||||||
data-bs-target="#offcanvasGridItems"
|
data-bs-target="#offcanvasGridItems"
|
||||||
aria-controls="offcanvasGridItems"
|
aria-controls="offcanvasGridItems"
|
||||||
>
|
>
|
||||||
<i class="bi bi-grip-vertical h1"></i>
|
<i class="bi bi-grip-vertical h5"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="grid-container vh-100">
|
<div class="grid-container vh-100">
|
||||||
|
@ -173,7 +167,7 @@ function quickfill() {
|
||||||
:gs-id="w.id"
|
:gs-id="w.id"
|
||||||
:id="w.id"
|
:id="w.id"
|
||||||
:key="w.id"
|
:key="w.id"
|
||||||
:gs-auto-position="true"
|
:gs-auto-position=w.autoPlace
|
||||||
>
|
>
|
||||||
<div class="grid-stack-item-content">
|
<div class="grid-stack-item-content">
|
||||||
<button
|
<button
|
||||||
|
@ -196,9 +190,8 @@ function quickfill() {
|
||||||
>
|
>
|
||||||
<div class="offcanvas-header">
|
<div class="offcanvas-header">
|
||||||
<h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
|
<h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
|
||||||
<button class="btn btn-secondary" type="button" @click="quickfill">
|
Manage grid widgets
|
||||||
Quickfill grid
|
|
||||||
</button>
|
|
||||||
</h5>
|
</h5>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -208,6 +201,16 @@ function quickfill() {
|
||||||
></button>
|
></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="offcanvas-body">
|
<div class="offcanvas-body">
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-sm btn-outline-primary" type="button" @click="quickfill">
|
||||||
|
Fill grid with common widgets
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-outline-warning" type="button" @click="clearAllItems">
|
||||||
|
Clear grid
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
<div class="accordion" id="accordionExample">
|
<div class="accordion" id="accordionExample">
|
||||||
<!-- Heard Stations -->
|
<!-- Heard Stations -->
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
|
@ -428,4 +431,145 @@ function quickfill() {
|
||||||
.grid-container {
|
.grid-container {
|
||||||
overflow-y: auto;
|
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%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -23,7 +23,7 @@ export function connectionFailed(endpoint, event) {
|
||||||
}
|
}
|
||||||
export function stateDispatcher(data) {
|
export function stateDispatcher(data) {
|
||||||
data = JSON.parse(data);
|
data = JSON.parse(data);
|
||||||
console.log(data);
|
//console.log(data);
|
||||||
|
|
||||||
stateStore.modem_connection = "connected";
|
stateStore.modem_connection = "connected";
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue