@ntlab/sipd-tu-bridge-ui 1.4.0 → 1.5.0
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/controller/security.js +5 -0
- package/controller/ui.js +5 -0
- package/helper/app.js +2 -0
- package/package.json +4 -5
- package/views/layout/default.ejs +3 -3
- package/views/slot/mainmenu.ejs +1 -1
- package/views/ui/bridge.ejs +1 -1
- package/views/ui/error.ejs +16 -15
- package/views/ui/index.ejs +5 -5
- package/views/ui/info.ejs +18 -18
- package/views/ui/queue.ejs +8 -8
- package/views/ui/status.ejs +1 -1
- package/views/ui/ticker.ejs +2 -2
package/controller/security.js
CHANGED
|
@@ -25,6 +25,11 @@
|
|
|
25
25
|
const Controller = require('@ntlab/express-controller');
|
|
26
26
|
const Express = require('express').application;
|
|
27
27
|
|
|
28
|
+
/**
|
|
29
|
+
* Security controller provides user authentication mechanism.
|
|
30
|
+
*
|
|
31
|
+
* @author Toha <tohenk@yahoo.com>
|
|
32
|
+
*/
|
|
28
33
|
class SecurityController extends Controller {
|
|
29
34
|
|
|
30
35
|
buildRoutes() {
|
package/controller/ui.js
CHANGED
|
@@ -27,6 +27,11 @@ const path = require('path');
|
|
|
27
27
|
const Controller = require('@ntlab/express-controller');
|
|
28
28
|
const Express = require('express').application;
|
|
29
29
|
|
|
30
|
+
/**
|
|
31
|
+
* Ui controller provides user interface interaction.
|
|
32
|
+
*
|
|
33
|
+
* @author Toha <tohenk@yahoo.com>
|
|
34
|
+
*/
|
|
30
35
|
class UiController extends Controller {
|
|
31
36
|
|
|
32
37
|
buildRoutes() {
|
package/helper/app.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ntlab/sipd-tu-bridge-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "SIPD Penatausahaan Bridge Web Interface",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -31,17 +31,16 @@
|
|
|
31
31
|
},
|
|
32
32
|
"homepage": "https://github.com/tohenk/node-sipd-tu-bridge-ui#readme",
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@ntlab/express-controller": "^1.
|
|
35
|
-
"@ntlab/express-middleware": "^2.
|
|
34
|
+
"@ntlab/express-controller": "^1.3.0",
|
|
35
|
+
"@ntlab/express-middleware": "^2.6.0",
|
|
36
36
|
"@ntlab/ntjs": "^3.1.0",
|
|
37
|
-
"@ntlab/ntjs-assets": "^2.
|
|
37
|
+
"@ntlab/ntjs-assets": "^2.141.0",
|
|
38
38
|
"@ntlab/ntjs-repo": "^3.1.0",
|
|
39
39
|
"@ntlab/ntlib": "^2.9.1",
|
|
40
40
|
"ejs": "^3.1.10",
|
|
41
41
|
"express": "^5.2.1",
|
|
42
42
|
"express-session": "^1.19.0",
|
|
43
43
|
"http-errors": "^2.0.1",
|
|
44
|
-
"moment": "^2.30.1",
|
|
45
44
|
"morgan": "^1.10.1",
|
|
46
45
|
"session-file-store": "^1.5.0",
|
|
47
46
|
"terser": "^5.46.0"
|
package/views/layout/default.ejs
CHANGED
|
@@ -15,17 +15,17 @@
|
|
|
15
15
|
<body<% if (mainmenu) { %> class="with-menu"<% } %>>
|
|
16
16
|
<%_ if (mainmenu) { -%>
|
|
17
17
|
<section class="ui fixed inverted menu">
|
|
18
|
-
|
|
18
|
+
<%- indent(mainmenu, 4) -%>
|
|
19
19
|
</section>
|
|
20
20
|
<%_ } -%>
|
|
21
21
|
<main class="ui container">
|
|
22
22
|
<%_ if (title.length) { -%>
|
|
23
23
|
<h1 class="ui dividing header"><%= title %></h1>
|
|
24
24
|
<%_ } -%>
|
|
25
|
-
<%- content -%>
|
|
25
|
+
<%- indent(content, 4) -%>
|
|
26
26
|
</main>
|
|
27
27
|
<%_ if ((addons = slot('addons')) && (addons = include(addons))) { -%>
|
|
28
|
-
<%- addons -%>
|
|
28
|
+
<%- indent(addons, 2) -%>
|
|
29
29
|
<%_ } -%>
|
|
30
30
|
<%_ javascripts().forEach(js => { -%>
|
|
31
31
|
<script type="text/javascript" src="<%- path(js) %>"></script>
|
package/views/slot/mainmenu.ejs
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
} -%>
|
|
35
|
-
<%- menu(menus, {mainmenu: true
|
|
35
|
+
<%- menu(menus, {mainmenu: true}) %>
|
|
36
36
|
<%_ script.create('JQuery')
|
|
37
37
|
.useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message', 'SemanticUI/Dialog/Confirm'])
|
|
38
38
|
.add(`
|
package/views/ui/bridge.ejs
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</div>
|
|
12
12
|
<div class="twelve wide column">
|
|
13
13
|
<%_ bridges.forEach(bridge => { -%>
|
|
14
|
-
<div class="ui form bridge <%= bridge.name %>" style="display: none;">
|
|
14
|
+
<div class="ui form bridge <%= bridge.name %>" data-bridge="<%= bridge.name %>" style="display: none;">
|
|
15
15
|
<%_ Object.keys(bridge.stat).forEach(stat => { -%>
|
|
16
16
|
<div class="fields">
|
|
17
17
|
<div class="six wide field"><label><%= _(bridge.stat[stat].label) %></label></div>
|
package/views/ui/error.ejs
CHANGED
|
@@ -39,21 +39,21 @@ $.error = $.loader($('div[data-tab="error"] table'), {
|
|
|
39
39
|
});
|
|
40
40
|
$.error.toRow = function(data) {
|
|
41
41
|
return $(\`
|
|
42
|
-
<tr><td>\${data.nr}</td>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</tr>\`);
|
|
42
|
+
<tr><td>\${data.nr}</td>
|
|
43
|
+
<td>\${this.toImg($.toStr(data.image), data.filename)}</td>
|
|
44
|
+
<td>\${this.toPayload(data.error, '${_('Error Message')}')}</td>
|
|
45
|
+
<td>\${this.toPayload(data.data, '${_('Error Data')}')}</td>
|
|
46
|
+
<td>
|
|
47
|
+
<a href="#" class="err-clicker" data-op="delete" data-filename="\${data.filename}" role="button"><i class="trash alternate outline red icon"></i></a>
|
|
48
|
+
</td>
|
|
49
|
+
</tr>\`);
|
|
50
50
|
}
|
|
51
51
|
$.error.toImg = function(data, alt) {
|
|
52
52
|
if (data) {
|
|
53
53
|
return \`
|
|
54
|
-
<a href="#" class="err-clicker" data-op="view" data-title="\${alt}" data-tooltip="\${alt}" data-position="right center">
|
|
55
|
-
|
|
56
|
-
</a>\`;
|
|
54
|
+
<a href="#" class="err-clicker" data-op="view" data-title="\${alt}" data-tooltip="\${alt}" data-position="right center">
|
|
55
|
+
<img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
|
|
56
|
+
</a>\`;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
$.error.toPayload = function(data, title) {
|
|
@@ -79,13 +79,14 @@ $.error.toPayload = function(data, title) {
|
|
|
79
79
|
excerpt += '…';
|
|
80
80
|
}
|
|
81
81
|
return \`
|
|
82
|
-
<a href="#" class="err-clicker" data-op="view" data-title="\${title}">
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</a>\`;
|
|
82
|
+
<a href="#" class="err-clicker" data-op="view" data-title="\${title}">
|
|
83
|
+
<span>\${excerpt}</span>
|
|
84
|
+
<pre style="display: none;">\${payload}</pre>
|
|
85
|
+
</a>\`;
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
$.error.handle = function(el) {
|
|
89
|
+
const self = this;
|
|
89
90
|
switch (el.data('op')) {
|
|
90
91
|
case 'view':
|
|
91
92
|
let content, size = 'large';
|
package/views/ui/index.ejs
CHANGED
|
@@ -8,22 +8,22 @@
|
|
|
8
8
|
<a class="item" data-tab="error"><%= _('Error') %> <span class="ui hidden tiny label"></span></a>
|
|
9
9
|
</div>
|
|
10
10
|
<div class="ui bottom attached tab segment" data-tab="status">
|
|
11
|
-
<%- include('status') -%>
|
|
11
|
+
<%- indent(include('status'), 2) -%>
|
|
12
12
|
</div>
|
|
13
13
|
<div class="ui bottom attached tab segment" data-tab="activity">
|
|
14
|
-
<%- include('activity') -%>
|
|
14
|
+
<%- indent(include('activity'), 2) -%>
|
|
15
15
|
</div>
|
|
16
16
|
<div class="ui bottom attached tab segment" data-tab="queue">
|
|
17
|
-
<%- include('queue') -%>
|
|
17
|
+
<%- indent(include('queue'), 2) -%>
|
|
18
18
|
</div>
|
|
19
19
|
<%- include('bridgehandler') -%>
|
|
20
20
|
<%_ if (api.bridges.length) { -%>
|
|
21
21
|
<div class="ui bottom attached tab segment" data-tab="bridge">
|
|
22
|
-
<%- include('bridge') -%>
|
|
22
|
+
<%- indent(include('bridge'), 2) -%>
|
|
23
23
|
</div>
|
|
24
24
|
<%_ } -%>
|
|
25
25
|
<div class="ui bottom attached tab segment" data-tab="error">
|
|
26
|
-
<%- include('error') -%>
|
|
26
|
+
<%- indent(include('error'), 2) -%>
|
|
27
27
|
</div>
|
|
28
28
|
<%- include('ticker') -%>
|
|
29
29
|
<%- include('util') -%>
|
package/views/ui/info.ejs
CHANGED
|
@@ -3,27 +3,27 @@
|
|
|
3
3
|
<div class="item header"><i class="ui info circle icon"></i><%- _('General Information') %></div>
|
|
4
4
|
</div>
|
|
5
5
|
<div class="extra content">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
</div>
|
|
13
|
-
<div class="fields">
|
|
14
|
-
<div class="eight wide field"><label><%= _('Mode:') %></label></div>
|
|
15
|
-
<div class="eight wide field"><label><%= api.mode %></label></div>
|
|
16
|
-
</div>
|
|
6
|
+
<div class="ui form">
|
|
7
|
+
<div class="ui two column stackable grid">
|
|
8
|
+
<div class="column">
|
|
9
|
+
<div class="fields">
|
|
10
|
+
<div class="eight wide field"><label><%= _('Protocol:') %></label></div>
|
|
11
|
+
<div class="eight wide field"><label><%= api.proto %></label></div>
|
|
17
12
|
</div>
|
|
18
|
-
<div class="
|
|
19
|
-
|
|
20
|
-
<div class="
|
|
21
|
-
<div class="eight wide field"><label><%= _(api.counter[counter].label) %></label></div>
|
|
22
|
-
<div class="eight wide field"><label data-counter="<%= counter %>"><%= _(api.counter[counter].value) %></label></div>
|
|
23
|
-
</div>
|
|
24
|
-
<%_ }) -%>
|
|
13
|
+
<div class="fields">
|
|
14
|
+
<div class="eight wide field"><label><%= _('Mode:') %></label></div>
|
|
15
|
+
<div class="eight wide field"><label><%= api.mode %></label></div>
|
|
25
16
|
</div>
|
|
26
17
|
</div>
|
|
18
|
+
<div class="column">
|
|
19
|
+
<%_ Object.keys(api.counter).forEach(counter => { -%>
|
|
20
|
+
<div class="fields">
|
|
21
|
+
<div class="eight wide field"><label><%= _(api.counter[counter].label) %></label></div>
|
|
22
|
+
<div class="eight wide field"><label data-counter="<%= counter %>"><%= _(api.counter[counter].value) %></label></div>
|
|
23
|
+
</div>
|
|
24
|
+
<%_ }) -%>
|
|
25
|
+
</div>
|
|
27
26
|
</div>
|
|
27
|
+
</div>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
package/views/ui/queue.ejs
CHANGED
|
@@ -37,14 +37,14 @@ $.queue = $.loader($('div[data-tab="queue"] table'), {
|
|
|
37
37
|
});
|
|
38
38
|
$.queue.toRow = function(data) {
|
|
39
39
|
return $(\`
|
|
40
|
-
<tr><td>\${data.nr}</td>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</tr>\`);
|
|
40
|
+
<tr><td>\${data.nr}</td>
|
|
41
|
+
<td>\${$.toStr(data.id)}</td>
|
|
42
|
+
<td>\${$.toStr(data.type)}</td>
|
|
43
|
+
<td><div class="ui scrolling container queue-name">\${$.hidePayload($.toStr(data.name))}</div></td>
|
|
44
|
+
<td>\${this.toStatus(data.status)}</td>
|
|
45
|
+
<td><div class="ui scrolling container queue-result">\${$.hidePayload($.toStr(data.result))}</div></td>
|
|
46
|
+
<td>\${$.toStr(data.time)}</td>
|
|
47
|
+
</tr>\`);
|
|
48
48
|
}
|
|
49
49
|
$.queue.toStatus = function(data) {
|
|
50
50
|
const icon = {
|
package/views/ui/status.ejs
CHANGED
package/views/ui/ticker.ejs
CHANGED
|
@@ -35,11 +35,11 @@ $.ticker = {
|
|
|
35
35
|
'restart-timer-dlg',
|
|
36
36
|
'${_('Please Wait')}',
|
|
37
37
|
\`<div class="ui grid container">
|
|
38
|
-
|
|
38
|
+
<div class="row">
|
|
39
39
|
<span class="ui large red text"><i class="clock outline icon"></i><span class="elapsed">00:00:00</span></span>
|
|
40
40
|
<span> </span>
|
|
41
41
|
<span class="ui large text">\${message}</span>
|
|
42
|
-
|
|
42
|
+
</div>
|
|
43
43
|
</div>\`,
|
|
44
44
|
{
|
|
45
45
|
size: 'small',
|