Skip to content

Commit 40c71e0

Browse files
petersirkapetersirka
committed
Added support for Flow Activities.
1 parent bfd7b18 commit 40c71e0

1 file changed

Lines changed: 109 additions & 13 deletions

File tree

‎public/designer.html‎

Lines changed: 109 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@
8484
.controls button { width: 22px; height: 22px; border: 0; background-color: #FFF; line-height: 22px; padding: 0 5px; border-radius: var(--radius); margin-left: 2px; }
8585
.controls button:first-child { margin-left: 0; }
8686
.controls button:hover { background-color: #F0F0F0; }
87+
.ui-dark .controls button { background-color: transparent; }
88+
.ui-dark .controls button:hover { background-color: #303030; }
8789

8890
.colorize { animation: colorize 1.3s infinite alternate; }
8991
.fdesigner { background: #F8F8F8; }
@@ -156,6 +158,16 @@
156158
.flowsearchwindow .singleton { color: #5C1DC4; }
157159
.flowsearchwindow .controls span { margin-left: 7px; cursor: pointer; }
158160

161+
.ui-dark .flowsearchwindow { background-color: #222; }
162+
.ui-dark .flowsearchwindow .item { border-bottom-color: #404040; }
163+
.ui-dark .flowsearchwindow .item:hover { background-color: rgba(0,0,0,.03); }
164+
.ui-dark .flowsearchwindow .monospace { color: #777; background-color: rgba(0,0,0,.08); }
165+
.ui-dark .flowsearchwindow .name code { color: #999; }
166+
.ui-dark .flowsearchwindow .ishidden { color: #E73323; }
167+
.ui-dark .flowsearchwindow .singleton { color: #5C1DC4; }
168+
.ui-dark .flowsearchwindow .ishidden { color: #E73323; }
169+
.ui-dark .flowsearchwindow .ui-searchinput { border-bottom-color: #303030; }
170+
159171
.fsettings { background-color: #FFF; }
160172
.fsettings > nav { padding: 0 15px 0; border-top: 1px solid #E0E0E0; background-color: #FFF; border-radius: 0 0 3px 3px; line-height: 65px; height: 65px; display: block; float: none; width: 100%; }
161173
.fsettings > nav button { border: 0; margin: 15px 0 0; background-color: #F0F0F0; height: 34px; padding: 0 20px; color: #000; cursor: pointer; font-family: Arial; line-height: 34px; vertical-align: middle; outline: 0; font-size: 14px; text-decoration: none; transition: all 0.3s; float: left; width: 50%; }
@@ -194,13 +206,23 @@
194206
.ui-dark .selection { border-color: #303030; background-color: #222; color: #FFF; }
195207

196208
.factivity { font-size: 10px; border-top: 1px solid #E0E0E0; padding: 4px 8px 6px; color: #999; }
197-
.factivity .hellip > i:first-child { color: #B9261A; margin-right: 3px; }
209+
.factivity .hellip > i:first-child, .factivity_component i { color: #B9261A; margin-right: 3px; }
198210
.factivity_bar { background-color: #F0F0F0; border-radius: var(--radius); margin-top: 1px; }
199211
.factivity_bar > div { background-color: var(--color); border-radius: var(--radius); text-align: right; height: 4px; }
212+
.factivity_component { font-weight: bold; color: #666; }
213+
.ui-dark .factivity_component { color: #C0C0C0; }
214+
215+
.factivities-label { padding: 8px 10px; font-weight: bold; border-bottom: 1px solid #E0E0E0; }
216+
.ui-dark .factivities-label { border-bottom-color: #404040; }
217+
.factivities-items { width: 380px; max-height: 250px; display: block; }
218+
.factivities-items .factivity { font-size: 12px; padding: 8px 10px; }
219+
.factivities-items .factivity:first-child { border-top: 0; }
220+
.factivities-items .factivity:hover { background-color: #F8F8F8; }
221+
.ui-dark .factivities-items .factivity:hover { background-color: #353535; }
200222

201223
.ui-dark .factivity { border-top-color: #404040; color: #999; }
202224
.ui-dark .factivity .hellip > i:first-child { color: #ff5953; }
203-
.ui-dark .factivity_bar { background-color: #303030; }
225+
.ui-dark .factivity_bar { background-color: #272727; }
204226

205227
@keyframes colorize {
206228
0% { color: #d7cd17; }
@@ -231,7 +253,8 @@
231253
<ui-component name="LAZY filereader"></ui-component>
232254
<ui-component name="LAZY filesaver"></ui-component>
233255
<ui-component name="LAZY fileuploader"></ui-component>
234-
<ui-component name="LAZY floatingbox"></ui-component>
256+
<ui-component name="LAZY floatingbox" config="zindex:150"></ui-component>
257+
<ui-component name="LAZY floatingpanel"></ui-component>
235258
<ui-component name="LAZY icons" config="list:/icons-db.html"></ui-component>
236259
<ui-component name="LAZY menu" config="style:2"></ui-component>
237260
<ui-component name="LAZY message" config="button:@(OK)"></ui-component>
@@ -259,6 +282,22 @@
259282
<ui-component name="title" path="?.head.name" config="plus:0;empty:---"></ui-component>
260283
<ui-component name="console2" path="?.console" config="name:@(Console);datasource:?.logs;clear:?/resetlogs;autoshow:0;autoclose:0"></ui-component>
261284

285+
<div class="floatingbox" data-id="activity" data-config="zindex:100">
286+
<div class="factivities-label">@(Activities)</div>
287+
<ui-bind path="?.activities2" class="noscrollbar factivities-items" config="template:.factivity -> data-key;show:value && value.length">
288+
<script type="text/html">
289+
{{ foreach m in value }}
290+
<div class="factivity exec" data-exec="flow/find" data-id="{{ m.instance.id }}" data-key="{{ m.instance.id }}_{{ m.key }}_{{ m.value }}">
291+
<div class="factivity_component"><i class="ti ti-circle-notch ti-spin"></i>{{ m.instance.Component.name }}</div>
292+
<div class="hellip">{{ m.name | raw }} ({{ m.value }}%)</div>
293+
<div class="factivity_bar"><div style="width:{{ m.value2 }}%"></div></div>
294+
</div>
295+
{{ end }}
296+
</script>
297+
</ui-bind>
298+
<ui-bind path="?.activities2" class="factivities-items center padding hidden help" config="hide:value && value.length"><i class="ti ti-exchange mr5"></i>@(No activities)</ui-bind>
299+
</div>
300+
262301
<ui-bind path="?.head.id" config="visible" class="invisible">
263302

264303
<header class="fheader">
@@ -488,6 +527,11 @@
488527
.CLASS .installed section .readme { color: #FFF; }
489528
.CLASS .search { height: 30px; }
490529
.CLASS .search .ui-searchinput { border: 0; border-bottom: 1px solid #E0E0E0; padding-left: 12px; }
530+
.ui-dark .CLASS .ui-searchinput { border-color: #404040; }
531+
.ui-dark .CLASS section { border-color: #404040; background-color: #303030; }
532+
.ui-dark .CLASS .installed section { border-color: var(--color); background-color: #202020; }
533+
.ui-dark .CLASS .author { color: #777; }
534+
.ui-dark .CLASS .version { color: #777; }
491535
</style>
492536
<ui-component name="box" path="*form" config="if:CLASS;icon:ti ti-database;title:@(Download components);autofocus:true;reload:?/reload;scrollbar:0;width:1200" class="hidden CLASS" plugin="CLASS">
493537
<div>
@@ -531,6 +575,10 @@
531575

532576
<ui-component name="importer" path="*form" config="if:flowendpointform">
533577
<script type="text/plain">
578+
<style>
579+
.CLASS .border { border: 1px solid #E0E0E0; }
580+
.ui-dark .CLASS .border { border-color: #404040; }
581+
</style>
534582
<ui-component name="box" path="*form" config="if:CLASS;title:@(Link endpoint);icon:ti ti-network;autofocus:true;scrollbar:1;submit:?/submit;width:700" class="hidden CLASS" plugin="CLASS">
535583
<div class="padding">
536584

@@ -570,7 +618,7 @@
570618
<hr />
571619

572620
<div class="b fs12" style="margin-bottom:5px">@(Read me):</div>
573-
<div style="height:200px;border:1px solid #E0E0E0">
621+
<div style="height:200px" class="m border">
574622
<ui-component name="code" path="?.readme" config="parent:auto;monospace:1;type:markdown;linenumbers:0"></ui-component>
575623
<div class="help">@(Markdown format)</div>
576624
</div>
@@ -596,6 +644,9 @@
596644
.CLASS .item .code { float: right; width: 120px; color: #E73323; }
597645
.CLASS .item .name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 10px 0 20px; }
598646
.CLASS .item .name i { margin-right: 5px; }
647+
.ui-dark .CLASS .item:hover { background: #303030; }
648+
.ui-dark .CLASS .ui-searchinput { border-color: #404040; }
649+
.ui-dark .CLASS .item { border-bottom-color: #404040; }
599650
</style>
600651
<ui-component name="box" path="*form" config="if:CLASS;title:@(TMS sources);icon:ti ti-code-branch;autofocus:true;reload:?/reload;scrollbar:0;submit:?/submit;width:800" class="hidden CLASS" plugin="CLASS">
601652
<nav>
@@ -1016,6 +1067,7 @@
10161067
flow.toolbar.push({ id: '?/variables', icon: 'ti ti-variables', title: '@(Variables)' });
10171068

10181069
flow.toolbar.push({ id: '?/logs', icon: 'ti ti-script', title: '@(Console)', class: 'errors' });
1070+
flow.toolbar.push({ id: '?/activity', icon: 'ti ti-circle-notch', title: '@(Activities)', class: 'activities' });
10191071
flow.toolbar.push({ id: '?/search', icon: 'ti ti-file-search', title: '@(Search in nodes)' });
10201072
flow.toolbar.push({ id: '?/zoom', icon: 'ti ti-search-minus', title: '@(Zoom)' });
10211073

@@ -1043,6 +1095,7 @@
10431095
flow.components = [];
10441096
flow.callbacks = {};
10451097
flow.activities = {};
1098+
flow.activities2 = [];
10461099

10471100
var Tactivity = Tangular.compile(`<div class="factivity" data-id="{{ key }}_{{ value }}">
10481101
<div class="hellip"><i class="ti ti-circle-notch ti-spin"></i>{{ name | raw }} {{ if value != null }}({{ value }}%){{ fi }}</div>
@@ -1137,11 +1190,20 @@
11371190
// msg.value
11381191
if (!model.activities[msg.id])
11391192
model.activities[msg.id] = {};
1140-
if (msg.name)
1141-
model.activities[msg.id][msg.key] = Tactivity({ id: msg.id, key: msg.key, name: msg.name, value: msg.value, value2: msg.value == null ? null : Math.ceil(msg.value) });
1142-
else
1193+
if (msg.name) {
1194+
if (msg.value != null)
1195+
msg.value = Number(msg.value).round(1);
1196+
let obj = { id: msg.id, key: msg.key, name: msg.name, value: msg.value, value2: msg.value == null ? null : Math.ceil(msg.value) };
1197+
obj.instance = model.data[msg.id];
1198+
if (obj.instance) {
1199+
obj.html = Tactivity(obj);
1200+
model.activities[msg.id][msg.key] = obj;
1201+
} else
1202+
delete model.activities[msg.id];
1203+
} else
11431204
delete model.activities[msg.id][msg.key];
11441205
exports.refresh_activity(msg.id);
1206+
exports.refresh_activities();
11451207
break;
11461208

11471209
case 'flow/activities':
@@ -1152,14 +1214,23 @@
11521214
let tmp = msg.data[key];
11531215
for (let key2 in tmp) {
11541216
let obj = tmp[key2];
1155-
if (obj.name)
1156-
model.activities[key][key2] = Tactivity({ id: key, key: key2, name: obj.name, value: obj.value, value2: obj.value == null ? null : Math.ceil(obj.value) });
1157-
else
1217+
if (obj.name) {
1218+
if (obj.value != null)
1219+
obj.value = Number(obj.value).round(1);
1220+
obj = { id: key, key: key2, name: obj.name, value: obj.value, value2: obj.value == null ? null : Math.ceil(obj.value) };
1221+
obj.instance = model.data[key];
1222+
if (obj.instance) {
1223+
obj.html = Tactivity(obj);
1224+
model.activities[key][key2] = obj;
1225+
} else
1226+
delete model.activities[key];
1227+
} else
11581228
delete model.activities[key][key2];
11591229
}
11601230

11611231
exports.refresh_activity(key);
11621232
}
1233+
exports.refresh_activities();
11631234
break;
11641235

11651236
case 'flow/variables':
@@ -1393,8 +1464,24 @@
13931464
let container = $('#factivities_' + id);
13941465
let builder = [];
13951466
for (let key in flow.activities[id])
1396-
builder.push(flow.activities[id][key]);
1397-
DIFFDOM(container, '.factivity', builder.join('\n'), 'data-id');
1467+
builder.push(flow.activities[id][key].html);
1468+
try {
1469+
DIFFDOM(container, '.factivity', builder.join('\n'), 'data-id');
1470+
} catch {}
1471+
};
1472+
1473+
exports.refresh_activities = function() {
1474+
let builder = [];
1475+
for (let key in flow.activities) {
1476+
for (let key2 in flow.activities[key]) {
1477+
let obj = flow.activities[key][key2];
1478+
if (obj.value != null)
1479+
builder.push(obj);
1480+
}
1481+
}
1482+
let is = builder.length > 0;
1483+
$('.activities i').tclass('ti-spin', is);
1484+
exports.set('activities2', builder);
13981485
};
13991486

14001487
exports.log = function(type, body) {
@@ -2447,6 +2534,15 @@
24472534
location.href = '?logout=1';
24482535
};
24492536

2537+
exports.activity = function(el) {
2538+
let opt = {};
2539+
opt.element = el;
2540+
opt.id = 'activity';
2541+
opt.offsetX = 5;
2542+
opt.offsetY = 30;
2543+
SETTER('floatingbox/show', opt);
2544+
};
2545+
24502546
exports.logs = function() {
24512547
exports.toggle('console');
24522548
};
@@ -3566,7 +3662,7 @@
35663662
};
35673663

35683664
Thelpers.translate = function(text) {
3569-
return TRANSLATE(text);
3665+
return text ? TRANSLATE(text) : text;
35703666
};
35713667

35723668
FUNC.trigger = function(el, data) {

0 commit comments

Comments
 (0)