@5minds/node-red-dashboard-2-processcube-dynamic-table 2.0.1-develop-ac58f3-mccdrc9q → 2.0.1-develop-23f8bd-md5ls48x
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nodes/dynamic-table.html +312 -272
- package/package.json +76 -76
- package/resources/ui-dynamic-table.umd.js +12 -12
- package/ui/components/TitleText.vue +35 -0
- package/ui/components/UIDynamicTable.vue +58 -24
- package/ui/stylesheets/ui-dynamic-table.css +147 -39
package/nodes/dynamic-table.html
CHANGED
|
@@ -1,264 +1,284 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
(function () {
|
|
3
|
+
function hasProperty(obj, prop) {
|
|
4
|
+
return Object.prototype.hasOwnProperty.call(obj, prop);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
RED.nodes.registerType('ui-dynamic-table', {
|
|
8
|
+
category: 'ProcessCube UI',
|
|
9
|
+
color: '#00aed7',
|
|
10
|
+
defaults: {
|
|
11
|
+
name: { value: '' },
|
|
12
|
+
tableName: { value: '' },
|
|
13
|
+
group: { type: 'ui-group', required: true },
|
|
14
|
+
order: { value: 1 },
|
|
15
|
+
data: { value: 'payload' },
|
|
16
|
+
data_type: { value: 'msg' },
|
|
17
|
+
options: {
|
|
18
|
+
value: [{ label: '', condition: '' }],
|
|
19
|
+
validate: function (v) {
|
|
20
|
+
const unique = new Set(
|
|
21
|
+
v.map(function (o) {
|
|
22
|
+
return o.label;
|
|
23
|
+
})
|
|
24
|
+
);
|
|
25
|
+
return v.length === unique.size;
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
columns: {
|
|
29
|
+
value: [{ value: '', label: '' }],
|
|
30
|
+
validate: function (v) {
|
|
31
|
+
const unique = new Set(
|
|
32
|
+
v.map(function (o) {
|
|
33
|
+
return o.value;
|
|
34
|
+
})
|
|
35
|
+
);
|
|
36
|
+
return v.length === unique.size;
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
width: {
|
|
40
|
+
value: 0,
|
|
41
|
+
validate: function (v) {
|
|
42
|
+
const width = v || 0;
|
|
43
|
+
const currentGroup = $('#node-input-group').val() || this.group;
|
|
44
|
+
const groupNode = RED.nodes.node(currentGroup);
|
|
45
|
+
const valid = !groupNode || +width <= +groupNode.width;
|
|
46
|
+
$('#node-input-size').toggleClass('input-error', !valid);
|
|
47
|
+
return valid;
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
height: { value: 0 },
|
|
51
|
+
outputs: { value: 1 },
|
|
52
|
+
title_text: { value: '' },
|
|
53
|
+
title_style: { value: 'default' },
|
|
54
|
+
title_custom_text_styling: { value: '' },
|
|
55
|
+
title_icon: { value: '' },
|
|
56
|
+
},
|
|
57
|
+
inputs: 1,
|
|
58
|
+
outputs: 1,
|
|
59
|
+
outputLabels: function (index) {
|
|
60
|
+
return this.options[index].label;
|
|
61
|
+
},
|
|
62
|
+
icon: 'ui_dynamic_table.svg',
|
|
63
|
+
paletteLbel: 'file',
|
|
64
|
+
label: function () {
|
|
65
|
+
return this.name || 'dynamic-table';
|
|
66
|
+
},
|
|
67
|
+
oneditprepare: function () {
|
|
68
|
+
$('#node-input-size').elementSizer({
|
|
69
|
+
width: '#node-input-width',
|
|
70
|
+
height: '#node-input-height',
|
|
71
|
+
group: '#node-input-group',
|
|
72
|
+
});
|
|
6
73
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
group: { type: 'ui-group', required: true },
|
|
14
|
-
order: { value: 1 },
|
|
15
|
-
data: { value: 'payload' },
|
|
16
|
-
data_type: { value: 'msg' },
|
|
17
|
-
options: {
|
|
18
|
-
value: [{ label: '', condition: '' }],
|
|
19
|
-
validate: function (v) {
|
|
20
|
-
const unique = new Set(
|
|
21
|
-
v.map(function (o) {
|
|
22
|
-
return o.label;
|
|
23
|
-
})
|
|
24
|
-
);
|
|
25
|
-
return v.length === unique.size;
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
columns: {
|
|
29
|
-
value: [{ value: '', label: '' }],
|
|
30
|
-
validate: function (v) {
|
|
31
|
-
const unique = new Set(
|
|
32
|
-
v.map(function (o) {
|
|
33
|
-
return o.value;
|
|
34
|
-
})
|
|
35
|
-
);
|
|
36
|
-
return v.length === unique.size;
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
width: {
|
|
40
|
-
value: 0,
|
|
41
|
-
validate: function (v) {
|
|
42
|
-
const width = v || 0;
|
|
43
|
-
const currentGroup = $('#node-input-group').val() || this.group;
|
|
44
|
-
const groupNode = RED.nodes.node(currentGroup);
|
|
45
|
-
const valid = !groupNode || +width <= +groupNode.width;
|
|
46
|
-
$('#node-input-size').toggleClass('input-error', !valid);
|
|
47
|
-
return valid;
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
|
-
height: { value: 0 },
|
|
51
|
-
outputs: { value: 1 },
|
|
52
|
-
},
|
|
53
|
-
inputs: 1,
|
|
54
|
-
outputs: 1,
|
|
55
|
-
outputLabels: function (index) {
|
|
56
|
-
return this.options[index].label;
|
|
74
|
+
$('#node-input-title_style').typedInput({
|
|
75
|
+
types: [
|
|
76
|
+
{
|
|
77
|
+
value: 'default',
|
|
78
|
+
label: 'Default',
|
|
79
|
+
hasValue: false,
|
|
57
80
|
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
81
|
+
{
|
|
82
|
+
value: 'minimal',
|
|
83
|
+
label: 'Minimal',
|
|
84
|
+
hasValue: false,
|
|
62
85
|
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
group: '#node-input-group',
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
function generateOption(i, option) {
|
|
71
|
-
const container = $('<li/>', {
|
|
72
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
// Create input fields for value and label
|
|
76
|
-
const row = $('<div/>').appendTo(container);
|
|
77
|
-
$('<input/>', {
|
|
78
|
-
class: 'node-input-option-label',
|
|
79
|
-
type: 'text',
|
|
80
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
81
|
-
placeholder: 'Label',
|
|
82
|
-
value: option.label,
|
|
83
|
-
})
|
|
84
|
-
.appendTo(row)
|
|
85
|
-
.typedInput({
|
|
86
|
-
type: 'str',
|
|
87
|
-
types: ['str'],
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
$('<input/>', {
|
|
91
|
-
class: 'node-input-option-condition',
|
|
92
|
-
type: 'text',
|
|
93
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
94
|
-
placeholder: 'Condition',
|
|
95
|
-
value: option.condition,
|
|
96
|
-
})
|
|
97
|
-
.appendTo(row)
|
|
98
|
-
.typedInput({
|
|
99
|
-
type: 'str',
|
|
100
|
-
types: ['str'],
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
// Create delete button for the option
|
|
104
|
-
const finalSpan = $('<span/>', {
|
|
105
|
-
style: 'float:right; margin-right:8px;',
|
|
106
|
-
}).appendTo(row);
|
|
107
|
-
const deleteButton = $('<a/>', {
|
|
108
|
-
href: '#',
|
|
109
|
-
class: 'editor-button editor-button-small',
|
|
110
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
111
|
-
}).appendTo(finalSpan);
|
|
112
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
113
|
-
|
|
114
|
-
deleteButton.click(function () {
|
|
115
|
-
container.css({
|
|
116
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
117
|
-
});
|
|
118
|
-
container.fadeOut(300, function () {
|
|
119
|
-
$(this).remove();
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
$('#node-input-option-container').append(container);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function generateColumn(i, column) {
|
|
127
|
-
const container = $('<li/>', {
|
|
128
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
// Create input fields for value and label
|
|
132
|
-
const row = $('<div/>').appendTo(container);
|
|
133
|
-
$('<input/>', {
|
|
134
|
-
class: 'node-input-column-value',
|
|
135
|
-
type: 'text',
|
|
136
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
137
|
-
placeholder: 'Value',
|
|
138
|
-
value: column.value,
|
|
139
|
-
})
|
|
140
|
-
.appendTo(row)
|
|
141
|
-
.typedInput({ default: column.type || 'str', types: ['str'] });
|
|
142
|
-
|
|
143
|
-
$('<input/>', {
|
|
144
|
-
class: 'node-input-column-label',
|
|
145
|
-
type: 'text',
|
|
146
|
-
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
147
|
-
placeholder: 'Label',
|
|
148
|
-
value: column.label,
|
|
149
|
-
})
|
|
150
|
-
.appendTo(row)
|
|
151
|
-
.typedInput({
|
|
152
|
-
type: 'str',
|
|
153
|
-
types: ['str'],
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
// Create delete button for the column
|
|
157
|
-
const finalSpan = $('<span/>', {
|
|
158
|
-
style: 'float:right; margin-right:8px;',
|
|
159
|
-
}).appendTo(row);
|
|
160
|
-
const deleteButton = $('<a/>', {
|
|
161
|
-
href: '#',
|
|
162
|
-
class: 'editor-button editor-button-small',
|
|
163
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
164
|
-
}).appendTo(finalSpan);
|
|
165
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
166
|
-
|
|
167
|
-
deleteButton.click(function () {
|
|
168
|
-
container.css({
|
|
169
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
170
|
-
});
|
|
171
|
-
container.fadeOut(300, function () {
|
|
172
|
-
$(this).remove();
|
|
173
|
-
});
|
|
174
|
-
});
|
|
175
|
-
|
|
176
|
-
$('#node-input-column-container').append(container);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
$('#node-input-add-column').click(function () {
|
|
180
|
-
generateColumn($('#node-input-column-container').children().length + 1, {});
|
|
181
|
-
$('#node-input-column-container-div').scrollTop(
|
|
182
|
-
$('#node-input-column-container-div').get(0).scrollHeight
|
|
183
|
-
);
|
|
184
|
-
});
|
|
185
|
-
|
|
186
|
-
for (let i = 0; i < this.columns.length; i++) {
|
|
187
|
-
const column = this.columns[i];
|
|
188
|
-
generateColumn(i + 1, column);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
$('#node-input-column-container').sortable({
|
|
192
|
-
axis: 'y',
|
|
193
|
-
handle: '.node-input-column-handle',
|
|
194
|
-
cursor: 'move',
|
|
195
|
-
});
|
|
196
|
-
|
|
197
|
-
$('#node-input-add-option').click(function () {
|
|
198
|
-
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
199
|
-
$('#node-input-option-container-div').scrollTop(
|
|
200
|
-
$('#node-input-option-container-div').get(0).scrollHeight
|
|
201
|
-
);
|
|
202
|
-
});
|
|
203
|
-
|
|
204
|
-
for (let i = 0; i < this.options.length; i++) {
|
|
205
|
-
const option = this.options[i];
|
|
206
|
-
generateOption(i + 1, option);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
$('#node-input-option-container').sortable({
|
|
210
|
-
axis: 'y',
|
|
211
|
-
handle: '.node-input-option-handle',
|
|
212
|
-
cursor: 'move',
|
|
213
|
-
});
|
|
214
|
-
|
|
215
|
-
$('#node-input-data').typedInput({
|
|
216
|
-
default: 'msg',
|
|
217
|
-
types: ['msg', 'json', 'flow', 'global'],
|
|
218
|
-
});
|
|
219
|
-
|
|
220
|
-
$('#node-input-data').typedInput('value', this.data);
|
|
221
|
-
$('#node-input-data').typedInput('type', this.data_type);
|
|
222
|
-
},
|
|
223
|
-
oneditsave: function () {
|
|
224
|
-
const options = $('#node-input-option-container').children();
|
|
225
|
-
const node = this;
|
|
226
|
-
node.options = [];
|
|
227
|
-
options.each(function (i) {
|
|
228
|
-
const option = $(this);
|
|
229
|
-
const o = {
|
|
230
|
-
label: option.find('.node-input-option-label').val(),
|
|
231
|
-
condition: option.find('.node-input-option-condition').val(),
|
|
232
|
-
};
|
|
233
|
-
|
|
234
|
-
node.options.push(o);
|
|
235
|
-
});
|
|
236
|
-
|
|
237
|
-
const columns = $('#node-input-column-container').children();
|
|
238
|
-
node.columns = [];
|
|
239
|
-
columns.each(function (i) {
|
|
240
|
-
const column = $(this);
|
|
241
|
-
const c = {
|
|
242
|
-
label: column.find('.node-input-column-label').val(),
|
|
243
|
-
value: column.find('.node-input-column-value').typedInput('value'),
|
|
244
|
-
type: column.find('.node-input-column-value').typedInput('type'),
|
|
245
|
-
};
|
|
246
|
-
if (column.find('.node-input-column-value').typedInput('type') === 'num') {
|
|
247
|
-
c.value = Number(c.value);
|
|
248
|
-
}
|
|
249
|
-
if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
|
|
250
|
-
c.value = c.value === 'true';
|
|
251
|
-
}
|
|
252
|
-
node.columns.push(c);
|
|
253
|
-
});
|
|
254
|
-
|
|
255
|
-
this.outputs = node.options.length || 1;
|
|
256
|
-
|
|
257
|
-
(this.data = $('#node-input-data').typedInput('value')),
|
|
258
|
-
(this.data_type = $('#node-input-data').typedInput('type'));
|
|
86
|
+
{
|
|
87
|
+
value: 'outside',
|
|
88
|
+
label: 'Outside of card',
|
|
89
|
+
hasValue: false,
|
|
259
90
|
},
|
|
91
|
+
],
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
function generateOption(i, option) {
|
|
95
|
+
const container = $('<li/>', {
|
|
96
|
+
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// Create input fields for value and label
|
|
100
|
+
const row = $('<div/>').appendTo(container);
|
|
101
|
+
$('<input/>', {
|
|
102
|
+
class: 'node-input-option-label',
|
|
103
|
+
type: 'text',
|
|
104
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
105
|
+
placeholder: 'Label',
|
|
106
|
+
value: option.label,
|
|
107
|
+
})
|
|
108
|
+
.appendTo(row)
|
|
109
|
+
.typedInput({
|
|
110
|
+
type: 'str',
|
|
111
|
+
types: ['str'],
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
$('<input/>', {
|
|
115
|
+
class: 'node-input-option-condition',
|
|
116
|
+
type: 'text',
|
|
117
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
118
|
+
placeholder: 'Condition',
|
|
119
|
+
value: option.condition,
|
|
120
|
+
})
|
|
121
|
+
.appendTo(row)
|
|
122
|
+
.typedInput({
|
|
123
|
+
type: 'str',
|
|
124
|
+
types: ['str'],
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
// Create delete button for the option
|
|
128
|
+
const finalSpan = $('<span/>', {
|
|
129
|
+
style: 'float:right; margin-right:8px;',
|
|
130
|
+
}).appendTo(row);
|
|
131
|
+
const deleteButton = $('<a/>', {
|
|
132
|
+
href: '#',
|
|
133
|
+
class: 'editor-button editor-button-small',
|
|
134
|
+
style: 'margin-top:7px; margin-left:5px;',
|
|
135
|
+
}).appendTo(finalSpan);
|
|
136
|
+
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
137
|
+
|
|
138
|
+
deleteButton.click(function () {
|
|
139
|
+
container.css({
|
|
140
|
+
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
141
|
+
});
|
|
142
|
+
container.fadeOut(300, function () {
|
|
143
|
+
$(this).remove();
|
|
144
|
+
});
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
$('#node-input-option-container').append(container);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
function generateColumn(i, column) {
|
|
151
|
+
const container = $('<li/>', {
|
|
152
|
+
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
// Create input fields for value and label
|
|
156
|
+
const row = $('<div/>').appendTo(container);
|
|
157
|
+
$('<input/>', {
|
|
158
|
+
class: 'node-input-column-value',
|
|
159
|
+
type: 'text',
|
|
160
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
161
|
+
placeholder: 'Value',
|
|
162
|
+
value: column.value,
|
|
163
|
+
})
|
|
164
|
+
.appendTo(row)
|
|
165
|
+
.typedInput({ default: column.type || 'str', types: ['str'] });
|
|
166
|
+
|
|
167
|
+
$('<input/>', {
|
|
168
|
+
class: 'node-input-column-label',
|
|
169
|
+
type: 'text',
|
|
170
|
+
style: 'margin-left:7px; width:calc(50% - 32px);',
|
|
171
|
+
placeholder: 'Label',
|
|
172
|
+
value: column.label,
|
|
173
|
+
})
|
|
174
|
+
.appendTo(row)
|
|
175
|
+
.typedInput({
|
|
176
|
+
type: 'str',
|
|
177
|
+
types: ['str'],
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
// Create delete button for the column
|
|
181
|
+
const finalSpan = $('<span/>', {
|
|
182
|
+
style: 'float:right; margin-right:8px;',
|
|
183
|
+
}).appendTo(row);
|
|
184
|
+
const deleteButton = $('<a/>', {
|
|
185
|
+
href: '#',
|
|
186
|
+
class: 'editor-button editor-button-small',
|
|
187
|
+
style: 'margin-top:7px; margin-left:5px;',
|
|
188
|
+
}).appendTo(finalSpan);
|
|
189
|
+
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
190
|
+
|
|
191
|
+
deleteButton.click(function () {
|
|
192
|
+
container.css({
|
|
193
|
+
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
194
|
+
});
|
|
195
|
+
container.fadeOut(300, function () {
|
|
196
|
+
$(this).remove();
|
|
197
|
+
});
|
|
198
|
+
});
|
|
199
|
+
|
|
200
|
+
$('#node-input-column-container').append(container);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
$('#node-input-add-column').click(function () {
|
|
204
|
+
generateColumn($('#node-input-column-container').children().length + 1, {});
|
|
205
|
+
$('#node-input-column-container-div').scrollTop($('#node-input-column-container-div').get(0).scrollHeight);
|
|
206
|
+
});
|
|
207
|
+
|
|
208
|
+
for (let i = 0; i < this.columns.length; i++) {
|
|
209
|
+
const column = this.columns[i];
|
|
210
|
+
generateColumn(i + 1, column);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
$('#node-input-column-container').sortable({
|
|
214
|
+
axis: 'y',
|
|
215
|
+
handle: '.node-input-column-handle',
|
|
216
|
+
cursor: 'move',
|
|
260
217
|
});
|
|
261
|
-
|
|
218
|
+
|
|
219
|
+
$('#node-input-add-option').click(function () {
|
|
220
|
+
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
221
|
+
$('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
for (let i = 0; i < this.options.length; i++) {
|
|
225
|
+
const option = this.options[i];
|
|
226
|
+
generateOption(i + 1, option);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
$('#node-input-option-container').sortable({
|
|
230
|
+
axis: 'y',
|
|
231
|
+
handle: '.node-input-option-handle',
|
|
232
|
+
cursor: 'move',
|
|
233
|
+
});
|
|
234
|
+
|
|
235
|
+
$('#node-input-data').typedInput({
|
|
236
|
+
default: 'msg',
|
|
237
|
+
types: ['msg', 'json', 'flow', 'global'],
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
$('#node-input-data').typedInput('value', this.data);
|
|
241
|
+
$('#node-input-data').typedInput('type', this.data_type);
|
|
242
|
+
},
|
|
243
|
+
oneditsave: function () {
|
|
244
|
+
const options = $('#node-input-option-container').children();
|
|
245
|
+
const node = this;
|
|
246
|
+
node.options = [];
|
|
247
|
+
options.each(function (i) {
|
|
248
|
+
const option = $(this);
|
|
249
|
+
const o = {
|
|
250
|
+
label: option.find('.node-input-option-label').val(),
|
|
251
|
+
condition: option.find('.node-input-option-condition').val(),
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
node.options.push(o);
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
const columns = $('#node-input-column-container').children();
|
|
258
|
+
node.columns = [];
|
|
259
|
+
columns.each(function (i) {
|
|
260
|
+
const column = $(this);
|
|
261
|
+
const c = {
|
|
262
|
+
label: column.find('.node-input-column-label').val(),
|
|
263
|
+
value: column.find('.node-input-column-value').typedInput('value'),
|
|
264
|
+
type: column.find('.node-input-column-value').typedInput('type'),
|
|
265
|
+
};
|
|
266
|
+
if (column.find('.node-input-column-value').typedInput('type') === 'num') {
|
|
267
|
+
c.value = Number(c.value);
|
|
268
|
+
}
|
|
269
|
+
if (column.find('.node-input-column-value').typedInput('type') === 'bool') {
|
|
270
|
+
c.value = c.value === 'true';
|
|
271
|
+
}
|
|
272
|
+
node.columns.push(c);
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
this.outputs = node.options.length || 1;
|
|
276
|
+
|
|
277
|
+
(this.data = $('#node-input-data').typedInput('value')),
|
|
278
|
+
(this.data_type = $('#node-input-data').typedInput('type'));
|
|
279
|
+
},
|
|
280
|
+
});
|
|
281
|
+
})();
|
|
262
282
|
</script>
|
|
263
283
|
|
|
264
284
|
<script type="text/html" data-template-name="ui-dynamic-table">
|
|
@@ -321,34 +341,54 @@
|
|
|
321
341
|
<div class="form-row">
|
|
322
342
|
<a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>column</span></a>
|
|
323
343
|
</div>
|
|
344
|
+
<hr />
|
|
345
|
+
|
|
346
|
+
<h4>Title Configuration</h4>
|
|
347
|
+
<div class="form-row">
|
|
348
|
+
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
349
|
+
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
350
|
+
</div>
|
|
351
|
+
<div class="form-row">
|
|
352
|
+
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
353
|
+
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
354
|
+
</div>
|
|
355
|
+
<div class="form-row">
|
|
356
|
+
<label for="node-input-title_custom_text_styling"><i class="fa fa-hand"></i>Custom text styling</label>
|
|
357
|
+
<input type="text" id="node-input-title_custom_text_styling" title="Use CSS properties like font-size, color or padding to influence the appearance of the title">
|
|
358
|
+
</div>
|
|
359
|
+
<div class="form-row">
|
|
360
|
+
<label for="node-input-title_icon"><i class="fa fa-hand"></i>Title icon</label>
|
|
361
|
+
<input type="text" id="node-input-title_icon" title="Enter an URL to fetch an icon from. Use a dataurl for images, that are not available online. This value will be used as a HTML <img>'s src value.">
|
|
362
|
+
</div>
|
|
363
|
+
<hr />
|
|
324
364
|
</script>
|
|
325
365
|
|
|
326
366
|
<script type="text/markdown" data-help-name="ui-dynamic-table">
|
|
327
|
-
A Node to dynamicly display arrays of data in a table with actions for every row.
|
|
367
|
+
A Node to dynamicly display arrays of data in a table with actions for every row.
|
|
328
368
|
|
|
329
|
-
## Actions
|
|
369
|
+
## Actions
|
|
330
370
|
|
|
331
|
-
Define a label for the action button that is going be displayed and a condition for when it should be displayed.
|
|
332
|
-
Inside the condition you have access to every key from the current row.
|
|
371
|
+
Define a label for the action button that is going be displayed and a condition for when it should be displayed.
|
|
372
|
+
Inside the condition you have access to every key from the current row.
|
|
333
373
|
|
|
334
|
-
### Inputs
|
|
374
|
+
### Inputs
|
|
335
375
|
|
|
336
|
-
: Table name (string) : The name of the table.
|
|
337
|
-
: Group (string) : The groud in which the Component is rendered.
|
|
338
|
-
: Size (string) : The size of the table within the group.
|
|
339
|
-
: Data (string) : The property of msg.payload from where the table data is sourced.
|
|
340
|
-
: Actions (string) : The actions of each row. Each action corresponds to an output of the node.
|
|
341
|
-
: Columns (string) : The columns of the table. Must correspond to a key of the data property.
|
|
376
|
+
: Table name (string) : The name of the table.
|
|
377
|
+
: Group (string) : The groud in which the Component is rendered.
|
|
378
|
+
: Size (string) : The size of the table within the group.
|
|
379
|
+
: Data (string) : The property of msg.payload from where the table data is sourced.
|
|
380
|
+
: Actions (string) : The actions of each row. Each action corresponds to an output of the node.
|
|
381
|
+
: Columns (string) : The columns of the table. Must correspond to a key of the data property.
|
|
342
382
|
|
|
343
|
-
### Outputs
|
|
383
|
+
### Outputs
|
|
344
384
|
|
|
345
|
-
The outputs are generated dynamicly based on the actions of the table.
|
|
385
|
+
The outputs are generated dynamicly based on the actions of the table.
|
|
346
386
|
|
|
347
|
-
### Details
|
|
387
|
+
### Details
|
|
348
388
|
|
|
349
|
-
`msg.payload` is used as the base for the data form there on the data source can be specified further with the `data` input field.
|
|
389
|
+
`msg.payload` is used as the base for the data form there on the data source can be specified further with the `data` input field.
|
|
350
390
|
|
|
351
|
-
### Referece
|
|
391
|
+
### Referece
|
|
352
392
|
|
|
353
|
-
[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
|
|
393
|
+
[https://processcube.io/docs/solutions/node-red](https://processcube.io/docs/solutions/node-red)
|
|
354
394
|
</script>
|