Merge pull request #1735 from sumpfralle/olsr-jsoninfo-parser-handle-empty-result

[oweals/luci.git] / modules / luci-base / htdocs / luci-static / resources / ui.js

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index c27dd7ebfc3fd4d58779b41d2a6649f5d17b17fc..99e1548a4367c38d9c1dc2d14f011503180c6398 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -70,6 +70,11 @@ var UIElement = L.Class.extend({
        },
 
        setChangeEvents: function(targetNode /*, ... */) {
+               var tag_changed = L.bind(function(ev) { this.setAttribute('data-changed', true) }, this.node);
+
+               for (var i = 1; i < arguments.length; i++)
+                       targetNode.addEventListener(arguments[i], tag_changed);
+
                this.registerEvents(targetNode, 'widget-change', this.varargs(arguments, 1));
        }
 });
@@ -1508,7 +1513,7 @@ var UIFileUpload = UIElement.extend({
                        else if (this.value != null)
                                label = [ this.iconForType('file'), ' %s (%s)'.format(this.truncatePath(this.value), _('File not accessible')) ];
                        else
-                               label = _('Select file…');
+                               label = [ _('Select file…') ];
 
                        return this.bind(E('div', { 'id': this.options.id }, [
                                E('button', {
@@ -1689,13 +1694,13 @@ var UIFileUpload = UIElement.extend({
                                                ev.preventDefault();
                                                ev.target.previousElementSibling.click();
                                        }
-                               }, _('Browse…')),
+                               }, [ _('Browse…') ]),
                                E('div', {}, E('input', { 'type': 'text', 'placeholder': _('Filename') })),
                                E('button', {
                                        'class': 'btn cbi-button-save',
                                        'click': L.ui.createHandlerFn(this, 'handleUpload', path, list),
                                        'disabled': true
-                               }, _('Upload file'))
+                               }, [ _('Upload file') ])
                        ])
                ]);
        },
@@ -1746,11 +1751,11 @@ var UIFileUpload = UIElement.extend({
                                        selected ? E('button', {
                                                'class': 'btn',
                                                'click': L.ui.createHandlerFn(this, 'handleReset')
-                                       }, _('Deselect')) : '',
+                                       }, [ _('Deselect') ]) : '',
                                        this.options.enable_remove ? E('button', {
                                                'class': 'btn cbi-button-negative',
                                                'click': L.ui.createHandlerFn(this, 'handleDelete', entrypath, list[i])
-                                       }, _('Delete')) : ''
+                                       }, [ _('Delete') ]) : ''
                                ])
                        ]));
                }
@@ -1967,6 +1972,43 @@ return L.Class.extend({
                tooltipDiv.dispatchEvent(new CustomEvent('tooltip-close', { bubbles: true }));
        },
 
+       addNotification: function(title, children /*, ... */) {
+               var mc = document.querySelector('#maincontent') || document.body;
+               var msg = E('div', {
+                       'class': 'alert-message fade-in',
+                       'style': 'display:flex',
+                       'transitionend': function(ev) {
+                               var node = ev.currentTarget;
+                               if (node.parentNode && node.classList.contains('fade-out'))
+                                       node.parentNode.removeChild(node);
+                       }
+               }, [
+                       E('div', { 'style': 'flex:10' }),
+                       E('div', { 'style': 'flex:1 1 auto; display:flex' }, [
+                               E('button', {
+                                       'class': 'btn',
+                                       'style': 'margin-left:auto; margin-top:auto',
+                                       'click': function(ev) {
+                                               L.dom.parent(ev.target, '.alert-message').classList.add('fade-out');
+                                       },
+
+                               }, [ _('Dismiss') ])
+                       ])
+               ]);
+
+               if (title != null)
+                       L.dom.append(msg.firstElementChild, E('h4', {}, title));
+
+               L.dom.append(msg.firstElementChild, children);
+
+               for (var i = 2; i < arguments.length; i++)
+                       msg.classList.add(arguments[i]);
+
+               mc.insertBefore(msg, mc.firstElementChild);
+
+               return msg;
+       },
+
        /* Widget helper */
        itemlist: function(node, items, separators) {
                var children = [];
@@ -2266,24 +2308,18 @@ return L.Class.extend({
                                                        E('var', {}, E('del', '&#160;')), ' ', _('Option removed') ])]),
                                        E('br'), list,
                                        E('div', { 'class': 'right' }, [
-                                               E('input', {
-                                                       'type': 'button',
+                                               E('button', {
                                                        'class': 'btn',
-                                                       'click': L.ui.hideModal,
-                                                       'value': _('Dismiss')
-                                               }), ' ',
-                                               E('input', {
-                                                       'type': 'button',
+                                                       'click': L.ui.hideModal
+                                               }, [ _('Dismiss') ]), ' ',
+                                               E('button', {
                                                        'class': 'cbi-button cbi-button-positive important',
-                                                       'click': L.bind(this.apply, this, true),
-                                                       'value': _('Save & Apply')
-                                               }), ' ',
-                                               E('input', {
-                                                       'type': 'button',
+                                                       'click': L.bind(this.apply, this, true)
+                                               }, [ _('Save & Apply') ]), ' ',
+                                               E('button', {
                                                        'class': 'cbi-button cbi-button-reset',
-                                                       'click': L.bind(this.revert, this),
-                                                       'value': _('Revert')
-                                               })])])
+                                                       'click': L.bind(this.revert, this)
+                                               }, [ _('Revert') ])])])
                        ]);
 
                        for (var config in this.changes) {
@@ -2359,24 +2395,18 @@ return L.Class.extend({
                                                        E('h4', _('Configuration has been rolled back!')),
                                                        E('p', _('The device could not be reached within %d seconds after applying the pending changes, which caused the configuration to be rolled back for safety reasons. If you believe that the configuration changes are correct nonetheless, perform an unchecked configuration apply. Alternatively, you can dismiss this warning and edit changes before attempting to apply again, or revert all pending changes to keep the currently working configuration state.').format(L.env.apply_rollback)),
                                                        E('div', { 'class': 'right' }, [
-                                                               E('input', {
-                                                                       'type': 'button',
+                                                               E('button', {
                                                                        'class': 'btn',
-                                                                       'click': L.bind(L.ui.changes.displayStatus, L.ui.changes, false),
-                                                                       'value': _('Dismiss')
-                                                               }), ' ',
-                                                               E('input', {
-                                                                       'type': 'button',
+                                                                       'click': L.bind(L.ui.changes.displayStatus, L.ui.changes, false)
+                                                               }, [ _('Dismiss') ]), ' ',
+                                                               E('button', {
                                                                        'class': 'btn cbi-button-action important',
-                                                                       'click': L.bind(L.ui.changes.revert, L.ui.changes),
-                                                                       'value': _('Revert changes')
-                                                               }), ' ',
-                                                               E('input', {
-                                                                       'type': 'button',
+                                                                       'click': L.bind(L.ui.changes.revert, L.ui.changes)
+                                                               }, [ _('Revert changes') ]), ' ',
+                                                               E('button', {
                                                                        'class': 'btn cbi-button-negative important',
-                                                                       'click': L.bind(L.ui.changes.apply, L.ui.changes, false),
-                                                                       'value': _('Apply unchecked')
-                                                               })
+                                                                       'click': L.bind(L.ui.changes.apply, L.ui.changes, false)
+                                                               }, [ _('Apply unchecked') ])
                                                        ])
                                                ]);