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


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