summaryrefslogtreecommitdiffhomepage
path: root/modules
diff options
context:
space:
mode:
Diffstat (limited to 'modules')
-rw-r--r--modules/luci-base/htdocs/luci-static/resources/luci.js418
-rw-r--r--modules/luci-base/htdocs/luci-static/resources/xhr.js251
2 files changed, 390 insertions, 279 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/luci.js b/modules/luci-base/htdocs/luci-static/resources/luci.js
index 8d7f88d77b..5fb0bcfe79 100644
--- a/modules/luci-base/htdocs/luci-static/resources/luci.js
+++ b/modules/luci-base/htdocs/luci-static/resources/luci.js
@@ -131,6 +131,298 @@
}
});
+
+ /*
+ * HTTP Request helper
+ */
+
+ Headers = Class.extend({
+ __name__: 'LuCI.XHR.Headers',
+ __init__: function(xhr) {
+ var hdrs = this.headers = {};
+ xhr.getAllResponseHeaders().split(/\r\n/).forEach(function(line) {
+ var m = /^([^:]+):(.*)$/.exec(line);
+ if (m != null)
+ hdrs[m[1].trim().toLowerCase()] = m[2].trim();
+ });
+ },
+
+ has: function(name) {
+ return this.headers.hasOwnProperty(String(name).toLowerCase());
+ },
+
+ get: function(name) {
+ var key = String(name).toLowerCase();
+ return this.headers.hasOwnProperty(key) ? this.headers[key] : null;
+ }
+ });
+
+ Response = Class.extend({
+ __name__: 'LuCI.XHR.Response',
+ __init__: function(xhr, url, duration) {
+ this.ok = (xhr.status >= 200 && xhr.status <= 299);
+ this.status = xhr.status;
+ this.statusText = xhr.statusText;
+ this.responseText = xhr.responseText;
+ this.headers = new Headers(xhr);
+ this.duration = duration;
+ this.url = url;
+ this.xhr = xhr;
+ },
+
+ json: function() {
+ return JSON.parse(this.responseText);
+ },
+
+ text: function() {
+ return this.responseText;
+ }
+ });
+
+ Request = Class.singleton({
+ __name__: 'LuCI.Request',
+
+ interceptors: [],
+
+ request: function(target, options) {
+ var state = { xhr: new XMLHttpRequest(), url: target, start: Date.now() },
+ opt = Object.assign({}, options, state),
+ content = null,
+ contenttype = null,
+ callback = this.handleReadyStateChange;
+
+ return new Promise(function(resolveFn, rejectFn) {
+ opt.xhr.onreadystatechange = callback.bind(opt, resolveFn, rejectFn);
+ opt.method = String(opt.method || 'GET').toUpperCase();
+
+ if ('query' in opt) {
+ var q = (opt.query != null) ? Object.keys(opt.query).map(function(k) {
+ if (opt.query[k] != null) {
+ var v = (typeof(opt.query[k]) == 'object')
+ ? JSON.stringify(opt.query[k])
+ : String(opt.query[k]);
+
+ return '%s=%s'.format(encodeURIComponent(k), encodeURIComponent(v));
+ }
+ else {
+ return encodeURIComponent(k);
+ }
+ }).join('&') : '';
+
+ if (q !== '') {
+ switch (opt.method) {
+ case 'GET':
+ case 'HEAD':
+ case 'OPTIONS':
+ opt.url += ((/\?/).test(opt.url) ? '&' : '?') + q;
+ break;
+
+ default:
+ if (content == null) {
+ content = q;
+ contenttype = 'application/x-www-form-urlencoded';
+ }
+ }
+ }
+ }
+
+ if (!opt.cache)
+ opt.url += ((/\?/).test(opt.url) ? '&' : '?') + (new Date()).getTime();
+
+ if (!/^(?:[^/]+:)?\/\//.test(opt.url))
+ opt.url = location.protocol + '//' + location.host + opt.url;
+
+ if ('username' in opt && 'password' in opt)
+ opt.xhr.open(opt.method, opt.url, true, opt.username, opt.password);
+ else
+ opt.xhr.open(opt.method, opt.url, true);
+
+ opt.xhr.responseType = 'text';
+ opt.xhr.overrideMimeType('application/octet-stream');
+
+ if ('timeout' in opt)
+ opt.xhr.timeout = +opt.timeout;
+
+ if ('credentials' in opt)
+ opt.xhr.withCredentials = !!opt.credentials;
+
+ if (opt.content != null) {
+ switch (typeof(opt.content)) {
+ case 'function':
+ content = opt.content(xhr);
+ break;
+
+ case 'object':
+ content = JSON.stringify(opt.content);
+ contenttype = 'application/json';
+ break;
+
+ default:
+ content = String(opt.content);
+ }
+ }
+
+ if ('headers' in opt)
+ for (var header in opt.headers)
+ if (opt.headers.hasOwnProperty(header)) {
+ if (header.toLowerCase() != 'content-type')
+ opt.xhr.setRequestHeader(header, opt.headers[header]);
+ else
+ contenttype = opt.headers[header];
+ }
+
+ if (contenttype != null)
+ opt.xhr.setRequestHeader('Content-Type', contenttype);
+
+ try {
+ opt.xhr.send(content);
+ }
+ catch (e) {
+ rejectFn.call(opt, e);
+ }
+ });
+ },
+
+ handleReadyStateChange: function(resolveFn, rejectFn, ev) {
+ var xhr = this.xhr;
+
+ if (xhr.readyState !== 4)
+ return;
+
+ if (xhr.status === 0 && xhr.statusText === '') {
+ rejectFn.call(this, new Error('XHR request aborted by browser'));
+ }
+ else {
+ var response = new Response(
+ xhr, xhr.responseURL || this.url, Date.now() - this.start);
+
+ Promise.all(Request.interceptors.map(function(fn) { return fn(response) }))
+ .then(resolveFn.bind(this, response))
+ .catch(rejectFn.bind(this));
+ }
+
+ try {
+ xhr.abort();
+ }
+ catch(e) {}
+ },
+
+ get: function(url, options) {
+ return this.request(url, Object.assign({ method: 'GET' }, options));
+ },
+
+ post: function(url, data, options) {
+ return this.request(url, Object.assign({ method: 'POST', content: data }, options));
+ },
+
+ addInterceptor: function(interceptorFn) {
+ if (typeof(interceptorFn) == 'function')
+ this.interceptors.push(interceptorFn);
+ return interceptorFn;
+ },
+
+ removeInterceptor: function(interceptorFn) {
+ var oldlen = this.interceptors.length, i = oldlen;
+ while (i--)
+ if (this.interceptors[i] === interceptorFn)
+ this.interceptors.splice(i, 1);
+ return (this.interceptors.length < oldlen);
+ },
+
+ poll: Class.singleton({
+ __name__: 'LuCI.Request.Poll',
+
+ queue: [],
+
+ add: function(interval, url, options, callback) {
+ if (isNaN(interval) || interval <= 0)
+ throw new TypeError('Invalid poll interval');
+
+ var e = {
+ interval: interval,
+ url: url,
+ options: options,
+ callback: callback
+ };
+
+ this.queue.push(e);
+ return e;
+ },
+
+ remove: function(entry) {
+ var oldlen = this.queue.length, i = oldlen;
+
+ while (i--)
+ if (this.queue[i] === entry) {
+ delete this.queue[i].running;
+ this.queue.splice(i, 1);
+ }
+
+ if (!this.queue.length)
+ this.stop();
+
+ return (this.queue.length < oldlen);
+ },
+
+ start: function() {
+ if (!this.queue.length || this.active())
+ return false;
+
+ this.tick = 0;
+ this.timer = window.setInterval(this.step, 1000);
+ this.step();
+ document.dispatchEvent(new CustomEvent('poll-start'));
+ return true;
+ },
+
+ stop: function() {
+ if (!this.active())
+ return false;
+
+ document.dispatchEvent(new CustomEvent('poll-stop'));
+ window.clearInterval(this.timer);
+ delete this.timer;
+ delete this.tick;
+ return true;
+ },
+
+ step: function() {
+ Request.poll.queue.forEach(function(e) {
+ if ((Request.poll.tick % e.interval) != 0)
+ return;
+
+ if (e.running)
+ return;
+
+ var opts = Object.assign({}, e.options,
+ { timeout: e.interval * 1000 - 5 });
+
+ e.running = true;
+ Request.request(e.url, opts)
+ .then(function(res) {
+ if (!e.running || !Request.poll.active())
+ return;
+
+ try {
+ e.callback(res, res.json(), res.duration);
+ }
+ catch (err) {
+ e.callback(res, null, res.duration);
+ }
+ })
+ .finally(function() { delete e.running });
+ });
+
+ Request.poll.tick = (Request.poll.tick + 1) % Math.pow(2, 32);
+ },
+
+ active: function() {
+ return (this.timer != null);
+ }
+ })
+ });
+
+
var modalDiv = null,
tooltipDiv = null,
tooltipTimeout = null,
@@ -167,48 +459,41 @@
/* HTTP resource fetching */
get: function(url, args, cb) {
- return this.poll(0, url, args, cb, false);
+ return this.poll(null, url, args, cb, false);
},
post: function(url, args, cb) {
- return this.poll(0, url, args, cb, true);
+ return this.poll(null, url, args, cb, true);
},
poll: function(interval, url, args, cb, post) {
- var data = post ? { token: this.env.token } : null;
+ if (interval !== null && interval <= 0)
+ interval = this.env.pollinterval;
+
+ var data = post ? { token: this.env.token } : null,
+ method = post ? 'POST' : 'GET';
if (!/^(?:\/|\S+:\/\/)/.test(url))
url = this.url(url);
- if (typeof(args) === 'object' && args !== null) {
- data = data || {};
-
- for (var key in args)
- if (args.hasOwnProperty(key))
- switch (typeof(args[key])) {
- case 'string':
- case 'number':
- case 'boolean':
- data[key] = args[key];
- break;
-
- case 'object':
- data[key] = JSON.stringify(args[key]);
- break;
- }
- }
+ if (args != null)
+ data = Object.assign(data || {}, args);
- if (interval > 0)
- return XHR.poll(interval, url, data, cb, post);
- else if (post)
- return XHR.post(url, data, cb);
+ if (interval !== null)
+ return Request.poll.add(interval, url, { method: method, query: data }, cb);
else
- return XHR.get(url, data, cb);
+ return Request.request(url, { method: method, query: data })
+ .then(function(res) {
+ var json = null;
+ if (/^application\/json\b/.test(res.headers.get('Content-Type')))
+ try { json = res.json() } catch(e) {}
+ cb(res.xhr, json, res.duration);
+ });
},
- stop: function(entry) { XHR.stop(entry) },
- halt: function() { XHR.halt() },
- run: function() { XHR.run() },
+ stop: function(entry) { return Request.poll.remove(entry) },
+ halt: function() { return Request.poll.stop() },
+ run: function() { return Request.poll.start() },
/* Modal dialog */
@@ -312,7 +597,8 @@
return node;
},
- Class: Class
+ Class: Class,
+ Request: Request
};
/* Tabs */
@@ -622,6 +908,30 @@
/* Setup */
LuCI.prototype.setupDOM = function(ev) {
this.tabs.init();
+
+ Request.addInterceptor(function(res) {
+ if (res.status != 403 || res.headers.get('X-LuCI-Login-Required') != 'yes')
+ return;
+
+ Request.poll.stop();
+
+ L.showModal(_('Session expired'), [
+ E('div', { class: 'alert-message warning' },
+ _('A new login is required since the authentication session expired.')),
+ E('div', { class: 'right' },
+ E('div', {
+ class: 'btn primary',
+ click: function() {
+ var loc = window.location;
+ window.location = loc.protocol + '//' + loc.host + loc.pathname + loc.search;
+ }
+ }, _('To login…')))
+ ]);
+
+ return Promise.reject(new Error('Session expired'));
+ });
+
+ Request.poll.start();
};
function LuCI(env) {
@@ -638,8 +948,58 @@
document.addEventListener('focus', this.showTooltip.bind(this), true);
document.addEventListener('blur', this.hideTooltip.bind(this), true);
+ document.addEventListener('poll-start', function(ev) {
+ document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
+ e.style.display = (e.id == 'xhr_poll_status_off') ? 'none' : '';
+ });
+ });
+
+ document.addEventListener('poll-stop', function(ev) {
+ document.querySelectorAll('[id^="xhr_poll_status"]').forEach(function(e) {
+ e.style.display = (e.id == 'xhr_poll_status_on') ? 'none' : '';
+ });
+ });
+
document.addEventListener('DOMContentLoaded', this.setupDOM.bind(this));
}
+ XHR = Class.extend({
+ __name__: 'LuCI.XHR',
+ __init__: function() {
+ if (window.console && console.debug)
+ console.debug('Direct use XHR() is deprecated, please use L.Request instead');
+ },
+
+ _response: function(cb, res, json, duration) {
+ if (this.active)
+ cb(res, json, duration);
+ delete this.active;
+ },
+
+ get: function(url, data, callback, timeout) {
+ this.active = true;
+ L.get(url, data, this._response.bind(this, callback), timeout);
+ },
+
+ post: function(url, data, callback, timeout) {
+ this.active = true;
+ L.post(url, data, this._response.bind(this, callback), timeout);
+ },
+
+ cancel: function() { delete this.active },
+ busy: function() { return (this.active === true) },
+ abort: function() {},
+ send_form: function() { throw 'Not implemented' },
+ });
+
+ XHR.get = function() { return window.L.get.apply(window.L, arguments) };
+ XHR.post = function() { return window.L.post.apply(window.L, arguments) };
+ XHR.poll = function() { return window.L.poll.apply(window.L, arguments) };
+ XHR.stop = Request.poll.remove.bind(Request.poll);
+ XHR.halt = Request.poll.stop.bind(Request.poll);
+ XHR.run = Request.poll.start.bind(Request.poll);
+ XHR.running = Request.poll.active.bind(Request.poll);
+
+ window.XHR = XHR;
window.LuCI = LuCI;
})(window, document);
diff --git a/modules/luci-base/htdocs/luci-static/resources/xhr.js b/modules/luci-base/htdocs/luci-static/resources/xhr.js
index 3133898b5e..10bc88e1f4 100644
--- a/modules/luci-base/htdocs/luci-static/resources/xhr.js
+++ b/modules/luci-base/htdocs/luci-static/resources/xhr.js
@@ -1,250 +1 @@
-/*
- * xhr.js - XMLHttpRequest helper class
- * (c) 2008-2018 Jo-Philipp Wich <jo@mein.io>
- */
-
-XHR.prototype = {
- _encode: function(obj) {
- obj = obj ? obj : { };
- obj['_'] = Math.random();
-
- if (typeof obj == 'object') {
- var code = '';
- var self = this;
-
- for (var k in obj)
- code += (code ? '&' : '') +
- k + '=' + encodeURIComponent(obj[k]);
-
- return code;
- }
-
- return obj;
- },
-
- _response: function(callback, ts) {
- if (this._xmlHttp.readyState !== 4)
- return;
-
- var status = this._xmlHttp.status,
- login = this._xmlHttp.getResponseHeader("X-LuCI-Login-Required"),
- type = this._xmlHttp.getResponseHeader("Content-Type"),
- json = null;
-
- if (status === 403 && login === 'yes') {
- XHR.halt();
-
- showModal(_('Session expired'), [
- E('div', { class: 'alert-message warning' },
- _('A new login is required since the authentication session expired.')),
- E('div', { class: 'right' },
- E('div', {
- class: 'btn primary',
- click: function() {
- var loc = window.location;
- window.location = loc.protocol + '//' + loc.host + loc.pathname + loc.search;
- }
- }, _('To login…')))
- ]);
- }
- else if (type && type.toLowerCase().match(/^application\/json\b/)) {
- try {
- json = JSON.parse(this._xmlHttp.responseText);
- }
- catch(e) {
- json = null;
- }
- }
-
- callback(this._xmlHttp, json, Date.now() - ts);
- },
-
- busy: function() {
- if (!this._xmlHttp)
- return false;
-
- switch (this._xmlHttp.readyState)
- {
- case 1:
- case 2:
- case 3:
- return true;
-
- default:
- return false;
- }
- },
-
- abort: function() {
- if (this.busy())
- this._xmlHttp.abort();
- },
-
- get: function(url, data, callback, timeout) {
- this._xmlHttp = new XMLHttpRequest();
-
- var xhr = this._xmlHttp,
- code = this._encode(data);
-
- url = location.protocol + '//' + location.host + url;
-
- if (code)
- if (url.substr(url.length-1,1) == '&')
- url += code;
- else
- url += '?' + code;
-
- xhr.open('GET', url, true);
-
- if (!isNaN(timeout))
- xhr.timeout = timeout;
-
- xhr.onreadystatechange = this._response.bind(this, callback, Date.now());
- xhr.send(null);
- },
-
- post: function(url, data, callback, timeout) {
- this._xmlHttp = new XMLHttpRequest();
-
- var xhr = this._xmlHttp,
- code = this._encode(data);
-
- xhr.open('POST', url, true);
-
- if (!isNaN(timeout))
- xhr.timeout = timeout;
-
- xhr.onreadystatechange = this._response.bind(this, callback, Date.now());
- xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
- xhr.send(code);
- },
-
- cancel: function() {
- this._xmlHttp.onreadystatechange = function() {};
- this._xmlHttp.abort();
- },
-
- send_form: function(form, callback, extra_values) {
- var code = '';
-
- for (var i = 0; i < form.elements.length; i++) {
- var e = form.elements[i];
-
- if (e.options) {
- code += (code ? '&' : '') +
- form.elements[i].name + '=' + encodeURIComponent(
- e.options[e.selectedIndex].value
- );
- }
- else if (e.length) {
- for (var j = 0; j < e.length; j++)
- if (e[j].name) {
- code += (code ? '&' : '') +
- e[j].name + '=' + encodeURIComponent(e[j].value);
- }
- }
- else {
- code += (code ? '&' : '') +
- e.name + '=' + encodeURIComponent(e.value);
- }
- }
-
- if (typeof extra_values == 'object')
- for (var key in extra_values)
- code += (code ? '&' : '') +
- key + '=' + encodeURIComponent(extra_values[key]);
-
- return (form.method == 'get'
- ? this.get(form.getAttribute('action'), code, callback)
- : this.post(form.getAttribute('action'), code, callback));
- }
-}
-
-XHR.get = function(url, data, callback) {
- (new XHR()).get(url, data, callback);
-}
-
-XHR.post = function(url, data, callback) {
- (new XHR()).post(url, data, callback);
-}
-
-XHR.poll = function(interval, url, data, callback, post) {
- if (isNaN(interval) || interval <= 0)
- interval = L.env.pollinterval;
-
- if (!XHR._q) {
- XHR._t = 0;
- XHR._q = [ ];
- XHR._r = function() {
- for (var i = 0, e = XHR._q[0]; i < XHR._q.length; e = XHR._q[++i])
- {
- if (!(XHR._t % e.interval) && !e.xhr.busy())
- e.xhr[post ? 'post' : 'get'](e.url, e.data, e.callback, e.interval * 1000 * 5 - 5);
- }
-
- XHR._t++;
- };
- }
-
- var e = {
- interval: interval,
- callback: callback,
- url: url,
- data: data,
- xhr: new XHR()
- };
-
- XHR._q.push(e);
-
- return e;
-}
-
-XHR.stop = function(e) {
- for (var i = 0; XHR._q && XHR._q[i]; i++) {
- if (XHR._q[i] === e) {
- e.xhr.cancel();
- XHR._q.splice(i, 1);
- return true;
- }
- }
-
- return false;
-}
-
-XHR.halt = function() {
- if (XHR._i) {
- /* show & set poll indicator */
- try {
- document.getElementById('xhr_poll_status').style.display = '';
- document.getElementById('xhr_poll_status_on').style.display = 'none';
- document.getElementById('xhr_poll_status_off').style.display = '';
- } catch(e) { }
-
- window.clearInterval(XHR._i);
- XHR._i = null;
- }
-}
-
-XHR.run = function() {
- if (XHR._r && !XHR._i) {
- /* show & set poll indicator */
- try {
- document.getElementById('xhr_poll_status').style.display = '';
- document.getElementById('xhr_poll_status_on').style.display = '';
- document.getElementById('xhr_poll_status_off').style.display = 'none';
- } catch(e) { }
-
- /* kick first round manually to prevent one second lag when setting up
- * the poll interval */
- XHR._r();
- XHR._i = window.setInterval(XHR._r, 1000);
- }
-}
-
-XHR.running = function() {
- return !!(XHR._r && XHR._i);
-}
-
-function XHR() {}
-
-document.addEventListener('DOMContentLoaded', XHR.run);
+/* replaced by luci.js */
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 11:21:40 +0000