@ntlab/sipd-tu-bridge-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Toha <tohenk@yahoo.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# SIPD Penatausahaan Bridge Web Interface
+
+An Express app as user interface of SIPD Penatausahaan Bridge Web Interface.

package/controller/security.js

@@ -0,0 +1,75 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2026 Toha <tohenk@yahoo.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const Controller = require('@ntlab/express-controller');
+const Express = require('express').application;
+
+class SecurityController extends Controller {
+    buildRoutes() {
+        this.addRoute('index', 'get', '/login', (req, res, next) => {
+            let redir;
+            if (req.params.r) {
+                redir = req.params.r;
+            } else if (req.query.r) {
+                redir = req.query.r;
+            }
+            res.app.slots.mainmenu.enabled = false;
+            res.render('security/login', {redirect: redir ? redir : req.getPath('/')});
+        });
+        this.addRoute('login', 'post', '/login', (req, res, next) => {
+            const result = {
+                success: false
+            }
+            if (req.user.authenticate(req.body.username, req.body.password)) {
+                req.user.login();
+                result.success = true;
+                result.url = req.body.continue ? req.body.continue : req.getPath('/');
+            } else {
+                result.error = this._('Invalid username and/or password');
+            }
+            res.json(result);
+        });
+        this.addRoute('logout', 'get', '/logout', (req, res, next) => {
+            if (req.user) {
+                req.user.logout();
+            }
+            res.redirect(req.getPath('/'));
+        });
+    }
+
+    /**
+     * Create controller.
+     *
+     * @param {Express} app Express app
+     * @param {string} prefix Path prefix 
+     * @returns {SecurityController}
+     */
+    static create(app, prefix = '/') {
+        const controller = new SecurityController({prefix: prefix, name: 'Security'});
+        app.use(prefix, controller.router);
+        return controller;
+    }
+}
+
+module.exports = SecurityController.create;

package/controller/ui.js

@@ -0,0 +1,140 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2026 Toha <tohenk@yahoo.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const Controller = require('@ntlab/express-controller');
+const Express = require('express').application;
+
+class UiController extends Controller {
+
+    buildRoutes() {
+        this.addRoute('index', 'get', '/', async (req, res, next) => {
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            for (const bridge of api.bridges) {
+                bridge.stat = await bridge.getStats();
+                bridge.last = await bridge.getLast();
+                bridge.current = await bridge.getCurrent();
+            }
+            const socketOptions = {reconnection: true};
+            if (req.app.get('root') !== '/') {
+                socketOptions.path = req.getPath('/socket.io/');
+            }
+            res.render('ui/index', {
+                socket: {
+                    url: `${req.getUri({noproto: true})}/ui`,
+                    options: socketOptions,
+                }
+            });
+        });
+        this.addRoute('updates', 'get', '/updates', async (req, res, next) => {
+            const result = {updates: {}};
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            for (const bridge of api.bridges) {
+                bridge.stat = await bridge.getStats();
+                bridge.last = await bridge.getLast();
+                bridge.current = await bridge.getCurrent();
+                result.updates[bridge.name] = {
+                    ...bridge.stat,
+                    last: bridge.last,
+                    current: bridge.current,
+                }
+            }
+            res.json(result);
+        });
+        this.addRoute('activity', 'get', '/activity', async (req, res, next) => {
+            const result = {};
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            const logs = await api.getActivity();
+            if (logs) {
+                result.time = Date.now();
+                result.logs = logs;
+            }
+            res.json(result);
+        });
+        this.addRoute('queue', 'get', '/queue', async (req, res, next) => {
+            /** @type {import('..').SipdApi} */
+            const api = req.app.api;
+            const result = await api.getQueues(req.params.page || req.query.page, req.params.size || req.query.size);
+            result.pages = req.app.locals.pager(result.count, result.size, result.page);
+            res.json(result);
+        });
+        this.addRoute('log', 'get', '/log/:bridge', async (req, res, next) => {
+            const result = {};
+            if (req.params.bridge) {
+                /** @type {import('..').SipdApi} */
+                const api = req.app.api;
+                const bridge = api.bridges.find(b => b.name === req.params.bridge);
+                if (bridge) {
+                    const logs = await bridge.getLogs();
+                    if (logs) {
+                        result.time = Date.now();
+                        result.logs = logs;
+                    }
+                }
+            }
+            res.json(result);
+        });
+        this.addRoute('about', 'get', '/about', (req, res, next) => {
+            let about;
+            if (req.app.about) {
+                about = req.app.about;
+            } else {
+                const packageInfo = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json')));
+                about = {
+                    title: packageInfo.description,
+                    version: packageInfo.version,
+                    author: packageInfo.author.name ? `${packageInfo.author.name} <${packageInfo.author.email}>` :
+                        packageInfo.author,
+                    license: packageInfo.license
+                }
+            }
+            res.json(about);
+        });
+        this.addRoute('task', 'post', '/task/:op', (req, res, next) => {
+            const result = {
+                success: false
+            }
+            res.json(result);
+        });
+    }
+
+    /**
+     * Create controller.
+     *
+     * @param {Express} app Express app
+     * @param {string} prefix Path prefix 
+     * @returns {UiController}
+     */
+    static create(app, prefix = '/') {
+        const controller = new UiController({prefix, name: 'Ui'});
+        app.use(prefix, controller.router);
+        return controller;
+    }
+}
+
+module.exports = UiController.create;

package/helper/app.js

@@ -0,0 +1,131 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2026 Toha <tohenk@yahoo.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const Helper = require('@ntlab/express-middleware/lib/helper');
+const HelperFunctions = require('@ntlab/express-middleware/lib/fn');
+const Controller = require('@ntlab/express-controller');
+const Translator = require('@ntlab/express-controller/translator');
+const Stringify = require('@ntlab/ntlib/stringify');
+const { ScriptManager } = require('@ntlab/ntjs');
+const { minify_sync } = require('terser');
+
+/**
+ * Express app middleware.
+ */
+class AppFunctions extends HelperFunctions {
+
+    initialize() {
+        this.exportFn(this.app.locals, () => this.ViewFunctions());
+        this.exportFn(this.res.req, () => this.RequestFunctions());
+        this.exportFn(this.res, () => this.ResponseFunctions());
+    }
+
+    ViewFunctions() {
+        return {
+            _: Translator._,
+            s: (o, l = 0) => Stringify.from(o, l),
+            route: (name, parameters) => this.genRoute(name, parameters),
+            path: path => this.genPath(path),
+        }
+    }
+
+    RequestFunctions() {
+        return {
+            getUri: (parameters = null) => this.getUri(parameters),
+            getPath: path => this.genPath(path),
+            getRoute: (name, parameters) => this.genRoute(name, parameters),
+        }
+    }
+
+    ResponseFunctions() {
+        return {
+            onrender: res => ScriptManager.require('JQuery').setOption('xhr', res.req.xhr ? true : false),
+            onscript: script => this.app.get('env') === 'development' ? script : minify_sync(script, {compress: true, mangle: true}).code,
+        }
+    }
+
+    getUri(parameters = null) {
+        let path, noproto = false;
+        if (typeof parameters === 'string') {
+            path = parameters;
+            parameters = {};
+        }
+        if (typeof parameters === 'object') {
+            if (parameters.path) {
+                path = parameters.path;
+            }
+            if (parameters.noproto) {
+                noproto = true;
+            }
+        }
+        const [host, port] = this.res.req.headers.host.split(':');
+        let uri = `${noproto ? '' : this.res.req.protocol + ':'}//${this.res.req.hostname}`;
+        if (port && ((this.res.req.protocol === 'http' && port != 80) || (this.res.req.protocol === 'https' && port != 443))) {
+            uri += `:${port}`;
+        }
+        if (path) {
+            uri += this.genPath(path);
+        }
+        return uri;
+    }
+
+    getController(name) {
+        return Controller.get(name);
+    }
+
+    genRoute(name, parameters) {
+        const controller = this.getController(name);
+        if (!controller) {
+            throw new Error(`Unable to find controller ${name}!`);
+        }
+        const p = {...parameters};
+        const route = p.name;
+        if (!route) {
+            throw new Error('Route name must be specified in parameters!');
+        }
+        delete p.name;
+        return controller.genRoute(route, p);
+    }
+
+    genPath(path) {
+        if (Array.isArray(path)) {
+            path = path.map(p => this.genPath(p));
+        } else {
+            if (typeof path === 'string' && !path.match(/http(s)?:\/\//) && path.substr(0, 1) === '/') {
+                let rootPath = this.app.get('root');
+                if (rootPath.substr(-1) === '/') {
+                    rootPath = rootPath.substr(0, rootPath.length - 1);
+                }
+                if (rootPath) {
+                    path = rootPath + path;
+                }
+            }
+        }
+        return path;
+    }
+}
+
+const helper = new Helper(AppFunctions);
+
+module.exports = options => helper.handle(options);

package/index.js

@@ -0,0 +1,244 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2026 Toha <tohenk@yahoo.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/* --- BEGIN API --- */
+
+/**
+ * SIPD Penatausahaan Bridge main application.
+ *
+ * @typedef {Object} SipdApi
+ * @property {string} title Application title
+ * @property {SipdAboutInfo} about Application information
+ * @property {string} proto Protocol version
+ * @property {string} mode Bridge mode
+ * @property {object} config Configuration
+ * @property {SipdBridge[]} bridges Bridges
+ * @property {AuthenticateFunction} authenticate Perform usename and password authentication
+ * @property {GetQueuesFunction} getQueues Get queues
+ * @property {StringPromiseFunction} getActivity Get activity logs
+ */
+
+/**
+ * SIPD Penatausahaan Bridge queue consumer.
+ *
+ * @typedef {Object} SipdBridge
+ * @property {string} name Name
+ * @property {number} year Year
+ * @property {ObjectPromiseFunction} getStats Get bridge stats
+ * @property {StringPromiseFunction} getLogs Get bridge logs
+ * @property {ObjectPromiseFunction} getLast Get last queue
+ * @property {ObjectPromiseFunction} getCurrent Get current processing queue
+ */
+
+/**
+ * Application information.
+ *
+ * @typedef {Object} SipdAboutInfo
+ * @property {string} title Title
+ * @property {string} version Version
+ * @property {string} author Author name and email address
+ * @property {string} license License, e.g. MIT License
+ */
+
+/**
+ * Perform usename and password authentication.
+ *
+ * @callback AuthenticateFunction
+ * @param {string} username Username
+ * @param {string} password Password
+ * @returns {boolean}
+ */
+
+/**
+ * Get queues.
+ *
+ * @callback GetQueuesFunction
+ * @param {number} page Page number
+ * @param {number} size Page size
+ * @returns {Promise<object[]>}
+ */
+
+/**
+ * A function which returns object Promise.
+ *
+ * @callback ObjectPromiseFunction
+ * @returns {Promise<object>}
+ */
+
+/**
+ * A function which returns string Promise.
+ *
+ * @callback StringPromiseFunction
+ * @returns {Promise<string>}
+ */
+
+/* --- END API --- */
+
+const createError = require('http-errors');
+const express = require('express');
+const path = require('path');
+const logger = require('morgan');
+const session = require('express-session');
+const FileStore = require('session-file-store')(session);
+const { Helper, Security, Factory } = require('@ntlab/express-middleware');
+const { ScriptManager, ScriptAsset } = require('@ntlab/ntjs');
+const { Assets, CDN } = require('@ntlab/ntjs-assets');
+
+// register script repository
+require('@ntlab/ntjs-repo')();
+
+/**
+ * Express application.
+ *
+ * @author Toha <tohenk@yahoo.com>
+ */
+class ExpressApp {
+
+    app = express()
+    /** @type {SipdApi} */
+    api = null
+
+    /**
+     * Constructor.
+     *
+     * @param {SipdApi} api App api
+     */
+    constructor(api) {
+        this.api = api;
+        this.initialize();
+    }
+
+    initialize() {
+        const options = this.api.config || {};
+        const rootPath = options.rootPath || '/';
+
+        // setup application
+        this.app.api = this.app.locals.api = this.api;
+        this.app.factory = Factory.SemanticUI;
+        for (const prop of ['title', 'about', 'authenticate']) {
+            this.app[prop] = this.api[prop];
+        }
+
+        // view engine setup
+        this.app.set('views', path.join(__dirname, 'views'));
+        this.app.set('view engine', 'ejs');
+        this.app.set('query parser', 'extended');
+
+        // environment
+        this.app.set('env', process.env.NODE_ENV || 'development');
+        this.app.set('root', rootPath);
+
+        this.app.use(logger('dev'));
+        this.app.use(express.json());
+        this.app.use(express.urlencoded({extended: true}));
+        this.app.use(rootPath, express.static(path.join(__dirname, 'public')));
+        this.app.use(rootPath, express.static(Assets));
+
+        // session
+        const sessiondir = options.sessiondir || path.join(__dirname, 'sessions');
+        const secret = options.sessionsecret || 'sipd-tu-bridge';
+        this.app.use(session({
+                name: options['session-name'] || 'sipd-tu-bridge',
+                store: new FileStore({path: sessiondir}),
+                secret,
+                resave: false,
+                saveUninitialized: false,
+                cookie: {
+                    maxAge: 3600000
+                }
+            })
+        );
+
+        // security
+        const securityOptions = {};
+        if (rootPath !== '/') {
+            securityOptions.loginroute = options.getPath('/login');
+            securityOptions.logoutroute = options.getPath('/logout');
+        }
+        this.app.use(Security.core(securityOptions));
+
+        // app helpers
+        this.app.use(Helper.core());
+        this.app.use(Helper.menu());
+        this.app.use(Helper.pager());
+        this.app.use(require('./helper/app')());
+
+        // controllers
+        const Controller = require('@ntlab/express-controller');
+        Controller.scan(path.join(__dirname, 'controller'), controller => {
+            controller(this.app, rootPath);
+        });
+
+        // catch 404 and forward to error handler
+        this.app.use((req, res, next) => {
+            next(createError(404));
+        });
+
+        // error handler
+        this.app.use((err, req, res, next) => {
+            // set locals, only providing error in development
+            res.locals.message = err.message;
+            res.locals.error = req.app.get('env') === 'development' ? err : {};
+            res.locals.viewdir = req.app.get('views');
+
+            // render the error page
+            res.status(err.status || 500);
+            res.render('error/error');
+        });
+
+        // relative from layout
+        this.app.slots = {
+            mainmenu: {
+                view: '../slot/mainmenu'
+            },
+            addons: {
+                view: '../slot/addons'
+            }
+        }
+
+        ScriptManager.addDefault('SemanticUI');
+        ScriptManager.addDefaultAsset(ScriptAsset.STYLESHEET, 'app.css');
+        if (options.useCdn) {
+            ScriptManager.parseCdn(CDN);
+        }
+        ScriptManager.require('JQuery/FormPost')
+            .setOption('redir-delay', 1000);
+        ScriptManager.translator = require('@ntlab/express-controller/translator')._;
+        ScriptManager.config = options;
+    }
+}
+
+/** @type {ExpressApp} */
+let app = null;
+
+function run(api) {
+    if (app === null) {
+        app = new ExpressApp(api);
+    } else {
+        console.error('User interface already created!');
+    }
+    return app.app;
+}
+
+module.exports = run;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ntlab/sipd-tu-bridge-ui",
+  "version": "1.0.0",
+  "description": "SIPD Penatausahaan Bridge Web Interface",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tohenk/node-sipd-tu-bridge-ui.git"
+  },
+  "keywords": [
+    "sipd",
+    "penatausahaan",
+    "kemendagri",
+    "spp",
+    "spp-ls",
+    "lpj",
+    "npd",
+    "tbp",
+    "otomasi",
+    "selenium",
+    "socket.io",
+    "web-interface"
+  ],
+  "author": "Toha <tohenk@yahoo.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/tohenk/node-sipd-tu-bridge-ui/issues"
+  },
+  "homepage": "https://github.com/tohenk/node-sipd-tu-bridge-ui#readme",
+  "dependencies": {
+    "@ntlab/express-controller": "^1.2.0",
+    "@ntlab/express-middleware": "^2.4.0",
+    "@ntlab/ntjs": "^3.0.0",
+    "@ntlab/ntjs-assets": "^2.139.0",
+    "@ntlab/ntjs-repo": "^3.0.1",
+    "@ntlab/ntlib": "^2.9.0",
+    "ejs": "^3.1.10",
+    "express": "^5.2.1",
+    "express-session": "^1.19.0",
+    "http-errors": "^2.0.1",
+    "moment": "^2.30.1",
+    "morgan": "^1.10.1",
+    "session-file-store": "^1.5.0",
+    "terser": "^5.46.0"
+  }
+}

package/public/css/app.css

@@ -0,0 +1,16 @@
+body.with-menu {
+  padding-top: 5em;
+}
+
+body:not([class]) main, #login-container {
+  height: 100%;
+}
+
+#login-container > div {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+img.logo {
+  margin-right: 1em !important;
+}

package/views/error/error.ejs

@@ -0,0 +1,6 @@
+<h2><%= error instanceof Error ? error.constructor.name : _('An error occured!') %></h2>
+<%_ if (error) { -%>
+<pre><%= error.stack %></pre>
+<%_ } else { -%>
+<pre><%= _(message) %></pre>
+<%_ } -%>

package/views/layout/default.ejs

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+<title><%- sitetitle %></title>
+<%_ stylesheets().forEach(css => { -%>
+<link rel="stylesheet" href="<%- path(css) %>" />
+<%_ }) -%>
+<%_ if (mainmenu = slot('mainmenu')) { -%>
+<%_ mainmenu = include(mainmenu) -%>
+<%_ } -%>
+</head>
+<body<% if (mainmenu) { %> class="with-menu"<% } %>>
+  <%_ if (mainmenu) { -%>
+  <section class="ui fixed inverted menu">
+  <%- mainmenu -%>
+  </section>
+  <%_ } -%>
+  <main class="ui container">
+    <%_ if (title.length) { -%>
+    <h1 class="ui dividing header"><%= title %></h1>
+    <%_ } -%>
+    <%- content -%>
+  </main>
+  <%_ if ((addons = slot('addons')) && (addons = include(addons))) { -%>
+  <%- addons -%>
+  <%_ } -%>
+  <%_ javascripts().forEach(js => { -%>
+  <script type="text/javascript" src="<%- path(js) %>"></script>
+  <%_ }) -%>
+  <%_ if ((scriptContent = scripts()).length) { -%>
+  <script type="text/javascript">
+    // <![CDATA[
+    <%- scriptContent %>
+    // ]]>
+  </script>
+  <%_ } -%>
+</body>
+</html>

package/views/layout/xhr.ejs

@@ -0,0 +1,9 @@
+<%- jsloader({css: path(stylesheets()), js: path(javascripts())}) -%>
+<%- content -%>
+<%_ if ((scriptContent = scripts()).length) { -%>
+<script type="text/javascript">
+  // <![CDATA[
+  <%- scriptContent %>
+  // ]]>
+</script>
+<%_ } -%>

package/views/security/login.ejs

@@ -0,0 +1,62 @@
+<div id="login-container" class="ui center aligned stackable grid">
+  <div class="six wide column">
+    <h2 class="ui image header">
+      <img src="<%= path('/images/logo.png') %>" class="image">
+      <div class="content"><%= _('Log-in to %APP%', {APP: apptitle}) %></div>
+    </h2>
+    <form class="ui large form login" action="<%= route('Security', {name: 'login'}) %>">
+      <input type="hidden" name="continue" value="<%= redirect %>">
+      <div class="ui left aligned segment">
+        <div class="ui red message hidden">
+          <i class="red exclamation triangle icon"></i><span class="errmsg"></span>
+        </div>
+        <div class="field">
+          <div class="ui big left icon input">
+            <i class="user icon"></i>
+            <input type="text" name="username" class="required" placeholder="<%= _('Username') %>" autocomplete="off">
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui big left icon input">
+            <i class="lock icon"></i>
+            <input type="password" name="password" class="required" placeholder="<%= _('Password') %>">
+          </div>
+        </div>
+        <button class="ui fluid large submit button" type="submit"><%= _('Login') %></button>
+      </div>
+    </form>
+  </div>
+</div>
+<%_ script.create('JQuery')
+  .useDependencies(['JQuery/Util', 'JQuery/FormPost'])
+  .addMiddle(`
+$.login = function(form) {
+    const fp = $.formpost(form, {progress: false, xhr: true});
+    const err = fp.errhelper;
+    err.errorContainer = form.find('.message');
+    err.errorFormat = err.ERROR_INPLACE;
+    err.inplace = function(el, error) {
+        el.find('.errmsg').html(error);
+    }
+    form
+        .on('formrequest', function(e) {
+            form.find('input[type=password]').val('');
+        })
+        .on('formsaved', function(e, json) {
+            if (json.url) {
+                if (typeof $.loginSuccess === 'function') {
+                    $.loginSuccess(json.url);
+                } else {
+                    window.location.href = json.url;
+                }
+            } else {
+                window.location.reload();
+            }
+        })
+    ;
+    form.find('input[name=username]').focus();
+}
+`)
+  .addLast(`
+$.login($('form.login'));
+`) -%>

package/views/slot/addons.ejs

@@ -0,0 +1,3 @@
+<%- include('errhandler') -%>
+<%- include('errhandler401') -%>
+<%- include('errhandler500') -%>

package/views/slot/errhandler.ejs

@@ -0,0 +1,27 @@
+<%_ script.create('JQuery')
+  .useDependencies(['JQuery/Util'])
+  .addMiddle(`
+$.define('errhandler', {
+    handlers: {},
+    register(code, handler) {
+        const self = this;
+        if (!self.handlers[code]) {
+            self.handlers[code] = [];
+        }
+        self.handlers[code].push(handler); 
+    },
+    handle(code) {
+        const self = this;
+        if (self.handlers[code]) {
+            for (let i = 0; i < self.handlers[code].length; i++) {
+                if (typeof self.handlers[code][i] === 'function') {
+                    self.handlers[code][i].call();
+                }
+            }
+        }
+    }
+});
+$(document).ajaxError(function(event, xhr, s, e) {
+    $.errhandler.handle(xhr.status);
+});
+`) -%>

package/views/slot/errhandler401.ejs

@@ -0,0 +1,19 @@
+<%_ script.create('JQuery')
+  .useDependencies(['JQuery/Util', 'SemanticUI/Dialog'])
+  .addMiddle(`
+$.errhandler.register(401, function() {
+    const dlgId = 'err401';
+    if ($.ntdlg.isVisible(dlgId)) {
+        return;
+    }
+    $.ntdlg.dialog(dlgId, '${_('Information')}', '${_('Your session has been expired, please try to login again!')}', $.ntdlg.ICON_ALERT, {
+        okay: {
+            type: 'green approve',
+            caption: '<i class="check icon"></i>${_('Ok')}',
+            handler() {
+                window.location.reload();
+            }
+        }
+    });
+});
+`) -%>

package/views/slot/errhandler500.ejs

@@ -0,0 +1,11 @@
+<%_ script.create('JQuery')
+  .useDependencies(['JQuery/Util', 'SemanticUI/Dialog/Message'])
+  .addMiddle(`
+$.errhandler.register(500, function() {
+    const dlgId = 'err500';
+    if ($.ntdlg.isVisible(dlgId)) {
+        return;
+    }
+    $.ntdlg.message(dlgId, '${_('Error')}', '${_('Oops! An Error Occurred, please try again later.<br/>Don\\\'t hesitate to contact us if the problem persist.')}', $.ntdlg.ICON_ERROR);
+});
+`) -%>

package/views/slot/mainmenu.ejs

@@ -0,0 +1,69 @@
+<%_ menus = {
+    branding: {
+        type: 'brand',
+        title: apptitle,
+        logo: path('/images/logo.png'),
+        url: path('/')
+    },
+    tasks: {
+        title: _('Tasks'),
+        class: 'right floated',
+        items: {
+            about: {
+                title: _('About')
+            }
+        }
+    }
+} -%>
+<%_ if (user.authenticated) {
+    Object.assign(menus.tasks.items, {
+        divider1: {
+            type: 'divider'
+        },
+        logout: {
+            title: _('Logout'),
+            url: route('Security', {name: 'logout'})
+        }
+    });
+} -%>
+<%- menu(menus, {mainmenu: true, indentation: 2}) %>
+<%_ script.create('JQuery')
+  .useDependencies(['JQuery/Util', 'SemanticUI/Notification', 'SemanticUI/Dialog/Message'])
+  .addMiddle(`
+$.tasks = {
+    about() {
+        const self = this;
+        const f = function() {
+            const msg = $.util.template(
+                '<p>%TITLE% version %VERSION%<br/>\\n' +
+                '&copy; %AUTHOR%<br/>\\n' +
+                'Licensed under %LICENSE%</p>', {
+                    TITLE: self.aboutInfo.title,
+                    VERSION: self.aboutInfo.version,
+                    AUTHOR: $('<div>').text(self.aboutInfo.author).html(),
+                    LICENSE: self.aboutInfo.license
+                }
+            );
+            $.ntdlg.message('task-about', '${_('About')}', msg, $.ntdlg.ICON_INFO);
+        }
+        if (!self.aboutInfo) {
+            $.get('${route('Ui', {name: 'about'})}')
+                .done(function(json) {
+                    self.aboutInfo = json;
+                    f();
+                });
+        } else {
+            f();
+        }
+    },
+    init() {
+        const self = this;
+        $('.menu-about').on('click', function(e) {
+            e.preventDefault();
+            self.about();
+        });
+    }
+}
+`).addLast(`
+$.tasks.init();
+`) -%>

package/views/ui/activity.ejs

@@ -0,0 +1,34 @@
+<div class="ui form">
+  <textarea class="activity" rows="30" readonly></textarea>
+</div>
+<%_ script.create('JQuery')
+  .addMiddle(`
+$.activity = {
+    el: $('textarea.activity'),
+    url: '${route('Ui', {name: 'activity'})}',
+    load() {
+        const self = this;
+        $.get(self.url)
+            .done(function(json) {
+                if (json.logs) {
+                    self.el.text(json.logs);
+                    self.time = json.time;
+                }
+            });
+    },
+    add(data) {
+        const self = this;
+        if (data.time >= self.time) {
+            const message = data.message + '\\r\\n';
+            if (self.el.text().substr(-message.length) !== message) {
+                self.el.append(message);
+                self.el.scrollTop(self.el[0].scrollHeight - self.el.height());
+                self.time = data.time;
+            }
+        }
+    }
+}
+`)
+  .addLast(`
+$.activity.load();
+`) -%>

package/views/ui/bridge.ejs

@@ -0,0 +1,42 @@
+<%_ bridges = api.bridges -%>
+<%_ names = bridges.map(b => b.name) -%>
+<div class="ui stackable grid">
+  <div class="row">
+    <div class="four wide column">
+      <div class="ui fluid vertical pointing menu">
+        <%_ bridges.forEach(bridge => { -%>
+        <a href="#" class="item" data-bridge="<%= bridge.name %>"><i class="laptop code icon"></i> <%= bridge.name.toUpperCase() %></a>
+        <%_ }) -%>
+      </div>
+    </div>
+    <div class="twelve wide column">
+      <%_ bridges.forEach(bridge => { -%>
+      <div class="ui form bridge <%= bridge.name %>" style="display: none;">
+        <%_ Object.keys(bridge.stat).forEach(stat => { -%>
+        <div class="fields">
+          <div class="six wide field"><label><%= _(bridge.stat[stat].label) %></label></div>
+          <div class="ten wide field" data-key="<%= stat %>"><input type="text" value="<%- bridge.stat[stat].value %>" readonly></div>
+        </div>
+        <%_ }) -%>
+        <div class="field">
+          <label><%= _('Logs') %></label>
+          <textarea class="log <%= bridge.name %>" rows="20" readonly></textarea>
+        </div>
+      </div>
+      <%_ }) -%>
+    </div>
+  </div>
+</div>
+<%_ items = JSON.stringify(names, null, 4) -%>
+<%_ script.create('JQuery')
+  .add(`
+$.bridge.init(${items});
+$('a[data-bridge]').on('click', function(e) {
+    e.preventDefault();
+    const a = $(this);
+    a.siblings('a').removeClass('active');
+    a.addClass('active');
+    $(\`.ui.form.bridge\`).hide();
+    $(\`.ui.form.bridge.\${a.data('bridge')}\`).show();
+}).filter(':first').click();
+`) -%>

package/views/ui/bridgehandler.ejs

@@ -0,0 +1,58 @@
+<%_ script.create('JQuery')
+  .addMiddle(`
+$.bridge = {
+    bridges: {},
+    getLog(name) {
+        const self = this;
+        $.get('${route('Ui', {name: 'log', bridge: 'BRIDGE'})}'.replace(/BRIDGE/, name))
+            .done(function(json) {
+                if (json.logs) {
+                    const log = $(self.bridges[name].log);
+                    log.text(json.logs);
+                    self.bridges[name].time = json.time;
+                }
+            });
+    },
+    addLog(name, data) {
+        const self = this;
+        if (data.time >= self.bridges[name].time) {
+            const log = $(self.bridges[name].log);
+            const message = data.message + '\\r\\n';
+            if (log.text().substr(-message.length) !== message) {
+                log.append(message);
+                log.scrollTop(log[0].scrollHeight - log.height());
+                self.bridges[name].time = data.time;
+            }
+        }
+    },
+    update() {
+        const self = this;
+        $.get('${route('Ui', {name: 'updates'})}')
+            .done(function(json) {
+                if (json.updates) {
+                    for (const bridge of Object.keys(json.updates)) {
+                        for (const [k, v] of Object.entries(json.updates[bridge])) {
+                            $(\`[data-bridge="\${bridge}"] [data-key="\${k}"]\`).each(function() {
+                                const el = $(this);
+                                if (el.is('input')) {
+                                    el.val(v);
+                                } else {
+                                    el.html(v ? v : '&ndash;');
+                                }
+                            });
+                        }
+                    }
+                }
+            });
+    },
+    init(bridges) {
+        const self = this;
+        for (const bridge of bridges) {
+            self.bridges[bridge] = {
+                log: $(\`.log.\${bridge}\`)
+            }
+            self.getLog(bridge);
+        }
+    }
+}
+`) -%>

package/views/ui/index.ejs

@@ -0,0 +1,64 @@
+<div class="ui top attached stackable tabular menu">
+  <a class="item" data-tab="status"><%= _('Status') %></a>
+  <a class="item" data-tab="activity"><%= _('Activity') %></a>
+  <a class="item" data-tab="queue"><%= _('Queue') %></a>
+  <%_ if (api.bridges.length) { -%>
+  <a class="item" data-tab="bridge"><%= _('Bridge') %> <span class="ui tiny label"><%= api.bridges.length %></span></a>
+  <%_ } -%>
+</div>
+<div class="ui bottom attached tab segment" data-tab="status">
+<%- include('status') -%>
+</div>
+<div class="ui bottom attached tab segment" data-tab="activity">
+<%- include('activity') -%>
+</div>
+<div class="ui bottom attached tab segment" data-tab="queue">
+<%- include('queue') -%>
+</div>
+<%- include('bridgehandler') -%>
+<%_ if (api.bridges.length) { -%>
+<div class="ui bottom attached tab segment" data-tab="bridge">
+<%- include('bridge') -%>
+</div>
+<%_ } -%>
+<%_ script.create('JQuery')
+  .useDependencies(['SocketIO'])
+  .addMiddle(`
+$.uiCon = {
+    connected: false,
+    data: ${s(socket, 1)},
+    init() {
+        const self = this;
+        self.socket = io.connect(self.data.url, self.data.options);
+        self.socket
+            .on('connect', function() {
+                self.connected = true;
+                console.log('Socket connected');
+            })
+            .on('disconnect', function() {
+                self.connected = false;
+                console.log('Socket disconnected');
+            })
+            .on('activity', function(data) {
+                if (Array.isArray(data)) {
+                    for (const msg of data) {
+                        $.activity.add(msg);
+                    }
+                }
+            })
+            .on('queue', function() {
+                $.queue.reload();
+                $.bridge.update();
+            });
+    }
+}
+`)
+  .addLast(`
+$('.menu .item').tab({
+    autoTabActivation: window.location.hash ? window.location.hash.substr(1) : true,
+    onLoad(path, params, history) {
+        window.location.hash = path;
+    }
+});
+$.uiCon.init();
+`) -%>

package/views/ui/info.ejs

@@ -0,0 +1,17 @@
+<div class="ui fluid card">
+  <div class="content">
+    <div class="item header"><i class="ui info circle icon"></i><%- _('General Information') %></div>
+  </div>
+  <div class="extra content">
+      <div class="ui form">
+        <div class="fields">
+          <div class="six wide field"><%= _('Protocol:') %></div>
+          <div class="ten wide field"><%= api.proto %></div>
+        </div>
+        <div class="fields">
+          <div class="six wide field"><%= _('Mode:') %></div>
+          <div class="ten wide field"><%= api.mode %></div>
+        </div>
+      </div>
+  </div>
+</div>

package/views/ui/queue.ejs

@@ -0,0 +1,66 @@
+<h3 class="ui header x-title"></h3>
+<table class="ui selectable celled table">
+  <thead>
+    <tr>
+      <th><%= _('#') %></th>
+      <th><%= _('Id') %></th>
+      <th><%= _('Type') %></th>
+      <th><%= _('Name') %></th>
+      <th><%= _('Status') %></th>
+      <th><%= _('Result') %></th>
+      <th><%= _('Time') %></th>
+    </tr>
+  </thead>
+</table>
+<%_ script.create('JQuery')
+  .useDependencies('SemanticUI/Loader')
+  .addMiddle(`
+$.queue = $.loader($('div[data-tab="queue"] table'), {
+    url: '${route('Ui', {name: 'queue', page: 'PAGE'})}',
+    formatRow(item) {
+        return this.toRow(item);
+    },
+    loaded() {
+        const self = this;
+        if (self.loading) {
+            self.loading = false;
+        }
+    }
+});
+$.queue.toRow = function(data) {
+    return $(
+\`<tr><td>\${data.nr}</td>
+    <td>\${this.toData(data.id)}</td>
+    <td>\${this.toData(data.type)}</td>
+    <td>\${this.toData(data.name)}</td>
+    <td>\${this.toStatus(data.status)}</td>
+    <td>\${this.toData(data.result)}</td>
+    <td>\${this.toData(data.time)}</td>
+</tr>\`);
+}
+$.queue.toData = function(data) {
+    return data !== undefined ? data.toString() : '';
+}
+$.queue.toStatus = function(data) {
+    const icon = {
+        new: 'pause circle outline',
+        processing: 'spinner',
+        done: 'green check',
+        error: 'red times',
+        timeout: 'clock outline',
+        skipped: 'exclamation',
+    }[data];
+    return icon ? \`<div data-tooltip="\${data}" data-position="right center"><i class="\${icon} icon"></i></div>\` :
+        this.toData(data);
+}
+$.queue.reload = function() {
+    const self = this;
+    if (!self.loading) {
+        self.loading = true;
+        self.load();
+    }
+}
+`)
+  .addLast(`
+$.queue.load();
+`) -%>

package/views/ui/status.ejs

@@ -0,0 +1,84 @@
+<div class="ui centered stackable grid">
+  <div class="row"></div>
+  <div class="row">
+    <div class="twelve wide column">
+      <%- include('info') -%>
+    </div>
+  </div>
+  <%_ if (api.bridges.length) { -%>
+  <div class="row">
+    <div class="twelve wide column">
+      <div class="ui horizontal divider">
+        <%- _('Bridges') %>
+      </div>
+    </div>
+  </div>
+  <%_ api.bridges.forEach(bridge => { -%>
+  <%_ stats = Object.keys(bridge.stat) -%>
+  <div class="twelve wide column">
+    <div class="ui fluid card">
+      <div class="content">
+        <div class="ui right floated tiny label"><%= bridge.year %></div>
+        <div class="item header"><i class="ui laptop code icon"></i><%= bridge.name.toUpperCase() %></div>
+      </div>
+      <div class="extra content" data-bridge="<%= bridge.name %>">
+        <div class="ui divided items">
+          <!-- stat -->
+          <div class="center aligned item">
+            <div class="ui fluid tiny statistic">
+              <div class="value">
+                <div class="ui breadcrumb">
+                  <%_ stats.forEach((stat, i) => { -%>
+                  <div class="section" data-key="<%= stat %>"><%- bridge.stat[stat].value ? bridge.stat[stat].value : '&ndash;' %></div>
+                  <%_ if (i < stats.length - 1) { -%>
+                  <div class="divider"> / </div>
+                  <%_ } -%>
+                  <%_ }) -%>
+                </div>
+              </div>
+              <div class="label">
+                <div class="ui breadcrumb">
+                  <%_ stats.forEach((stat, i) => { -%>
+                  <div class="section"><%- _(bridge.stat[stat].label) %></div>
+                  <%_ if (i < stats.length - 1) { -%>
+                  <div class="divider"> / </div>
+                  <%_ } -%>
+                  <%_ }) -%>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- stat end -->
+          <!-- processing -->
+          <div class="center aligned item">
+            <div class="ui fluid tiny statistic">
+              <div class="value" data-key="current"><%- bridge.current ?? '&ndash;' %></div>
+              <div class="label"><%- _('Queue in progress') %></div>
+            </div>
+          </div>
+          <!-- processing end -->
+          <!-- last -->
+          <div class="center aligned item">
+            <div class="ui fluid tiny statistic">
+              <div class="value" data-key="last"><%- bridge.last ?? '&ndash;' %></div>
+              <div class="label"><%- _('Last queue') %></div>
+            </div>
+          </div>
+          <!-- last end -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <%_ }) -%>
+  <%_ } else { -%>
+  <div class="ui placeholder segment" style="min-height: 75vh;">
+    <div class="ui icon header">
+      <i class="laptop code icon"></i>
+      <div class="ui big hidden divider"></div>
+      <%= _('Currently, no connected bridge available.') %><br/>
+      <%= _('Once a connection established, it will appear here.') %>
+    </div>
+  </div>
+  <%_ } -%>
+  <div class="row"></div>
+</div>