@ntlab/sipd-tu-bridge-ui 1.1.4 → 1.2.0

package/controller/ui.js

@@ -125,10 +125,17 @@ class UiController extends Controller {
             }
             res.json(about);
         });
-        this.addRoute('task', 'post', '/task/:op', (req, res, next) => {
+        this.addRoute('task', 'post', '/task/:op', async (req, res, next) => {
             const result = {
                 success: false
             }
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            switch (req.params.op) {
+                case 'restart':
+                    Object.assign(result, await api.query({cmd: 'restart'}));
+                    break;
+            }
             res.json(result);
         });
     }

package/index.js

@@ -39,6 +39,7 @@
  * @property {StringPromiseFunction} getActivity Get activity logs
  * @property {ObjectPromiseFunction} getCount Get activity count
  * @property {PagedObjectsPromiseFunction} getErrors Get captured errors
+ * @property {QueryFunction} query Perform API query
  */
 
 /**
@@ -95,6 +96,14 @@
  * @returns {Promise<string>}
  */
 
+/**
+ * A function which returns object Promise.
+ *
+ * @callback QueryFunction
+ * @param {object} data Query data
+ * @returns {Promise<object>}
+ */
+
 /* --- END API --- */
 
 const createError = require('http-errors');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntlab/sipd-tu-bridge-ui",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "SIPD Penatausahaan Bridge Web Interface",
   "main": "index.js",
   "scripts": {

package/public/css/app.css

@@ -16,8 +16,11 @@ img.logo {
 }
 
 @media only screen and (min-width: 1200px) {
+  .ui.container.queue-name {
+    max-width: 20em;
+  }
   .ui.container.queue-result {
-    max-width: 30em;
+    max-width: 22.5em;
   }
   .ui.container.err-data {
     max-width: 40em;
@@ -25,8 +28,11 @@ img.logo {
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+  .ui.container.queue-name {
+    max-width: 15em;
+  }
   .ui.container.queue-result {
-    max-width: 25em;
+    max-width: 17.5em;
   }
   .ui.container.err-data {
     max-width: 30em;
@@ -34,8 +40,11 @@ img.logo {
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
+  .ui.container.queue-name {
+    max-width: 10em;
+  }
   .ui.container.queue-result {
-    max-width: 20em;
+    max-width: 12.5em;
   }
   .ui.container.err-data {
     max-width: 20em;
@@ -43,11 +52,8 @@ img.logo {
 }
 
 @media only screen and (max-width: 767.98px) {
-  .ui.container.queue-result {
-    max-width: 75vw;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
+  .ui.container.queue-name,
+  .ui.container.queue-result,
   .ui.container.err-data {
     max-width: 75vw;
     margin-left: 0 !important;

package/views/slot/mainmenu.ejs

@@ -20,6 +20,12 @@
         divider1: {
             type: 'divider'
         },
+        restart: {
+            title: _('Restart Server'),
+        },
+        divider2: {
+            type: 'divider'
+        },
         logout: {
             title: _('Logout'),
             url: route('Security', {name: 'logout'})
@@ -28,7 +34,7 @@
 } -%>
 <%- menu(menus, {mainmenu: true, indentation: 2}) %>
 <%_ script.create('JQuery')
-  .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message'])
+  .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message', 'SemanticUI/Dialog/Confirm'])
   .add(`
 $.tasks = {
     about() {
@@ -57,11 +63,45 @@ $.tasks = {
             f();
         }
     },
+    restart() {
+        const self = this;
+        if (self._restart === undefined) {
+            self._restart = true;
+            $.ntdlg.confirm(
+                'restart-confirm-dlg',
+                '${_('Confirm')}',
+                '${_('Are you sure want to restart the server?')}',
+                $.ntdlg.ICON_QUESTION,
+                function() {
+                    $.post('${route('Ui', {name: 'task', op: 'restart'})}')
+                        .done(function(json) {
+                            self.notify(json);
+                        })
+                        .always(function() {
+                            delete self._restart;
+                        });
+                },
+                function() {
+                    delete self._restart;
+                }
+            );
+        }
+    },
+    notify(result) {
+        if (result.success) {
+            $.notify('${_('Operation successfully submitted!')}', 'success');
+        } else {
+            $.notify('${_('Operation failed!')}', 'error');
+        }
+    },
     init() {
         const self = this;
-        $('.menu-about').on('click', function(e) {
+        $('.menu div.item').on('click', function(e) {
             e.preventDefault();
-            self.about();
+            const menu = $(this).attr('class').split(' ')[0].split('-')[1];
+            if (typeof self[menu] === 'function') {
+                self[menu]();
+            }
         });
     }
 }

package/views/ui/index.ejs

@@ -25,6 +25,7 @@
 <div class="ui bottom attached tab segment" data-tab="error">
 <%- include('error') -%>
 </div>
+<%- include('ticker') -%>
 <%- include('util') -%>
 <%_ script.create('JQuery')
   .useDependencies(['SocketIO'])
@@ -39,6 +40,9 @@ $.uiCon = {
             .on('connect', function() {
                 self.connected = true;
                 console.log('Socket connected');
+                if (self.restarted) {
+                    window.location.reload();
+                }
             })
             .on('disconnect', function() {
                 self.connected = false;
@@ -64,12 +68,17 @@ $.uiCon = {
             })
             .on('error', function() {
                 $.error.reload();
+            })
+            .on('restart', function() {
+                console.log('Server restarted');
+                self.restarted = true;
+                $.ticker.start('${_('A server restart is undergo&hellip;')}');
             });
     }
 }
 `)
   .addInitializer(`
-$('.menu .item').tab({
+$('.menu [data-tab]').tab({
     autoTabActivation: window.location.hash ? window.location.hash.substr(1) : true,
     onLoad(path, params, history) {
         window.location.hash = path;

package/views/ui/queue.ejs

@@ -40,7 +40,7 @@ $.queue.toRow = function(data) {
 \`<tr><td>\${data.nr}</td>
     <td>\${$.toStr(data.id)}</td>
     <td>\${$.toStr(data.type)}</td>
-    <td>\${$.toStr(data.name)}</td>
+    <td><div class="ui scrolling container queue-name">\${$.hidePayload($.toStr(data.name))}</div></td>
     <td>\${this.toStatus(data.status)}</td>
     <td><div class="ui scrolling container queue-result">\${$.hidePayload($.toStr(data.result))}</div></td>
     <td>\${$.toStr(data.time)}</td>

package/views/ui/ticker.ejs

@@ -0,0 +1,67 @@
+<%_ script.create('JQuery')
+  .useDependencies(['SemanticUI/Dialog'])
+  .add(`
+$.ticker = {
+    formatTick(value) {
+        return value.toString().padStart(2, '0');
+    },
+    formatTime(seconds) {
+        const self = this;
+        if (!self.seconds_in_hour) {
+            self.seconds_in_hour = 60 * 60;
+        }
+        if (!self.seconds_in_minute) {
+            self.seconds_in_minute = 60;
+        }
+        const hour = Math.floor(seconds / self.seconds_in_hour);
+        seconds -= hour * self.seconds_in_hour;
+        const minute = Math.floor(seconds / self.seconds_in_minute);
+        seconds -= minute * self.seconds_in_minute;
+        return \`\${self.formatTick(hour)}:\${self.formatTick(minute)}:\${self.formatTick(seconds)}\`;
+    },
+    build() {
+        const self = this;
+        self.start = new Date().getTime();
+        const f = function() {
+            const elapsed = Math.round((new Date().getTime() - self.start) / 1000);
+            $('.elapsed').text(self.formatTime(elapsed));
+        }
+        self.tick = setInterval(f, 1000);
+        f();
+    },
+    start(message) {
+        const self = this;
+        self.dlg = $.ntdlg.create(
+            'restart-timer-dlg',
+            '${_('Please Wait')}',
+            \`<div class="ui grid container">
+            <div class="row">
+                <span class="ui large red text"><i class="clock outline icon"></i><span class="elapsed">00:00:00</span></span>
+                <span>&nbsp;&nbsp;&nbsp;</span>
+                <span class="ui large text">\${message}</span>
+            </div>
+            </div>\`,
+            {
+                size: 'small',
+                closable: false,
+                show() {
+                    self.build();
+                },
+                hide() {
+                    if (self.tick) {
+                        clearInterval(self.tick);
+                        delete self.tick;
+                    }
+                }
+            }
+        );
+        $.ntdlg.show(self.dlg);
+    },
+    stop() {
+        const self = this;
+        if (self.dlg) {
+            $.ntdlg.close(self.dlg);
+        }
+    }
+}
+`) -%>

package/views/ui/util.ejs

@@ -42,7 +42,7 @@ $.hidePayload = function(message) {
     if (message) {
         message = message.replace(
             /[A-Za-z0-9\\+\\/\\=\\@\\,]{40,}/g,
-            s => \`<i class="comment dots outline icon" data-tooltip="\${s}" data-position="right center"></i>\`
+            s => \`<span data-tooltip="\${s}" data-position="right center"><i class="eye icon"></i></span>\`
         );
     }
     return message;