Skip to content

Commit

Permalink
Merge pull request #50 from SoopSASM/feature/tab-group
Browse files Browse the repository at this point in the history 
locale/en_US delete, typo change
  • Loading branch information
@gemnsh
gemnsh authored Oct 2, 2022
2 parents 91c8654 + 44ec3c6 commit 23f9bb1
Show file tree
Hide file tree
Showing 6 changed files with 211 additions and 72 deletions.
5 changes: 0 additions & 5 deletions dashboard/nodes/locales/en-US/soop_tab.html
View file

This file was deleted.

9 changes: 0 additions & 9 deletions dashboard/nodes/locales/en-US/soop_tab.json
View file

This file was deleted.

122 changes: 74 additions & 48 deletions dashboard/nodes/soop_group.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,122 @@
<script type="text/javascript">
// convert to i18 text

function c_soop_group(x) {
return RED._("soopsasm-dashboard/soop_group:soop_group." + x);
}
RED.nodes.registerType('soop_group', {
category: 'config',
RED.nodes.registerType("soop_group", {
category: "config",
defaults: {
name: {
value: c_soop_group("label.default")
value: "Default",
},
tab: {
type: "soop_tab",
required: true
required: true,
},
order: {
value: 0
value: 0,
},
displayVisible: {
value: true
value: true,
},
width: {
value: 3
value: 3,
},
height: {
value: 2
value: 2,
},
groupX: {
value: 0
value: 0,
},
groupY: {
value: 0
value: 0,
},

disabled: {
value: false
value: false,
},
hidden: {
value: false
value: false,
},
groupState: {
value: new Array()
value: new Array(),
},
includedNodesId: {
value: new Array()
}
value: new Array(),
},
},
paletteLabel: 'SOOPSASM GROUP',
paletteLabel: "SOOPSASM GROUP",
label: function() {
var tabNode = RED.nodes.node(this.tab);
if (tabNode) {
return "[" + (tabNode.name || c_soop_group("label.tab")) + "] " + (this.name || c_soop_group("label.group"));
return "[" + (tabNode.name || "Tab") + "] " + (this.name || "Group");
}
return "[" + c_soop_group("label.unassigned") + "] " + (this.name || c_soop_group("label.group"));
return "[Unassigned] " + (this.name || "Group");
},
labelStyle: function() {
return this.name ? "node_label_italic" : "";
},
reflectEdit: function(gNode, nodeId) {
var groupNode = RED.nodes.node(gNode);
groupNode.includedNodesId = new Array();
RED.nodes.eachNode(function(node) {
if (groupNode.id == node.group && groupNode.includedNodesId.indexOf(node.id) < 0 && node.id !== nodeId) {
groupNode.includedNodesId.push(node.id);
}
});
groupNode.groupState = new Array(groupNode.height);
for (var i = 0; i < groupNode.height; i++) {
groupNode.groupState[i] = Array.from({
length: groupNode.width,
},
() => false,
);
}
for (var i = 0; i < groupNode.includedNodesId.length; i++) {
var tmpNode = RED.nodes.node(groupNode.includedNodesId[i]);
var tmpW = parseInt(tmpNode.width);
var tmpH = parseInt(tmpNode.height);
var tmpX = parseInt(tmpNode.widgetX);
var tmpY = parseInt(tmpNode.widgetY);
for (var j = tmpX; j < tmpX + tmpW; j++) {
for (var k = tmpY; k < tmpY + tmpH; k++) {
groupNode.groupState[k][j] = true;
}
}
}
return groupNode;
},
oneditprepare: function() {
console.log('oneditprepare');
groupLoc.groupLocationDefaultSetting(this.tab);
}

tabNode = RED.nodes.node(this.tab);
var tmpValueXY = tabNode._def.groupLocationDefaultSetting(this.tab, this.id);
this.groupX = tmpValueXY.gX;
this.groupY = tmpValueXY.gY;
document.getElementById("node-config-input-groupX").value = this.groupX;
document.getElementById("node-config-input-groupY").value = this.groupY;
},
});
</script>
<script type="text/html" data-template-name="soop_group">
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="soop_group.label.name"></span></label>
<input type="text" id="node-config-input-name">
</div>
<div class="form-row">
<label for="node-config-input-tab"><i class="fa fa-table"></i> <span data-i18n="soop_group.label.tab"></span></label>
<input type="text" id="node-config-input-tab">
</div>

<div class="form-row">
<label for="node-config-input-height"><span data-i18n="soop_group.label.height"></span></label>
<input id="node-input-height" />
</div>
<div class="form-row">
<label for="node-config-input-width"><span data-i18n="soop_group.label.width"></span></label>
<input id="node-input-width" />
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
<input type="text" id="node-config-input-name" />
</div>
<div class="form-row">
<label for="node-config-input-groupX"><span data-i18n="soop_group.label.x"></span></label>
<input id="node-input-groupY" />
<label for="node-config-input-tab"><i class="fa fa-table"></i> <span>Tab</span></label>
<input type="text" id="node-config-input-tab" />
</div>
<div class="form-row">
<label for="node-config-input-groupY"><span data-i18n="soop_group.label.y"></span></label>
<input id="node-input-groupY" />
<label for="node-input-group-table"><i class="fa fa-table"></i> Group table</label>
<div id="node-input-group-table" style="width:70%; display: inline-block;">
<div style="margin-bottom:10px">
<label for="node-config-input-groupX" style="width:auto;">x</label>
<input type="text" id="node-config-input-groupX" value="0" style="width:30px; margin-right:10px;" />
<label for="node-config-input-groupY" style="width:auto;">y </label>
<input type="text" id="node-config-input-groupY" value="0" style="width:30px; margin-right:10px;" />
<label for="node-config-input-height" style="width:auto;">w</label>
<input type="text" id="node-config-input-height" value="1" style="width:30px; margin-right:10px;" />
<label for="node-config-input-width" style="width:auto;">h</label>
<input type="text" id="node-config-input-width" value="1" style="width:30px; margin-right:10px;" />
</div>
</div>
</div>
<div class="form-row">
<input style="margin:10px 0px 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp"> <label style="width:auto" for="node-config-input-disp"><span data-i18n="soop_group.display-name"></span></label>
<input style="margin:10px 0px 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp" />
<label style="width:auto" for="node-config-input-displayVisible"><span>Display group name</span></label>
</div>
</script>
19 changes: 14 additions & 5 deletions dashboard/nodes/soop_group.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
module.exports = function(RED) {
const dashboard = require("../dashboard")(RED);

function GroupNode(config) {
const node = this;
RED.nodes.createNode(this, config);
this.config = {
name: config.name,
displayVisible: config.displayVisible,
groupX: config.x,
groupY: config.y,
groupX: config.groupX,
groupY: config.groupY,
width: config.width,
height: config.height,
order: config.order,
tab: config.tab,
groupState: config.groupState,
includedNodesId: config.includedNodesId
includedNodesId: config.includedNodesId,
};
if (!this.config.hasOwnProperty("displayVisible")) { this.config.displayVisible = true; }
if (this.config.displayVisible !== false) { this.config.displayVisible = true; }
if (!this.config.hasOwnProperty("displayVisible")) {
this.config.displayVisible = true;
}
if (this.config.displayVisible !== false) {
this.config.displayVisible = true;
}
for (var i = 0; i < this.config.height; i++) {
this.config.groupState[i] = new Array(this.config.width);
}
dashboard.addNode({
node: node,
});
}

RED.nodes.registerType("soop_group", GroupNode);
Expand Down
120 changes: 116 additions & 4 deletions dashboard/nodes/soop_tab.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,130 @@
<script type="text/javascript">
var tabCount = new Array();

function isConflict(x, y, w, h, mh, tbl) {
if (x + w <= 12 && y + h <= mh) {
for (var i = x; i < x + w; i++) {
for (var j = y; j < y + h; j++) {
if (tbl[j][i] !== 0) {
return false;
}
}
}
return true;
}
return false;
};

function fillTable(x, y, w, h, mh, tbl) {
if (x + w <= 12 && y + h <= mh) {
for (var i = x; i < x + w; i++) {
for (var j = y; j < y + h; j++) {
if (tbl[j][i] == 0) {
tbl[j][i] = 1;
}
}
}
}
return tbl;
};

RED.nodes.registerType('soop_tab', {
category: 'config',
defaults: {
name: {
value: RED._("soopsasm-dashboard/soop_tab:soop_tab.label.tab")
value: "Tab"
},
includedGroups: {
value: []
}
},
includedGroupsName: {
value: []
},
},
paletteLabel: 'SOOPSASM Tab',
label: function() {
return this.name || RED._("soopsasm-dashboard/soop_tab:soop_tab.label.tab ");
return this.name || "Tab";
},
groupLocationDefaultSetting: function(tNode, gNode) {
var tabNode = RED.nodes.node(tNode);
var maxHeight = 0;
RED.nodes.eachConfig(function(node) {
if (node.type == 'soop_group') {
if (node.tab == tabNode.id && tabNode.includedGroupsName.indexOf(node.id) < 0) {
tabNode.includedGroups.push({
id: node.id,
width: node.width,
height: node.height,
groupX: node.groupX,
groupY: node.groupY
});
tabNode.includedGroupsName.push(node.id)
}
}
});
tabNode.includedGroups.sort(function(a, b) {
if (a.width > b.width) {
return -1
} else {
if (a.width == b.width && a.height > b.height) {
return -1
} else {
return 1
}
}
});
for (var i = 0; i < tabNode.includedGroups.length; i++) {
maxHeight += parseInt(tabNode.includedGroups[i].height);

}
tabGrid = new Array(maxHeight);
for (var i = 0; i < tabGrid.length; i++) {
tabGrid[i] = Array.from({
length: 12,
},
() => 0,
);
}

var dataCheck = true;
for (var i = 0; i < tabGrid.length; i++) {
for (var j = 0; j < 12; j++) {
tabGrid[i][j] = 0;
}
}


for (var i = 0; i < tabNode.includedGroups.length; i++) {
dataCheck = true;
for (var tmpY = 0; tmpY < maxHeight; tmpY++) {
if (dataCheck) {
for (var tmpX = 0; tmpX < 12; tmpX++) {
if (dataCheck) {
if (isConflict(tmpX, tmpY, parseInt(tabNode.includedGroups[i].width), parseInt(tabNode.includedGroups[i].height), maxHeight, tabGrid)) {
tabGrid = fillTable(tmpX, tmpY, parseInt(tabNode.includedGroups[i].width), parseInt(tabNode.includedGroups[i].height), maxHeight, tabGrid);
tabNode.includedGroups[i].groupX = tmpX;
tabNode.includedGroups[i].groupY = tmpY;
dataCheck = false;
}
} else {
break;
}
}
} else {
break;
}
}
}
for (var i = 0; i < tabNode.includedGroups.length; i++) {
if (gNode == tabNode.includedGroups[i].id) {
var groupNode = RED.nodes.node(gNode);
return {
gX: tabNode.includedGroups[i].groupX,
gY: tabNode.includedGroups[i].groupY
};
};

}
},
oneditprepare: function() {
RED.nodes.eachConfig(function(node) {
Expand All @@ -31,7 +143,7 @@

<script type="text/html" data-template-name="soop_tab">
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="soop_tab.label.name"></span></label>
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
<input type="text" id="node-config-input-name">
</div>
</script>
8 changes: 7 additions & 1 deletion dashboard/nodes/soop_tab.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
module.exports = function(RED) {
const dashboard = require("../dashboard")(RED);

function TabNode(config) {
const node = this;
RED.nodes.createNode(this, config);
this.config = {
name: config.name,
includedGroups: config.includedGroups
includedGroups: config.includedGroups,
includedGroupsName: config.includedGroupsName
};
dashboard.addNode({
node: node,
});
}

RED.nodes.registerType("soop_tab", TabNode);
Expand Down

0 comments on commit 23f9bb1

Please sign in to comment.