npm - @ntlab/sipd-tu-bridge-ui - Versions diffs - 1.3.0 → 1.4.0 - Mend

@ntlab/sipd-tu-bridge-ui 1.3.0 → 1.4.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.

Files changed (5) hide show

package/package.json CHANGED Viewed

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

package/public/css/app.css CHANGED Viewed

@@ -22,8 +22,11 @@ img.logo {
   .ui.container.queue-result {
     max-width: 22.5em;
   }
+  .ui.container.err-message {
+    max-width: 20em;
+  }
   .ui.container.err-data {
-    max-width: 40em;
+    max-width: 25em;
   }
 }
@@ -34,8 +37,11 @@ img.logo {
   .ui.container.queue-result {
     max-width: 17.5em;
   }
+  .ui.container.err-message {
+    max-width: 15em;
+  }
   .ui.container.err-data {
-    max-width: 30em;
+    max-width: 20em;
   }
 }
@@ -46,14 +52,18 @@ img.logo {
   .ui.container.queue-result {
     max-width: 12.5em;
   }
+  .ui.container.err-message {
+    max-width: 12.5em;
+  }
   .ui.container.err-data {
-    max-width: 20em;
+    max-width: 15em;
   }
 }
 @media only screen and (max-width: 767.98px) {
   .ui.container.queue-name,
   .ui.container.queue-result,
+  .ui.container.err-message,
   .ui.container.err-data {
     max-width: 75vw;
     margin-left: 0 !important;

package/views/ui/error.ejs CHANGED Viewed

@@ -30,42 +30,7 @@ $.error = $.loader($('div[data-tab="error"] table'), {
         }
         $('a.err-clicker').on('click', function(e) {
             e.preventDefault();
-            const a = $(this);
-            switch (a.data('op')) {
-                case 'view':
-                    const dlg = $.ntdlg.create(
-                        'err-img-view-dlg',
-                        a.data('tooltip'),
-                        \`<img class="ui fluid image" src="\${a.find('img').attr('src')}" style="max-height: 70vh;">\`, {
-                            size: 'fullscreen',
-                            buttons: {
-                                okay: {
-                                    type: 'green approve',
-                                    caption: '<i class="check icon"></i>${_('Ok')}',
-                                }
-                            }
-                        }
-                    );
-                    $.ntdlg.show(dlg);
-                    break;
-                case 'delete':
-                    $.ntdlg.confirm(
-                        'err-delete-confirm-dlg',
-                        '${_('Confirm')}',
-                        '${_('Are you sure want to remove error <code>%ERR%</code>?')}'.replace(/%ERR%/g, a.data('filename')),
-                        $.ntdlg.ICON_QUESTION,
-                        function() {
-                            $.post('${route('Ui', {name: 'task', op: 'remove'})}', {error: a.data('filename')})
-                                .done(function(json) {
-                                    $.tasks.notify(json);
-                                    if (json.success) {
-                                        self.reload();
-                                    }
-                                });
-                        }
-                    );
-                    break;
-            }
+            self.handle($(this));
         });
         if (self.loading) {
             self.loading = false;
@@ -73,11 +38,11 @@ $.error = $.loader($('div[data-tab="error"] table'), {
     }
 });
 $.error.toRow = function(data) {
-    return $(
-\`<tr><td>\${data.nr}</td>
+    return $(\`
+<tr><td>\${data.nr}</td>
   <td>\${this.toImg($.toStr(data.image), data.filename)}</td>
-  <td>\${$.toStr(data.error)}</td>
-  <td><div class="ui scrolling container err-data">\${$.hidePayload($.toStr(data.data))}</div></td>
+  <td>\${this.toPayload(data.error, '${_('Error Message')}')}</td>
+  <td>\${this.toPayload(data.data, '${_('Error Data')}')}</td>
   <td>
     <a href="#" class="err-clicker" data-op="delete" data-filename="\${data.filename}" role="button"><i class="trash alternate outline red icon"></i></a>
   </td>
@@ -85,11 +50,83 @@ $.error.toRow = function(data) {
 }
 $.error.toImg = function(data, alt) {
     if (data) {
-        return \`<a href="#" class="err-clicker" data-op="view" data-tooltip="\${alt}" data-position="right center">
-<img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
+        return \`
+<a href="#" class="err-clicker" data-op="view" data-title="\${alt}" data-tooltip="\${alt}" data-position="right center">
+  <img class="ui medium rounded bordered image" src="\${data}" alt="\${alt}">
+</a>\`;
+    }
+}
+$.error.toPayload = function(data, title) {
+    if (data) {
+        if (typeof data === 'string' && data.startsWith('{')) {
+            try {
+                data = JSON.parse(data);
+            }
+            catch (err) {
+            }
+        }
+        const payload = $.toStr(data);
+        let excerpt = payload;
+        if (excerpt.length > 100) {
+            excerpt = excerpt.substr(0, 100);
+            if (excerpt.includes('\\n')) {
+                excerpt = excerpt.substr(0, excerpt.lastIndexOf('\\n'));
+            } else if (excerpt.includes(' ')) {
+                excerpt = excerpt.substr(0, excerpt.lastIndexOf(' '));
+            } else if (excerpt.includes('-')) {
+                excerpt = excerpt.substr(0, excerpt.lastIndexOf('-'));
+            }
+            excerpt += '&hellip;';
+        }
+        return \`
+<a href="#" class="err-clicker" data-op="view" data-title="\${title}">
+  <span>\${excerpt}</span>
+  <pre style="display: none;">\${payload}</pre>
 </a>\`;
     }
 }
+$.error.handle = function(el) {
+    switch (el.data('op')) {
+        case 'view':
+            let content, size = 'large';
+            const img = el.find('img'), pre = el.find('pre');
+            if (img.length) {
+                content = \`<img class="ui fluid image" src="\${img.attr('src')}" style="max-height: 70vh;">\`;
+                size = 'fullscreen';
+            }
+            if (pre.length) {
+                content = \`<div class="ui fluid scrolling container"><pre>\${pre.text()}</pre></div>\`;
+            }
+            const dlg = $.ntdlg.create('err-view-dlg', el.data('title'), content, {
+                size,
+                buttons: {
+                    okay: {
+                        type: 'green approve',
+                        caption: '<i class="check icon"></i>${_('Ok')}',
+                    }
+                }
+            });
+            $.ntdlg.show(dlg);
+            break;
+        case 'delete':
+            $.ntdlg.confirm(
+                'err-delete-confirm-dlg',
+                '${_('Confirm')}',
+                '${_('Are you sure want to remove error <code>%ERR%</code>?')}'.replace(/%ERR%/g, el.data('filename')),
+                $.ntdlg.ICON_QUESTION,
+                function() {
+                    $.post('${route('Ui', {name: 'task', op: 'remove'})}', {error: el.data('filename')})
+                        .done(function(json) {
+                            $.tasks.notify(json);
+                            if (json.success) {
+                                self.reload();
+                            }
+                        });
+                }
+            );
+            break;
+    }
+}
 $.error.reload = function() {
     const self = this;
     if (!self.loading) {

package/views/ui/queue.ejs CHANGED Viewed

@@ -36,8 +36,8 @@ $.queue = $.loader($('div[data-tab="queue"] table'), {
     }
 });
 $.queue.toRow = function(data) {
-    return $(
-\`<tr><td>\${data.nr}</td>
+    return $(\`
+<tr><td>\${data.nr}</td>
   <td>\${$.toStr(data.id)}</td>
   <td>\${$.toStr(data.type)}</td>
   <td><div class="ui scrolling container queue-name">\${$.hidePayload($.toStr(data.name))}</div></td>

package/views/ui/util.ejs CHANGED Viewed

@@ -47,12 +47,12 @@ $.hidePayload = function(message) {
     }
     return message;
 }
+$.isPayload = function(data) {
+    return Array.isArray(data) || typeof data === 'object' && data.constructor.name === 'Object';
+}
 $.toStr = function(o) {
-    if (
-        Array.isArray(o) ||
-        typeof o === 'object' && o.constructor.name === 'Object'
-    ) {
-        return JSON.stringify(o);
+    if ($.isPayload(o)) {
+        return JSON.stringify(o, null, '  ');
     } else if (o !== undefined && o !== null) {
         return o.toString();
     }