projects / project / luci2 / ui.git / blob
? search:


6b07f8c331ec9f775bf379ce094790a8cc533132
[project/luci2/ui.git] / luci2 / htdocs / luci2 / luci2.js
1 /*
2 LuCI2 - OpenWrt Web Interface
3
4 Copyright 2013 Jo-Philipp Wich <jow@openwrt.org>
5
6 Licensed under the Apache License, Version 2.0 (the "License");
7 you may not use this file except in compliance with the License.
8 You may obtain a copy of the License at
9
10 http://www.apache.org/licenses/LICENSE-2.0
11 */
12
13 String.prototype.format = function()
14 {
15 var html_esc = [/&/g, '&#38;', /"/g, '&#34;', /'/g, '&#39;', /</g, '&#60;', />/g, '&#62;'];
16 var quot_esc = [/"/g, '&#34;', /'/g, '&#39;'];
17
18 function esc(s, r) {
19 for( var i = 0; i < r.length; i += 2 )
20 s = s.replace(r[i], r[i+1]);
21 return s;
22 }
23
24 var str = this;
25 var out = '';
26 var re = /^(([^%]*)%('.|0|\x20)?(-)?(\d+)?(\.\d+)?(%|b|c|d|u|f|o|s|x|X|q|h|j|t|m))/;
27 var a = b = [], numSubstitutions = 0, numMatches = 0;
28
29 while ((a = re.exec(str)) != null)
30 {
31 var m = a[1];
32 var leftpart = a[2], pPad = a[3], pJustify = a[4], pMinLength = a[5];
33 var pPrecision = a[6], pType = a[7];
34
35 numMatches++;
36
37 if (pType == '%')
38 {
39 subst = '%';
40 }
41 else
42 {
43 if (numSubstitutions < arguments.length)
44 {
45 var param = arguments[numSubstitutions++];
46
47 var pad = '';
48 if (pPad && pPad.substr(0,1) == "'")
49 pad = leftpart.substr(1,1);
50 else if (pPad)
51 pad = pPad;
52
53 var justifyRight = true;
54 if (pJustify && pJustify === "-")
55 justifyRight = false;
56
57 var minLength = -1;
58 if (pMinLength)
59 minLength = parseInt(pMinLength);
60
61 var precision = -1;
62 if (pPrecision && pType == 'f')
63 precision = parseInt(pPrecision.substring(1));
64
65 var subst = param;
66
67 switch(pType)
68 {
69 case 'b':
70 subst = (parseInt(param) || 0).toString(2);
71 break;
72
73 case 'c':
74 subst = String.fromCharCode(parseInt(param) || 0);
75 break;
76
77 case 'd':
78 subst = (parseInt(param) || 0);
79 break;
80
81 case 'u':
82 subst = Math.abs(parseInt(param) || 0);
83 break;
84
85 case 'f':
86 subst = (precision > -1)
87 ? ((parseFloat(param) || 0.0)).toFixed(precision)
88 : (parseFloat(param) || 0.0);
89 break;
90
91 case 'o':
92 subst = (parseInt(param) || 0).toString(8);
93 break;
94
95 case 's':
96 subst = param;
97 break;
98
99 case 'x':
100 subst = ('' + (parseInt(param) || 0).toString(16)).toLowerCase();
101 break;
102
103 case 'X':
104 subst = ('' + (parseInt(param) || 0).toString(16)).toUpperCase();
105 break;
106
107 case 'h':
108 subst = esc(param, html_esc);
109 break;
110
111 case 'q':
112 subst = esc(param, quot_esc);
113 break;
114
115 case 'j':
116 subst = String.serialize(param);
117 break;
118
119 case 't':
120 var td = 0;
121 var th = 0;
122 var tm = 0;
123 var ts = (param || 0);
124
125 if (ts > 60) {
126 tm = Math.floor(ts / 60);
127 ts = (ts % 60);
128 }
129
130 if (tm > 60) {
131 th = Math.floor(tm / 60);
132 tm = (tm % 60);
133 }
134
135 if (th > 24) {
136 td = Math.floor(th / 24);
137 th = (th % 24);
138 }
139
140 subst = (td > 0)
141 ? '%dd %dh %dm %ds'.format(td, th, tm, ts)
142 : '%dh %dm %ds'.format(th, tm, ts);
143
144 break;
145
146 case 'm':
147 var mf = pMinLength ? parseInt(pMinLength) : 1000;
148 var pr = pPrecision ? Math.floor(10*parseFloat('0'+pPrecision)) : 2;
149
150 var i = 0;
151 var val = parseFloat(param || 0);
152 var units = [ '', 'K', 'M', 'G', 'T', 'P', 'E' ];
153
154 for (i = 0; (i < units.length) && (val > mf); i++)
155 val /= mf;
156
157 subst = val.toFixed(pr) + ' ' + units[i];
158 break;
159 }
160
161 subst = (typeof(subst) == 'undefined') ? '' : subst.toString();
162
163 if (minLength > 0 && pad.length > 0)
164 for (var i = 0; i < (minLength - subst.length); i++)
165 subst = justifyRight ? (pad + subst) : (subst + pad);
166 }
167 }
168
169 out += leftpart + subst;
170 str = str.substr(m.length);
171 }
172
173 return out + str;
174 }
175
176 function LuCI2()
177 {
178 var L = this;
179
180 var Class = function() { };
181
182 Class.extend = function(properties)
183 {
184 Class.initializing = true;
185
186 var prototype = new this();
187 var superprot = this.prototype;
188
189 Class.initializing = false;
190
191 $.extend(prototype, properties, {
192 callSuper: function() {
193 var args = [ ];
194 var meth = arguments[0];
195
196 if (typeof(superprot[meth]) != 'function')
197 return undefined;
198
199 for (var i = 1; i < arguments.length; i++)
200 args.push(arguments[i]);
201
202 return superprot[meth].apply(this, args);
203 }
204 });
205
206 function _class()
207 {
208 this.options = arguments[0] || { };
209
210 if (!Class.initializing && typeof(this.init) == 'function')
211 this.init.apply(this, arguments);
212 }
213
214 _class.prototype = prototype;
215 _class.prototype.constructor = _class;
216
217 _class.extend = Class.extend;
218
219 return _class;
220 };
221
222 this.defaults = function(obj, def)
223 {
224 for (var key in def)
225 if (typeof(obj[key]) == 'undefined')
226 obj[key] = def[key];
227
228 return obj;
229 };
230
231 this.isDeferred = function(x)
232 {
233 return (typeof(x) == 'object' &&
234 typeof(x.then) == 'function' &&
235 typeof(x.promise) == 'function');
236 };
237
238 this.deferrable = function()
239 {
240 if (this.isDeferred(arguments[0]))
241 return arguments[0];
242
243 var d = $.Deferred();
244 d.resolve.apply(d, arguments);
245
246 return d.promise();
247 };
248
249 this.i18n = {
250
251 loaded: false,
252 catalog: { },
253 plural: function(n) { return 0 + (n != 1) },
254
255 init: function() {
256 if (L.i18n.loaded)
257 return;
258
259 var lang = (navigator.userLanguage || navigator.language || 'en').toLowerCase();
260 var langs = (lang.indexOf('-') > -1) ? [ lang, lang.split(/-/)[0] ] : [ lang ];
261
262 for (var i = 0; i < langs.length; i++)
263 $.ajax('%s/i18n/base.%s.json'.format(L.globals.resource, langs[i]), {
264 async: false,
265 cache: true,
266 dataType: 'json',
267 success: function(data) {
268 $.extend(L.i18n.catalog, data);
269
270 var pe = L.i18n.catalog[''];
271 if (pe)
272 {
273 delete L.i18n.catalog[''];
274 try {
275 var pf = new Function('n', 'return 0 + (' + pe + ')');
276 L.i18n.plural = pf;
277 } catch (e) { };
278 }
279 }
280 });
281
282 L.i18n.loaded = true;
283 }
284
285 };
286
287 this.tr = function(msgid)
288 {
289 L.i18n.init();
290
291 var msgstr = L.i18n.catalog[msgid];
292
293 if (typeof(msgstr) == 'undefined')
294 return msgid;
295 else if (typeof(msgstr) == 'string')
296 return msgstr;
297 else
298 return msgstr[0];
299 };
300
301 this.trp = function(msgid, msgid_plural, count)
302 {
303 L.i18n.init();
304
305 var msgstr = L.i18n.catalog[msgid];
306
307 if (typeof(msgstr) == 'undefined')
308 return (count == 1) ? msgid : msgid_plural;
309 else if (typeof(msgstr) == 'string')
310 return msgstr;
311 else
312 return msgstr[L.i18n.plural(count)];
313 };
314
315 this.trc = function(msgctx, msgid)
316 {
317 L.i18n.init();
318
319 var msgstr = L.i18n.catalog[msgid + '\u0004' + msgctx];
320
321 if (typeof(msgstr) == 'undefined')
322 return msgid;
323 else if (typeof(msgstr) == 'string')
324 return msgstr;
325 else
326 return msgstr[0];
327 };
328
329 this.trcp = function(msgctx, msgid, msgid_plural, count)
330 {
331 L.i18n.init();
332
333 var msgstr = L.i18n.catalog[msgid + '\u0004' + msgctx];
334
335 if (typeof(msgstr) == 'undefined')
336 return (count == 1) ? msgid : msgid_plural;
337 else if (typeof(msgstr) == 'string')
338 return msgstr;
339 else
340 return msgstr[L.i18n.plural(count)];
341 };
342
343 this.setHash = function(key, value)
344 {
345 var h = '';
346 var data = this.getHash(undefined);
347
348 if (typeof(value) == 'undefined')
349 delete data[key];
350 else
351 data[key] = value;
352
353 var keys = [ ];
354 for (var k in data)
355 keys.push(k);
356
357 keys.sort();
358
359 for (var i = 0; i < keys.length; i++)
360 {
361 if (i > 0)
362 h += ',';
363
364 h += keys[i] + ':' + data[keys[i]];
365 }
366
367 if (h.length)
368 location.hash = '#' + h;
369 else
370 location.hash = '';
371 };
372
373 this.getHash = function(key)
374 {
375 var data = { };
376 var tuples = (location.hash || '#').substring(1).split(/,/);
377
378 for (var i = 0; i < tuples.length; i++)
379 {
380 var tuple = tuples[i].split(/:/);
381 if (tuple.length == 2)
382 data[tuple[0]] = tuple[1];
383 }
384
385 if (typeof(key) != 'undefined')
386 return data[key];
387
388 return data;
389 };
390
391 this.toArray = function(x)
392 {
393 switch (typeof(x))
394 {
395 case 'number':
396 case 'boolean':
397 return [ x ];
398
399 case 'string':
400 var r = [ ];
401 var l = x.split(/\s+/);
402 for (var i = 0; i < l.length; i++)
403 if (l[i].length > 0)
404 r.push(l[i]);
405 return r;
406
407 case 'object':
408 if ($.isArray(x))
409 {
410 var r = [ ];
411 for (var i = 0; i < x.length; i++)
412 r.push(x[i]);
413 return r;
414 }
415 else if ($.isPlainObject(x))
416 {
417 var r = [ ];
418 for (var k in x)
419 if (x.hasOwnProperty(k))
420 r.push(k);
421 return r.sort();
422 }
423 }
424
425 return [ ];
426 };
427
428 this.toObject = function(x)
429 {
430 switch (typeof(x))
431 {
432 case 'number':
433 case 'boolean':
434 return { x: true };
435
436 case 'string':
437 var r = { };
438 var l = x.split(/\x+/);
439 for (var i = 0; i < l.length; i++)
440 if (l[i].length > 0)
441 r[l[i]] = true;
442 return r;
443
444 case 'object':
445 if ($.isArray(x))
446 {
447 var r = { };
448 for (var i = 0; i < x.length; i++)
449 r[x[i]] = true;
450 return r;
451 }
452 else if ($.isPlainObject(x))
453 {
454 return x;
455 }
456 }
457
458 return { };
459 };
460
461 this.filterArray = function(array, item)
462 {
463 if (!$.isArray(array))
464 return [ ];
465
466 for (var i = 0; i < array.length; i++)
467 if (array[i] === item)
468 array.splice(i--, 1);
469
470 return array;
471 };
472
473 this.toClassName = function(str, suffix)
474 {
475 var n = '';
476 var l = str.split(/[\/.]/);
477
478 for (var i = 0; i < l.length; i++)
479 if (l[i].length > 0)
480 n += l[i].charAt(0).toUpperCase() + l[i].substr(1).toLowerCase();
481
482 if (typeof(suffix) == 'string')
483 n += suffix;
484
485 return n;
486 };
487
488 this.globals = {
489 timeout: 15000,
490 resource: '/luci2',
491 sid: '00000000000000000000000000000000'
492 };
493
494 this.rpc = {
495
496 _id: 1,
497 _batch: undefined,
498 _requests: { },
499
500 _call: function(req, cb)
501 {
502 return $.ajax('/ubus', {
503 cache: false,
504 contentType: 'application/json',
505 data: JSON.stringify(req),
506 dataType: 'json',
507 type: 'POST',
508 timeout: L.globals.timeout,
509 _rpc_req: req
510 }).then(cb, cb);
511 },
512
513 _list_cb: function(msg)
514 {
515 var list = msg.result;
516
517 /* verify message frame */
518 if (typeof(msg) != 'object' || msg.jsonrpc != '2.0' || !msg.id || !$.isArray(list))
519 list = [ ];
520
521 return $.Deferred().resolveWith(this, [ list ]);
522 },
523
524 _call_cb: function(msg)
525 {
526 var data = [ ];
527 var type = Object.prototype.toString;
528 var reqs = this._rpc_req;
529
530 if (!$.isArray(reqs))
531 {
532 msg = [ msg ];
533 reqs = [ reqs ];
534 }
535
536 for (var i = 0; i < msg.length; i++)
537 {
538 /* fetch related request info */
539 var req = L.rpc._requests[reqs[i].id];
540 if (typeof(req) != 'object')
541 throw 'No related request for JSON response';
542
543 /* fetch response attribute and verify returned type */
544 var ret = undefined;
545
546 /* verify message frame */
547 if (typeof(msg[i]) == 'object' && msg[i].jsonrpc == '2.0')
548 if ($.isArray(msg[i].result) && msg[i].result[0] == 0)
549 ret = (msg[i].result.length > 1) ? msg[i].result[1] : msg[i].result[0];
550
551 if (req.expect)
552 {
553 for (var key in req.expect)
554 {
555 if (typeof(ret) != 'undefined' && key != '')
556 ret = ret[key];
557
558 if (typeof(ret) == 'undefined' || type.call(ret) != type.call(req.expect[key]))
559 ret = req.expect[key];
560
561 break;
562 }
563 }
564
565 /* apply filter */
566 if (typeof(req.filter) == 'function')
567 {
568 req.priv[0] = ret;
569 req.priv[1] = req.params;
570 ret = req.filter.apply(L.rpc, req.priv);
571 }
572
573 /* store response data */
574 if (typeof(req.index) == 'number')
575 data[req.index] = ret;
576 else
577 data = ret;
578
579 /* delete request object */
580 delete L.rpc._requests[reqs[i].id];
581 }
582
583 return $.Deferred().resolveWith(this, [ data ]);
584 },
585
586 list: function()
587 {
588 var params = [ ];
589 for (var i = 0; i < arguments.length; i++)
590 params[i] = arguments[i];
591
592 var msg = {
593 jsonrpc: '2.0',
594 id: this._id++,
595 method: 'list',
596 params: (params.length > 0) ? params : undefined
597 };
598
599 return this._call(msg, this._list_cb);
600 },
601
602 batch: function()
603 {
604 if (!$.isArray(this._batch))
605 this._batch = [ ];
606 },
607
608 flush: function()
609 {
610 if (!$.isArray(this._batch))
611 return L.deferrable([ ]);
612
613 var req = this._batch;
614 delete this._batch;
615
616 /* call rpc */
617 return this._call(req, this._call_cb);
618 },
619
620 declare: function(options)
621 {
622 var _rpc = this;
623
624 return function() {
625 /* build parameter object */
626 var p_off = 0;
627 var params = { };
628 if ($.isArray(options.params))
629 for (p_off = 0; p_off < options.params.length; p_off++)
630 params[options.params[p_off]] = arguments[p_off];
631
632 /* all remaining arguments are private args */
633 var priv = [ undefined, undefined ];
634 for (; p_off < arguments.length; p_off++)
635 priv.push(arguments[p_off]);
636
637 /* store request info */
638 var req = _rpc._requests[_rpc._id] = {
639 expect: options.expect,
640 filter: options.filter,
641 params: params,
642 priv: priv
643 };
644
645 /* build message object */
646 var msg = {
647 jsonrpc: '2.0',
648 id: _rpc._id++,
649 method: 'call',
650 params: [
651 L.globals.sid,
652 options.object,
653 options.method,
654 params
655 ]
656 };
657
658 /* when a batch is in progress then store index in request data
659 * and push message object onto the stack */
660 if ($.isArray(_rpc._batch))
661 {
662 req.index = _rpc._batch.push(msg) - 1;
663 return L.deferrable(msg);
664 }
665
666 /* call rpc */
667 return _rpc._call(msg, _rpc._call_cb);
668 };
669 }
670 };
671
672 this.UCIContext = Class.extend({
673
674 init: function()
675 {
676 this.state = {
677 newid: 0,
678 values: { },
679 creates: { },
680 changes: { },
681 deletes: { },
682 reorder: { }
683 };
684 },
685
686 _load: L.rpc.declare({
687 object: 'uci',
688 method: 'get',
689 params: [ 'config' ],
690 expect: { values: { } }
691 }),
692
693 _order: L.rpc.declare({
694 object: 'uci',
695 method: 'order',
696 params: [ 'config', 'sections' ]
697 }),
698
699 _add: L.rpc.declare({
700 object: 'uci',
701 method: 'add',
702 params: [ 'config', 'type', 'name', 'values' ],
703 expect: { section: '' }
704 }),
705
706 _set: L.rpc.declare({
707 object: 'uci',
708 method: 'set',
709 params: [ 'config', 'section', 'values' ]
710 }),
711
712 _delete: L.rpc.declare({
713 object: 'uci',
714 method: 'delete',
715 params: [ 'config', 'section', 'options' ]
716 }),
717
718 load: function(packages)
719 {
720 var self = this;
721 var seen = { };
722 var pkgs = [ ];
723
724 if (!$.isArray(packages))
725 packages = [ packages ];
726
727 L.rpc.batch();
728
729 for (var i = 0; i < packages.length; i++)
730 if (!seen[packages[i]])
731 {
732 pkgs.push(packages[i]);
733 seen[packages[i]] = true;
734 self._load(packages[i]);
735 }
736
737 return L.rpc.flush().then(function(responses) {
738 for (var i = 0; i < responses.length; i++)
739 self.state.values[pkgs[i]] = responses[i];
740
741 return pkgs;
742 });
743 },
744
745 unload: function(packages)
746 {
747 if (!$.isArray(packages))
748 packages = [ packages ];
749
750 for (var i = 0; i < packages.length; i++)
751 {
752 delete this.state.values[packages[i]];
753 delete this.state.creates[packages[i]];
754 delete this.state.changes[packages[i]];
755 delete this.state.deletes[packages[i]];
756 }
757 },
758
759 add: function(conf, type, name)
760 {
761 var c = this.state.creates;
762 var s = '.new.%d'.format(this.state.newid++);
763
764 if (!c[conf])
765 c[conf] = { };
766
767 c[conf][s] = {
768 '.type': type,
769 '.name': s,
770 '.create': name,
771 '.anonymous': !name,
772 '.index': 1000 + this.state.newid
773 };
774
775 return s;
776 },
777
778 remove: function(conf, sid)
779 {
780 var n = this.state.creates;
781 var c = this.state.changes;
782 var d = this.state.deletes;
783
784 /* requested deletion of a just created section */
785 if (sid.indexOf('.new.') == 0)
786 {
787 if (n[conf])
788 delete n[conf][sid];
789 }
790 else
791 {
792 if (c[conf])
793 delete c[conf][sid];
794
795 if (!d[conf])
796 d[conf] = { };
797
798 d[conf][sid] = true;
799 }
800 },
801
802 sections: function(conf, type, cb)
803 {
804 var sa = [ ];
805 var v = this.state.values[conf];
806 var n = this.state.creates[conf];
807 var c = this.state.changes[conf];
808 var d = this.state.deletes[conf];
809
810 if (!v)
811 return sa;
812
813 for (var s in v)
814 if (!d || d[s] !== true)
815 if (!type || v[s]['.type'] == type)
816 sa.push($.extend({ }, v[s], c ? c[s] : undefined));
817
818 if (n)
819 for (var s in n)
820 if (!type || n[s]['.type'] == type)
821 sa.push(n[s]);
822
823 sa.sort(function(a, b) {
824 return a['.index'] - b['.index'];
825 });
826
827 for (var i = 0; i < sa.length; i++)
828 sa[i]['.index'] = i;
829
830 if (typeof(cb) == 'function')
831 for (var i = 0; i < sa.length; i++)
832 cb.call(this, sa[i], sa[i]['.name']);
833
834 return sa;
835 },
836
837 get: function(conf, sid, opt)
838 {
839 var v = this.state.values;
840 var n = this.state.creates;
841 var c = this.state.changes;
842 var d = this.state.deletes;
843
844 if (typeof(sid) == 'undefined')
845 return undefined;
846
847 /* requested option in a just created section */
848 if (sid.indexOf('.new.') == 0)
849 {
850 if (!n[conf])
851 return undefined;
852
853 if (typeof(opt) == 'undefined')
854 return n[conf][sid];
855
856 return n[conf][sid][opt];
857 }
858
859 /* requested an option value */
860 if (typeof(opt) != 'undefined')
861 {
862 /* check whether option was deleted */
863 if (d[conf] && d[conf][sid])
864 {
865 if (d[conf][sid] === true)
866 return undefined;
867
868 for (var i = 0; i < d[conf][sid].length; i++)
869 if (d[conf][sid][i] == opt)
870 return undefined;
871 }
872
873 /* check whether option was changed */
874 if (c[conf] && c[conf][sid] && typeof(c[conf][sid][opt]) != 'undefined')
875 return c[conf][sid][opt];
876
877 /* return base value */
878 if (v[conf] && v[conf][sid])
879 return v[conf][sid][opt];
880
881 return undefined;
882 }
883
884 /* requested an entire section */
885 if (v[conf])
886 return v[conf][sid];
887
888 return undefined;
889 },
890
891 set: function(conf, sid, opt, val)
892 {
893 var n = this.state.creates;
894 var c = this.state.changes;
895 var d = this.state.deletes;
896
897 if (typeof(sid) == 'undefined' ||
898 typeof(opt) == 'undefined' ||
899 opt.charAt(0) == '.')
900 return;
901
902 if (sid.indexOf('.new.') == 0)
903 {
904 if (n[conf] && n[conf][sid])
905 {
906 if (typeof(val) != 'undefined')
907 n[conf][sid][opt] = val;
908 else
909 delete n[conf][sid][opt];
910 }
911 }
912 else if (typeof(val) != 'undefined')
913 {
914 /* do not set within deleted section */
915 if (d[conf] && d[conf][sid] === true)
916 return;
917
918 if (!c[conf])
919 c[conf] = { };
920
921 if (!c[conf][sid])
922 c[conf][sid] = { };
923
924 /* undelete option */
925 if (d[conf] && d[conf][sid])
926 d[conf][sid] = L.filterArray(d[conf][sid], opt);
927
928 c[conf][sid][opt] = val;
929 }
930 else
931 {
932 if (!d[conf])
933 d[conf] = { };
934
935 if (!d[conf][sid])
936 d[conf][sid] = [ ];
937
938 if (d[conf][sid] !== true)
939 d[conf][sid].push(opt);
940 }
941 },
942
943 unset: function(conf, sid, opt)
944 {
945 return this.set(conf, sid, opt, undefined);
946 },
947
948 _reload: function()
949 {
950 var pkgs = [ ];
951
952 for (var pkg in this.state.values)
953 pkgs.push(pkg);
954
955 this.init();
956
957 return this.load(pkgs);
958 },
959
960 _reorder: function()
961 {
962 var v = this.state.values;
963 var n = this.state.creates;
964 var r = this.state.reorder;
965
966 if ($.isEmptyObject(r))
967 return L.deferrable();
968
969 L.rpc.batch();
970
971 /*
972 gather all created and existing sections, sort them according
973 to their index value and issue an uci order call
974 */
975 for (var c in r)
976 {
977 var o = [ ];
978
979 if (n && n[c])
980 for (var s in n[c])
981 o.push(n[c][s]);
982
983 for (var s in v[c])
984 o.push(v[c][s]);
985
986 if (o.length > 0)
987 {
988 o.sort(function(a, b) {
989 return (a['.index'] - b['.index']);
990 });
991
992 var sids = [ ];
993
994 for (var i = 0; i < o.length; i++)
995 sids.push(o[i]['.name']);
996
997 this._order(c, sids);
998 }
999 }
1000
1001 this.state.reorder = { };
1002 return L.rpc.flush();
1003 },
1004
1005 swap: function(conf, sid1, sid2)
1006 {
1007 var s1 = this.get(conf, sid1);
1008 var s2 = this.get(conf, sid2);
1009 var n1 = s1 ? s1['.index'] : NaN;
1010 var n2 = s2 ? s2['.index'] : NaN;
1011
1012 if (isNaN(n1) || isNaN(n2))
1013 return false;
1014
1015 s1['.index'] = n2;
1016 s2['.index'] = n1;
1017
1018 this.state.reorder[conf] = true;
1019
1020 return true;
1021 },
1022
1023 save: function()
1024 {
1025 L.rpc.batch();
1026
1027 var self = this;
1028 var snew = [ ];
1029
1030 if (self.state.creates)
1031 for (var c in self.state.creates)
1032 for (var s in self.state.creates[c])
1033 {
1034 var r = {
1035 config: c,
1036 values: { }
1037 };
1038
1039 for (var k in self.state.creates[c][s])
1040 {
1041 if (k == '.type')
1042 r.type = self.state.creates[c][s][k];
1043 else if (k == '.create')
1044 r.name = self.state.creates[c][s][k];
1045 else if (k.charAt(0) != '.')
1046 r.values[k] = self.state.creates[c][s][k];
1047 }
1048
1049 snew.push(self.state.creates[c][s]);
1050
1051 self._add(r.config, r.type, r.name, r.values);
1052 }
1053
1054 if (self.state.changes)
1055 for (var c in self.state.changes)
1056 for (var s in self.state.changes[c])
1057 self._set(c, s, self.state.changes[c][s]);
1058
1059 if (self.state.deletes)
1060 for (var c in self.state.deletes)
1061 for (var s in self.state.deletes[c])
1062 {
1063 var o = self.state.deletes[c][s];
1064 self._delete(c, s, (o === true) ? undefined : o);
1065 }
1066
1067 return L.rpc.flush().then(function(responses) {
1068 /*
1069 array "snew" holds references to the created uci sections,
1070 use it to assign the returned names of the new sections
1071 */
1072 for (var i = 0; i < snew.length; i++)
1073 snew[i]['.name'] = responses[i];
1074
1075 return self._reorder();
1076 });
1077 },
1078
1079 _apply: L.rpc.declare({
1080 object: 'uci',
1081 method: 'apply',
1082 params: [ 'timeout', 'rollback' ]
1083 }),
1084
1085 _confirm: L.rpc.declare({
1086 object: 'uci',
1087 method: 'confirm'
1088 }),
1089
1090 apply: function(timeout)
1091 {
1092 var self = this;
1093 var date = new Date();
1094 var deferred = $.Deferred();
1095
1096 if (typeof(timeout) != 'number' || timeout < 1)
1097 timeout = 10;
1098
1099 self._apply(timeout, true).then(function(rv) {
1100 if (rv != 0)
1101 {
1102 deferred.rejectWith(self, [ rv ]);
1103 return;
1104 }
1105
1106 var try_deadline = date.getTime() + 1000 * timeout;
1107 var try_confirm = function()
1108 {
1109 return self._confirm().then(function(rv) {
1110 if (rv != 0)
1111 {
1112 if (date.getTime() < try_deadline)
1113 window.setTimeout(try_confirm, 250);
1114 else
1115 deferred.rejectWith(self, [ rv ]);
1116
1117 return;
1118 }
1119
1120 deferred.resolveWith(self, [ rv ]);
1121 });
1122 };
1123
1124 window.setTimeout(try_confirm, 1000);
1125 });
1126
1127 return deferred;
1128 },
1129
1130 changes: L.rpc.declare({
1131 object: 'uci',
1132 method: 'changes',
1133 expect: { changes: { } }
1134 }),
1135
1136 readable: function(conf)
1137 {
1138 return L.session.hasACL('uci', conf, 'read');
1139 },
1140
1141 writable: function(conf)
1142 {
1143 return L.session.hasACL('uci', conf, 'write');
1144 }
1145 });
1146
1147 this.uci = new this.UCIContext();
1148
1149 this.wireless = {
1150 listDeviceNames: L.rpc.declare({
1151 object: 'iwinfo',
1152 method: 'devices',
1153 expect: { 'devices': [ ] },
1154 filter: function(data) {
1155 data.sort();
1156 return data;
1157 }
1158 }),
1159
1160 getDeviceStatus: L.rpc.declare({
1161 object: 'iwinfo',
1162 method: 'info',
1163 params: [ 'device' ],
1164 expect: { '': { } },
1165 filter: function(data, params) {
1166 if (!$.isEmptyObject(data))
1167 {
1168 data['device'] = params['device'];
1169 return data;
1170 }
1171 return undefined;
1172 }
1173 }),
1174
1175 getAssocList: L.rpc.declare({
1176 object: 'iwinfo',
1177 method: 'assoclist',
1178 params: [ 'device' ],
1179 expect: { results: [ ] },
1180 filter: function(data, params) {
1181 for (var i = 0; i < data.length; i++)
1182 data[i]['device'] = params['device'];
1183
1184 data.sort(function(a, b) {
1185 if (a.bssid < b.bssid)
1186 return -1;
1187 else if (a.bssid > b.bssid)
1188 return 1;
1189 else
1190 return 0;
1191 });
1192
1193 return data;
1194 }
1195 }),
1196
1197 getWirelessStatus: function() {
1198 return this.listDeviceNames().then(function(names) {
1199 L.rpc.batch();
1200
1201 for (var i = 0; i < names.length; i++)
1202 L.wireless.getDeviceStatus(names[i]);
1203
1204 return L.rpc.flush();
1205 }).then(function(networks) {
1206 var rv = { };
1207
1208 var phy_attrs = [
1209 'country', 'channel', 'frequency', 'frequency_offset',
1210 'txpower', 'txpower_offset', 'hwmodes', 'hardware', 'phy'
1211 ];
1212
1213 var net_attrs = [
1214 'ssid', 'bssid', 'mode', 'quality', 'quality_max',
1215 'signal', 'noise', 'bitrate', 'encryption'
1216 ];
1217
1218 for (var i = 0; i < networks.length; i++)
1219 {
1220 var phy = rv[networks[i].phy] || (
1221 rv[networks[i].phy] = { networks: [ ] }
1222 );
1223
1224 var net = {
1225 device: networks[i].device
1226 };
1227
1228 for (var j = 0; j < phy_attrs.length; j++)
1229 phy[phy_attrs[j]] = networks[i][phy_attrs[j]];
1230
1231 for (var j = 0; j < net_attrs.length; j++)
1232 net[net_attrs[j]] = networks[i][net_attrs[j]];
1233
1234 phy.networks.push(net);
1235 }
1236
1237 return rv;
1238 });
1239 },
1240
1241 getAssocLists: function()
1242 {
1243 return this.listDeviceNames().then(function(names) {
1244 L.rpc.batch();
1245
1246 for (var i = 0; i < names.length; i++)
1247 L.wireless.getAssocList(names[i]);
1248
1249 return L.rpc.flush();
1250 }).then(function(assoclists) {
1251 var rv = [ ];
1252
1253 for (var i = 0; i < assoclists.length; i++)
1254 for (var j = 0; j < assoclists[i].length; j++)
1255 rv.push(assoclists[i][j]);
1256
1257 return rv;
1258 });
1259 },
1260
1261 formatEncryption: function(enc)
1262 {
1263 var format_list = function(l, s)
1264 {
1265 var rv = [ ];
1266 for (var i = 0; i < l.length; i++)
1267 rv.push(l[i].toUpperCase());
1268 return rv.join(s ? s : ', ');
1269 }
1270
1271 if (!enc || !enc.enabled)
1272 return L.tr('None');
1273
1274 if (enc.wep)
1275 {
1276 if (enc.wep.length == 2)
1277 return L.tr('WEP Open/Shared') + ' (%s)'.format(format_list(enc.ciphers, ', '));
1278 else if (enc.wep[0] == 'shared')
1279 return L.tr('WEP Shared Auth') + ' (%s)'.format(format_list(enc.ciphers, ', '));
1280 else
1281 return L.tr('WEP Open System') + ' (%s)'.format(format_list(enc.ciphers, ', '));
1282 }
1283 else if (enc.wpa)
1284 {
1285 if (enc.wpa.length == 2)
1286 return L.tr('mixed WPA/WPA2') + ' %s (%s)'.format(
1287 format_list(enc.authentication, '/'),
1288 format_list(enc.ciphers, ', ')
1289 );
1290 else if (enc.wpa[0] == 2)
1291 return 'WPA2 %s (%s)'.format(
1292 format_list(enc.authentication, '/'),
1293 format_list(enc.ciphers, ', ')
1294 );
1295 else
1296 return 'WPA %s (%s)'.format(
1297 format_list(enc.authentication, '/'),
1298 format_list(enc.ciphers, ', ')
1299 );
1300 }
1301
1302 return L.tr('Unknown');
1303 }
1304 };
1305
1306 this.firewall = {
1307 getZoneColor: function(zone)
1308 {
1309 if ($.isPlainObject(zone))
1310 zone = zone.name;
1311
1312 if (zone == 'lan')
1313 return '#90f090';
1314 else if (zone == 'wan')
1315 return '#f09090';
1316
1317 for (var i = 0, hash = 0;
1318 i < zone.length;
1319 hash = zone.charCodeAt(i++) + ((hash << 5) - hash));
1320
1321 for (var i = 0, color = '#';
1322 i < 3;
1323 color += ('00' + ((hash >> i++ * 8) & 0xFF).tostring(16)).slice(-2));
1324
1325 return color;
1326 },
1327
1328 findZoneByNetwork: function(network)
1329 {
1330 var self = this;
1331 var zone = undefined;
1332
1333 return L.uci.sections('firewall', 'zone', function(z) {
1334 if (!z.name || !z.network)
1335 return;
1336
1337 if (!$.isArray(z.network))
1338 z.network = z.network.split(/\s+/);
1339
1340 for (var i = 0; i < z.network.length; i++)
1341 {
1342 if (z.network[i] == network)
1343 {
1344 zone = z;
1345 break;
1346 }
1347 }
1348 }).then(function() {
1349 if (zone)
1350 zone.color = self.getZoneColor(zone);
1351
1352 return zone;
1353 });
1354 }
1355 };
1356
1357 this.NetworkModel = {
1358 _device_blacklist: [
1359 /^gre[0-9]+$/,
1360 /^gretap[0-9]+$/,
1361 /^ifb[0-9]+$/,
1362 /^ip6tnl[0-9]+$/,
1363 /^sit[0-9]+$/,
1364 /^wlan[0-9]+\.sta[0-9]+$/
1365 ],
1366
1367 _cache_functions: [
1368 'protolist', 0, L.rpc.declare({
1369 object: 'network',
1370 method: 'get_proto_handlers',
1371 expect: { '': { } }
1372 }),
1373 'ifstate', 1, L.rpc.declare({
1374 object: 'network.interface',
1375 method: 'dump',
1376 expect: { 'interface': [ ] }
1377 }),
1378 'devstate', 2, L.rpc.declare({
1379 object: 'network.device',
1380 method: 'status',
1381 expect: { '': { } }
1382 }),
1383 'wifistate', 0, L.rpc.declare({
1384 object: 'network.wireless',
1385 method: 'status',
1386 expect: { '': { } }
1387 }),
1388 'bwstate', 2, L.rpc.declare({
1389 object: 'luci2.network.bwmon',
1390 method: 'statistics',
1391 expect: { 'statistics': { } }
1392 }),
1393 'devlist', 2, L.rpc.declare({
1394 object: 'luci2.network',
1395 method: 'device_list',
1396 expect: { 'devices': [ ] }
1397 }),
1398 'swlist', 0, L.rpc.declare({
1399 object: 'luci2.network',
1400 method: 'switch_list',
1401 expect: { 'switches': [ ] }
1402 })
1403 ],
1404
1405 _fetch_protocol: function(proto)
1406 {
1407 var url = L.globals.resource + '/proto/' + proto + '.js';
1408 var self = L.NetworkModel;
1409
1410 var def = $.Deferred();
1411
1412 $.ajax(url, {
1413 method: 'GET',
1414 cache: true,
1415 dataType: 'text'
1416 }).then(function(data) {
1417 try {
1418 var protoConstructorSource = (
1419 '(function(L, $) { ' +
1420 'return %s' +
1421 '})(L, $);\n\n' +
1422 '//@ sourceURL=%s'
1423 ).format(data, url);
1424
1425 var protoClass = eval(protoConstructorSource);
1426
1427 self._protos[proto] = new protoClass();
1428 }
1429 catch(e) {
1430 alert('Unable to instantiate proto "%s": %s'.format(url, e));
1431 };
1432
1433 def.resolve();
1434 }).fail(function() {
1435 def.resolve();
1436 });
1437
1438 return def;
1439 },
1440
1441 _fetch_protocols: function()
1442 {
1443 var self = L.NetworkModel;
1444 var deferreds = [ ];
1445
1446 for (var proto in self._cache.protolist)
1447 deferreds.push(self._fetch_protocol(proto));
1448
1449 return $.when.apply($, deferreds);
1450 },
1451
1452 _fetch_swstate: L.rpc.declare({
1453 object: 'luci2.network',
1454 method: 'switch_info',
1455 params: [ 'switch' ],
1456 expect: { 'info': { } }
1457 }),
1458
1459 _fetch_swstate_cb: function(responses) {
1460 var self = L.NetworkModel;
1461 var swlist = self._cache.swlist;
1462 var swstate = self._cache.swstate = { };
1463
1464 for (var i = 0; i < responses.length; i++)
1465 swstate[swlist[i]] = responses[i];
1466 },
1467
1468 _fetch_cache_cb: function(level)
1469 {
1470 var self = L.NetworkModel;
1471 var name = '_fetch_cache_cb_' + level;
1472
1473 return self[name] || (
1474 self[name] = function(responses)
1475 {
1476 for (var i = 0; i < self._cache_functions.length; i += 3)
1477 if (!level || self._cache_functions[i + 1] == level)
1478 self._cache[self._cache_functions[i]] = responses.shift();
1479
1480 if (!level)
1481 {
1482 L.rpc.batch();
1483
1484 for (var i = 0; i < self._cache.swlist.length; i++)
1485 self._fetch_swstate(self._cache.swlist[i]);
1486
1487 return L.rpc.flush().then(self._fetch_swstate_cb);
1488 }
1489
1490 return L.deferrable();
1491 }
1492 );
1493 },
1494
1495 _fetch_cache: function(level)
1496 {
1497 var self = L.NetworkModel;
1498
1499 return L.uci.load(['network', 'wireless']).then(function() {
1500 L.rpc.batch();
1501
1502 for (var i = 0; i < self._cache_functions.length; i += 3)
1503 if (!level || self._cache_functions[i + 1] == level)
1504 self._cache_functions[i + 2]();
1505
1506 return L.rpc.flush().then(self._fetch_cache_cb(level || 0));
1507 });
1508 },
1509
1510 _get: function(pkg, sid, key)
1511 {
1512 return L.uci.get(pkg, sid, key);
1513 },
1514
1515 _set: function(pkg, sid, key, val)
1516 {
1517 return L.uci.set(pkg, sid, key, val);
1518 },
1519
1520 _is_blacklisted: function(dev)
1521 {
1522 for (var i = 0; i < this._device_blacklist.length; i++)
1523 if (dev.match(this._device_blacklist[i]))
1524 return true;
1525
1526 return false;
1527 },
1528
1529 _sort_devices: function(a, b)
1530 {
1531 if (a.options.kind < b.options.kind)
1532 return -1;
1533 else if (a.options.kind > b.options.kind)
1534 return 1;
1535
1536 if (a.options.name < b.options.name)
1537 return -1;
1538 else if (a.options.name > b.options.name)
1539 return 1;
1540
1541 return 0;
1542 },
1543
1544 _get_dev: function(ifname)
1545 {
1546 var alias = (ifname.charAt(0) == '@');
1547 return this._devs[ifname] || (
1548 this._devs[ifname] = {
1549 ifname: ifname,
1550 kind: alias ? 'alias' : 'ethernet',
1551 type: alias ? 0 : 1,
1552 up: false,
1553 changed: { }
1554 }
1555 );
1556 },
1557
1558 _get_iface: function(name)
1559 {
1560 return this._ifaces[name] || (
1561 this._ifaces[name] = {
1562 name: name,
1563 proto: this._protos.none,
1564 changed: { }
1565 }
1566 );
1567 },
1568
1569 _parse_devices: function()
1570 {
1571 var self = L.NetworkModel;
1572 var wificount = { };
1573
1574 for (var ifname in self._cache.devstate)
1575 {
1576 if (self._is_blacklisted(ifname))
1577 continue;
1578
1579 var dev = self._cache.devstate[ifname];
1580 var entry = self._get_dev(ifname);
1581
1582 entry.up = dev.up;
1583
1584 switch (dev.type)
1585 {
1586 case 'IP tunnel':
1587 entry.kind = 'tunnel';
1588 break;
1589
1590 case 'Bridge':
1591 entry.kind = 'bridge';
1592 //entry.ports = dev['bridge-members'].sort();
1593 break;
1594 }
1595 }
1596
1597 for (var i = 0; i < self._cache.devlist.length; i++)
1598 {
1599 var dev = self._cache.devlist[i];
1600
1601 if (self._is_blacklisted(dev.device))
1602 continue;
1603
1604 var entry = self._get_dev(dev.device);
1605
1606 entry.up = dev.is_up;
1607 entry.type = dev.type;
1608
1609 switch (dev.type)
1610 {
1611 case 1: /* Ethernet */
1612 if (dev.is_bridge)
1613 entry.kind = 'bridge';
1614 else if (dev.is_tuntap)
1615 entry.kind = 'tunnel';
1616 else if (dev.is_wireless)
1617 entry.kind = 'wifi';
1618 break;
1619
1620 case 512: /* PPP */
1621 case 768: /* IP-IP Tunnel */
1622 case 769: /* IP6-IP6 Tunnel */
1623 case 776: /* IPv6-in-IPv4 */
1624 case 778: /* GRE over IP */
1625 entry.kind = 'tunnel';
1626 break;
1627 }
1628 }
1629
1630 var net = L.uci.sections('network');
1631 for (var i = 0; i < net.length; i++)
1632 {
1633 var s = net[i];
1634 var sid = s['.name'];
1635
1636 if (s['.type'] == 'device' && s.name)
1637 {
1638 var entry = self._get_dev(s.name);
1639
1640 switch (s.type)
1641 {
1642 case 'macvlan':
1643 case 'tunnel':
1644 entry.kind = 'tunnel';
1645 break;
1646 }
1647
1648 entry.sid = sid;
1649 }
1650 else if (s['.type'] == 'interface' && !s['.anonymous'] && s.ifname)
1651 {
1652 var ifnames = L.toArray(s.ifname);
1653
1654 for (var j = 0; j < ifnames.length; j++)
1655 self._get_dev(ifnames[j]);
1656
1657 if (s['.name'] != 'loopback')
1658 {
1659 var entry = self._get_dev('@%s'.format(s['.name']));
1660
1661 entry.type = 0;
1662 entry.kind = 'alias';
1663 entry.sid = sid;
1664 }
1665 }
1666 else if (s['.type'] == 'switch_vlan' && s.device)
1667 {
1668 var sw = self._cache.swstate[s.device];
1669 var vid = parseInt(s.vid || s.vlan);
1670 var ports = L.toArray(s.ports);
1671
1672 if (!sw || !ports.length || isNaN(vid))
1673 continue;
1674
1675 var ifname = undefined;
1676
1677 for (var j = 0; j < ports.length; j++)
1678 {
1679 var port = parseInt(ports[j]);
1680 var tag = (ports[j].replace(/[^tu]/g, '') == 't');
1681
1682 if (port == sw.cpu_port)
1683 {
1684 // XXX: need a way to map switch to netdev
1685 if (tag)
1686 ifname = 'eth0.%d'.format(vid);
1687 else
1688 ifname = 'eth0';
1689
1690 break;
1691 }
1692 }
1693
1694 if (!ifname)
1695 continue;
1696
1697 var entry = self._get_dev(ifname);
1698
1699 entry.kind = 'vlan';
1700 entry.sid = sid;
1701 entry.vsw = sw;
1702 entry.vid = vid;
1703 }
1704 }
1705
1706 var wifi = L.uci.sections('wireless');
1707 for (var i = 0; i < wifi.length; i++)
1708 {
1709 var s = wifi[i];
1710 var sid = s['.name'];
1711
1712 if (s['.type'] == 'wifi-iface' && s.device)
1713 {
1714 var r = parseInt(s.device.replace(/^[^0-9]+/, ''));
1715 var n = wificount[s.device] = (wificount[s.device] || 0) + 1;
1716 var id = 'radio%d.network%d'.format(r, n);
1717 var ifname = id;
1718
1719 if (self._cache.wifistate[s.device])
1720 {
1721 var ifcs = self._cache.wifistate[s.device].interfaces;
1722 for (var ifc in ifcs)
1723 {
1724 if (ifcs[ifc].section == sid)
1725 {
1726 ifname = ifcs[ifc].ifname;
1727 break;
1728 }
1729 }
1730 }
1731
1732 var entry = self._get_dev(ifname);
1733
1734 entry.kind = 'wifi';
1735 entry.sid = sid;
1736 entry.wid = id;
1737 entry.wdev = s.device;
1738 entry.wmode = s.mode;
1739 entry.wssid = s.ssid;
1740 entry.wbssid = s.bssid;
1741 }
1742 }
1743
1744 for (var i = 0; i < net.length; i++)
1745 {
1746 var s = net[i];
1747 var sid = s['.name'];
1748
1749 if (s['.type'] == 'interface' && !s['.anonymous'] && s.type == 'bridge')
1750 {
1751 var ifnames = L.toArray(s.ifname);
1752
1753 for (var ifname in self._devs)
1754 {
1755 var dev = self._devs[ifname];
1756
1757 if (dev.kind != 'wifi')
1758 continue;
1759
1760 var wnets = L.toArray(L.uci.get('wireless', dev.sid, 'network'));
1761 if ($.inArray(sid, wnets) > -1)
1762 ifnames.push(ifname);
1763 }
1764
1765 entry = self._get_dev('br-%s'.format(s['.name']));
1766 entry.type = 1;
1767 entry.kind = 'bridge';
1768 entry.sid = sid;
1769 entry.ports = ifnames.sort();
1770 }
1771 }
1772 },
1773
1774 _parse_interfaces: function()
1775 {
1776 var self = L.NetworkModel;
1777 var net = L.uci.sections('network');
1778
1779 for (var i = 0; i < net.length; i++)
1780 {
1781 var s = net[i];
1782 var sid = s['.name'];
1783
1784 if (s['.type'] == 'interface' && !s['.anonymous'] && s.proto)
1785 {
1786 var entry = self._get_iface(s['.name']);
1787 var proto = self._protos[s.proto] || self._protos.none;
1788
1789 var l3dev = undefined;
1790 var l2dev = undefined;
1791
1792 var ifnames = L.toArray(s.ifname);
1793
1794 for (var ifname in self._devs)
1795 {
1796 var dev = self._devs[ifname];
1797
1798 if (dev.kind != 'wifi')
1799 continue;
1800
1801 var wnets = L.toArray(L.uci.get('wireless', dev.sid, 'network'));
1802 if ($.inArray(entry.name, wnets) > -1)
1803 ifnames.push(ifname);
1804 }
1805
1806 if (proto.virtual)
1807 l3dev = '%s-%s'.format(s.proto, entry.name);
1808 else if (s.type == 'bridge')
1809 l3dev = 'br-%s'.format(entry.name);
1810 else
1811 l3dev = ifnames[0];
1812
1813 if (!proto.virtual && s.type == 'bridge')
1814 l2dev = 'br-%s'.format(entry.name);
1815 else if (!proto.virtual)
1816 l2dev = ifnames[0];
1817
1818 entry.proto = proto;
1819 entry.sid = sid;
1820 entry.l3dev = l3dev;
1821 entry.l2dev = l2dev;
1822 }
1823 }
1824
1825 for (var i = 0; i < self._cache.ifstate.length; i++)
1826 {
1827 var iface = self._cache.ifstate[i];
1828 var entry = self._get_iface(iface['interface']);
1829 var proto = self._protos[iface.proto] || self._protos.none;
1830
1831 /* this is a virtual interface, either deleted from config but
1832 not applied yet or set up from external tools (6rd) */
1833 if (!entry.sid)
1834 {
1835 entry.proto = proto;
1836 entry.l2dev = iface.device;
1837 entry.l3dev = iface.l3_device;
1838 }
1839 }
1840 },
1841
1842 init: function()
1843 {
1844 var self = this;
1845
1846 if (self._cache)
1847 return L.deferrable();
1848
1849 self._cache = { };
1850 self._devs = { };
1851 self._ifaces = { };
1852 self._protos = { };
1853
1854 return self._fetch_cache()
1855 .then(self._fetch_protocols)
1856 .then(self._parse_devices)
1857 .then(self._parse_interfaces);
1858 },
1859
1860 update: function()
1861 {
1862 delete this._cache;
1863 return this.init();
1864 },
1865
1866 refreshInterfaceStatus: function()
1867 {
1868 return this._fetch_cache(1).then(this._parse_interfaces);
1869 },
1870
1871 refreshDeviceStatus: function()
1872 {
1873 return this._fetch_cache(2).then(this._parse_devices);
1874 },
1875
1876 refreshStatus: function()
1877 {
1878 return this._fetch_cache(1)
1879 .then(this._fetch_cache(2))
1880 .then(this._parse_devices)
1881 .then(this._parse_interfaces);
1882 },
1883
1884 getDevices: function()
1885 {
1886 var devs = [ ];
1887
1888 for (var ifname in this._devs)
1889 if (ifname != 'lo')
1890 devs.push(new L.NetworkModel.Device(this._devs[ifname]));
1891
1892 return devs.sort(this._sort_devices);
1893 },
1894
1895 getDeviceByInterface: function(iface)
1896 {
1897 if (iface instanceof L.NetworkModel.Interface)
1898 iface = iface.name();
1899
1900 if (this._ifaces[iface])
1901 return this.getDevice(this._ifaces[iface].l3dev) ||
1902 this.getDevice(this._ifaces[iface].l2dev);
1903
1904 return undefined;
1905 },
1906
1907 getDevice: function(ifname)
1908 {
1909 if (this._devs[ifname])
1910 return new L.NetworkModel.Device(this._devs[ifname]);
1911
1912 return undefined;
1913 },
1914
1915 createDevice: function(name)
1916 {
1917 return new L.NetworkModel.Device(this._get_dev(name));
1918 },
1919
1920 getInterfaces: function()
1921 {
1922 var ifaces = [ ];
1923
1924 for (var name in this._ifaces)
1925 if (name != 'loopback')
1926 ifaces.push(this.getInterface(name));
1927
1928 ifaces.sort(function(a, b) {
1929 if (a.name() < b.name())
1930 return -1;
1931 else if (a.name() > b.name())
1932 return 1;
1933 else
1934 return 0;
1935 });
1936
1937 return ifaces;
1938 },
1939
1940 getInterfacesByDevice: function(dev)
1941 {
1942 var ifaces = [ ];
1943
1944 if (dev instanceof L.NetworkModel.Device)
1945 dev = dev.name();
1946
1947 for (var name in this._ifaces)
1948 {
1949 var iface = this._ifaces[name];
1950 if (iface.l2dev == dev || iface.l3dev == dev)
1951 ifaces.push(this.getInterface(name));
1952 }
1953
1954 ifaces.sort(function(a, b) {
1955 if (a.name() < b.name())
1956 return -1;
1957 else if (a.name() > b.name())
1958 return 1;
1959 else
1960 return 0;
1961 });
1962
1963 return ifaces;
1964 },
1965
1966 getInterface: function(iface)
1967 {
1968 if (this._ifaces[iface])
1969 return new L.NetworkModel.Interface(this._ifaces[iface]);
1970
1971 return undefined;
1972 },
1973
1974 getProtocols: function()
1975 {
1976 var rv = [ ];
1977
1978 for (var proto in this._protos)
1979 {
1980 var pr = this._protos[proto];
1981
1982 rv.push({
1983 name: proto,
1984 description: pr.description,
1985 virtual: pr.virtual,
1986 tunnel: pr.tunnel
1987 });
1988 }
1989
1990 return rv.sort(function(a, b) {
1991 if (a.name < b.name)
1992 return -1;
1993 else if (a.name > b.name)
1994 return 1;
1995 else
1996 return 0;
1997 });
1998 },
1999
2000 _find_wan: function(ipaddr)
2001 {
2002 for (var i = 0; i < this._cache.ifstate.length; i++)
2003 {
2004 var ifstate = this._cache.ifstate[i];
2005
2006 if (!ifstate.route)
2007 continue;
2008
2009 for (var j = 0; j < ifstate.route.length; j++)
2010 if (ifstate.route[j].mask == 0 &&
2011 ifstate.route[j].target == ipaddr &&
2012 typeof(ifstate.route[j].table) == 'undefined')
2013 {
2014 return this.getInterface(ifstate['interface']);
2015 }
2016 }
2017
2018 return undefined;
2019 },
2020
2021 findWAN: function()
2022 {
2023 return this._find_wan('0.0.0.0');
2024 },
2025
2026 findWAN6: function()
2027 {
2028 return this._find_wan('::');
2029 },
2030
2031 resolveAlias: function(ifname)
2032 {
2033 if (ifname instanceof L.NetworkModel.Device)
2034 ifname = ifname.name();
2035
2036 var dev = this._devs[ifname];
2037 var seen = { };
2038
2039 while (dev && dev.kind == 'alias')
2040 {
2041 // loop
2042 if (seen[dev.ifname])
2043 return undefined;
2044
2045 var ifc = this._ifaces[dev.sid];
2046
2047 seen[dev.ifname] = true;
2048 dev = ifc ? this._devs[ifc.l3dev] : undefined;
2049 }
2050
2051 return dev ? this.getDevice(dev.ifname) : undefined;
2052 }
2053 };
2054
2055 this.NetworkModel.Device = Class.extend({
2056 _wifi_modes: {
2057 ap: L.tr('Master'),
2058 sta: L.tr('Client'),
2059 adhoc: L.tr('Ad-Hoc'),
2060 monitor: L.tr('Monitor'),
2061 wds: L.tr('Static WDS')
2062 },
2063
2064 _status: function(key)
2065 {
2066 var s = L.NetworkModel._cache.devstate[this.options.ifname];
2067
2068 if (s)
2069 return key ? s[key] : s;
2070
2071 return undefined;
2072 },
2073
2074 get: function(key)
2075 {
2076 var sid = this.options.sid;
2077 var pkg = (this.options.kind == 'wifi') ? 'wireless' : 'network';
2078 return L.NetworkModel._get(pkg, sid, key);
2079 },
2080
2081 set: function(key, val)
2082 {
2083 var sid = this.options.sid;
2084 var pkg = (this.options.kind == 'wifi') ? 'wireless' : 'network';
2085 return L.NetworkModel._set(pkg, sid, key, val);
2086 },
2087
2088 init: function()
2089 {
2090 if (typeof(this.options.type) == 'undefined')
2091 this.options.type = 1;
2092
2093 if (typeof(this.options.kind) == 'undefined')
2094 this.options.kind = 'ethernet';
2095
2096 if (typeof(this.options.networks) == 'undefined')
2097 this.options.networks = [ ];
2098 },
2099
2100 name: function()
2101 {
2102 return this.options.ifname;
2103 },
2104
2105 description: function()
2106 {
2107 switch (this.options.kind)
2108 {
2109 case 'alias':
2110 return L.tr('Alias for network "%s"').format(this.options.ifname.substring(1));
2111
2112 case 'bridge':
2113 return L.tr('Network bridge');
2114
2115 case 'ethernet':
2116 return L.tr('Network device');
2117
2118 case 'tunnel':
2119 switch (this.options.type)
2120 {
2121 case 1: /* tuntap */
2122 return L.tr('TAP device');
2123
2124 case 512: /* PPP */
2125 return L.tr('PPP tunnel');
2126
2127 case 768: /* IP-IP Tunnel */
2128 return L.tr('IP-in-IP tunnel');
2129
2130 case 769: /* IP6-IP6 Tunnel */
2131 return L.tr('IPv6-in-IPv6 tunnel');
2132
2133 case 776: /* IPv6-in-IPv4 */
2134 return L.tr('IPv6-over-IPv4 tunnel');
2135 break;
2136
2137 case 778: /* GRE over IP */
2138 return L.tr('GRE-over-IP tunnel');
2139
2140 default:
2141 return L.tr('Tunnel device');
2142 }
2143
2144 case 'vlan':
2145 return L.tr('VLAN %d on %s').format(this.options.vid, this.options.vsw.model);
2146
2147 case 'wifi':
2148 var o = this.options;
2149 return L.trc('(Wifi-Mode) "(SSID)" on (radioX)', '%s "%h" on %s').format(
2150 o.wmode ? this._wifi_modes[o.wmode] : L.tr('Unknown mode'),
2151 o.wssid || '?', o.wdev
2152 );
2153 }
2154
2155 return L.tr('Unknown device');
2156 },
2157
2158 icon: function(up)
2159 {
2160 var kind = this.options.kind;
2161
2162 if (kind == 'alias')
2163 kind = 'ethernet';
2164
2165 if (typeof(up) == 'undefined')
2166 up = this.isUp();
2167
2168 return L.globals.resource + '/icons/%s%s.png'.format(kind, up ? '' : '_disabled');
2169 },
2170
2171 isUp: function()
2172 {
2173 var l = L.NetworkModel._cache.devlist;
2174
2175 for (var i = 0; i < l.length; i++)
2176 if (l[i].device == this.options.ifname)
2177 return (l[i].is_up === true);
2178
2179 return false;
2180 },
2181
2182 isAlias: function()
2183 {
2184 return (this.options.kind == 'alias');
2185 },
2186
2187 isBridge: function()
2188 {
2189 return (this.options.kind == 'bridge');
2190 },
2191
2192 isBridgeable: function()
2193 {
2194 return (this.options.type == 1 && this.options.kind != 'bridge');
2195 },
2196
2197 isWireless: function()
2198 {
2199 return (this.options.kind == 'wifi');
2200 },
2201
2202 isInNetwork: function(net)
2203 {
2204 if (!(net instanceof L.NetworkModel.Interface))
2205 net = L.NetworkModel.getInterface(net);
2206
2207 if (net)
2208 {
2209 if (net.options.l3dev == this.options.ifname ||
2210 net.options.l2dev == this.options.ifname)
2211 return true;
2212
2213 var dev = L.NetworkModel._devs[net.options.l2dev];
2214 if (dev && dev.kind == 'bridge' && dev.ports)
2215 return ($.inArray(this.options.ifname, dev.ports) > -1);
2216 }
2217
2218 return false;
2219 },
2220
2221 getMTU: function()
2222 {
2223 var dev = L.NetworkModel._cache.devstate[this.options.ifname];
2224 if (dev && !isNaN(dev.mtu))
2225 return dev.mtu;
2226
2227 return undefined;
2228 },
2229
2230 getMACAddress: function()
2231 {
2232 if (this.options.type != 1)
2233 return undefined;
2234
2235 var dev = L.NetworkModel._cache.devstate[this.options.ifname];
2236 if (dev && dev.macaddr)
2237 return dev.macaddr.toUpperCase();
2238
2239 return undefined;
2240 },
2241
2242 getInterfaces: function()
2243 {
2244 return L.NetworkModel.getInterfacesByDevice(this.options.name);
2245 },
2246
2247 getStatistics: function()
2248 {
2249 var s = this._status('statistics') || { };
2250 return {
2251 rx_bytes: (s.rx_bytes || 0),
2252 tx_bytes: (s.tx_bytes || 0),
2253 rx_packets: (s.rx_packets || 0),
2254 tx_packets: (s.tx_packets || 0)
2255 };
2256 },
2257
2258 getTrafficHistory: function()
2259 {
2260 var def = new Array(120);
2261
2262 for (var i = 0; i < 120; i++)
2263 def[i] = 0;
2264
2265 var h = L.NetworkModel._cache.bwstate[this.options.ifname] || { };
2266 return {
2267 rx_bytes: (h.rx_bytes || def),
2268 tx_bytes: (h.tx_bytes || def),
2269 rx_packets: (h.rx_packets || def),
2270 tx_packets: (h.tx_packets || def)
2271 };
2272 },
2273
2274 removeFromInterface: function(iface)
2275 {
2276 if (!(iface instanceof L.NetworkModel.Interface))
2277 iface = L.NetworkModel.getInterface(iface);
2278
2279 if (!iface)
2280 return;
2281
2282 var ifnames = L.toArray(iface.get('ifname'));
2283 if ($.inArray(this.options.ifname, ifnames) > -1)
2284 iface.set('ifname', L.filterArray(ifnames, this.options.ifname));
2285
2286 if (this.options.kind != 'wifi')
2287 return;
2288
2289 var networks = L.toArray(this.get('network'));
2290 if ($.inArray(iface.name(), networks) > -1)
2291 this.set('network', L.filterArray(networks, iface.name()));
2292 },
2293
2294 attachToInterface: function(iface)
2295 {
2296 if (!(iface instanceof L.NetworkModel.Interface))
2297 iface = L.NetworkModel.getInterface(iface);
2298
2299 if (!iface)
2300 return;
2301
2302 if (this.options.kind != 'wifi')
2303 {
2304 var ifnames = L.toArray(iface.get('ifname'));
2305 if ($.inArray(this.options.ifname, ifnames) < 0)
2306 {
2307 ifnames.push(this.options.ifname);
2308 iface.set('ifname', (ifnames.length > 1) ? ifnames : ifnames[0]);
2309 }
2310 }
2311 else
2312 {
2313 var networks = L.toArray(this.get('network'));
2314 if ($.inArray(iface.name(), networks) < 0)
2315 {
2316 networks.push(iface.name());
2317 this.set('network', (networks.length > 1) ? networks : networks[0]);
2318 }
2319 }
2320 }
2321 });
2322
2323 this.NetworkModel.Interface = Class.extend({
2324 _status: function(key)
2325 {
2326 var s = L.NetworkModel._cache.ifstate;
2327
2328 for (var i = 0; i < s.length; i++)
2329 if (s[i]['interface'] == this.options.name)
2330 return key ? s[i][key] : s[i];
2331
2332 return undefined;
2333 },
2334
2335 get: function(key)
2336 {
2337 return L.NetworkModel._get('network', this.options.name, key);
2338 },
2339
2340 set: function(key, val)
2341 {
2342 return L.NetworkModel._set('network', this.options.name, key, val);
2343 },
2344
2345 name: function()
2346 {
2347 return this.options.name;
2348 },
2349
2350 protocol: function()
2351 {
2352 return (this.get('proto') || 'none');
2353 },
2354
2355 isUp: function()
2356 {
2357 return (this._status('up') === true);
2358 },
2359
2360 isVirtual: function()
2361 {
2362 return (typeof(this.options.sid) != 'string');
2363 },
2364
2365 getProtocol: function()
2366 {
2367 var prname = this.get('proto') || 'none';
2368 return L.NetworkModel._protos[prname] || L.NetworkModel._protos.none;
2369 },
2370
2371 getUptime: function()
2372 {
2373 var uptime = this._status('uptime');
2374 return isNaN(uptime) ? 0 : uptime;
2375 },
2376
2377 getDevice: function(resolveAlias)
2378 {
2379 if (this.options.l3dev)
2380 return L.NetworkModel.getDevice(this.options.l3dev);
2381
2382 return undefined;
2383 },
2384
2385 getPhysdev: function()
2386 {
2387 if (this.options.l2dev)
2388 return L.NetworkModel.getDevice(this.options.l2dev);
2389
2390 return undefined;
2391 },
2392
2393 getSubdevices: function()
2394 {
2395 var rv = [ ];
2396 var dev = this.options.l2dev ?
2397 L.NetworkModel._devs[this.options.l2dev] : undefined;
2398
2399 if (dev && dev.kind == 'bridge' && dev.ports && dev.ports.length)
2400 for (var i = 0; i < dev.ports.length; i++)
2401 rv.push(L.NetworkModel.getDevice(dev.ports[i]));
2402
2403 return rv;
2404 },
2405
2406 getIPv4Addrs: function(mask)
2407 {
2408 var rv = [ ];
2409 var addrs = this._status('ipv4-address');
2410
2411 if (addrs)
2412 for (var i = 0; i < addrs.length; i++)
2413 if (!mask)
2414 rv.push(addrs[i].address);
2415 else
2416 rv.push('%s/%d'.format(addrs[i].address, addrs[i].mask));
2417
2418 return rv;
2419 },
2420
2421 getIPv6Addrs: function(mask)
2422 {
2423 var rv = [ ];
2424 var addrs;
2425
2426 addrs = this._status('ipv6-address');
2427
2428 if (addrs)
2429 for (var i = 0; i < addrs.length; i++)
2430 if (!mask)
2431 rv.push(addrs[i].address);
2432 else
2433 rv.push('%s/%d'.format(addrs[i].address, addrs[i].mask));
2434
2435 addrs = this._status('ipv6-prefix-assignment');
2436
2437 if (addrs)
2438 for (var i = 0; i < addrs.length; i++)
2439 if (!mask)
2440 rv.push('%s1'.format(addrs[i].address));
2441 else
2442 rv.push('%s1/%d'.format(addrs[i].address, addrs[i].mask));
2443
2444 return rv;
2445 },
2446
2447 getDNSAddrs: function()
2448 {
2449 var rv = [ ];
2450 var addrs = this._status('dns-server');
2451
2452 if (addrs)
2453 for (var i = 0; i < addrs.length; i++)
2454 rv.push(addrs[i]);
2455
2456 return rv;
2457 },
2458
2459 getIPv4DNS: function()
2460 {
2461 var rv = [ ];
2462 var dns = this._status('dns-server');
2463
2464 if (dns)
2465 for (var i = 0; i < dns.length; i++)
2466 if (dns[i].indexOf(':') == -1)
2467 rv.push(dns[i]);
2468
2469 return rv;
2470 },
2471
2472 getIPv6DNS: function()
2473 {
2474 var rv = [ ];
2475 var dns = this._status('dns-server');
2476
2477 if (dns)
2478 for (var i = 0; i < dns.length; i++)
2479 if (dns[i].indexOf(':') > -1)
2480 rv.push(dns[i]);
2481
2482 return rv;
2483 },
2484
2485 getIPv4Gateway: function()
2486 {
2487 var rt = this._status('route');
2488
2489 if (rt)
2490 for (var i = 0; i < rt.length; i++)
2491 if (rt[i].target == '0.0.0.0' && rt[i].mask == 0)
2492 return rt[i].nexthop;
2493
2494 return undefined;
2495 },
2496
2497 getIPv6Gateway: function()
2498 {
2499 var rt = this._status('route');
2500
2501 if (rt)
2502 for (var i = 0; i < rt.length; i++)
2503 if (rt[i].target == '::' && rt[i].mask == 0)
2504 return rt[i].nexthop;
2505
2506 return undefined;
2507 },
2508
2509 getStatistics: function()
2510 {
2511 var dev = this.getDevice() || new L.NetworkModel.Device({});
2512 return dev.getStatistics();
2513 },
2514
2515 getTrafficHistory: function()
2516 {
2517 var dev = this.getDevice() || new L.NetworkModel.Device({});
2518 return dev.getTrafficHistory();
2519 },
2520
2521 setDevices: function(devs)
2522 {
2523 var dev = this.getPhysdev();
2524 var old_devs = [ ];
2525 var changed = false;
2526
2527 if (dev && dev.isBridge())
2528 old_devs = this.getSubdevices();
2529 else if (dev)
2530 old_devs = [ dev ];
2531
2532 if (old_devs.length != devs.length)
2533 changed = true;
2534 else
2535 for (var i = 0; i < old_devs.length; i++)
2536 {
2537 var dev = devs[i];
2538
2539 if (dev instanceof L.NetworkModel.Device)
2540 dev = dev.name();
2541
2542 if (!dev || old_devs[i].name() != dev)
2543 {
2544 changed = true;
2545 break;
2546 }
2547 }
2548
2549 if (changed)
2550 {
2551 for (var i = 0; i < old_devs.length; i++)
2552 old_devs[i].removeFromInterface(this);
2553
2554 for (var i = 0; i < devs.length; i++)
2555 {
2556 var dev = devs[i];
2557
2558 if (!(dev instanceof L.NetworkModel.Device))
2559 dev = L.NetworkModel.getDevice(dev);
2560
2561 if (dev)
2562 dev.attachToInterface(this);
2563 }
2564 }
2565 },
2566
2567 changeProtocol: function(proto)
2568 {
2569 var pr = L.NetworkModel._protos[proto];
2570
2571 if (!pr)
2572 return;
2573
2574 for (var opt in (this.get() || { }))
2575 {
2576 switch (opt)
2577 {
2578 case 'type':
2579 case 'ifname':
2580 case 'macaddr':
2581 if (pr.virtual)
2582 this.set(opt, undefined);
2583 break;
2584
2585 case 'auto':
2586 case 'mtu':
2587 break;
2588
2589 case 'proto':
2590 this.set(opt, pr.protocol);
2591 break;
2592
2593 default:
2594 this.set(opt, undefined);
2595 break;
2596 }
2597 }
2598 },
2599
2600 createForm: function(mapwidget)
2601 {
2602 var self = this;
2603 var proto = self.getProtocol();
2604 var device = self.getDevice();
2605
2606 if (!mapwidget)
2607 mapwidget = L.cbi.Map;
2608
2609 var map = new mapwidget('network', {
2610 caption: L.tr('Configure "%s"').format(self.name())
2611 });
2612
2613 var section = map.section(L.cbi.SingleSection, self.name(), {
2614 anonymous: true
2615 });
2616
2617 section.tab({
2618 id: 'general',
2619 caption: L.tr('General Settings')
2620 });
2621
2622 section.tab({
2623 id: 'advanced',
2624 caption: L.tr('Advanced Settings')
2625 });
2626
2627 section.tab({
2628 id: 'ipv6',
2629 caption: L.tr('IPv6')
2630 });
2631
2632 section.tab({
2633 id: 'physical',
2634 caption: L.tr('Physical Settings')
2635 });
2636
2637
2638 section.taboption('general', L.cbi.CheckboxValue, 'auto', {
2639 caption: L.tr('Start on boot'),
2640 optional: true,
2641 initial: true
2642 });
2643
2644 var pr = section.taboption('general', L.cbi.ListValue, 'proto', {
2645 caption: L.tr('Protocol')
2646 });
2647
2648 pr.ucivalue = function(sid) {
2649 return self.get('proto') || 'none';
2650 };
2651
2652 var ok = section.taboption('general', L.cbi.ButtonValue, '_confirm', {
2653 caption: L.tr('Really switch?'),
2654 description: L.tr('Changing the protocol will clear all configuration for this interface!'),
2655 text: L.tr('Change protocol')
2656 });
2657
2658 ok.on('click', function(ev) {
2659 self.changeProtocol(pr.formvalue(ev.data.sid));
2660 self.createForm(mapwidget).show();
2661 });
2662
2663 var protos = L.NetworkModel.getProtocols();
2664
2665 for (var i = 0; i < protos.length; i++)
2666 pr.value(protos[i].name, protos[i].description);
2667
2668 proto.populateForm(section, self);
2669
2670 if (!proto.virtual)
2671 {
2672 var br = section.taboption('physical', L.cbi.CheckboxValue, 'type', {
2673 caption: L.tr('Network bridge'),
2674 description: L.tr('Merges multiple devices into one logical bridge'),
2675 optional: true,
2676 enabled: 'bridge',
2677 disabled: '',
2678 initial: ''
2679 });
2680
2681 section.taboption('physical', L.cbi.DeviceList, '__iface_multi', {
2682 caption: L.tr('Devices'),
2683 multiple: true,
2684 bridges: false
2685 }).depends('type', true);
2686
2687 section.taboption('physical', L.cbi.DeviceList, '__iface_single', {
2688 caption: L.tr('Device'),
2689 multiple: false,
2690 bridges: true
2691 }).depends('type', false);
2692
2693 var mac = section.taboption('physical', L.cbi.InputValue, 'macaddr', {
2694 caption: L.tr('Override MAC'),
2695 optional: true,
2696 placeholder: device ? device.getMACAddress() : undefined,
2697 datatype: 'macaddr'
2698 })
2699
2700 mac.ucivalue = function(sid)
2701 {
2702 if (device)
2703 return device.get('macaddr');
2704
2705 return this.callSuper('ucivalue', sid);
2706 };
2707
2708 mac.save = function(sid)
2709 {
2710 if (!this.changed(sid))
2711 return false;
2712
2713 if (device)
2714 device.set('macaddr', this.formvalue(sid));
2715 else
2716 this.callSuper('set', sid);
2717
2718 return true;
2719 };
2720 }
2721
2722 section.taboption('physical', L.cbi.InputValue, 'mtu', {
2723 caption: L.tr('Override MTU'),
2724 optional: true,
2725 placeholder: device ? device.getMTU() : undefined,
2726 datatype: 'range(1, 9000)'
2727 });
2728
2729 section.taboption('physical', L.cbi.InputValue, 'metric', {
2730 caption: L.tr('Override Metric'),
2731 optional: true,
2732 placeholder: 0,
2733 datatype: 'uinteger'
2734 });
2735
2736 for (var field in section.fields)
2737 {
2738 switch (field)
2739 {
2740 case 'proto':
2741 break;
2742
2743 case '_confirm':
2744 for (var i = 0; i < protos.length; i++)
2745 if (protos[i].name != (this.get('proto') || 'none'))
2746 section.fields[field].depends('proto', protos[i].name);
2747 break;
2748
2749 default:
2750 section.fields[field].depends('proto', this.get('proto') || 'none', true);
2751 break;
2752 }
2753 }
2754
2755 return map;
2756 }
2757 });
2758
2759 this.NetworkModel.Protocol = this.NetworkModel.Interface.extend({
2760 description: '__unknown__',
2761 tunnel: false,
2762 virtual: false,
2763
2764 populateForm: function(section, iface)
2765 {
2766
2767 }
2768 });
2769
2770 this.system = {
2771 getSystemInfo: L.rpc.declare({
2772 object: 'system',
2773 method: 'info',
2774 expect: { '': { } }
2775 }),
2776
2777 getBoardInfo: L.rpc.declare({
2778 object: 'system',
2779 method: 'board',
2780 expect: { '': { } }
2781 }),
2782
2783 getDiskInfo: L.rpc.declare({
2784 object: 'luci2.system',
2785 method: 'diskfree',
2786 expect: { '': { } }
2787 }),
2788
2789 getInfo: function(cb)
2790 {
2791 L.rpc.batch();
2792
2793 this.getSystemInfo();
2794 this.getBoardInfo();
2795 this.getDiskInfo();
2796
2797 return L.rpc.flush().then(function(info) {
2798 var rv = { };
2799
2800 $.extend(rv, info[0]);
2801 $.extend(rv, info[1]);
2802 $.extend(rv, info[2]);
2803
2804 return rv;
2805 });
2806 },
2807
2808
2809 initList: L.rpc.declare({
2810 object: 'luci2.system',
2811 method: 'init_list',
2812 expect: { initscripts: [ ] },
2813 filter: function(data) {
2814 data.sort(function(a, b) { return (a.start || 0) - (b.start || 0) });
2815 return data;
2816 }
2817 }),
2818
2819 initEnabled: function(init, cb)
2820 {
2821 return this.initList().then(function(list) {
2822 for (var i = 0; i < list.length; i++)
2823 if (list[i].name == init)
2824 return !!list[i].enabled;
2825
2826 return false;
2827 });
2828 },
2829
2830 initRun: L.rpc.declare({
2831 object: 'luci2.system',
2832 method: 'init_action',
2833 params: [ 'name', 'action' ],
2834 filter: function(data) {
2835 return (data == 0);
2836 }
2837 }),
2838
2839 initStart: function(init, cb) { return L.system.initRun(init, 'start', cb) },
2840 initStop: function(init, cb) { return L.system.initRun(init, 'stop', cb) },
2841 initRestart: function(init, cb) { return L.system.initRun(init, 'restart', cb) },
2842 initReload: function(init, cb) { return L.system.initRun(init, 'reload', cb) },
2843 initEnable: function(init, cb) { return L.system.initRun(init, 'enable', cb) },
2844 initDisable: function(init, cb) { return L.system.initRun(init, 'disable', cb) },
2845
2846
2847 performReboot: L.rpc.declare({
2848 object: 'luci2.system',
2849 method: 'reboot'
2850 })
2851 };
2852
2853 this.session = {
2854
2855 login: L.rpc.declare({
2856 object: 'session',
2857 method: 'login',
2858 params: [ 'username', 'password' ],
2859 expect: { '': { } }
2860 }),
2861
2862 access: L.rpc.declare({
2863 object: 'session',
2864 method: 'access',
2865 params: [ 'scope', 'object', 'function' ],
2866 expect: { access: false }
2867 }),
2868
2869 isAlive: function()
2870 {
2871 return L.session.access('ubus', 'session', 'access');
2872 },
2873
2874 startHeartbeat: function()
2875 {
2876 this._hearbeatInterval = window.setInterval(function() {
2877 L.session.isAlive().then(function(alive) {
2878 if (!alive)
2879 {
2880 L.session.stopHeartbeat();
2881 L.ui.login(true);
2882 }
2883
2884 });
2885 }, L.globals.timeout * 2);
2886 },
2887
2888 stopHeartbeat: function()
2889 {
2890 if (typeof(this._hearbeatInterval) != 'undefined')
2891 {
2892 window.clearInterval(this._hearbeatInterval);
2893 delete this._hearbeatInterval;
2894 }
2895 },
2896
2897
2898 _acls: { },
2899
2900 _fetch_acls: L.rpc.declare({
2901 object: 'session',
2902 method: 'access',
2903 expect: { '': { } }
2904 }),
2905
2906 _fetch_acls_cb: function(acls)
2907 {
2908 L.session._acls = acls;
2909 },
2910
2911 updateACLs: function()
2912 {
2913 return L.session._fetch_acls()
2914 .then(L.session._fetch_acls_cb);
2915 },
2916
2917 hasACL: function(scope, object, func)
2918 {
2919 var acls = L.session._acls;
2920
2921 if (typeof(func) == 'undefined')
2922 return (acls && acls[scope] && acls[scope][object]);
2923
2924 if (acls && acls[scope] && acls[scope][object])
2925 for (var i = 0; i < acls[scope][object].length; i++)
2926 if (acls[scope][object][i] == func)
2927 return true;
2928
2929 return false;
2930 }
2931 };
2932
2933 this.ui = {
2934
2935 saveScrollTop: function()
2936 {
2937 this._scroll_top = $(document).scrollTop();
2938 },
2939
2940 restoreScrollTop: function()
2941 {
2942 if (typeof(this._scroll_top) == 'undefined')
2943 return;
2944
2945 $(document).scrollTop(this._scroll_top);
2946
2947 delete this._scroll_top;
2948 },
2949
2950 loading: function(enable)
2951 {
2952 var win = $(window);
2953 var body = $('body');
2954
2955 var state = L.ui._loading || (L.ui._loading = {
2956 modal: $('<div />')
2957 .css('z-index', 2000)
2958 .addClass('modal fade')
2959 .append($('<div />')
2960 .addClass('modal-dialog')
2961 .append($('<div />')
2962 .addClass('modal-content luci2-modal-loader')
2963 .append($('<div />')
2964 .addClass('modal-body')
2965 .text(L.tr('Loading data…')))))
2966 .appendTo(body)
2967 .modal({
2968 backdrop: 'static',
2969 keyboard: false
2970 })
2971 });
2972
2973 state.modal.modal(enable ? 'show' : 'hide');
2974 },
2975
2976 dialog: function(title, content, options)
2977 {
2978 var win = $(window);
2979 var body = $('body');
2980
2981 var state = L.ui._dialog || (L.ui._dialog = {
2982 dialog: $('<div />')
2983 .addClass('modal fade')
2984 .append($('<div />')
2985 .addClass('modal-dialog')
2986 .append($('<div />')
2987 .addClass('modal-content')
2988 .append($('<div />')
2989 .addClass('modal-header')
2990 .append('<h4 />')
2991 .addClass('modal-title'))
2992 .append($('<div />')
2993 .addClass('modal-body'))
2994 .append($('<div />')
2995 .addClass('modal-footer')
2996 .append(L.ui.button(L.tr('Close'), 'primary')
2997 .click(function() {
2998 $(this).parents('div.modal').modal('hide');
2999 })))))
3000 .appendTo(body)
3001 });
3002
3003 if (typeof(options) != 'object')
3004 options = { };
3005
3006 if (title === false)
3007 {
3008 state.dialog.modal('hide');
3009
3010 return state.dialog;
3011 }
3012
3013 var cnt = state.dialog.children().children().children('div.modal-body');
3014 var ftr = state.dialog.children().children().children('div.modal-footer');
3015
3016 ftr.empty().show();
3017
3018 if (options.style == 'confirm')
3019 {
3020 ftr.append(L.ui.button(L.tr('Ok'), 'primary')
3021 .click(options.confirm || function() { L.ui.dialog(false) }));
3022
3023 ftr.append(L.ui.button(L.tr('Cancel'), 'default')
3024 .click(options.cancel || function() { L.ui.dialog(false) }));
3025 }
3026 else if (options.style == 'close')
3027 {
3028 ftr.append(L.ui.button(L.tr('Close'), 'primary')
3029 .click(options.close || function() { L.ui.dialog(false) }));
3030 }
3031 else if (options.style == 'wait')
3032 {
3033 ftr.append(L.ui.button(L.tr('Close'), 'primary')
3034 .attr('disabled', true));
3035 }
3036
3037 if (options.wide)
3038 {
3039 state.dialog.addClass('wide');
3040 }
3041 else
3042 {
3043 state.dialog.removeClass('wide');
3044 }
3045
3046 state.dialog.find('h4:first').text(title);
3047 state.dialog.modal('show');
3048
3049 cnt.empty().append(content);
3050
3051 return state.dialog;
3052 },
3053
3054 upload: function(title, content, options)
3055 {
3056 var state = L.ui._upload || (L.ui._upload = {
3057 form: $('<form />')
3058 .attr('method', 'post')
3059 .attr('action', '/cgi-bin/luci-upload')
3060 .attr('enctype', 'multipart/form-data')
3061 .attr('target', 'cbi-fileupload-frame')
3062 .append($('<p />'))
3063 .append($('<input />')
3064 .attr('type', 'hidden')
3065 .attr('name', 'sessionid'))
3066 .append($('<input />')
3067 .attr('type', 'hidden')
3068 .attr('name', 'filename'))
3069 .append($('<input />')
3070 .attr('type', 'file')
3071 .attr('name', 'filedata')
3072 .addClass('cbi-input-file'))
3073 .append($('<div />')
3074 .css('width', '100%')
3075 .addClass('progress progress-striped active')
3076 .append($('<div />')
3077 .addClass('progress-bar')
3078 .css('width', '100%')))
3079 .append($('<iframe />')
3080 .addClass('pull-right')
3081 .attr('name', 'cbi-fileupload-frame')
3082 .css('width', '1px')
3083 .css('height', '1px')
3084 .css('visibility', 'hidden')),
3085
3086 finish_cb: function(ev) {
3087 $(this).off('load');
3088
3089 var body = (this.contentDocument || this.contentWindow.document).body;
3090 if (body.firstChild.tagName.toLowerCase() == 'pre')
3091 body = body.firstChild;
3092
3093 var json;
3094 try {
3095 json = $.parseJSON(body.innerHTML);
3096 } catch(e) {
3097 json = {
3098 message: L.tr('Invalid server response received'),
3099 error: [ -1, L.tr('Invalid data') ]
3100 };
3101 };
3102
3103 if (json.error)
3104 {
3105 L.ui.dialog(L.tr('File upload'), [
3106 $('<p />').text(L.tr('The file upload failed with the server response below:')),
3107 $('<pre />').addClass('alert-message').text(json.message || json.error[1]),
3108 $('<p />').text(L.tr('In case of network problems try uploading the file again.'))
3109 ], { style: 'close' });
3110 }
3111 else if (typeof(state.success_cb) == 'function')
3112 {
3113 state.success_cb(json);
3114 }
3115 },
3116
3117 confirm_cb: function() {
3118 var f = state.form.find('.cbi-input-file');
3119 var b = state.form.find('.progress');
3120 var p = state.form.find('p');
3121
3122 if (!f.val())
3123 return;
3124
3125 state.form.find('iframe').on('load', state.finish_cb);
3126 state.form.submit();
3127
3128 f.hide();
3129 b.show();
3130 p.text(L.tr('File upload in progress …'));
3131
3132 state.form.parent().parent().find('button').prop('disabled', true);
3133 }
3134 });
3135
3136 state.form.find('.progress').hide();
3137 state.form.find('.cbi-input-file').val('').show();
3138 state.form.find('p').text(content || L.tr('Select the file to upload and press "%s" to proceed.').format(L.tr('Ok')));
3139
3140 state.form.find('[name=sessionid]').val(L.globals.sid);
3141 state.form.find('[name=filename]').val(options.filename);
3142
3143 state.success_cb = options.success;
3144
3145 L.ui.dialog(title || L.tr('File upload'), state.form, {
3146 style: 'confirm',
3147 confirm: state.confirm_cb
3148 });
3149 },
3150
3151 reconnect: function()
3152 {
3153 var protocols = (location.protocol == 'https:') ? [ 'http', 'https' ] : [ 'http' ];
3154 var ports = (location.protocol == 'https:') ? [ 80, location.port || 443 ] : [ location.port || 80 ];
3155 var address = location.hostname.match(/^[A-Fa-f0-9]*:[A-Fa-f0-9:]+$/) ? '[' + location.hostname + ']' : location.hostname;
3156 var images = $();
3157 var interval, timeout;
3158
3159 L.ui.dialog(
3160 L.tr('Waiting for device'), [
3161 $('<p />').text(L.tr('Please stand by while the device is reconfiguring …')),
3162 $('<div />')
3163 .css('width', '100%')
3164 .addClass('progressbar')
3165 .addClass('intermediate')
3166 .append($('<div />')
3167 .css('width', '100%'))
3168 ], { style: 'wait' }
3169 );
3170
3171 for (var i = 0; i < protocols.length; i++)
3172 images = images.add($('<img />').attr('url', protocols[i] + '://' + address + ':' + ports[i]));
3173
3174 //L.network.getNetworkStatus(function(s) {
3175 // for (var i = 0; i < protocols.length; i++)
3176 // {
3177 // for (var j = 0; j < s.length; j++)
3178 // {
3179 // for (var k = 0; k < s[j]['ipv4-address'].length; k++)
3180 // images = images.add($('<img />').attr('url', protocols[i] + '://' + s[j]['ipv4-address'][k].address + ':' + ports[i]));
3181 //
3182 // for (var l = 0; l < s[j]['ipv6-address'].length; l++)
3183 // images = images.add($('<img />').attr('url', protocols[i] + '://[' + s[j]['ipv6-address'][l].address + ']:' + ports[i]));
3184 // }
3185 // }
3186 //}).then(function() {
3187 images.on('load', function() {
3188 var url = this.getAttribute('url');
3189 L.session.isAlive().then(function(access) {
3190 if (access)
3191 {
3192 window.clearTimeout(timeout);
3193 window.clearInterval(interval);
3194 L.ui.dialog(false);
3195 images = null;
3196 }
3197 else
3198 {
3199 location.href = url;
3200 }
3201 });
3202 });
3203
3204 interval = window.setInterval(function() {
3205 images.each(function() {
3206 this.setAttribute('src', this.getAttribute('url') + L.globals.resource + '/icons/loading.gif?r=' + Math.random());
3207 });
3208 }, 5000);
3209
3210 timeout = window.setTimeout(function() {
3211 window.clearInterval(interval);
3212 images.off('load');
3213
3214 L.ui.dialog(
3215 L.tr('Device not responding'),
3216 L.tr('The device was not responding within 180 seconds, you might need to manually reconnect your computer or use SSH to regain access.'),
3217 { style: 'close' }
3218 );
3219 }, 180000);
3220 //});
3221 },
3222
3223 login: function(invalid)
3224 {
3225 var state = L.ui._login || (L.ui._login = {
3226 form: $('<form />')
3227 .attr('target', '')
3228 .attr('method', 'post')
3229 .append($('<p />')
3230 .addClass('alert-message')
3231 .text(L.tr('Wrong username or password given!')))
3232 .append($('<p />')
3233 .append($('<label />')
3234 .text(L.tr('Username'))
3235 .append($('<br />'))
3236 .append($('<input />')
3237 .attr('type', 'text')
3238 .attr('name', 'username')
3239 .attr('value', 'root')
3240 .addClass('form-control')
3241 .keypress(function(ev) {
3242 if (ev.which == 10 || ev.which == 13)
3243 state.confirm_cb();
3244 }))))
3245 .append($('<p />')
3246 .append($('<label />')
3247 .text(L.tr('Password'))
3248 .append($('<br />'))
3249 .append($('<input />')
3250 .attr('type', 'password')
3251 .attr('name', 'password')
3252 .addClass('form-control')
3253 .keypress(function(ev) {
3254 if (ev.which == 10 || ev.which == 13)
3255 state.confirm_cb();
3256 }))))
3257 .append($('<p />')
3258 .text(L.tr('Enter your username and password above, then click "%s" to proceed.').format(L.tr('Ok')))),
3259
3260 response_cb: function(response) {
3261 if (!response.ubus_rpc_session)
3262 {
3263 L.ui.login(true);
3264 }
3265 else
3266 {
3267 L.globals.sid = response.ubus_rpc_session;
3268 L.setHash('id', L.globals.sid);
3269 L.session.startHeartbeat();
3270 L.ui.dialog(false);
3271 state.deferred.resolve();
3272 }
3273 },
3274
3275 confirm_cb: function() {
3276 var u = state.form.find('[name=username]').val();
3277 var p = state.form.find('[name=password]').val();
3278
3279 if (!u)
3280 return;
3281
3282 L.ui.dialog(
3283 L.tr('Logging in'), [
3284 $('<p />').text(L.tr('Log in in progress …')),
3285 $('<div />')
3286 .css('width', '100%')
3287 .addClass('progressbar')
3288 .addClass('intermediate')
3289 .append($('<div />')
3290 .css('width', '100%'))
3291 ], { style: 'wait' }
3292 );
3293
3294 L.globals.sid = '00000000000000000000000000000000';
3295 L.session.login(u, p).then(state.response_cb);
3296 }
3297 });
3298
3299 if (!state.deferred || state.deferred.state() != 'pending')
3300 state.deferred = $.Deferred();
3301
3302 /* try to find sid from hash */
3303 var sid = L.getHash('id');
3304 if (sid && sid.match(/^[a-f0-9]{32}$/))
3305 {
3306 L.globals.sid = sid;
3307 L.session.isAlive().then(function(access) {
3308 if (access)
3309 {
3310 L.session.startHeartbeat();
3311 state.deferred.resolve();
3312 }
3313 else
3314 {
3315 L.setHash('id', undefined);
3316 L.ui.login();
3317 }
3318 });
3319
3320 return state.deferred;
3321 }
3322
3323 if (invalid)
3324 state.form.find('.alert-message').show();
3325 else
3326 state.form.find('.alert-message').hide();
3327
3328 L.ui.dialog(L.tr('Authorization Required'), state.form, {
3329 style: 'confirm',
3330 confirm: state.confirm_cb
3331 });
3332
3333 state.form.find('[name=password]').focus();
3334
3335 return state.deferred;
3336 },
3337
3338 cryptPassword: L.rpc.declare({
3339 object: 'luci2.ui',
3340 method: 'crypt',
3341 params: [ 'data' ],
3342 expect: { crypt: '' }
3343 }),
3344
3345
3346 _acl_merge_scope: function(acl_scope, scope)
3347 {
3348 if ($.isArray(scope))
3349 {
3350 for (var i = 0; i < scope.length; i++)
3351 acl_scope[scope[i]] = true;
3352 }
3353 else if ($.isPlainObject(scope))
3354 {
3355 for (var object_name in scope)
3356 {
3357 if (!$.isArray(scope[object_name]))
3358 continue;
3359
3360 var acl_object = acl_scope[object_name] || (acl_scope[object_name] = { });
3361
3362 for (var i = 0; i < scope[object_name].length; i++)
3363 acl_object[scope[object_name][i]] = true;
3364 }
3365 }
3366 },
3367
3368 _acl_merge_permission: function(acl_perm, perm)
3369 {
3370 if ($.isPlainObject(perm))
3371 {
3372 for (var scope_name in perm)
3373 {
3374 var acl_scope = acl_perm[scope_name] || (acl_perm[scope_name] = { });
3375 this._acl_merge_scope(acl_scope, perm[scope_name]);
3376 }
3377 }
3378 },
3379
3380 _acl_merge_group: function(acl_group, group)
3381 {
3382 if ($.isPlainObject(group))
3383 {
3384 if (!acl_group.description)
3385 acl_group.description = group.description;
3386
3387 if (group.read)
3388 {
3389 var acl_perm = acl_group.read || (acl_group.read = { });
3390 this._acl_merge_permission(acl_perm, group.read);
3391 }
3392
3393 if (group.write)
3394 {
3395 var acl_perm = acl_group.write || (acl_group.write = { });
3396 this._acl_merge_permission(acl_perm, group.write);
3397 }
3398 }
3399 },
3400
3401 _acl_merge_tree: function(acl_tree, tree)
3402 {
3403 if ($.isPlainObject(tree))
3404 {
3405 for (var group_name in tree)
3406 {
3407 var acl_group = acl_tree[group_name] || (acl_tree[group_name] = { });
3408 this._acl_merge_group(acl_group, tree[group_name]);
3409 }
3410 }
3411 },
3412
3413 listAvailableACLs: L.rpc.declare({
3414 object: 'luci2.ui',
3415 method: 'acls',
3416 expect: { acls: [ ] },
3417 filter: function(trees) {
3418 var acl_tree = { };
3419 for (var i = 0; i < trees.length; i++)
3420 L.ui._acl_merge_tree(acl_tree, trees[i]);
3421 return acl_tree;
3422 }
3423 }),
3424
3425 _render_change_indicator: function()
3426 {
3427 return $('<ul />')
3428 .addClass('nav navbar-nav navbar-right')
3429 .append($('<li />')
3430 .append($('<a />')
3431 .attr('id', 'changes')
3432 .attr('href', '#')
3433 .append($('<span />')
3434 .addClass('label label-info'))));
3435 },
3436
3437 renderMainMenu: L.rpc.declare({
3438 object: 'luci2.ui',
3439 method: 'menu',
3440 expect: { menu: { } },
3441 filter: function(entries) {
3442 L.globals.mainMenu = new L.ui.menu();
3443 L.globals.mainMenu.entries(entries);
3444
3445 $('#mainmenu')
3446 .empty()
3447 .append(L.globals.mainMenu.render(0, 1))
3448 .append(L.ui._render_change_indicator());
3449 }
3450 }),
3451
3452 renderViewMenu: function()
3453 {
3454 $('#viewmenu')
3455 .empty()
3456 .append(L.globals.mainMenu.render(2, 900));
3457 },
3458
3459 renderView: function()
3460 {
3461 var node = arguments[0];
3462 var name = node.view.split(/\//).join('.');
3463 var cname = L.toClassName(name);
3464 var views = L.views || (L.views = { });
3465 var args = [ ];
3466
3467 for (var i = 1; i < arguments.length; i++)
3468 args.push(arguments[i]);
3469
3470 if (L.globals.currentView)
3471 L.globals.currentView.finish();
3472
3473 L.ui.renderViewMenu();
3474 L.setHash('view', node.view);
3475
3476 if (views[cname] instanceof L.ui.view)
3477 {
3478 L.globals.currentView = views[cname];
3479 return views[cname].render.apply(views[cname], args);
3480 }
3481
3482 var url = L.globals.resource + '/view/' + name + '.js';
3483
3484 return $.ajax(url, {
3485 method: 'GET',
3486 cache: true,
3487 dataType: 'text'
3488 }).then(function(data) {
3489 try {
3490 var viewConstructorSource = (
3491 '(function(L, $) { ' +
3492 'return %s' +
3493 '})(L, $);\n\n' +
3494 '//@ sourceURL=%s'
3495 ).format(data, url);
3496
3497 var viewConstructor = eval(viewConstructorSource);
3498
3499 views[cname] = new viewConstructor({
3500 name: name,
3501 acls: node.write || { }
3502 });
3503
3504 L.globals.currentView = views[cname];
3505 return views[cname].render.apply(views[cname], args);
3506 }
3507 catch(e) {
3508 alert('Unable to instantiate view "%s": %s'.format(url, e));
3509 };
3510
3511 return $.Deferred().resolve();
3512 });
3513 },
3514
3515 changeView: function()
3516 {
3517 var name = L.getHash('view');
3518 var node = L.globals.defaultNode;
3519
3520 if (name && L.globals.mainMenu)
3521 node = L.globals.mainMenu.getNode(name);
3522
3523 if (node)
3524 {
3525 L.ui.loading(true);
3526 L.ui.renderView(node).then(function() {
3527 L.ui.loading(false);
3528 });
3529 }
3530 },
3531
3532 updateHostname: function()
3533 {
3534 return L.system.getBoardInfo().then(function(info) {
3535 if (info.hostname)
3536 $('#hostname').text(info.hostname);
3537 });
3538 },
3539
3540 updateChanges: function()
3541 {
3542 return L.uci.changes().then(function(changes) {
3543 var n = 0;
3544 var html = '';
3545
3546 for (var config in changes)
3547 {
3548 var log = [ ];
3549
3550 for (var i = 0; i < changes[config].length; i++)
3551 {
3552 var c = changes[config][i];
3553
3554 switch (c[0])
3555 {
3556 case 'order':
3557 log.push('uci reorder %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2]));
3558 break;
3559
3560 case 'remove':
3561 if (c.length < 3)
3562 log.push('uci delete %s.<del>%s</del>'.format(config, c[1]));
3563 else
3564 log.push('uci delete %s.%s.<del>%s</del>'.format(config, c[1], c[2]));
3565 break;
3566
3567 case 'rename':
3568 if (c.length < 4)
3569 log.push('uci rename %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3]));
3570 else
3571 log.push('uci rename %s.%s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3], c[4]));
3572 break;
3573
3574 case 'add':
3575 log.push('uci add %s <ins>%s</ins> (= <ins><strong>%s</strong></ins>)'.format(config, c[2], c[1]));
3576 break;
3577
3578 case 'list-add':
3579 log.push('uci add_list %s.%s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3], c[4]));
3580 break;
3581
3582 case 'list-del':
3583 log.push('uci del_list %s.%s.<del>%s=<strong>%s</strong></del>'.format(config, c[1], c[2], c[3], c[4]));
3584 break;
3585
3586 case 'set':
3587 if (c.length < 4)
3588 log.push('uci set %s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2]));
3589 else
3590 log.push('uci set %s.%s.<ins>%s=<strong>%s</strong></ins>'.format(config, c[1], c[2], c[3], c[4]));
3591 break;
3592 }
3593 }
3594
3595 html += '<code>/etc/config/%s</code><pre class="uci-changes">%s</pre>'.format(config, log.join('\n'));
3596 n += changes[config].length;
3597 }
3598
3599 if (n > 0)
3600 $('#changes')
3601 .click(function(ev) {
3602 L.ui.dialog(L.tr('Staged configuration changes'), html, {
3603 style: 'confirm',
3604 confirm: function() {
3605 L.uci.apply().then(
3606 function(code) { alert('Success with code ' + code); },
3607 function(code) { alert('Error with code ' + code); }
3608 );
3609 }
3610 });
3611 ev.preventDefault();
3612 })
3613 .children('span')
3614 .show()
3615 .text(L.trcp('Pending configuration changes', '1 change', '%d changes', n).format(n));
3616 else
3617 $('#changes').children('span').hide();
3618 });
3619 },
3620
3621 init: function()
3622 {
3623 L.ui.loading(true);
3624
3625 $.when(
3626 L.session.updateACLs(),
3627 L.ui.updateHostname(),
3628 L.ui.updateChanges(),
3629 L.ui.renderMainMenu(),
3630 L.NetworkModel.init()
3631 ).then(function() {
3632 L.ui.renderView(L.globals.defaultNode).then(function() {
3633 L.ui.loading(false);
3634 });
3635
3636 $(window).on('hashchange', function() {
3637 L.ui.changeView();
3638 });
3639 });
3640 },
3641
3642 button: function(label, style, title)
3643 {
3644 style = style || 'default';
3645
3646 return $('<button />')
3647 .attr('type', 'button')
3648 .attr('title', title ? title : '')
3649 .addClass('btn btn-' + style)
3650 .text(label);
3651 }
3652 };
3653
3654 this.ui.AbstractWidget = Class.extend({
3655 i18n: function(text) {
3656 return text;
3657 },
3658
3659 label: function() {
3660 var key = arguments[0];
3661 var args = [ ];
3662
3663 for (var i = 1; i < arguments.length; i++)
3664 args.push(arguments[i]);
3665
3666 switch (typeof(this.options[key]))
3667 {
3668 case 'undefined':
3669 return '';
3670
3671 case 'function':
3672 return this.options[key].apply(this, args);
3673
3674 default:
3675 return ''.format.apply('' + this.options[key], args);
3676 }
3677 },
3678
3679 toString: function() {
3680 return $('<div />').append(this.render()).html();
3681 },
3682
3683 insertInto: function(id) {
3684 return $(id).empty().append(this.render());
3685 },
3686
3687 appendTo: function(id) {
3688 return $(id).append(this.render());
3689 }
3690 });
3691
3692 this.ui.view = this.ui.AbstractWidget.extend({
3693 _fetch_template: function()
3694 {
3695 return $.ajax(L.globals.resource + '/template/' + this.options.name + '.htm', {
3696 method: 'GET',
3697 cache: true,
3698 dataType: 'text',
3699 success: function(data) {
3700 data = data.replace(/<%([#:=])?(.+?)%>/g, function(match, p1, p2) {
3701 p2 = p2.replace(/^\s+/, '').replace(/\s+$/, '');
3702 switch (p1)
3703 {
3704 case '#':
3705 return '';
3706
3707 case ':':
3708 return L.tr(p2);
3709
3710 case '=':
3711 return L.globals[p2] || '';
3712
3713 default:
3714 return '(?' + match + ')';
3715 }
3716 });
3717
3718 $('#maincontent').append(data);
3719 }
3720 });
3721 },
3722
3723 execute: function()
3724 {
3725 throw "Not implemented";
3726 },
3727
3728 render: function()
3729 {
3730 var container = $('#maincontent');
3731
3732 container.empty();
3733
3734 if (this.title)
3735 container.append($('<h2 />').append(this.title));
3736
3737 if (this.description)
3738 container.append($('<p />').append(this.description));
3739
3740 var self = this;
3741 var args = [ ];
3742
3743 for (var i = 0; i < arguments.length; i++)
3744 args.push(arguments[i]);
3745
3746 return this._fetch_template().then(function() {
3747 return L.deferrable(self.execute.apply(self, args));
3748 });
3749 },
3750
3751 repeat: function(func, interval)
3752 {
3753 var self = this;
3754
3755 if (!self._timeouts)
3756 self._timeouts = [ ];
3757
3758 var index = self._timeouts.length;
3759
3760 if (typeof(interval) != 'number')
3761 interval = 5000;
3762
3763 var setTimer, runTimer;
3764
3765 setTimer = function() {
3766 if (self._timeouts)
3767 self._timeouts[index] = window.setTimeout(runTimer, interval);
3768 };
3769
3770 runTimer = function() {
3771 L.deferrable(func.call(self)).then(setTimer, setTimer);
3772 };
3773
3774 runTimer();
3775 },
3776
3777 finish: function()
3778 {
3779 if ($.isArray(this._timeouts))
3780 {
3781 for (var i = 0; i < this._timeouts.length; i++)
3782 window.clearTimeout(this._timeouts[i]);
3783
3784 delete this._timeouts;
3785 }
3786 }
3787 });
3788
3789 this.ui.menu = this.ui.AbstractWidget.extend({
3790 init: function() {
3791 this._nodes = { };
3792 },
3793
3794 entries: function(entries)
3795 {
3796 for (var entry in entries)
3797 {
3798 var path = entry.split(/\//);
3799 var node = this._nodes;
3800
3801 for (i = 0; i < path.length; i++)
3802 {
3803 if (!node.childs)
3804 node.childs = { };
3805
3806 if (!node.childs[path[i]])
3807 node.childs[path[i]] = { };
3808
3809 node = node.childs[path[i]];
3810 }
3811
3812 $.extend(node, entries[entry]);
3813 }
3814 },
3815
3816 _indexcmp: function(a, b)
3817 {
3818 var x = a.index || 0;
3819 var y = b.index || 0;
3820 return (x - y);
3821 },
3822
3823 firstChildView: function(node)
3824 {
3825 if (node.view)
3826 return node;
3827
3828 var nodes = [ ];
3829 for (var child in (node.childs || { }))
3830 nodes.push(node.childs[child]);
3831
3832 nodes.sort(this._indexcmp);
3833
3834 for (var i = 0; i < nodes.length; i++)
3835 {
3836 var child = this.firstChildView(nodes[i]);
3837 if (child)
3838 {
3839 for (var key in child)
3840 if (!node.hasOwnProperty(key) && child.hasOwnProperty(key))
3841 node[key] = child[key];
3842
3843 return node;
3844 }
3845 }
3846
3847 return undefined;
3848 },
3849
3850 _onclick: function(ev)
3851 {
3852 L.setHash('view', ev.data);
3853
3854 ev.preventDefault();
3855 this.blur();
3856 },
3857
3858 _render: function(childs, level, min, max)
3859 {
3860 var nodes = [ ];
3861 for (var node in childs)
3862 {
3863 var child = this.firstChildView(childs[node]);
3864 if (child)
3865 nodes.push(childs[node]);
3866 }
3867
3868 nodes.sort(this._indexcmp);
3869
3870 var list = $('<ul />');
3871
3872 if (level == 0)
3873 list.addClass('nav').addClass('navbar-nav');
3874 else if (level == 1)
3875 list.addClass('dropdown-menu').addClass('navbar-inverse');
3876
3877 for (var i = 0; i < nodes.length; i++)
3878 {
3879 if (!L.globals.defaultNode)
3880 {
3881 var v = L.getHash('view');
3882 if (!v || v == nodes[i].view)
3883 L.globals.defaultNode = nodes[i];
3884 }
3885
3886 var item = $('<li />')
3887 .append($('<a />')
3888 .attr('href', '#')
3889 .text(L.tr(nodes[i].title)))
3890 .appendTo(list);
3891
3892 if (nodes[i].childs && level < max)
3893 {
3894 item.addClass('dropdown');
3895
3896 item.find('a')
3897 .addClass('dropdown-toggle')
3898 .attr('data-toggle', 'dropdown')
3899 .append('<b class="caret"></b>');
3900
3901 item.append(this._render(nodes[i].childs, level + 1));
3902 }
3903 else
3904 {
3905 item.find('a').click(nodes[i].view, this._onclick);
3906 }
3907 }
3908
3909 return list.get(0);
3910 },
3911
3912 render: function(min, max)
3913 {
3914 var top = min ? this.getNode(L.globals.defaultNode.view, min) : this._nodes;
3915 return this._render(top.childs, 0, min, max);
3916 },
3917
3918 getNode: function(path, max)
3919 {
3920 var p = path.split(/\//);
3921 var n = this._nodes;
3922
3923 if (typeof(max) == 'undefined')
3924 max = p.length;
3925
3926 for (var i = 0; i < max; i++)
3927 {
3928 if (!n.childs[p[i]])
3929 return undefined;
3930
3931 n = n.childs[p[i]];
3932 }
3933
3934 return n;
3935 }
3936 });
3937
3938 this.ui.table = this.ui.AbstractWidget.extend({
3939 init: function()
3940 {
3941 this._rows = [ ];
3942 },
3943
3944 row: function(values)
3945 {
3946 if ($.isArray(values))
3947 {
3948 this._rows.push(values);
3949 }
3950 else if ($.isPlainObject(values))
3951 {
3952 var v = [ ];
3953 for (var i = 0; i < this.options.columns.length; i++)
3954 {
3955 var col = this.options.columns[i];
3956
3957 if (typeof col.key == 'string')
3958 v.push(values[col.key]);
3959 else
3960 v.push(null);
3961 }
3962 this._rows.push(v);
3963 }
3964 },
3965
3966 rows: function(rows)
3967 {
3968 for (var i = 0; i < rows.length; i++)
3969 this.row(rows[i]);
3970 },
3971
3972 render: function(id)
3973 {
3974 var fieldset = document.createElement('fieldset');
3975 fieldset.className = 'cbi-section';
3976
3977 if (this.options.caption)
3978 {
3979 var legend = document.createElement('legend');
3980 $(legend).append(this.options.caption);
3981 fieldset.appendChild(legend);
3982 }
3983
3984 var table = document.createElement('table');
3985 table.className = 'table table-condensed table-hover';
3986
3987 var has_caption = false;
3988 var has_description = false;
3989
3990 for (var i = 0; i < this.options.columns.length; i++)
3991 if (this.options.columns[i].caption)
3992 {
3993 has_caption = true;
3994 break;
3995 }
3996 else if (this.options.columns[i].description)
3997 {
3998 has_description = true;
3999 break;
4000 }
4001
4002 if (has_caption)
4003 {
4004 var tr = table.insertRow(-1);
4005 tr.className = 'cbi-section-table-titles';
4006
4007 for (var i = 0; i < this.options.columns.length; i++)
4008 {
4009 var col = this.options.columns[i];
4010 var th = document.createElement('th');
4011 th.className = 'cbi-section-table-cell';
4012
4013 tr.appendChild(th);
4014
4015 if (col.width)
4016 th.style.width = col.width;
4017
4018 if (col.align)
4019 th.style.textAlign = col.align;
4020
4021 if (col.caption)
4022 $(th).append(col.caption);
4023 }
4024 }
4025
4026 if (has_description)
4027 {
4028 var tr = table.insertRow(-1);
4029 tr.className = 'cbi-section-table-descr';
4030
4031 for (var i = 0; i < this.options.columns.length; i++)
4032 {
4033 var col = this.options.columns[i];
4034 var th = document.createElement('th');
4035 th.className = 'cbi-section-table-cell';
4036
4037 tr.appendChild(th);
4038
4039 if (col.width)
4040 th.style.width = col.width;
4041
4042 if (col.align)
4043 th.style.textAlign = col.align;
4044
4045 if (col.description)
4046 $(th).append(col.description);
4047 }
4048 }
4049
4050 if (this._rows.length == 0)
4051 {
4052 if (this.options.placeholder)
4053 {
4054 var tr = table.insertRow(-1);
4055 var td = tr.insertCell(-1);
4056 td.className = 'cbi-section-table-cell';
4057
4058 td.colSpan = this.options.columns.length;
4059 $(td).append(this.options.placeholder);
4060 }
4061 }
4062 else
4063 {
4064 for (var i = 0; i < this._rows.length; i++)
4065 {
4066 var tr = table.insertRow(-1);
4067
4068 for (var j = 0; j < this.options.columns.length; j++)
4069 {
4070 var col = this.options.columns[j];
4071 var td = tr.insertCell(-1);
4072
4073 var val = this._rows[i][j];
4074
4075 if (typeof(val) == 'undefined')
4076 val = col.placeholder;
4077
4078 if (typeof(val) == 'undefined')
4079 val = '';
4080
4081 if (col.width)
4082 td.style.width = col.width;
4083
4084 if (col.align)
4085 td.style.textAlign = col.align;
4086
4087 if (typeof col.format == 'string')
4088 $(td).append(col.format.format(val));
4089 else if (typeof col.format == 'function')
4090 $(td).append(col.format(val, i));
4091 else
4092 $(td).append(val);
4093 }
4094 }
4095 }
4096
4097 this._rows = [ ];
4098 fieldset.appendChild(table);
4099
4100 return fieldset;
4101 }
4102 });
4103
4104 this.ui.progress = this.ui.AbstractWidget.extend({
4105 render: function()
4106 {
4107 var vn = parseInt(this.options.value) || 0;
4108 var mn = parseInt(this.options.max) || 100;
4109 var pc = Math.floor((100 / mn) * vn);
4110
4111 var text;
4112
4113 if (typeof(this.options.format) == 'string')
4114 text = this.options.format.format(this.options.value, this.options.max, pc);
4115 else if (typeof(this.options.format) == 'function')
4116 text = this.options.format(pc);
4117 else
4118 text = '%.2f%%'.format(pc);
4119
4120 return $('<div />')
4121 .addClass('progress')
4122 .append($('<div />')
4123 .addClass('progress-bar')
4124 .addClass('progress-bar-info')
4125 .css('width', pc + '%'))
4126 .append($('<small />')
4127 .text(text));
4128 }
4129 });
4130
4131 this.ui.devicebadge = this.ui.AbstractWidget.extend({
4132 render: function()
4133 {
4134 var l2dev = this.options.l2_device || this.options.device;
4135 var l3dev = this.options.l3_device;
4136 var dev = l3dev || l2dev || '?';
4137
4138 var span = document.createElement('span');
4139 span.className = 'badge';
4140
4141 if (typeof(this.options.signal) == 'number' ||
4142 typeof(this.options.noise) == 'number')
4143 {
4144 var r = 'none';
4145 if (typeof(this.options.signal) != 'undefined' &&
4146 typeof(this.options.noise) != 'undefined')
4147 {
4148 var q = (-1 * (this.options.noise - this.options.signal)) / 5;
4149 if (q < 1)
4150 r = '0';
4151 else if (q < 2)
4152 r = '0-25';
4153 else if (q < 3)
4154 r = '25-50';
4155 else if (q < 4)
4156 r = '50-75';
4157 else
4158 r = '75-100';
4159 }
4160
4161 span.appendChild(document.createElement('img'));
4162 span.lastChild.src = L.globals.resource + '/icons/signal-' + r + '.png';
4163
4164 if (r == 'none')
4165 span.title = L.tr('No signal');
4166 else
4167 span.title = '%s: %d %s / %s: %d %s'.format(
4168 L.tr('Signal'), this.options.signal, L.tr('dBm'),
4169 L.tr('Noise'), this.options.noise, L.tr('dBm')
4170 );
4171 }
4172 else
4173 {
4174 var type = 'ethernet';
4175 var desc = L.tr('Ethernet device');
4176
4177 if (l3dev != l2dev)
4178 {
4179 type = 'tunnel';
4180 desc = L.tr('Tunnel interface');
4181 }
4182 else if (dev.indexOf('br-') == 0)
4183 {
4184 type = 'bridge';
4185 desc = L.tr('Bridge');
4186 }
4187 else if (dev.indexOf('.') > 0)
4188 {
4189 type = 'vlan';
4190 desc = L.tr('VLAN interface');
4191 }
4192 else if (dev.indexOf('wlan') == 0 ||
4193 dev.indexOf('ath') == 0 ||
4194 dev.indexOf('wl') == 0)
4195 {
4196 type = 'wifi';
4197 desc = L.tr('Wireless Network');
4198 }
4199
4200 span.appendChild(document.createElement('img'));
4201 span.lastChild.src = L.globals.resource + '/icons/' + type + (this.options.up ? '' : '_disabled') + '.png';
4202 span.title = desc;
4203 }
4204
4205 $(span).append(' ');
4206 $(span).append(dev);
4207
4208 return span;
4209 }
4210 });
4211
4212 var type = function(f, l)
4213 {
4214 f.message = l;
4215 return f;
4216 };
4217
4218 this.cbi = {
4219 validation: {
4220 i18n: function(msg)
4221 {
4222 L.cbi.validation.message = L.tr(msg);
4223 },
4224
4225 compile: function(code)
4226 {
4227 var pos = 0;
4228 var esc = false;
4229 var depth = 0;
4230 var types = L.cbi.validation.types;
4231 var stack = [ ];
4232
4233 code += ',';
4234
4235 for (var i = 0; i < code.length; i++)
4236 {
4237 if (esc)
4238 {
4239 esc = false;
4240 continue;
4241 }
4242
4243 switch (code.charCodeAt(i))
4244 {
4245 case 92:
4246 esc = true;
4247 break;
4248
4249 case 40:
4250 case 44:
4251 if (depth <= 0)
4252 {
4253 if (pos < i)
4254 {
4255 var label = code.substring(pos, i);
4256 label = label.replace(/\\(.)/g, '$1');
4257 label = label.replace(/^[ \t]+/g, '');
4258 label = label.replace(/[ \t]+$/g, '');
4259
4260 if (label && !isNaN(label))
4261 {
4262 stack.push(parseFloat(label));
4263 }
4264 else if (label.match(/^(['"]).*\1$/))
4265 {
4266 stack.push(label.replace(/^(['"])(.*)\1$/, '$2'));
4267 }
4268 else if (typeof types[label] == 'function')
4269 {
4270 stack.push(types[label]);
4271 stack.push([ ]);
4272 }
4273 else
4274 {
4275 throw "Syntax error, unhandled token '"+label+"'";
4276 }
4277 }
4278 pos = i+1;
4279 }
4280 depth += (code.charCodeAt(i) == 40);
4281 break;
4282
4283 case 41:
4284 if (--depth <= 0)
4285 {
4286 if (typeof stack[stack.length-2] != 'function')
4287 throw "Syntax error, argument list follows non-function";
4288
4289 stack[stack.length-1] =
4290 L.cbi.validation.compile(code.substring(pos, i));
4291
4292 pos = i+1;
4293 }
4294 break;
4295 }
4296 }
4297
4298 return stack;
4299 }
4300 }
4301 };
4302
4303 var validation = this.cbi.validation;
4304
4305 validation.types = {
4306 'integer': function()
4307 {
4308 if (this.match(/^-?[0-9]+$/) != null)
4309 return true;
4310
4311 validation.i18n('Must be a valid integer');
4312 return false;
4313 },
4314
4315 'uinteger': function()
4316 {
4317 if (validation.types['integer'].apply(this) && (this >= 0))
4318 return true;
4319
4320 validation.i18n('Must be a positive integer');
4321 return false;
4322 },
4323
4324 'float': function()
4325 {
4326 if (!isNaN(parseFloat(this)))
4327 return true;
4328
4329 validation.i18n('Must be a valid number');
4330 return false;
4331 },
4332
4333 'ufloat': function()
4334 {
4335 if (validation.types['float'].apply(this) && (this >= 0))
4336 return true;
4337
4338 validation.i18n('Must be a positive number');
4339 return false;
4340 },
4341
4342 'ipaddr': function()
4343 {
4344 if (validation.types['ip4addr'].apply(this) ||
4345 validation.types['ip6addr'].apply(this))
4346 return true;
4347
4348 validation.i18n('Must be a valid IP address');
4349 return false;
4350 },
4351
4352 'ip4addr': function()
4353 {
4354 if (this.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})(\/(\S+))?$/))
4355 {
4356 if ((RegExp.$1 >= 0) && (RegExp.$1 <= 255) &&
4357 (RegExp.$2 >= 0) && (RegExp.$2 <= 255) &&
4358 (RegExp.$3 >= 0) && (RegExp.$3 <= 255) &&
4359 (RegExp.$4 >= 0) && (RegExp.$4 <= 255) &&
4360 ((RegExp.$6.indexOf('.') < 0)
4361 ? ((RegExp.$6 >= 0) && (RegExp.$6 <= 32))
4362 : (validation.types['ip4addr'].apply(RegExp.$6))))
4363 return true;
4364 }
4365
4366 validation.i18n('Must be a valid IPv4 address');
4367 return false;
4368 },
4369
4370 'ip6addr': function()
4371 {
4372 if (this.match(/^([a-fA-F0-9:.]+)(\/(\d+))?$/))
4373 {
4374 if (!RegExp.$2 || ((RegExp.$3 >= 0) && (RegExp.$3 <= 128)))
4375 {
4376 var addr = RegExp.$1;
4377
4378 if (addr == '::')
4379 {
4380 return true;
4381 }
4382
4383 if (addr.indexOf('.') > 0)
4384 {
4385 var off = addr.lastIndexOf(':');
4386
4387 if (!(off && validation.types['ip4addr'].apply(addr.substr(off+1))))
4388 {
4389 validation.i18n('Must be a valid IPv6 address');
4390 return false;
4391 }
4392
4393 addr = addr.substr(0, off) + ':0:0';
4394 }
4395
4396 if (addr.indexOf('::') >= 0)
4397 {
4398 var colons = 0;
4399 var fill = '0';
4400
4401 for (var i = 1; i < (addr.length-1); i++)
4402 if (addr.charAt(i) == ':')
4403 colons++;
4404
4405 if (colons > 7)
4406 {
4407 validation.i18n('Must be a valid IPv6 address');
4408 return false;
4409 }
4410
4411 for (var i = 0; i < (7 - colons); i++)
4412 fill += ':0';
4413
4414 if (addr.match(/^(.*?)::(.*?)$/))
4415 addr = (RegExp.$1 ? RegExp.$1 + ':' : '') + fill +
4416 (RegExp.$2 ? ':' + RegExp.$2 : '');
4417 }
4418
4419 if (addr.match(/^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/) != null)
4420 return true;
4421
4422 validation.i18n('Must be a valid IPv6 address');
4423 return false;
4424 }
4425 }
4426
4427 validation.i18n('Must be a valid IPv6 address');
4428 return false;
4429 },
4430
4431 'port': function()
4432 {
4433 if (validation.types['integer'].apply(this) &&
4434 (this >= 0) && (this <= 65535))
4435 return true;
4436
4437 validation.i18n('Must be a valid port number');
4438 return false;
4439 },
4440
4441 'portrange': function()
4442 {
4443 if (this.match(/^(\d+)-(\d+)$/))
4444 {
4445 var p1 = RegExp.$1;
4446 var p2 = RegExp.$2;
4447
4448 if (validation.types['port'].apply(p1) &&
4449 validation.types['port'].apply(p2) &&
4450 (parseInt(p1) <= parseInt(p2)))
4451 return true;
4452 }
4453 else if (validation.types['port'].apply(this))
4454 {
4455 return true;
4456 }
4457
4458 validation.i18n('Must be a valid port range');
4459 return false;
4460 },
4461
4462 'macaddr': function()
4463 {
4464 if (this.match(/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/) != null)
4465 return true;
4466
4467 validation.i18n('Must be a valid MAC address');
4468 return false;
4469 },
4470
4471 'host': function()
4472 {
4473 if (validation.types['hostname'].apply(this) ||
4474 validation.types['ipaddr'].apply(this))
4475 return true;
4476
4477 validation.i18n('Must be a valid hostname or IP address');
4478 return false;
4479 },
4480
4481 'hostname': function()
4482 {
4483 if ((this.length <= 253) &&
4484 ((this.match(/^[a-zA-Z0-9]+$/) != null ||
4485 (this.match(/^[a-zA-Z0-9_][a-zA-Z0-9_\-.]*[a-zA-Z0-9]$/) &&
4486 this.match(/[^0-9.]/)))))
4487 return true;
4488
4489 validation.i18n('Must be a valid host name');
4490 return false;
4491 },
4492
4493 'network': function()
4494 {
4495 if (validation.types['uciname'].apply(this) ||
4496 validation.types['host'].apply(this))
4497 return true;
4498
4499 validation.i18n('Must be a valid network name');
4500 return false;
4501 },
4502
4503 'wpakey': function()
4504 {
4505 var v = this;
4506
4507 if ((v.length == 64)
4508 ? (v.match(/^[a-fA-F0-9]{64}$/) != null)
4509 : ((v.length >= 8) && (v.length <= 63)))
4510 return true;
4511
4512 validation.i18n('Must be a valid WPA key');
4513 return false;
4514 },
4515
4516 'wepkey': function()
4517 {
4518 var v = this;
4519
4520 if (v.substr(0,2) == 's:')
4521 v = v.substr(2);
4522
4523 if (((v.length == 10) || (v.length == 26))
4524 ? (v.match(/^[a-fA-F0-9]{10,26}$/) != null)
4525 : ((v.length == 5) || (v.length == 13)))
4526 return true;
4527
4528 validation.i18n('Must be a valid WEP key');
4529 return false;
4530 },
4531
4532 'uciname': function()
4533 {
4534 if (this.match(/^[a-zA-Z0-9_]+$/) != null)
4535 return true;
4536
4537 validation.i18n('Must be a valid UCI identifier');
4538 return false;
4539 },
4540
4541 'range': function(min, max)
4542 {
4543 var val = parseFloat(this);
4544
4545 if (validation.types['integer'].apply(this) &&
4546 !isNaN(min) && !isNaN(max) && ((val >= min) && (val <= max)))
4547 return true;
4548
4549 validation.i18n('Must be a number between %d and %d');
4550 return false;
4551 },
4552
4553 'min': function(min)
4554 {
4555 var val = parseFloat(this);
4556
4557 if (validation.types['integer'].apply(this) &&
4558 !isNaN(min) && !isNaN(val) && (val >= min))
4559 return true;
4560
4561 validation.i18n('Must be a number greater or equal to %d');
4562 return false;
4563 },
4564
4565 'max': function(max)
4566 {
4567 var val = parseFloat(this);
4568
4569 if (validation.types['integer'].apply(this) &&
4570 !isNaN(max) && !isNaN(val) && (val <= max))
4571 return true;
4572
4573 validation.i18n('Must be a number lower or equal to %d');
4574 return false;
4575 },
4576
4577 'rangelength': function(min, max)
4578 {
4579 var val = '' + this;
4580
4581 if (!isNaN(min) && !isNaN(max) &&
4582 (val.length >= min) && (val.length <= max))
4583 return true;
4584
4585 validation.i18n('Must be between %d and %d characters');
4586 return false;
4587 },
4588
4589 'minlength': function(min)
4590 {
4591 var val = '' + this;
4592
4593 if (!isNaN(min) && (val.length >= min))
4594 return true;
4595
4596 validation.i18n('Must be at least %d characters');
4597 return false;
4598 },
4599
4600 'maxlength': function(max)
4601 {
4602 var val = '' + this;
4603
4604 if (!isNaN(max) && (val.length <= max))
4605 return true;
4606
4607 validation.i18n('Must be at most %d characters');
4608 return false;
4609 },
4610
4611 'or': function()
4612 {
4613 var msgs = [ ];
4614
4615 for (var i = 0; i < arguments.length; i += 2)
4616 {
4617 delete validation.message;
4618
4619 if (typeof(arguments[i]) != 'function')
4620 {
4621 if (arguments[i] == this)
4622 return true;
4623 i--;
4624 }
4625 else if (arguments[i].apply(this, arguments[i+1]))
4626 {
4627 return true;
4628 }
4629
4630 if (validation.message)
4631 msgs.push(validation.message.format.apply(validation.message, arguments[i+1]));
4632 }
4633
4634 validation.message = msgs.join( L.tr(' - or - '));
4635 return false;
4636 },
4637
4638 'and': function()
4639 {
4640 var msgs = [ ];
4641
4642 for (var i = 0; i < arguments.length; i += 2)
4643 {
4644 delete validation.message;
4645
4646 if (typeof arguments[i] != 'function')
4647 {
4648 if (arguments[i] != this)
4649 return false;
4650 i--;
4651 }
4652 else if (!arguments[i].apply(this, arguments[i+1]))
4653 {
4654 return false;
4655 }
4656
4657 if (validation.message)
4658 msgs.push(validation.message.format.apply(validation.message, arguments[i+1]));
4659 }
4660
4661 validation.message = msgs.join(', ');
4662 return true;
4663 },
4664
4665 'neg': function()
4666 {
4667 return validation.types['or'].apply(
4668 this.replace(/^[ \t]*![ \t]*/, ''), arguments);
4669 },
4670
4671 'list': function(subvalidator, subargs)
4672 {
4673 if (typeof subvalidator != 'function')
4674 return false;
4675
4676 var tokens = this.match(/[^ \t]+/g);
4677 for (var i = 0; i < tokens.length; i++)
4678 if (!subvalidator.apply(tokens[i], subargs))
4679 return false;
4680
4681 return true;
4682 },
4683
4684 'phonedigit': function()
4685 {
4686 if (this.match(/^[0-9\*#!\.]+$/) != null)
4687 return true;
4688
4689 validation.i18n('Must be a valid phone number digit');
4690 return false;
4691 },
4692
4693 'string': function()
4694 {
4695 return true;
4696 }
4697 };
4698
4699
4700 this.cbi.AbstractValue = this.ui.AbstractWidget.extend({
4701 init: function(name, options)
4702 {
4703 this.name = name;
4704 this.instance = { };
4705 this.dependencies = [ ];
4706 this.rdependency = { };
4707 this.events = { };
4708
4709 this.options = L.defaults(options, {
4710 placeholder: '',
4711 datatype: 'string',
4712 optional: false,
4713 keep: true
4714 });
4715 },
4716
4717 id: function(sid)
4718 {
4719 return this.section.id('field', sid || '__unknown__', this.name);
4720 },
4721
4722 render: function(sid, condensed)
4723 {
4724 var i = this.instance[sid] = { };
4725
4726 i.top = $('<div />');
4727
4728 if (!condensed)
4729 {
4730 i.top.addClass('form-group');
4731
4732 if (typeof(this.options.caption) == 'string')
4733 $('<label />')
4734 .addClass('col-lg-2 control-label')
4735 .attr('for', this.id(sid))
4736 .text(this.options.caption)
4737 .appendTo(i.top);
4738 }
4739
4740 i.error = $('<div />')
4741 .hide()
4742 .addClass('label label-danger');
4743
4744 i.widget = $('<div />')
4745
4746 .append(this.widget(sid))
4747 .append(i.error)
4748 .appendTo(i.top);
4749
4750 if (!condensed)
4751 {
4752 i.widget.addClass('col-lg-5');
4753
4754 $('<div />')
4755 .addClass('col-lg-5')
4756 .text((typeof(this.options.description) == 'string') ? this.options.description : '')
4757 .appendTo(i.top);
4758 }
4759
4760 return i.top;
4761 },
4762
4763 active: function(sid)
4764 {
4765 return (this.instance[sid] && !this.instance[sid].disabled);
4766 },
4767
4768 ucipath: function(sid)
4769 {
4770 return {
4771 config: (this.options.uci_package || this.map.uci_package),
4772 section: (this.options.uci_section || sid),
4773 option: (this.options.uci_option || this.name)
4774 };
4775 },
4776
4777 ucivalue: function(sid)
4778 {
4779 var uci = this.ucipath(sid);
4780 var val = this.map.get(uci.config, uci.section, uci.option);
4781
4782 if (typeof(val) == 'undefined')
4783 return this.options.initial;
4784
4785 return val;
4786 },
4787
4788 formvalue: function(sid)
4789 {
4790 var v = $('#' + this.id(sid)).val();
4791 return (v === '') ? undefined : v;
4792 },
4793
4794 textvalue: function(sid)
4795 {
4796 var v = this.formvalue(sid);
4797
4798 if (typeof(v) == 'undefined' || ($.isArray(v) && !v.length))
4799 v = this.ucivalue(sid);
4800
4801 if (typeof(v) == 'undefined' || ($.isArray(v) && !v.length))
4802 v = this.options.placeholder;
4803
4804 if (typeof(v) == 'undefined' || v === '')
4805 return undefined;
4806
4807 if (typeof(v) == 'string' && $.isArray(this.choices))
4808 {
4809 for (var i = 0; i < this.choices.length; i++)
4810 if (v === this.choices[i][0])
4811 return this.choices[i][1];
4812 }
4813 else if (v === true)
4814 return L.tr('yes');
4815 else if (v === false)
4816 return L.tr('no');
4817 else if ($.isArray(v))
4818 return v.join(', ');
4819
4820 return v;
4821 },
4822
4823 changed: function(sid)
4824 {
4825 var a = this.ucivalue(sid);
4826 var b = this.formvalue(sid);
4827
4828 if (typeof(a) != typeof(b))
4829 return true;
4830
4831 if (typeof(a) == 'object')
4832 {
4833 if (a.length != b.length)
4834 return true;
4835
4836 for (var i = 0; i < a.length; i++)
4837 if (a[i] != b[i])
4838 return true;
4839
4840 return false;
4841 }
4842
4843 return (a != b);
4844 },
4845
4846 save: function(sid)
4847 {
4848 var uci = this.ucipath(sid);
4849
4850 if (this.instance[sid].disabled)
4851 {
4852 if (!this.options.keep)
4853 return this.map.set(uci.config, uci.section, uci.option, undefined);
4854
4855 return false;
4856 }
4857
4858 var chg = this.changed(sid);
4859 var val = this.formvalue(sid);
4860
4861 if (chg)
4862 this.map.set(uci.config, uci.section, uci.option, val);
4863
4864 return chg;
4865 },
4866
4867 _ev_validate: function(ev)
4868 {
4869 var d = ev.data;
4870 var rv = true;
4871 var val = d.elem.val();
4872 var vstack = d.vstack;
4873
4874 if (vstack && typeof(vstack[0]) == 'function')
4875 {
4876 delete validation.message;
4877
4878 if ((val.length == 0 && !d.opt))
4879 {
4880 d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
4881 d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
4882
4883 d.inst.error.text(L.tr('Field must not be empty')).show();
4884 rv = false;
4885 }
4886 else if (val.length > 0 && !vstack[0].apply(val, vstack[1]))
4887 {
4888 d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
4889 d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
4890
4891 d.inst.error.text(validation.message.format.apply(validation.message, vstack[1])).show();
4892 rv = false;
4893 }
4894 else
4895 {
4896 d.elem.parents('div.form-group, td').first().removeClass('luci2-form-error');
4897 d.elem.parents('div.input-group, div.form-group, td').first().removeClass('has-error');
4898
4899 if (d.multi && d.inst.widget && d.inst.widget.find('input.error, select.error').length > 0)
4900 rv = false;
4901 else
4902 d.inst.error.text('').hide();
4903 }
4904 }
4905
4906 if (rv)
4907 {
4908 for (var field in d.self.rdependency)
4909 d.self.rdependency[field].toggle(d.sid);
4910
4911 d.self.section.tabtoggle(d.sid);
4912 }
4913
4914 return rv;
4915 },
4916
4917 validator: function(sid, elem, multi)
4918 {
4919 var evdata = {
4920 self: this,
4921 sid: sid,
4922 elem: elem,
4923 multi: multi,
4924 inst: this.instance[sid],
4925 opt: this.options.optional
4926 };
4927
4928 for (var evname in this.events)
4929 elem.on(evname, evdata, this.events[evname]);
4930
4931 if (typeof(this.options.datatype) == 'undefined' && $.isEmptyObject(this.rdependency))
4932 return elem;
4933
4934 var vstack;
4935 if (typeof(this.options.datatype) == 'string')
4936 {
4937 try {
4938 evdata.vstack = L.cbi.validation.compile(this.options.datatype);
4939 } catch(e) { };
4940 }
4941 else if (typeof(this.options.datatype) == 'function')
4942 {
4943 var vfunc = this.options.datatype;
4944 evdata.vstack = [ function(elem) {
4945 var rv = vfunc(this, elem);
4946 if (rv !== true)
4947 validation.message = rv;
4948 return (rv === true);
4949 }, [ elem ] ];
4950 }
4951
4952 if (elem.prop('tagName') == 'SELECT')
4953 {
4954 elem.change(evdata, this._ev_validate);
4955 }
4956 else if (elem.prop('tagName') == 'INPUT' && elem.attr('type') == 'checkbox')
4957 {
4958 elem.click(evdata, this._ev_validate);
4959 elem.blur(evdata, this._ev_validate);
4960 }
4961 else
4962 {
4963 elem.keyup(evdata, this._ev_validate);
4964 elem.blur(evdata, this._ev_validate);
4965 }
4966
4967 elem.attr('cbi-validate', true).on('validate', evdata, this._ev_validate);
4968
4969 return elem;
4970 },
4971
4972 validate: function(sid)
4973 {
4974 var i = this.instance[sid];
4975
4976 i.widget.find('[cbi-validate]').trigger('validate');
4977
4978 return (i.disabled || i.error.text() == '');
4979 },
4980
4981 depends: function(d, v, add)
4982 {
4983 var dep;
4984
4985 if ($.isArray(d))
4986 {
4987 dep = { };
4988 for (var i = 0; i < d.length; i++)
4989 {
4990 if (typeof(d[i]) == 'string')
4991 dep[d[i]] = true;
4992 else if (d[i] instanceof L.cbi.AbstractValue)
4993 dep[d[i].name] = true;
4994 }
4995 }
4996 else if (d instanceof L.cbi.AbstractValue)
4997 {
4998 dep = { };
4999 dep[d.name] = (typeof(v) == 'undefined') ? true : v;
5000 }
5001 else if (typeof(d) == 'object')
5002 {
5003 dep = d;
5004 }
5005 else if (typeof(d) == 'string')
5006 {
5007 dep = { };
5008 dep[d] = (typeof(v) == 'undefined') ? true : v;
5009 }
5010
5011 if (!dep || $.isEmptyObject(dep))
5012 return this;
5013
5014 for (var field in dep)
5015 {
5016 var f = this.section.fields[field];
5017 if (f)
5018 f.rdependency[this.name] = this;
5019 else
5020 delete dep[field];
5021 }
5022
5023 if ($.isEmptyObject(dep))
5024 return this;
5025
5026 if (!add || !this.dependencies.length)
5027 this.dependencies.push(dep);
5028 else
5029 for (var i = 0; i < this.dependencies.length; i++)
5030 $.extend(this.dependencies[i], dep);
5031
5032 return this;
5033 },
5034
5035 toggle: function(sid)
5036 {
5037 var d = this.dependencies;
5038 var i = this.instance[sid];
5039
5040 if (!d.length)
5041 return true;
5042
5043 for (var n = 0; n < d.length; n++)
5044 {
5045 var rv = true;
5046
5047 for (var field in d[n])
5048 {
5049 var val = this.section.fields[field].formvalue(sid);
5050 var cmp = d[n][field];
5051
5052 if (typeof(cmp) == 'boolean')
5053 {
5054 if (cmp == (typeof(val) == 'undefined' || val === '' || val === false))
5055 {
5056 rv = false;
5057 break;
5058 }
5059 }
5060 else if (typeof(cmp) == 'string' || typeof(cmp) == 'number')
5061 {
5062 if (val != cmp)
5063 {
5064 rv = false;
5065 break;
5066 }
5067 }
5068 else if (typeof(cmp) == 'function')
5069 {
5070 if (!cmp(val))
5071 {
5072 rv = false;
5073 break;
5074 }
5075 }
5076 else if (cmp instanceof RegExp)
5077 {
5078 if (!cmp.test(val))
5079 {
5080 rv = false;
5081 break;
5082 }
5083 }
5084 }
5085
5086 if (rv)
5087 {
5088 if (i.disabled)
5089 {
5090 i.disabled = false;
5091 i.top.fadeIn();
5092 }
5093
5094 return true;
5095 }
5096 }
5097
5098 if (!i.disabled)
5099 {
5100 i.disabled = true;
5101 i.top.is(':visible') ? i.top.fadeOut() : i.top.hide();
5102 }
5103
5104 return false;
5105 },
5106
5107 on: function(evname, evfunc)
5108 {
5109 this.events[evname] = evfunc;
5110 return this;
5111 }
5112 });
5113
5114 this.cbi.CheckboxValue = this.cbi.AbstractValue.extend({
5115 widget: function(sid)
5116 {
5117 var o = this.options;
5118
5119 if (typeof(o.enabled) == 'undefined') o.enabled = '1';
5120 if (typeof(o.disabled) == 'undefined') o.disabled = '0';
5121
5122 var i = $('<input />')
5123 .attr('id', this.id(sid))
5124 .attr('type', 'checkbox')
5125 .prop('checked', this.ucivalue(sid));
5126
5127 return $('<div />')
5128 .addClass('checkbox')
5129 .append(this.validator(sid, i));
5130 },
5131
5132 ucivalue: function(sid)
5133 {
5134 var v = this.callSuper('ucivalue', sid);
5135
5136 if (typeof(v) == 'boolean')
5137 return v;
5138
5139 return (v == this.options.enabled);
5140 },
5141
5142 formvalue: function(sid)
5143 {
5144 var v = $('#' + this.id(sid)).prop('checked');
5145
5146 if (typeof(v) == 'undefined')
5147 return !!this.options.initial;
5148
5149 return v;
5150 },
5151
5152 save: function(sid)
5153 {
5154 var uci = this.ucipath(sid);
5155
5156 if (this.instance[sid].disabled)
5157 {
5158 if (!this.options.keep)
5159 return this.map.set(uci.config, uci.section, uci.option, undefined);
5160
5161 return false;
5162 }
5163
5164 var chg = this.changed(sid);
5165 var val = this.formvalue(sid);
5166
5167 if (chg)
5168 {
5169 if (this.options.optional && val == this.options.initial)
5170 this.map.set(uci.config, uci.section, uci.option, undefined);
5171 else
5172 this.map.set(uci.config, uci.section, uci.option, val ? this.options.enabled : this.options.disabled);
5173 }
5174
5175 return chg;
5176 }
5177 });
5178
5179 this.cbi.InputValue = this.cbi.AbstractValue.extend({
5180 widget: function(sid)
5181 {
5182 var i = $('<input />')
5183 .addClass('form-control')
5184 .attr('id', this.id(sid))
5185 .attr('type', 'text')
5186 .attr('placeholder', this.options.placeholder)
5187 .val(this.ucivalue(sid));
5188
5189 return this.validator(sid, i);
5190 }
5191 });
5192
5193 this.cbi.PasswordValue = this.cbi.AbstractValue.extend({
5194 widget: function(sid)
5195 {
5196 var i = $('<input />')
5197 .addClass('form-control')
5198 .attr('id', this.id(sid))
5199 .attr('type', 'password')
5200 .attr('placeholder', this.options.placeholder)
5201 .val(this.ucivalue(sid));
5202
5203 var t = $('<span />')
5204 .addClass('input-group-btn')
5205 .append(L.ui.button(L.tr('Reveal'), 'default')
5206 .click(function(ev) {
5207 var b = $(this);
5208 var i = b.parent().prev();
5209 var t = i.attr('type');
5210 b.text(t == 'password' ? L.tr('Hide') : L.tr('Reveal'));
5211 i.attr('type', (t == 'password') ? 'text' : 'password');
5212 b = i = t = null;
5213 }));
5214
5215 this.validator(sid, i);
5216
5217 return $('<div />')
5218 .addClass('input-group')
5219 .append(i)
5220 .append(t);
5221 }
5222 });
5223
5224 this.cbi.ListValue = this.cbi.AbstractValue.extend({
5225 widget: function(sid)
5226 {
5227 var s = $('<select />')
5228 .addClass('form-control');
5229
5230 if (this.options.optional && !this.has_empty)
5231 $('<option />')
5232 .attr('value', '')
5233 .text(L.tr('-- Please choose --'))
5234 .appendTo(s);
5235
5236 if (this.choices)
5237 for (var i = 0; i < this.choices.length; i++)
5238 $('<option />')
5239 .attr('value', this.choices[i][0])
5240 .text(this.choices[i][1])
5241 .appendTo(s);
5242
5243 s.attr('id', this.id(sid)).val(this.ucivalue(sid));
5244
5245 return this.validator(sid, s);
5246 },
5247
5248 value: function(k, v)
5249 {
5250 if (!this.choices)
5251 this.choices = [ ];
5252
5253 if (k == '')
5254 this.has_empty = true;
5255
5256 this.choices.push([k, v || k]);
5257 return this;
5258 }
5259 });
5260
5261 this.cbi.MultiValue = this.cbi.ListValue.extend({
5262 widget: function(sid)
5263 {
5264 var v = this.ucivalue(sid);
5265 var t = $('<div />').attr('id', this.id(sid));
5266
5267 if (!$.isArray(v))
5268 v = (typeof(v) != 'undefined') ? v.toString().split(/\s+/) : [ ];
5269
5270 var s = { };
5271 for (var i = 0; i < v.length; i++)
5272 s[v[i]] = true;
5273
5274 if (this.choices)
5275 for (var i = 0; i < this.choices.length; i++)
5276 {
5277 $('<label />')
5278 .addClass('checkbox')
5279 .append($('<input />')
5280 .attr('type', 'checkbox')
5281 .attr('value', this.choices[i][0])
5282 .prop('checked', s[this.choices[i][0]]))
5283 .append(this.choices[i][1])
5284 .appendTo(t);
5285 }
5286
5287 return t;
5288 },
5289
5290 formvalue: function(sid)
5291 {
5292 var rv = [ ];
5293 var fields = $('#' + this.id(sid) + ' > label > input');
5294
5295 for (var i = 0; i < fields.length; i++)
5296 if (fields[i].checked)
5297 rv.push(fields[i].getAttribute('value'));
5298
5299 return rv;
5300 },
5301
5302 textvalue: function(sid)
5303 {
5304 var v = this.formvalue(sid);
5305 var c = { };
5306
5307 if (this.choices)
5308 for (var i = 0; i < this.choices.length; i++)
5309 c[this.choices[i][0]] = this.choices[i][1];
5310
5311 var t = [ ];
5312
5313 for (var i = 0; i < v.length; i++)
5314 t.push(c[v[i]] || v[i]);
5315
5316 return t.join(', ');
5317 }
5318 });
5319
5320 this.cbi.ComboBox = this.cbi.AbstractValue.extend({
5321 _change: function(ev)
5322 {
5323 var s = ev.target;
5324 var self = ev.data.self;
5325
5326 if (s.selectedIndex == (s.options.length - 1))
5327 {
5328 ev.data.select.hide();
5329 ev.data.input.show().focus();
5330 ev.data.input.val('');
5331 }
5332 else if (self.options.optional && s.selectedIndex == 0)
5333 {
5334 ev.data.input.val('');
5335 }
5336 else
5337 {
5338 ev.data.input.val(ev.data.select.val());
5339 }
5340
5341 ev.stopPropagation();
5342 },
5343
5344 _blur: function(ev)
5345 {
5346 var seen = false;
5347 var val = this.value;
5348 var self = ev.data.self;
5349
5350 ev.data.select.empty();
5351
5352 if (self.options.optional && !self.has_empty)
5353 $('<option />')
5354 .attr('value', '')
5355 .text(L.tr('-- please choose --'))
5356 .appendTo(ev.data.select);
5357
5358 if (self.choices)
5359 for (var i = 0; i < self.choices.length; i++)
5360 {
5361 if (self.choices[i][0] == val)
5362 seen = true;
5363
5364 $('<option />')
5365 .attr('value', self.choices[i][0])
5366 .text(self.choices[i][1])
5367 .appendTo(ev.data.select);
5368 }
5369
5370 if (!seen && val != '')
5371 $('<option />')
5372 .attr('value', val)
5373 .text(val)
5374 .appendTo(ev.data.select);
5375
5376 $('<option />')
5377 .attr('value', ' ')
5378 .text(L.tr('-- custom --'))
5379 .appendTo(ev.data.select);
5380
5381 ev.data.input.hide();
5382 ev.data.select.val(val).show().blur();
5383 },
5384
5385 _enter: function(ev)
5386 {
5387 if (ev.which != 13)
5388 return true;
5389
5390 ev.preventDefault();
5391 ev.data.self._blur(ev);
5392 return false;
5393 },
5394
5395 widget: function(sid)
5396 {
5397 var d = $('<div />')
5398 .attr('id', this.id(sid));
5399
5400 var t = $('<input />')
5401 .addClass('form-control')
5402 .attr('type', 'text')
5403 .hide()
5404 .appendTo(d);
5405
5406 var s = $('<select />')
5407 .addClass('form-control')
5408 .appendTo(d);
5409
5410 var evdata = {
5411 self: this,
5412 input: t,
5413 select: s
5414 };
5415
5416 s.change(evdata, this._change);
5417 t.blur(evdata, this._blur);
5418 t.keydown(evdata, this._enter);
5419
5420 t.val(this.ucivalue(sid));
5421 t.blur();
5422
5423 this.validator(sid, t);
5424 this.validator(sid, s);
5425
5426 return d;
5427 },
5428
5429 value: function(k, v)
5430 {
5431 if (!this.choices)
5432 this.choices = [ ];
5433
5434 if (k == '')
5435 this.has_empty = true;
5436
5437 this.choices.push([k, v || k]);
5438 return this;
5439 },
5440
5441 formvalue: function(sid)
5442 {
5443 var v = $('#' + this.id(sid)).children('input').val();
5444 return (v == '') ? undefined : v;
5445 }
5446 });
5447
5448 this.cbi.DynamicList = this.cbi.ComboBox.extend({
5449 _redraw: function(focus, add, del, s)
5450 {
5451 var v = s.values || [ ];
5452 delete s.values;
5453
5454 $(s.parent).children('div.input-group').children('input').each(function(i) {
5455 if (i != del)
5456 v.push(this.value || '');
5457 });
5458
5459 $(s.parent).empty();
5460
5461 if (add >= 0)
5462 {
5463 focus = add + 1;
5464 v.splice(focus, 0, '');
5465 }
5466 else if (v.length == 0)
5467 {
5468 focus = 0;
5469 v.push('');
5470 }
5471
5472 for (var i = 0; i < v.length; i++)
5473 {
5474 var evdata = {
5475 sid: s.sid,
5476 self: s.self,
5477 parent: s.parent,
5478 index: i,
5479 remove: ((i+1) < v.length)
5480 };
5481
5482 var btn;
5483 if (evdata.remove)
5484 btn = L.ui.button('–', 'danger').click(evdata, this._btnclick);
5485 else
5486 btn = L.ui.button('+', 'success').click(evdata, this._btnclick);
5487
5488 if (this.choices)
5489 {
5490 var txt = $('<input />')
5491 .addClass('form-control')
5492 .attr('type', 'text')
5493 .hide();
5494
5495 var sel = $('<select />')
5496 .addClass('form-control');
5497
5498 $('<div />')
5499 .addClass('input-group')
5500 .append(txt)
5501 .append(sel)
5502 .append($('<span />')
5503 .addClass('input-group-btn')
5504 .append(btn))
5505 .appendTo(s.parent);
5506
5507 evdata.input = this.validator(s.sid, txt, true);
5508 evdata.select = this.validator(s.sid, sel, true);
5509
5510 sel.change(evdata, this._change);
5511 txt.blur(evdata, this._blur);
5512 txt.keydown(evdata, this._keydown);
5513
5514 txt.val(v[i]);
5515 txt.blur();
5516
5517 if (i == focus || -(i+1) == focus)
5518 sel.focus();
5519
5520 sel = txt = null;
5521 }
5522 else
5523 {
5524 var f = $('<input />')
5525 .attr('type', 'text')
5526 .attr('index', i)
5527 .attr('placeholder', (i == 0) ? this.options.placeholder : '')
5528 .addClass('form-control')
5529 .keydown(evdata, this._keydown)
5530 .keypress(evdata, this._keypress)
5531 .val(v[i]);
5532
5533 $('<div />')
5534 .addClass('input-group')
5535 .append(f)
5536 .append($('<span />')
5537 .addClass('input-group-btn')
5538 .append(btn))
5539 .appendTo(s.parent);
5540
5541 if (i == focus)
5542 {
5543 f.focus();
5544 }
5545 else if (-(i+1) == focus)
5546 {
5547 f.focus();
5548
5549 /* force cursor to end */
5550 var val = f.val();
5551 f.val(' ');
5552 f.val(val);
5553 }
5554
5555 evdata.input = this.validator(s.sid, f, true);
5556
5557 f = null;
5558 }
5559
5560 evdata = null;
5561 }
5562
5563 s = null;
5564 },
5565
5566 _keypress: function(ev)
5567 {
5568 switch (ev.which)
5569 {
5570 /* backspace, delete */
5571 case 8:
5572 case 46:
5573 if (ev.data.input.val() == '')
5574 {
5575 ev.preventDefault();
5576 return false;
5577 }
5578
5579 return true;
5580
5581 /* enter, arrow up, arrow down */
5582 case 13:
5583 case 38:
5584 case 40:
5585 ev.preventDefault();
5586 return false;
5587 }
5588
5589 return true;
5590 },
5591
5592 _keydown: function(ev)
5593 {
5594 var input = ev.data.input;
5595
5596 switch (ev.which)
5597 {
5598 /* backspace, delete */
5599 case 8:
5600 case 46:
5601 if (input.val().length == 0)
5602 {
5603 ev.preventDefault();
5604
5605 var index = ev.data.index;
5606 var focus = index;
5607
5608 if (ev.which == 8)
5609 focus = -focus;
5610
5611 ev.data.self._redraw(focus, -1, index, ev.data);
5612 return false;
5613 }
5614
5615 break;
5616
5617 /* enter */
5618 case 13:
5619 ev.data.self._redraw(NaN, ev.data.index, -1, ev.data);
5620 break;
5621
5622 /* arrow up */
5623 case 38:
5624 var prev = input.parent().prevAll('div.input-group:first').children('input');
5625 if (prev.is(':visible'))
5626 prev.focus();
5627 else
5628 prev.next('select').focus();
5629 break;
5630
5631 /* arrow down */
5632 case 40:
5633 var next = input.parent().nextAll('div.input-group:first').children('input');
5634 if (next.is(':visible'))
5635 next.focus();
5636 else
5637 next.next('select').focus();
5638 break;
5639 }
5640
5641 return true;
5642 },
5643
5644 _btnclick: function(ev)
5645 {
5646 if (!this.getAttribute('disabled'))
5647 {
5648 if (ev.data.remove)
5649 {
5650 var index = ev.data.index;
5651 ev.data.self._redraw(-index, -1, index, ev.data);
5652 }
5653 else
5654 {
5655 ev.data.self._redraw(NaN, ev.data.index, -1, ev.data);
5656 }
5657 }
5658
5659 return false;
5660 },
5661
5662 widget: function(sid)
5663 {
5664 this.options.optional = true;
5665
5666 var v = this.ucivalue(sid);
5667
5668 if (!$.isArray(v))
5669 v = (typeof(v) != 'undefined') ? v.toString().split(/\s+/) : [ ];
5670
5671 var d = $('<div />')
5672 .attr('id', this.id(sid))
5673 .addClass('cbi-input-dynlist');
5674
5675 this._redraw(NaN, -1, -1, {
5676 self: this,
5677 parent: d[0],
5678 values: v,
5679 sid: sid
5680 });
5681
5682 return d;
5683 },
5684
5685 ucivalue: function(sid)
5686 {
5687 var v = this.callSuper('ucivalue', sid);
5688
5689 if (!$.isArray(v))
5690 v = (typeof(v) != 'undefined') ? v.toString().split(/\s+/) : [ ];
5691
5692 return v;
5693 },
5694
5695 formvalue: function(sid)
5696 {
5697 var rv = [ ];
5698 var fields = $('#' + this.id(sid) + ' input');
5699
5700 for (var i = 0; i < fields.length; i++)
5701 if (typeof(fields[i].value) == 'string' && fields[i].value.length)
5702 rv.push(fields[i].value);
5703
5704 return rv;
5705 }
5706 });
5707
5708 this.cbi.DummyValue = this.cbi.AbstractValue.extend({
5709 widget: function(sid)
5710 {
5711 return $('<div />')
5712 .addClass('form-control-static')
5713 .attr('id', this.id(sid))
5714 .html(this.ucivalue(sid));
5715 },
5716
5717 formvalue: function(sid)
5718 {
5719 return this.ucivalue(sid);
5720 }
5721 });
5722
5723 this.cbi.ButtonValue = this.cbi.AbstractValue.extend({
5724 widget: function(sid)
5725 {
5726 this.options.optional = true;
5727
5728 var btn = $('<button />')
5729 .addClass('btn btn-default')
5730 .attr('id', this.id(sid))
5731 .attr('type', 'button')
5732 .text(this.label('text'));
5733
5734 return this.validator(sid, btn);
5735 }
5736 });
5737
5738 this.cbi.NetworkList = this.cbi.AbstractValue.extend({
5739 load: function(sid)
5740 {
5741 return L.NetworkModel.init();
5742 },
5743
5744 _device_icon: function(dev)
5745 {
5746 return $('<img />')
5747 .attr('src', dev.icon())
5748 .attr('title', '%s (%s)'.format(dev.description(), dev.name() || '?'));
5749 },
5750
5751 widget: function(sid)
5752 {
5753 var id = this.id(sid);
5754 var ul = $('<ul />')
5755 .attr('id', id)
5756 .addClass('list-unstyled');
5757
5758 var itype = this.options.multiple ? 'checkbox' : 'radio';
5759 var value = this.ucivalue(sid);
5760 var check = { };
5761
5762 if (!this.options.multiple)
5763 check[value] = true;
5764 else
5765 for (var i = 0; i < value.length; i++)
5766 check[value[i]] = true;
5767
5768 var interfaces = L.NetworkModel.getInterfaces();
5769
5770 for (var i = 0; i < interfaces.length; i++)
5771 {
5772 var iface = interfaces[i];
5773 var badge = $('<span />')
5774 .addClass('badge')
5775 .text('%s: '.format(iface.name()));
5776
5777 var dev = iface.getDevice();
5778 var subdevs = iface.getSubdevices();
5779
5780 if (subdevs.length)
5781 for (var j = 0; j < subdevs.length; j++)
5782 badge.append(this._device_icon(subdevs[j]));
5783 else if (dev)
5784 badge.append(this._device_icon(dev));
5785 else
5786 badge.append($('<em />').text(L.tr('(No devices attached)')));
5787
5788 $('<li />')
5789 .append($('<label />')
5790 .addClass(itype + ' inline')
5791 .append($('<input />')
5792 .attr('name', itype + id)
5793 .attr('type', itype)
5794 .attr('value', iface.name())
5795 .prop('checked', !!check[iface.name()]))
5796 .append(badge))
5797 .appendTo(ul);
5798 }
5799
5800 if (!this.options.multiple)
5801 {
5802 $('<li />')
5803 .append($('<label />')
5804 .addClass(itype + ' inline text-muted')
5805 .append($('<input />')
5806 .attr('name', itype + id)
5807 .attr('type', itype)
5808 .attr('value', '')
5809 .prop('checked', $.isEmptyObject(check)))
5810 .append(L.tr('unspecified')))
5811 .appendTo(ul);
5812 }
5813
5814 return ul;
5815 },
5816
5817 ucivalue: function(sid)
5818 {
5819 var v = this.callSuper('ucivalue', sid);
5820
5821 if (!this.options.multiple)
5822 {
5823 if ($.isArray(v))
5824 {
5825 return v[0];
5826 }
5827 else if (typeof(v) == 'string')
5828 {
5829 v = v.match(/\S+/);
5830 return v ? v[0] : undefined;
5831 }
5832
5833 return v;
5834 }
5835 else
5836 {
5837 if (typeof(v) == 'string')
5838 v = v.match(/\S+/g);
5839
5840 return v || [ ];
5841 }
5842 },
5843
5844 formvalue: function(sid)
5845 {
5846 var inputs = $('#' + this.id(sid) + ' input');
5847
5848 if (!this.options.multiple)
5849 {
5850 for (var i = 0; i < inputs.length; i++)
5851 if (inputs[i].checked && inputs[i].value !== '')
5852 return inputs[i].value;
5853
5854 return undefined;
5855 }
5856
5857 var rv = [ ];
5858
5859 for (var i = 0; i < inputs.length; i++)
5860 if (inputs[i].checked)
5861 rv.push(inputs[i].value);
5862
5863 return rv.length ? rv : undefined;
5864 }
5865 });
5866
5867 this.cbi.DeviceList = this.cbi.NetworkList.extend({
5868 _ev_focus: function(ev)
5869 {
5870 var self = ev.data.self;
5871 var input = $(this);
5872
5873 input.parent().prev().prop('checked', true);
5874 },
5875
5876 _ev_blur: function(ev)
5877 {
5878 ev.which = 10;
5879 ev.data.self._ev_keydown.call(this, ev);
5880 },
5881
5882 _ev_keydown: function(ev)
5883 {
5884 if (ev.which != 10 && ev.which != 13)
5885 return;
5886
5887 var sid = ev.data.sid;
5888 var self = ev.data.self;
5889 var input = $(this);
5890 var ifnames = L.toArray(input.val());
5891
5892 if (!ifnames.length)
5893 return;
5894
5895 L.NetworkModel.createDevice(ifnames[0]);
5896
5897 self._redraw(sid, $('#' + self.id(sid)), ifnames[0]);
5898 },
5899
5900 load: function(sid)
5901 {
5902 return L.NetworkModel.init();
5903 },
5904
5905 _redraw: function(sid, ul, sel)
5906 {
5907 var id = ul.attr('id');
5908 var devs = L.NetworkModel.getDevices();
5909 var iface = L.NetworkModel.getInterface(sid);
5910 var itype = this.options.multiple ? 'checkbox' : 'radio';
5911 var check = { };
5912
5913 if (!sel)
5914 {
5915 for (var i = 0; i < devs.length; i++)
5916 if (devs[i].isInNetwork(iface))
5917 check[devs[i].name()] = true;
5918 }
5919 else
5920 {
5921 if (this.options.multiple)
5922 check = L.toObject(this.formvalue(sid));
5923
5924 check[sel] = true;
5925 }
5926
5927 ul.empty();
5928
5929 for (var i = 0; i < devs.length; i++)
5930 {
5931 var dev = devs[i];
5932
5933 if (dev.isBridge() && this.options.bridges === false)
5934 continue;
5935
5936 if (!dev.isBridgeable() && this.options.multiple)
5937 continue;
5938
5939 var badge = $('<span />')
5940 .addClass('badge')
5941 .append($('<img />').attr('src', dev.icon()))
5942 .append(' %s: %s'.format(dev.name(), dev.description()));
5943
5944 //var ifcs = dev.getInterfaces();
5945 //if (ifcs.length)
5946 //{
5947 // for (var j = 0; j < ifcs.length; j++)
5948 // badge.append((j ? ', ' : ' (') + ifcs[j].name());
5949 //
5950 // badge.append(')');
5951 //}
5952
5953 $('<li />')
5954 .append($('<label />')
5955 .addClass(itype + ' inline')
5956 .append($('<input />')
5957 .attr('name', itype + id)
5958 .attr('type', itype)
5959 .attr('value', dev.name())
5960 .prop('checked', !!check[dev.name()]))
5961 .append(badge))
5962 .appendTo(ul);
5963 }
5964
5965
5966 $('<li />')
5967 .append($('<label />')
5968 .attr('for', 'custom' + id)
5969 .addClass(itype + ' inline')
5970 .append($('<input />')
5971 .attr('name', itype + id)
5972 .attr('type', itype)
5973 .attr('value', ''))
5974 .append($('<span />')
5975 .addClass('badge')
5976 .append($('<input />')
5977 .attr('id', 'custom' + id)
5978 .attr('type', 'text')
5979 .attr('placeholder', L.tr('Custom device …'))
5980 .on('focus', { self: this, sid: sid }, this._ev_focus)
5981 .on('blur', { self: this, sid: sid }, this._ev_blur)
5982 .on('keydown', { self: this, sid: sid }, this._ev_keydown))))
5983 .appendTo(ul);
5984
5985 if (!this.options.multiple)
5986 {
5987 $('<li />')
5988 .append($('<label />')
5989 .addClass(itype + ' inline text-muted')
5990 .append($('<input />')
5991 .attr('name', itype + id)
5992 .attr('type', itype)
5993 .attr('value', '')
5994 .prop('checked', $.isEmptyObject(check)))
5995 .append(L.tr('unspecified')))
5996 .appendTo(ul);
5997 }
5998 },
5999
6000 widget: function(sid)
6001 {
6002 var id = this.id(sid);
6003 var ul = $('<ul />')
6004 .attr('id', id)
6005 .addClass('list-unstyled');
6006
6007 this._redraw(sid, ul);
6008
6009 return ul;
6010 },
6011
6012 save: function(sid)
6013 {
6014 if (this.instance[sid].disabled)
6015 return;
6016
6017 var ifnames = this.formvalue(sid);
6018 //if (!ifnames)
6019 // return;
6020
6021 var iface = L.NetworkModel.getInterface(sid);
6022 if (!iface)
6023 return;
6024
6025 iface.setDevices($.isArray(ifnames) ? ifnames : [ ifnames ]);
6026 }
6027 });
6028
6029
6030 this.cbi.AbstractSection = this.ui.AbstractWidget.extend({
6031 id: function()
6032 {
6033 var s = [ arguments[0], this.map.uci_package, this.uci_type ];
6034
6035 for (var i = 1; i < arguments.length; i++)
6036 s.push(arguments[i].replace(/\./g, '_'));
6037
6038 return s.join('_');
6039 },
6040
6041 option: function(widget, name, options)
6042 {
6043 if (this.tabs.length == 0)
6044 this.tab({ id: '__default__', selected: true });
6045
6046 return this.taboption('__default__', widget, name, options);
6047 },
6048
6049 tab: function(options)
6050 {
6051 if (options.selected)
6052 this.tabs.selected = this.tabs.length;
6053
6054 this.tabs.push({
6055 id: options.id,
6056 caption: options.caption,
6057 description: options.description,
6058 fields: [ ],
6059 li: { }
6060 });
6061 },
6062
6063 taboption: function(tabid, widget, name, options)
6064 {
6065 var tab;
6066 for (var i = 0; i < this.tabs.length; i++)
6067 {
6068 if (this.tabs[i].id == tabid)
6069 {
6070 tab = this.tabs[i];
6071 break;
6072 }
6073 }
6074
6075 if (!tab)
6076 throw 'Cannot append to unknown tab ' + tabid;
6077
6078 var w = widget ? new widget(name, options) : null;
6079
6080 if (!(w instanceof L.cbi.AbstractValue))
6081 throw 'Widget must be an instance of AbstractValue';
6082
6083 w.section = this;
6084 w.map = this.map;
6085
6086 this.fields[name] = w;
6087 tab.fields.push(w);
6088
6089 return w;
6090 },
6091
6092 tabtoggle: function(sid)
6093 {
6094 for (var i = 0; i < this.tabs.length; i++)
6095 {
6096 var tab = this.tabs[i];
6097 var elem = $('#' + this.id('nodetab', sid, tab.id));
6098 var empty = true;
6099
6100 for (var j = 0; j < tab.fields.length; j++)
6101 {
6102 if (tab.fields[j].active(sid))
6103 {
6104 empty = false;
6105 break;
6106 }
6107 }
6108
6109 if (empty && elem.is(':visible'))
6110 elem.fadeOut();
6111 else if (!empty)
6112 elem.fadeIn();
6113 }
6114 },
6115
6116 ucipackages: function(pkg)
6117 {
6118 for (var i = 0; i < this.tabs.length; i++)
6119 for (var j = 0; j < this.tabs[i].fields.length; j++)
6120 if (this.tabs[i].fields[j].options.uci_package)
6121 pkg[this.tabs[i].fields[j].options.uci_package] = true;
6122 },
6123
6124 formvalue: function()
6125 {
6126 var rv = { };
6127
6128 this.sections(function(s) {
6129 var sid = s['.name'];
6130 var sv = rv[sid] || (rv[sid] = { });
6131
6132 for (var i = 0; i < this.tabs.length; i++)
6133 for (var j = 0; j < this.tabs[i].fields.length; j++)
6134 {
6135 var val = this.tabs[i].fields[j].formvalue(sid);
6136 sv[this.tabs[i].fields[j].name] = val;
6137 }
6138 });
6139
6140 return rv;
6141 },
6142
6143 validate_section: function(sid)
6144 {
6145 var inst = this.instance[sid];
6146
6147 var invals = 0;
6148 var badge = $('#' + this.id('teaser', sid)).children('span:first');
6149
6150 for (var i = 0; i < this.tabs.length; i++)
6151 {
6152 var inval = 0;
6153 var stbadge = $('#' + this.id('nodetab', sid, this.tabs[i].id)).children('span:first');
6154
6155 for (var j = 0; j < this.tabs[i].fields.length; j++)
6156 if (!this.tabs[i].fields[j].validate(sid))
6157 inval++;
6158
6159 if (inval > 0)
6160 stbadge.show()
6161 .text(inval)
6162 .attr('title', L.trp('1 Error', '%d Errors', inval).format(inval));
6163 else
6164 stbadge.hide();
6165
6166 invals += inval;
6167 }
6168
6169 if (invals > 0)
6170 badge.show()
6171 .text(invals)
6172 .attr('title', L.trp('1 Error', '%d Errors', invals).format(invals));
6173 else
6174 badge.hide();
6175
6176 return invals;
6177 },
6178
6179 validate: function()
6180 {
6181 var errors = 0;
6182 var as = this.sections();
6183
6184 for (var i = 0; i < as.length; i++)
6185 {
6186 var invals = this.validate_section(as[i]['.name']);
6187
6188 if (invals > 0)
6189 errors += invals;
6190 }
6191
6192 var badge = $('#' + this.id('sectiontab')).children('span:first');
6193
6194 if (errors > 0)
6195 badge.show()
6196 .text(errors)
6197 .attr('title', L.trp('1 Error', '%d Errors', errors).format(errors));
6198 else
6199 badge.hide();
6200
6201 return (errors == 0);
6202 }
6203 });
6204
6205 this.cbi.TypedSection = this.cbi.AbstractSection.extend({
6206 init: function(uci_type, options)
6207 {
6208 this.uci_type = uci_type;
6209 this.options = options;
6210 this.tabs = [ ];
6211 this.fields = { };
6212 this.active_panel = 0;
6213 this.active_tab = { };
6214 },
6215
6216 filter: function(section)
6217 {
6218 return true;
6219 },
6220
6221 sections: function(cb)
6222 {
6223 var s1 = L.uci.sections(this.map.uci_package);
6224 var s2 = [ ];
6225
6226 for (var i = 0; i < s1.length; i++)
6227 if (s1[i]['.type'] == this.uci_type)
6228 if (this.filter(s1[i]))
6229 s2.push(s1[i]);
6230
6231 if (typeof(cb) == 'function')
6232 for (var i = 0; i < s2.length; i++)
6233 cb.call(this, s2[i]);
6234
6235 return s2;
6236 },
6237
6238 add: function(name)
6239 {
6240 this.map.add(this.map.uci_package, this.uci_type, name);
6241 },
6242
6243 remove: function(sid)
6244 {
6245 this.map.remove(this.map.uci_package, sid);
6246 },
6247
6248 _ev_add: function(ev)
6249 {
6250 var addb = $(this);
6251 var name = undefined;
6252 var self = ev.data.self;
6253
6254 if (addb.prev().prop('nodeName') == 'INPUT')
6255 name = addb.prev().val();
6256
6257 if (addb.prop('disabled') || name === '')
6258 return;
6259
6260 L.ui.saveScrollTop();
6261
6262 self.active_panel = -1;
6263 self.map.save();
6264 self.add(name);
6265 self.map.redraw();
6266
6267 L.ui.restoreScrollTop();
6268 },
6269
6270 _ev_remove: function(ev)
6271 {
6272 var self = ev.data.self;
6273 var sid = ev.data.sid;
6274
6275 L.ui.saveScrollTop();
6276
6277 self.map.save();
6278 self.remove(sid);
6279 self.map.redraw();
6280
6281 L.ui.restoreScrollTop();
6282
6283 ev.stopPropagation();
6284 },
6285
6286 _ev_sid: function(ev)
6287 {
6288 var self = ev.data.self;
6289 var text = $(this);
6290 var addb = text.next();
6291 var errt = addb.next();
6292 var name = text.val();
6293
6294 if (!/^[a-zA-Z0-9_]*$/.test(name))
6295 {
6296 errt.text(L.tr('Invalid section name')).show();
6297 text.addClass('error');
6298 addb.prop('disabled', true);
6299 return false;
6300 }
6301
6302 if (L.uci.get(self.map.uci_package, name))
6303 {
6304 errt.text(L.tr('Name already used')).show();
6305 text.addClass('error');
6306 addb.prop('disabled', true);
6307 return false;
6308 }
6309
6310 errt.text('').hide();
6311 text.removeClass('error');
6312 addb.prop('disabled', false);
6313 return true;
6314 },
6315
6316 _ev_tab: function(ev)
6317 {
6318 var self = ev.data.self;
6319 var sid = ev.data.sid;
6320
6321 self.validate();
6322 self.active_tab[sid] = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
6323 },
6324
6325 _ev_panel_collapse: function(ev)
6326 {
6327 var self = ev.data.self;
6328
6329 var this_panel = $(ev.target);
6330 var this_toggle = this_panel.prevAll('[data-toggle="collapse"]:first');
6331
6332 var prev_toggle = $($(ev.delegateTarget).find('[data-toggle="collapse"]:eq(%d)'.format(self.active_panel)));
6333 var prev_panel = $(prev_toggle.attr('data-target'));
6334
6335 prev_panel
6336 .removeClass('in')
6337 .addClass('collapse');
6338
6339 prev_toggle.find('.luci2-section-teaser')
6340 .show()
6341 .children('span:last')
6342 .empty()
6343 .append(self.teaser(prev_panel.attr('data-luci2-sid')));
6344
6345 this_toggle.find('.luci2-section-teaser')
6346 .hide();
6347
6348 self.active_panel = parseInt(this_panel.attr('data-luci2-panel-index'));
6349 self.validate();
6350 },
6351
6352 _ev_panel_open: function(ev)
6353 {
6354 var self = ev.data.self;
6355 var panel = $($(this).attr('data-target'));
6356 var index = parseInt(panel.attr('data-luci2-panel-index'));
6357
6358 if (index == self.active_panel)
6359 ev.stopPropagation();
6360 },
6361
6362 _ev_sort: function(ev)
6363 {
6364 var self = ev.data.self;
6365 var cur_idx = ev.data.index;
6366 var new_idx = cur_idx + (ev.data.up ? -1 : 1);
6367 var s = self.sections();
6368
6369 if (new_idx >= 0 && new_idx < s.length)
6370 {
6371 L.uci.swap(self.map.uci_package, s[cur_idx]['.name'], s[new_idx]['.name']);
6372
6373 self.map.save();
6374 self.map.redraw();
6375 }
6376
6377 ev.stopPropagation();
6378 },
6379
6380 teaser: function(sid)
6381 {
6382 var tf = this.teaser_fields;
6383
6384 if (!tf)
6385 {
6386 tf = this.teaser_fields = [ ];
6387
6388 if ($.isArray(this.options.teasers))
6389 {
6390 for (var i = 0; i < this.options.teasers.length; i++)
6391 {
6392 var f = this.options.teasers[i];
6393 if (f instanceof L.cbi.AbstractValue)
6394 tf.push(f);
6395 else if (typeof(f) == 'string' && this.fields[f] instanceof L.cbi.AbstractValue)
6396 tf.push(this.fields[f]);
6397 }
6398 }
6399 else
6400 {
6401 for (var i = 0; tf.length <= 5 && i < this.tabs.length; i++)
6402 for (var j = 0; tf.length <= 5 && j < this.tabs[i].fields.length; j++)
6403 tf.push(this.tabs[i].fields[j]);
6404 }
6405 }
6406
6407 var t = '';
6408
6409 for (var i = 0; i < tf.length; i++)
6410 {
6411 if (tf[i].instance[sid] && tf[i].instance[sid].disabled)
6412 continue;
6413
6414 var n = tf[i].options.caption || tf[i].name;
6415 var v = tf[i].textvalue(sid);
6416
6417 if (typeof(v) == 'undefined')
6418 continue;
6419
6420 t = t + '%s%s: <strong>%s</strong>'.format(t ? ' | ' : '', n, v);
6421 }
6422
6423 return t;
6424 },
6425
6426 _render_add: function()
6427 {
6428 if (!this.options.addremove)
6429 return null;
6430
6431 var text = L.tr('Add section');
6432 var ttip = L.tr('Create new section...');
6433
6434 if ($.isArray(this.options.add_caption))
6435 text = this.options.add_caption[0], ttip = this.options.add_caption[1];
6436 else if (typeof(this.options.add_caption) == 'string')
6437 text = this.options.add_caption, ttip = '';
6438
6439 var add = $('<div />');
6440
6441 if (this.options.anonymous === false)
6442 {
6443 $('<input />')
6444 .addClass('cbi-input-text')
6445 .attr('type', 'text')
6446 .attr('placeholder', ttip)
6447 .blur({ self: this }, this._ev_sid)
6448 .keyup({ self: this }, this._ev_sid)
6449 .appendTo(add);
6450
6451 $('<img />')
6452 .attr('src', L.globals.resource + '/icons/cbi/add.gif')
6453 .attr('title', text)
6454 .addClass('cbi-button')
6455 .click({ self: this }, this._ev_add)
6456 .appendTo(add);
6457
6458 $('<div />')
6459 .addClass('cbi-value-error')
6460 .hide()
6461 .appendTo(add);
6462 }
6463 else
6464 {
6465 L.ui.button(text, 'success', ttip)
6466 .click({ self: this }, this._ev_add)
6467 .appendTo(add);
6468 }
6469
6470 return add;
6471 },
6472
6473 _render_remove: function(sid, index)
6474 {
6475 if (!this.options.addremove)
6476 return null;
6477
6478 var text = L.tr('Remove');
6479 var ttip = L.tr('Remove this section');
6480
6481 if ($.isArray(this.options.remove_caption))
6482 text = this.options.remove_caption[0], ttip = this.options.remove_caption[1];
6483 else if (typeof(this.options.remove_caption) == 'string')
6484 text = this.options.remove_caption, ttip = '';
6485
6486 return L.ui.button(text, 'danger', ttip)
6487 .click({ self: this, sid: sid, index: index }, this._ev_remove);
6488 },
6489
6490 _render_sort: function(sid, index)
6491 {
6492 if (!this.options.sortable)
6493 return null;
6494
6495 var b1 = L.ui.button('↑', 'info', L.tr('Move up'))
6496 .click({ self: this, index: index, up: true }, this._ev_sort);
6497
6498 var b2 = L.ui.button('↓', 'info', L.tr('Move down'))
6499 .click({ self: this, index: index, up: false }, this._ev_sort);
6500
6501 return b1.add(b2);
6502 },
6503
6504 _render_caption: function()
6505 {
6506 return $('<h3 />')
6507 .addClass('panel-title')
6508 .append(this.label('caption') || this.uci_type);
6509 },
6510
6511 _render_description: function()
6512 {
6513 var text = this.label('description');
6514
6515 if (text)
6516 return $('<div />')
6517 .addClass('luci2-section-description')
6518 .text(text);
6519
6520 return null;
6521 },
6522
6523 _render_teaser: function(sid, index)
6524 {
6525 if (this.options.collabsible || this.map.options.collabsible)
6526 {
6527 return $('<div />')
6528 .attr('id', this.id('teaser', sid))
6529 .addClass('luci2-section-teaser well well-sm')
6530 .append($('<span />')
6531 .addClass('badge'))
6532 .append($('<span />'));
6533 }
6534
6535 return null;
6536 },
6537
6538 _render_head: function(condensed)
6539 {
6540 if (condensed)
6541 return null;
6542
6543 return $('<div />')
6544 .addClass('panel-heading')
6545 .append(this._render_caption())
6546 .append(this._render_description());
6547 },
6548
6549 _render_tab_description: function(sid, index, tab_index)
6550 {
6551 var tab = this.tabs[tab_index];
6552
6553 if (typeof(tab.description) == 'string')
6554 {
6555 return $('<div />')
6556 .addClass('cbi-tab-descr')
6557 .text(tab.description);
6558 }
6559
6560 return null;
6561 },
6562
6563 _render_tab_head: function(sid, index, tab_index)
6564 {
6565 var tab = this.tabs[tab_index];
6566 var cur = this.active_tab[sid] || 0;
6567
6568 var tabh = $('<li />')
6569 .append($('<a />')
6570 .attr('id', this.id('nodetab', sid, tab.id))
6571 .attr('href', '#' + this.id('node', sid, tab.id))
6572 .attr('data-toggle', 'tab')
6573 .attr('data-luci2-tab-index', tab_index)
6574 .text((tab.caption ? tab.caption.format(tab.id) : tab.id) + ' ')
6575 .append($('<span />')
6576 .addClass('badge'))
6577 .on('shown.bs.tab', { self: this, sid: sid }, this._ev_tab));
6578
6579 if (cur == tab_index)
6580 tabh.addClass('active');
6581
6582 if (!tab.fields.length)
6583 tabh.hide();
6584
6585 return tabh;
6586 },
6587
6588 _render_tab_body: function(sid, index, tab_index)
6589 {
6590 var tab = this.tabs[tab_index];
6591 var cur = this.active_tab[sid] || 0;
6592
6593 var tabb = $('<div />')
6594 .addClass('tab-pane')
6595 .attr('id', this.id('node', sid, tab.id))
6596 .attr('data-luci2-tab-index', tab_index)
6597 .append(this._render_tab_description(sid, index, tab_index));
6598
6599 if (cur == tab_index)
6600 tabb.addClass('active');
6601
6602 for (var i = 0; i < tab.fields.length; i++)
6603 tabb.append(tab.fields[i].render(sid));
6604
6605 return tabb;
6606 },
6607
6608 _render_section_head: function(sid, index)
6609 {
6610 var head = $('<div />')
6611 .addClass('luci2-section-header')
6612 .append(this._render_teaser(sid, index))
6613 .append($('<div />')
6614 .addClass('btn-group')
6615 .append(this._render_sort(sid, index))
6616 .append(this._render_remove(sid, index)));
6617
6618 if (this.options.collabsible)
6619 {
6620 head.attr('data-toggle', 'collapse')
6621 .attr('data-parent', this.id('sectiongroup'))
6622 .attr('data-target', '#' + this.id('panel', sid))
6623 .on('click', { self: this }, this._ev_panel_open);
6624 }
6625
6626 return head;
6627 },
6628
6629 _render_section_body: function(sid, index)
6630 {
6631 var body = $('<div />')
6632 .attr('id', this.id('panel', sid))
6633 .attr('data-luci2-panel-index', index)
6634 .attr('data-luci2-sid', sid);
6635
6636 if (this.options.collabsible || this.map.options.collabsible)
6637 {
6638 body.addClass('panel-collapse collapse');
6639
6640 if (index == this.active_panel)
6641 body.addClass('in');
6642 }
6643
6644 var tab_heads = $('<ul />')
6645 .addClass('nav nav-tabs');
6646
6647 var tab_bodies = $('<div />')
6648 .addClass('form-horizontal tab-content')
6649 .append(tab_heads);
6650
6651 for (var j = 0; j < this.tabs.length; j++)
6652 {
6653 tab_heads.append(this._render_tab_head(sid, index, j));
6654 tab_bodies.append(this._render_tab_body(sid, index, j));
6655 }
6656
6657 body.append(tab_bodies);
6658
6659 if (this.tabs.length <= 1)
6660 tab_heads.hide();
6661
6662 return body;
6663 },
6664
6665 _render_body: function(condensed)
6666 {
6667 var s = this.sections();
6668
6669 if (this.active_panel < 0)
6670 this.active_panel += s.length;
6671 else if (this.active_panel >= s.length)
6672 this.active_panel = s.length - 1;
6673
6674 var body = $('<ul />')
6675 .addClass('list-group');
6676
6677 if (this.options.collabsible)
6678 {
6679 body.attr('id', this.id('sectiongroup'))
6680 .on('show.bs.collapse', { self: this }, this._ev_panel_collapse);
6681 }
6682
6683 if (s.length == 0)
6684 {
6685 body.append($('<li />')
6686 .addClass('list-group-item text-muted')
6687 .text(this.label('placeholder') || L.tr('There are no entries defined yet.')))
6688 }
6689
6690 for (var i = 0; i < s.length; i++)
6691 {
6692 var sid = s[i]['.name'];
6693 var inst = this.instance[sid] = { tabs: [ ] };
6694
6695 body.append($('<li />')
6696 .addClass('list-group-item')
6697 .append(this._render_section_head(sid, i))
6698 .append(this._render_section_body(sid, i)));
6699 }
6700
6701 return body;
6702 },
6703
6704 render: function(condensed)
6705 {
6706 this.instance = { };
6707
6708 var panel = $('<div />')
6709 .addClass('panel panel-default')
6710 .append(this._render_head(condensed))
6711 .append(this._render_body(condensed));
6712
6713 if (this.options.addremove)
6714 panel.append($('<div />')
6715 .addClass('panel-footer')
6716 .append(this._render_add()));
6717
6718 return panel;
6719 },
6720
6721 finish: function()
6722 {
6723 var s = this.sections();
6724
6725 for (var i = 0; i < s.length; i++)
6726 {
6727 var sid = s[i]['.name'];
6728
6729 this.validate_section(sid);
6730
6731 if (i != this.active_panel)
6732 $('#' + this.id('teaser', sid)).children('span:last')
6733 .append(this.teaser(sid));
6734 else
6735 $('#' + this.id('teaser', sid))
6736 .hide();
6737 }
6738 }
6739 });
6740
6741 this.cbi.TableSection = this.cbi.TypedSection.extend({
6742 _render_table_head: function()
6743 {
6744 var thead = $('<thead />')
6745 .append($('<tr />')
6746 .addClass('cbi-section-table-titles'));
6747
6748 for (var j = 0; j < this.tabs[0].fields.length; j++)
6749 thead.children().append($('<th />')
6750 .addClass('cbi-section-table-cell')
6751 .css('width', this.tabs[0].fields[j].options.width || '')
6752 .append(this.tabs[0].fields[j].label('caption')));
6753
6754 if (this.options.addremove !== false || this.options.sortable)
6755 thead.children().append($('<th />')
6756 .addClass('cbi-section-table-cell')
6757 .text(' '));
6758
6759 return thead;
6760 },
6761
6762 _render_table_row: function(sid, index)
6763 {
6764 var row = $('<tr />')
6765 .attr('data-luci2-sid', sid);
6766
6767 for (var j = 0; j < this.tabs[0].fields.length; j++)
6768 {
6769 row.append($('<td />')
6770 .css('width', this.tabs[0].fields[j].options.width || '')
6771 .append(this.tabs[0].fields[j].render(sid, true)));
6772 }
6773
6774 if (this.options.addremove !== false || this.options.sortable)
6775 {
6776 row.append($('<td />')
6777 .addClass('text-right')
6778 .append($('<div />')
6779 .addClass('btn-group')
6780 .append(this._render_sort(sid, index))
6781 .append(this._render_remove(sid, index))));
6782 }
6783
6784 return row;
6785 },
6786
6787 _render_table_body: function()
6788 {
6789 var s = this.sections();
6790
6791 var tbody = $('<tbody />');
6792
6793 if (s.length == 0)
6794 {
6795 var cols = this.tabs[0].fields.length;
6796
6797 if (this.options.addremove !== false || this.options.sortable)
6798 cols++;
6799
6800 tbody.append($('<tr />')
6801 .append($('<td />')
6802 .addClass('text-muted')
6803 .attr('colspan', cols)
6804 .text(this.label('placeholder') || L.tr('There are no entries defined yet.'))));
6805 }
6806
6807 for (var i = 0; i < s.length; i++)
6808 {
6809 var sid = s[i]['.name'];
6810 var inst = this.instance[sid] = { tabs: [ ] };
6811
6812 tbody.append(this._render_table_row(sid, i));
6813 }
6814
6815 return tbody;
6816 },
6817
6818 _render_body: function(condensed)
6819 {
6820 return $('<table />')
6821 .addClass('table table-condensed table-hover')
6822 .append(this._render_table_head())
6823 .append(this._render_table_body());
6824 }
6825 });
6826
6827 this.cbi.NamedSection = this.cbi.TypedSection.extend({
6828 sections: function(cb)
6829 {
6830 var sa = [ ];
6831 var sl = L.uci.sections(this.map.uci_package);
6832
6833 for (var i = 0; i < sl.length; i++)
6834 if (sl[i]['.name'] == this.uci_type)
6835 {
6836 sa.push(sl[i]);
6837 break;
6838 }
6839
6840 if (typeof(cb) == 'function' && sa.length > 0)
6841 cb.call(this, sa[0]);
6842
6843 return sa;
6844 }
6845 });
6846
6847 this.cbi.SingleSection = this.cbi.NamedSection.extend({
6848 render: function()
6849 {
6850 this.instance = { };
6851 this.instance[this.uci_type] = { tabs: [ ] };
6852
6853 return this._render_section_body(this.uci_type, 0);
6854 }
6855 });
6856
6857 this.cbi.DummySection = this.cbi.TypedSection.extend({
6858 sections: function(cb)
6859 {
6860 if (typeof(cb) == 'function')
6861 cb.apply(this, [ { '.name': this.uci_type } ]);
6862
6863 return [ { '.name': this.uci_type } ];
6864 }
6865 });
6866
6867 this.cbi.Map = this.ui.AbstractWidget.extend({
6868 init: function(uci_package, options)
6869 {
6870 var self = this;
6871
6872 this.uci_package = uci_package;
6873 this.sections = [ ];
6874 this.options = L.defaults(options, {
6875 save: function() { },
6876 prepare: function() { }
6877 });
6878 },
6879
6880 _load_cb: function()
6881 {
6882 var deferreds = [ L.deferrable(this.options.prepare()) ];
6883
6884 for (var i = 0; i < this.sections.length; i++)
6885 {
6886 for (var f in this.sections[i].fields)
6887 {
6888 if (typeof(this.sections[i].fields[f].load) != 'function')
6889 continue;
6890
6891 var s = this.sections[i].sections();
6892 for (var j = 0; j < s.length; j++)
6893 {
6894 var rv = this.sections[i].fields[f].load(s[j]['.name']);
6895 if (L.isDeferred(rv))
6896 deferreds.push(rv);
6897 }
6898 }
6899 }
6900
6901 return $.when.apply($, deferreds);
6902 },
6903
6904 load: function()
6905 {
6906 var self = this;
6907 var packages = { };
6908
6909 for (var i = 0; i < this.sections.length; i++)
6910 this.sections[i].ucipackages(packages);
6911
6912 packages[this.uci_package] = true;
6913
6914 for (var pkg in packages)
6915 if (!L.uci.writable(pkg))
6916 this.options.readonly = true;
6917
6918 return L.uci.load(L.toArray(packages)).then(function() {
6919 return self._load_cb();
6920 });
6921 },
6922
6923 _ev_tab: function(ev)
6924 {
6925 var self = ev.data.self;
6926
6927 self.validate();
6928 self.active_tab = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
6929 },
6930
6931 _render_tab_head: function(tab_index)
6932 {
6933 var section = this.sections[tab_index];
6934 var cur = this.active_tab || 0;
6935
6936 var tabh = $('<li />')
6937 .append($('<a />')
6938 .attr('id', section.id('sectiontab'))
6939 .attr('href', '#' + section.id('section'))
6940 .attr('data-toggle', 'tab')
6941 .attr('data-luci2-tab-index', tab_index)
6942 .text(section.label('caption') + ' ')
6943 .append($('<span />')
6944 .addClass('badge'))
6945 .on('shown.bs.tab', { self: this }, this._ev_tab));
6946
6947 if (cur == tab_index)
6948 tabh.addClass('active');
6949
6950 return tabh;
6951 },
6952
6953 _render_tab_body: function(tab_index)
6954 {
6955 var section = this.sections[tab_index];
6956 var desc = section.label('description');
6957 var cur = this.active_tab || 0;
6958
6959 var tabb = $('<div />')
6960 .addClass('tab-pane')
6961 .attr('id', section.id('section'))
6962 .attr('data-luci2-tab-index', tab_index);
6963
6964 if (cur == tab_index)
6965 tabb.addClass('active');
6966
6967 if (desc)
6968 tabb.append($('<p />')
6969 .text(desc));
6970
6971 var s = section.render(this.options.tabbed);
6972
6973 if (this.options.readonly || section.options.readonly)
6974 s.find('input, select, button, img.cbi-button').attr('disabled', true);
6975
6976 tabb.append(s);
6977
6978 return tabb;
6979 },
6980
6981 _render_body: function()
6982 {
6983 var tabs = $('<ul />')
6984 .addClass('nav nav-tabs');
6985
6986 var body = $('<div />')
6987 .append(tabs);
6988
6989 for (var i = 0; i < this.sections.length; i++)
6990 {
6991 tabs.append(this._render_tab_head(i));
6992 body.append(this._render_tab_body(i));
6993 }
6994
6995 if (this.options.tabbed)
6996 body.addClass('tab-content');
6997 else
6998 tabs.hide();
6999
7000 return body;
7001 },
7002
7003 _render_footer: function()
7004 {
7005 return $('<div />')
7006 .addClass('panel panel-default panel-body text-right')
7007 .append($('<div />')
7008 .addClass('btn-group')
7009 .append(L.ui.button(L.tr('Save & Apply'), 'primary')
7010 .click({ self: this }, function(ev) { }))
7011 .append(L.ui.button(L.tr('Save'), 'default')
7012 .click({ self: this }, function(ev) { ev.data.self.send(); }))
7013 .append(L.ui.button(L.tr('Reset'), 'default')
7014 .click({ self: this }, function(ev) { ev.data.self.insertInto(ev.data.self.target); })));
7015 },
7016
7017 render: function()
7018 {
7019 var map = $('<form />');
7020
7021 if (typeof(this.options.caption) == 'string')
7022 map.append($('<h2 />')
7023 .text(this.options.caption));
7024
7025 if (typeof(this.options.description) == 'string')
7026 map.append($('<p />')
7027 .text(this.options.description));
7028
7029 map.append(this._render_body());
7030
7031 if (this.options.pageaction !== false)
7032 map.append(this._render_footer());
7033
7034 return map;
7035 },
7036
7037 finish: function()
7038 {
7039 for (var i = 0; i < this.sections.length; i++)
7040 this.sections[i].finish();
7041
7042 this.validate();
7043 },
7044
7045 redraw: function()
7046 {
7047 this.target.hide().empty().append(this.render());
7048 this.finish();
7049 this.target.show();
7050 },
7051
7052 section: function(widget, uci_type, options)
7053 {
7054 var w = widget ? new widget(uci_type, options) : null;
7055
7056 if (!(w instanceof L.cbi.AbstractSection))
7057 throw 'Widget must be an instance of AbstractSection';
7058
7059 w.map = this;
7060 w.index = this.sections.length;
7061
7062 this.sections.push(w);
7063 return w;
7064 },
7065
7066 formvalue: function()
7067 {
7068 var rv = { };
7069
7070 for (var i = 0; i < this.sections.length; i++)
7071 {
7072 var sids = this.sections[i].formvalue();
7073 for (var sid in sids)
7074 {
7075 var s = rv[sid] || (rv[sid] = { });
7076 $.extend(s, sids[sid]);
7077 }
7078 }
7079
7080 return rv;
7081 },
7082
7083 add: function(conf, type, name)
7084 {
7085 return L.uci.add(conf, type, name);
7086 },
7087
7088 remove: function(conf, sid)
7089 {
7090 return L.uci.remove(conf, sid);
7091 },
7092
7093 get: function(conf, sid, opt)
7094 {
7095 return L.uci.get(conf, sid, opt);
7096 },
7097
7098 set: function(conf, sid, opt, val)
7099 {
7100 return L.uci.set(conf, sid, opt, val);
7101 },
7102
7103 validate: function()
7104 {
7105 var rv = true;
7106
7107 for (var i = 0; i < this.sections.length; i++)
7108 {
7109 if (!this.sections[i].validate())
7110 rv = false;
7111 }
7112
7113 return rv;
7114 },
7115
7116 save: function()
7117 {
7118 var self = this;
7119
7120 if (self.options.readonly)
7121 return L.deferrable();
7122
7123 var deferreds = [ ];
7124
7125 for (var i = 0; i < self.sections.length; i++)
7126 {
7127 if (self.sections[i].options.readonly)
7128 continue;
7129
7130 for (var f in self.sections[i].fields)
7131 {
7132 if (typeof(self.sections[i].fields[f].save) != 'function')
7133 continue;
7134
7135 var s = self.sections[i].sections();
7136 for (var j = 0; j < s.length; j++)
7137 {
7138 var rv = self.sections[i].fields[f].save(s[j]['.name']);
7139 if (L.isDeferred(rv))
7140 deferreds.push(rv);
7141 }
7142 }
7143 }
7144
7145 return $.when.apply($, deferreds).then(function() {
7146 return L.deferrable(self.options.save());
7147 });
7148 },
7149
7150 send: function()
7151 {
7152 if (!this.validate())
7153 return L.deferrable();
7154
7155 var self = this;
7156
7157 L.ui.saveScrollTop();
7158 L.ui.loading(true);
7159
7160 return this.save().then(function() {
7161 return L.uci.save();
7162 }).then(function() {
7163 return L.ui.updateChanges();
7164 }).then(function() {
7165 return self.load();
7166 }).then(function() {
7167 self.redraw();
7168 self = null;
7169
7170 L.ui.loading(false);
7171 L.ui.restoreScrollTop();
7172 });
7173 },
7174
7175 insertInto: function(id)
7176 {
7177 var self = this;
7178 self.target = $(id);
7179
7180 L.ui.loading(true);
7181 self.target.hide();
7182
7183 return self.load().then(function() {
7184 self.target.empty().append(self.render());
7185 self.finish();
7186 self.target.show();
7187 self = null;
7188 L.ui.loading(false);
7189 });
7190 }
7191 });
7192
7193 this.cbi.Modal = this.cbi.Map.extend({
7194 _render_footer: function()
7195 {
7196 return $('<div />')
7197 .addClass('btn-group')
7198 .append(L.ui.button(L.tr('Save & Apply'), 'primary')
7199 .click({ self: this }, function(ev) { }))
7200 .append(L.ui.button(L.tr('Save'), 'default')
7201 .click({ self: this }, function(ev) { ev.data.self.send(); }))
7202 .append(L.ui.button(L.tr('Cancel'), 'default')
7203 .click({ self: this }, function(ev) { L.ui.dialog(false); }));
7204 },
7205
7206 render: function()
7207 {
7208 var modal = L.ui.dialog(this.label('caption'), null, { wide: true });
7209 var map = $('<form />');
7210
7211 var desc = this.label('description');
7212 if (desc)
7213 map.append($('<p />').text(desc));
7214
7215 map.append(this._render_body());
7216
7217 modal.find('.modal-body').append(map);
7218 modal.find('.modal-footer').append(this._render_footer());
7219
7220 return modal;
7221 },
7222
7223 redraw: function()
7224 {
7225 this.render();
7226 this.finish();
7227 },
7228
7229 show: function()
7230 {
7231 var self = this;
7232
7233 L.ui.loading(true);
7234
7235 return self.load().then(function() {
7236 self.render();
7237 self.finish();
7238
7239 L.ui.loading(false);
7240 });
7241 }
7242 });
7243 };
DEPRECATED - use https://github.com/jow-/luci-ng