X-Git-Url: http://git.archive.openwrt.org/?p=project%2Fluci2%2Fui.git;a=blobdiff_plain;f=luci2%2Fhtdocs%2Fluci2%2Fluci2.js;h=c6c13a101d65b1360390010b69b39b5b16efbb5f;hp=f41a8193ee3f6d8038b1456f96630d63a9a69a8b;hb=1bcb587b9fbd9c513a7f60e6cb6de22eb564e79e;hpb=203c7e1dc5b4968efaf97d13523c1c8ee6ff4364

diff --git a/luci2/htdocs/luci2/luci2.js b/luci2/htdocs/luci2/luci2.js
index f41a819..c6c13a1 100644
--- a/luci2/htdocs/luci2/luci2.js
+++ b/luci2/htdocs/luci2/luci2.js
@@ -3216,6 +3216,7 @@ function LuCI2()
 
 			var state = _luci2.ui._loading || (_luci2.ui._loading = {
 				modal: $('<div />')
+					.css('z-index', 2000)
 					.addClass('modal fade')
 					.append($('<div />')
 						.addClass('modal-dialog')
@@ -3683,6 +3684,18 @@ function LuCI2()
 			}
 		}),
 
+		_render_change_indicator: function()
+		{
+			return $('<ul />')
+				.addClass('nav navbar-nav navbar-right')
+				.append($('<li />')
+					.append($('<a />')
+						.attr('id', 'changes')
+						.attr('href', '#')
+						.append($('<span />')
+							.addClass('label label-info'))));
+		},
+
 		renderMainMenu: _luci2.rpc.declare({
 			object: 'luci2.ui',
 			method: 'menu',
@@ -3693,7 +3706,8 @@ function LuCI2()
 
 				$('#mainmenu')
 					.empty()
-					.append(_luci2.globals.mainMenu.render(0, 1));
+					.append(_luci2.globals.mainMenu.render(0, 1))
+					.append(_luci2.ui._render_change_indicator());
 			}
 		}),
 
@@ -3706,9 +3720,11 @@ function LuCI2()
 
 		renderView: function()
 		{
-			var node = arguments[0];
-			var name = node.view.split(/\//).join('.');
-			var args = [ ];
+			var node  = arguments[0];
+			var name  = node.view.split(/\//).join('.');
+			var cname = _luci2.toClassName(name);
+			var views = _luci2.views || (_luci2.views = { });
+			var args  = [ ];
 
 			for (var i = 1; i < arguments.length; i++)
 				args.push(arguments[i]);
@@ -3717,16 +3733,12 @@ function LuCI2()
 				_luci2.globals.currentView.finish();
 
 			_luci2.ui.renderViewMenu();
-
-			if (!_luci2._views)
-				_luci2._views = { };
-
 			_luci2.setHash('view', node.view);
 
-			if (_luci2._views[name] instanceof _luci2.ui.view)
+			if (views[cname] instanceof _luci2.ui.view)
 			{
-				_luci2.globals.currentView = _luci2._views[name];
-				return _luci2._views[name].render.apply(_luci2._views[name], args);
+				_luci2.globals.currentView = views[cname];
+				return views[cname].render.apply(views[cname], args);
 			}
 
 			var url = _luci2.globals.resource + '/view/' + name + '.js';
@@ -3746,13 +3758,13 @@ function LuCI2()
 
 					var viewConstructor = eval(viewConstructorSource);
 
-					_luci2._views[name] = new viewConstructor({
+					views[cname] = new viewConstructor({
 						name: name,
 						acls: node.write || { }
 					});
 
-					_luci2.globals.currentView = _luci2._views[name];
-					return _luci2._views[name].render.apply(_luci2._views[name], args);
+					_luci2.globals.currentView = views[cname];
+					return views[cname].render.apply(views[cname], args);
 				}
 				catch(e) {
 					alert('Unable to instantiate view "%s": %s'.format(url, e));
@@ -3762,6 +3774,23 @@ function LuCI2()
 			});
 		},
 
+		changeView: function()
+		{
+			var name = _luci2.getHash('view');
+			var node = _luci2.globals.defaultNode;
+
+			if (name && _luci2.globals.mainMenu)
+				node = _luci2.globals.mainMenu.getNode(name);
+
+			if (node)
+			{
+				_luci2.ui.loading(true);
+				_luci2.ui.renderView(node).then(function() {
+					_luci2.ui.loading(false);
+				});
+			}
+		},
+
 		updateHostname: function()
 		{
 			return _luci2.system.getBoardInfo().then(function(info) {
@@ -3787,6 +3816,7 @@ function LuCI2()
 						switch (c[0])
 						{
 						case 'order':
+							log.push('uci reorder %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2]));
 							break;
 
 						case 'remove':
@@ -3830,20 +3860,23 @@ function LuCI2()
 
 				if (n > 0)
 					$('#changes')
-						.empty()
-						.show()
-						.append($('<a />')
-							.attr('href', '#')
-							.addClass('label')
-							.addClass('notice')
-							.text(_luci2.trcp('Pending configuration changes', '1 change', '%d changes', n).format(n))
-							.click(function(ev) {
-								_luci2.ui.dialog(_luci2.tr('Staged configuration changes'), html, { style: 'close' });
-								ev.preventDefault();
-							}));
+						.click(function(ev) {
+							_luci2.ui.dialog(_luci2.tr('Staged configuration changes'), html, {
+								style: 'confirm',
+								confirm: function() {
+									_luci2.uci.apply().then(
+										function(code) { alert('Success with code ' + code); },
+										function(code) { alert('Error with code ' + code); }
+									);
+								}
+							});
+							ev.preventDefault();
+						})
+						.children('span')
+							.show()
+							.text(_luci2.trcp('Pending configuration changes', '1 change', '%d changes', n).format(n));
 				else
-					$('#changes')
-						.hide();
+					$('#changes').children('span').hide();
 			});
 		},
 
@@ -3852,13 +3885,19 @@ function LuCI2()
 			_luci2.ui.loading(true);
 
 			$.when(
+				_luci2.session.updateACLs(),
 				_luci2.ui.updateHostname(),
 				_luci2.ui.updateChanges(),
-				_luci2.ui.renderMainMenu()
+				_luci2.ui.renderMainMenu(),
+				_luci2.NetworkModel.init()
 			).then(function() {
 				_luci2.ui.renderView(_luci2.globals.defaultNode).then(function() {
 					_luci2.ui.loading(false);
-				})
+				});
+
+				$(window).on('hashchange', function() {
+					_luci2.ui.changeView();
+				});
 			});
 		},
 
@@ -4072,10 +4111,7 @@ function LuCI2()
 
 		_onclick: function(ev)
 		{
-			_luci2.ui.loading(true);
-			_luci2.ui.renderView(ev.data).then(function() {
-				_luci2.ui.loading(false);
-			});
+			_luci2.setHash('view', ev.data);
 
 			ev.preventDefault();
 			this.blur();
@@ -4128,7 +4164,7 @@ function LuCI2()
 				}
 				else
 				{
-					item.find('a').click(nodes[i], this._onclick);
+					item.find('a').click(nodes[i].view, this._onclick);
 				}
 			}
 
@@ -4930,6 +4966,7 @@ function LuCI2()
 			this.instance = { };
 			this.dependencies = [ ];
 			this.rdependency = { };
+			this.events = { };
 
 			this.options = _luci2.defaults(options, {
 				placeholder: '',
@@ -4985,6 +5022,11 @@ function LuCI2()
 			return i.top;
 		},
 
+		active: function(sid)
+		{
+			return (this.instance[sid] && !this.instance[sid].disabled);
+		},
+
 		ucipath: function(sid)
 		{
 			return {
@@ -5124,14 +5166,30 @@ function LuCI2()
 			}
 
 			if (rv)
+			{
 				for (var field in d.self.rdependency)
 					d.self.rdependency[field].toggle(d.sid);
 
+				d.self.section.tabtoggle(d.sid);
+			}
+
 			return rv;
 		},
 
 		validator: function(sid, elem, multi)
 		{
+			var evdata = {
+				self:   this,
+				sid:    sid,
+				elem:   elem,
+				multi:  multi,
+				inst:   this.instance[sid],
+				opt:    this.options.optional
+			};
+
+			for (var evname in this.events)
+				elem.on(evname, evdata, this.events[evname]);
+
 			if (typeof(this.options.datatype) == 'undefined' && $.isEmptyObject(this.rdependency))
 				return elem;
 
@@ -5139,13 +5197,13 @@ function LuCI2()
 			if (typeof(this.options.datatype) == 'string')
 			{
 				try {
-					vstack = _luci2.cbi.validation.compile(this.options.datatype);
+					evdata.vstack = _luci2.cbi.validation.compile(this.options.datatype);
 				} catch(e) { };
 			}
 			else if (typeof(this.options.datatype) == 'function')
 			{
 				var vfunc = this.options.datatype;
-				vstack = [ function(elem) {
+				evdata.vstack = [ function(elem) {
 					var rv = vfunc(this, elem);
 					if (rv !== true)
 						validation.message = rv;
@@ -5153,16 +5211,6 @@ function LuCI2()
 				}, [ elem ] ];
 			}
 
-			var evdata = {
-				self:   this,
-				sid:    sid,
-				elem:   elem,
-				multi:  multi,
-				vstack: vstack,
-				inst:   this.instance[sid],
-				opt:    this.options.optional
-			};
-
 			if (elem.prop('tagName') == 'SELECT')
 			{
 				elem.change(evdata, this._ev_validate);
@@ -5192,7 +5240,7 @@ function LuCI2()
 			return (i.disabled || i.error.text() == '');
 		},
 
-		depends: function(d, v)
+		depends: function(d, v, add)
 		{
 			var dep;
 
@@ -5237,7 +5285,11 @@ function LuCI2()
 			if ($.isEmptyObject(dep))
 				return this;
 
-			this.dependencies.push(dep);
+			if (!add || !this.dependencies.length)
+				this.dependencies.push(dep);
+			else
+				for (var i = 0; i < this.dependencies.length; i++)
+					$.extend(this.dependencies[i], dep);
 
 			return this;
 		},
@@ -5267,7 +5319,7 @@ function LuCI2()
 							break;
 						}
 					}
-					else if (typeof(cmp) == 'string')
+					else if (typeof(cmp) == 'string' || typeof(cmp) == 'number')
 					{
 						if (val != cmp)
 						{
@@ -5312,6 +5364,12 @@ function LuCI2()
 			}
 
 			return false;
+		},
+
+		on: function(evname, evfunc)
+		{
+			this.events[evname] = evfunc;
+			return this;
 		}
 	});
 
@@ -5431,7 +5489,7 @@ function LuCI2()
 			var s = $('<select />')
 				.addClass('form-control');
 
-			if (this.options.optional)
+			if (this.options.optional && !this.has_empty)
 				$('<option />')
 					.attr('value', '')
 					.text(_luci2.tr('-- Please choose --'))
@@ -5454,6 +5512,9 @@ function LuCI2()
 			if (!this.choices)
 				this.choices = [ ];
 
+			if (k == '')
+				this.has_empty = true;
+
 			this.choices.push([k, v || k]);
 			return this;
 		}
@@ -5528,10 +5589,7 @@ function LuCI2()
 			{
 				ev.data.select.hide();
 				ev.data.input.show().focus();
-
-				var v = ev.data.input.val();
-				ev.data.input.val(' ');
-				ev.data.input.val(v);
+				ev.data.input.val('');
 			}
 			else if (self.options.optional && s.selectedIndex == 0)
 			{
@@ -5541,6 +5599,8 @@ function LuCI2()
 			{
 				ev.data.input.val(ev.data.select.val());
 			}
+
+			ev.stopPropagation();
 		},
 
 		_blur: function(ev)
@@ -5551,7 +5611,7 @@ function LuCI2()
 
 			ev.data.select.empty();
 
-			if (self.options.optional)
+			if (self.options.optional && !self.has_empty)
 				$('<option />')
 					.attr('value', '')
 					.text(_luci2.tr('-- please choose --'))
@@ -5581,7 +5641,7 @@ function LuCI2()
 				.appendTo(ev.data.select);
 
 			ev.data.input.hide();
-			ev.data.select.val(val).show().focus();
+			ev.data.select.val(val).show().blur();
 		},
 
 		_enter: function(ev)
@@ -5600,17 +5660,19 @@ function LuCI2()
 				.attr('id', this.id(sid));
 
 			var t = $('<input />')
+				.addClass('form-control')
 				.attr('type', 'text')
 				.hide()
 				.appendTo(d);
 
 			var s = $('<select />')
+				.addClass('form-control')
 				.appendTo(d);
 
 			var evdata = {
 				self: this,
-				input: this.validator(sid, t),
-				select: this.validator(sid, s)
+				input: t,
+				select: s
 			};
 
 			s.change(evdata, this._change);
@@ -5620,6 +5682,9 @@ function LuCI2()
 			t.val(this.ucivalue(sid));
 			t.blur();
 
+			this.validator(sid, t);
+			this.validator(sid, s);
+
 			return d;
 		},
 
@@ -5628,6 +5693,9 @@ function LuCI2()
 			if (!this.choices)
 				this.choices = [ ];
 
+			if (k == '')
+				this.has_empty = true;
+
 			this.choices.push([k, v || k]);
 			return this;
 		},
@@ -5914,52 +5982,32 @@ function LuCI2()
 		}
 	});
 
-	this.cbi.NetworkList = this.cbi.AbstractValue.extend({
-		load: function(sid)
+	this.cbi.ButtonValue = this.cbi.AbstractValue.extend({
+		widget: function(sid)
 		{
-			var self = this;
+			this.options.optional = true;
 
-			if (!self.interfaces)
-			{
-				self.interfaces = [ ];
-				return _luci2.network.getNetworkStatus().then(function(ifaces) {
-					self.interfaces = ifaces;
-					self = null;
-				});
-			}
+			var btn = $('<button />')
+				.addClass('btn btn-default')
+				.attr('id', this.id(sid))
+				.attr('type', 'button')
+				.text(this.label('text'));
 
-			return undefined;
+			return this.validator(sid, btn);
+		}
+	});
+
+	this.cbi.NetworkList = this.cbi.AbstractValue.extend({
+		load: function(sid)
+		{
+			return _luci2.NetworkModel.init();
 		},
 
 		_device_icon: function(dev)
 		{
-			var type = 'ethernet';
-			var desc = _luci2.tr('Ethernet device');
-
-			if (dev.type == 'IP tunnel')
-			{
-				type = 'tunnel';
-				desc = _luci2.tr('Tunnel interface');
-			}
-			else if (dev['bridge-members'])
-			{
-				type = 'bridge';
-				desc = _luci2.tr('Bridge');
-			}
-			else if (dev.wireless)
-			{
-				type = 'wifi';
-				desc = _luci2.tr('Wireless Network');
-			}
-			else if (dev.device.indexOf('.') > 0)
-			{
-				type = 'vlan';
-				desc = _luci2.tr('VLAN interface');
-			}
-
 			return $('<img />')
-				.attr('src', _luci2.globals.resource + '/icons/' + type + (dev.up ? '' : '_disabled') + '.png')
-				.attr('title', '%s (%s)'.format(desc, dev.device));
+				.attr('src', dev.icon())
+				.attr('title', '%s (%s)'.format(dev.description(), dev.name() || '?'));
 		},
 
 		widget: function(sid)
@@ -5979,34 +6027,36 @@ function LuCI2()
 				for (var i = 0; i < value.length; i++)
 					check[value[i]] = true;
 
-			if (this.interfaces)
+			var interfaces = _luci2.NetworkModel.getInterfaces();
+
+			for (var i = 0; i < interfaces.length; i++)
 			{
-				for (var i = 0; i < this.interfaces.length; i++)
-				{
-					var iface = this.interfaces[i];
-					var badge = $('<span />')
-						.addClass('badge')
-						.text('%s: '.format(iface['interface']));
-
-					if (iface.device && iface.device.subdevices)
-						for (var j = 0; j < iface.device.subdevices.length; j++)
-							badge.append(this._device_icon(iface.device.subdevices[j]));
-					else if (iface.device)
-						badge.append(this._device_icon(iface.device));
-					else
-						badge.append($('<em />').text(_luci2.tr('(No devices attached)')));
+				var iface = interfaces[i];
+				var badge = $('<span />')
+					.addClass('badge')
+					.text('%s: '.format(iface.name()));
 
-					$('<li />')
-						.append($('<label />')
-							.addClass(itype + ' inline')
-							.append($('<input />')
-								.attr('name', itype + id)
-								.attr('type', itype)
-								.attr('value', iface['interface'])
-								.prop('checked', !!check[iface['interface']]))
-							.append(badge))
-						.appendTo(ul);
-				}
+				var dev = iface.getDevice();
+				var subdevs = iface.getSubdevices();
+
+				if (subdevs.length)
+					for (var j = 0; j < subdevs.length; j++)
+						badge.append(this._device_icon(subdevs[j]));
+				else if (dev)
+					badge.append(this._device_icon(dev));
+				else
+					badge.append($('<em />').text(_luci2.tr('(No devices attached)')));
+
+				$('<li />')
+					.append($('<label />')
+						.addClass(itype + ' inline')
+						.append($('<input />')
+							.attr('name', itype + id)
+							.attr('type', itype)
+							.attr('value', iface.name())
+							.prop('checked', !!check[iface.name()]))
+						.append(badge))
+					.appendTo(ul);
 			}
 
 			if (!this.options.multiple)
@@ -6018,7 +6068,7 @@ function LuCI2()
 							.attr('name', itype + id)
 							.attr('type', itype)
 							.attr('value', '')
-							.prop('checked', !value))
+							.prop('checked', $.isEmptyObject(check)))
 						.append(_luci2.tr('unspecified')))
 					.appendTo(ul);
 			}
@@ -6139,6 +6189,30 @@ function LuCI2()
 			return w;
 		},
 
+		tabtoggle: function(sid)
+		{
+			for (var i = 0; i < this.tabs.length; i++)
+			{
+				var tab = this.tabs[i];
+				var elem = $('#' + this.id('nodetab', sid, tab.id));
+				var empty = true;
+
+				for (var j = 0; j < tab.fields.length; j++)
+				{
+					if (tab.fields[j].active(sid))
+					{
+						empty = false;
+						break;
+					}
+				}
+
+				if (empty && elem.is(':visible'))
+					elem.fadeOut();
+				else if (!empty)
+					elem.fadeIn();
+			}
+		},
+
 		ucipackages: function(pkg)
 		{
 			for (var i = 0; i < this.tabs.length; i++)
@@ -6204,8 +6278,7 @@ function LuCI2()
 
 		validate: function()
 		{
-			this.error_count = 0;
-
+			var errors = 0;
 			var as = this.sections();
 
 			for (var i = 0; i < as.length; i++)
@@ -6213,19 +6286,19 @@ function LuCI2()
 				var invals = this.validate_section(as[i]['.name']);
 
 				if (invals > 0)
-					this.error_count += invals;
+					errors += invals;
 			}
 
 			var badge = $('#' + this.id('sectiontab')).children('span:first');
 
-			if (this.error_count > 0)
+			if (errors > 0)
 				badge.show()
-					.text(this.error_count)
-					.attr('title', _luci2.trp('1 Error', '%d Errors', this.error_count).format(this.error_count));
+					.text(errors)
+					.attr('title', _luci2.trp('1 Error', '%d Errors', errors).format(errors));
 			else
 				badge.hide();
 
-			return (this.error_count == 0);
+			return (errors == 0);
 		}
 	});
 
@@ -6236,7 +6309,6 @@ function LuCI2()
 			this.options  = options;
 			this.tabs     = [ ];
 			this.fields   = { };
-			this.error_count  = 0;
 			this.active_panel = 0;
 			this.active_tab   = { };
 		},
@@ -6869,6 +6941,16 @@ function LuCI2()
 		}
 	});
 
+	this.cbi.SingleSection = this.cbi.NamedSection.extend({
+		render: function()
+		{
+			this.instance = { };
+			this.instance[this.uci_type] = { tabs: [ ] };
+
+			return this._render_section_body(this.uci_type, 0);
+		}
+	});
+
 	this.cbi.DummySection = this.cbi.TypedSection.extend({
 		sections: function(cb)
 		{
@@ -7015,6 +7097,20 @@ function LuCI2()
 			return body;
 		},
 
+		_render_footer: function()
+		{
+			return $('<div />')
+				.addClass('panel panel-default panel-body text-right')
+				.append($('<div />')
+					.addClass('btn-group')
+					.append(_luci2.ui.button(_luci2.tr('Save & Apply'), 'primary')
+						.click({ self: this }, function(ev) {  }))
+					.append(_luci2.ui.button(_luci2.tr('Save'), 'default')
+						.click({ self: this }, function(ev) { ev.data.self.send(); }))
+					.append(_luci2.ui.button(_luci2.tr('Reset'), 'default')
+						.click({ self: this }, function(ev) { ev.data.self.insertInto(ev.data.self.target); })));
+		},
+
 		render: function()
 		{
 			var map = $('<form />');
@@ -7030,18 +7126,7 @@ function LuCI2()
 			map.append(this._render_body());
 
 			if (this.options.pageaction !== false)
-			{
-				map.append($('<div />')
-					.addClass('panel panel-default panel-body text-right')
-					.append($('<div />')
-						.addClass('btn-group')
-						.append(_luci2.ui.button(_luci2.tr('Save & Apply'), 'primary')
-							.click({ self: this }, function(ev) {  }))
-						.append(_luci2.ui.button(_luci2.tr('Save'), 'default')
-							.click({ self: this }, function(ev) { ev.data.self.send(); }))
-						.append(_luci2.ui.button(_luci2.tr('Reset'), 'default')
-							.click({ self: this }, function(ev) { ev.data.self.insertInto(ev.data.self.target); }))));
-			}
+				map.append(this._render_footer());
 
 			return map;
 		},
@@ -7201,4 +7286,55 @@ function LuCI2()
 			});
 		}
 	});
+
+	this.cbi.Modal = this.cbi.Map.extend({
+		_render_footer: function()
+		{
+			return $('<div />')
+				.addClass('btn-group')
+				.append(_luci2.ui.button(_luci2.tr('Save & Apply'), 'primary')
+					.click({ self: this }, function(ev) {  }))
+				.append(_luci2.ui.button(_luci2.tr('Save'), 'default')
+					.click({ self: this }, function(ev) { ev.data.self.send(); }))
+				.append(_luci2.ui.button(_luci2.tr('Cancel'), 'default')
+					.click({ self: this }, function(ev) { _luci2.ui.dialog(false); }));
+		},
+
+		render: function()
+		{
+			var modal = _luci2.ui.dialog(this.label('caption'), null, { wide: true });
+			var map = $('<form />');
+
+			var desc = this.label('description');
+			if (desc)
+				map.append($('<p />').text(desc));
+
+			map.append(this._render_body());
+
+			modal.find('.modal-body').append(map);
+			modal.find('.modal-footer').append(this._render_footer());
+
+			return modal;
+		},
+
+		redraw: function()
+		{
+			this.render();
+			this.finish();
+		},
+
+		show: function()
+		{
+			var self = this;
+
+			_luci2.ui.loading(true);
+
+			return self.load().then(function() {
+				self.render();
+				self.finish();
+
+				_luci2.ui.loading(false);
+			});
+		}
+	});
 };