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