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 (validation.types['ip4addr'].apply(this) ||
4615                                 validation.types['ip6addr'].apply(this))
4616                                 return true;
4617
4618                         validation.i18n('Must be a valid IP address');
4619                         return false;
4620                 },
4621
4622                 'ip4addr': function()
4623                 {
4624                         if (this.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})(\/(\S+))?$/))
4625                         {
4626                                 if ((RegExp.$1 >= 0) && (RegExp.$1 <= 255) &&
4627                                     (RegExp.$2 >= 0) && (RegExp.$2 <= 255) &&
4628                                     (RegExp.$3 >= 0) && (RegExp.$3 <= 255) &&
4629                                     (RegExp.$4 >= 0) && (RegExp.$4 <= 255) &&
4630                                     ((RegExp.$6.indexOf('.') < 0)
4631                                       ? ((RegExp.$6 >= 0) && (RegExp.$6 <= 32))
4632                                       : (validation.types['ip4addr'].apply(RegExp.$6))))
4633                                         return true;
4634                         }
4635
4636                         validation.i18n('Must be a valid IPv4 address');
4637                         return false;
4638                 },
4639
4640                 'ip6addr': function()
4641                 {
4642                         if (this.match(/^([a-fA-F0-9:.]+)(\/(\d+))?$/))
4643                         {
4644                                 if (!RegExp.$2 || ((RegExp.$3 >= 0) && (RegExp.$3 <= 128)))
4645                                 {
4646                                         var addr = RegExp.$1;
4647
4648                                         if (addr == '::')
4649                                         {
4650                                                 return true;
4651                                         }
4652
4653                                         if (addr.indexOf('.') > 0)
4654                                         {
4655                                                 var off = addr.lastIndexOf(':');
4656
4657                                                 if (!(off && validation.types['ip4addr'].apply(addr.substr(off+1))))
4658                                                 {
4659                                                         validation.i18n('Must be a valid IPv6 address');
4660                                                         return false;
4661                                                 }
4662
4663                                                 addr = addr.substr(0, off) + ':0:0';
4664                                         }
4665
4666                                         if (addr.indexOf('::') >= 0)
4667                                         {
4668                                                 var colons = 0;
4669                                                 var fill = '0';
4670
4671                                                 for (var i = 1; i < (addr.length-1); i++)
4672                                                         if (addr.charAt(i) == ':')
4673                                                                 colons++;
4674
4675                                                 if (colons > 7)
4676                                                 {
4677                                                         validation.i18n('Must be a valid IPv6 address');
4678                                                         return false;
4679                                                 }
4680
4681                                                 for (var i = 0; i < (7 - colons); i++)
4682                                                         fill += ':0';
4683
4684                                                 if (addr.match(/^(.*?)::(.*?)$/))
4685                                                         addr = (RegExp.$1 ? RegExp.$1 + ':' : '') + fill +
4686                                                                    (RegExp.$2 ? ':' + RegExp.$2 : '');
4687                                         }
4688
4689                                         if (addr.match(/^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/) != null)
4690                                                 return true;
4691
4692                                         validation.i18n('Must be a valid IPv6 address');
4693                                         return false;
4694                                 }
4695                         }
4696
4697                         validation.i18n('Must be a valid IPv6 address');
4698                         return false;
4699                 },
4700
4701                 'port': function()
4702                 {
4703                         if (validation.types['integer'].apply(this) &&
4704                                 (this >= 0) && (this <= 65535))
4705                                 return true;
4706
4707                         validation.i18n('Must be a valid port number');
4708                         return false;
4709                 },
4710
4711                 'portrange': function()
4712                 {
4713                         if (this.match(/^(\d+)-(\d+)$/))
4714                         {
4715                                 var p1 = RegExp.$1;
4716                                 var p2 = RegExp.$2;
4717
4718                                 if (validation.types['port'].apply(p1) &&
4719                                     validation.types['port'].apply(p2) &&
4720                                     (parseInt(p1) <= parseInt(p2)))
4721                                         return true;
4722                         }
4723                         else if (validation.types['port'].apply(this))
4724                         {
4725                                 return true;
4726                         }
4727
4728                         validation.i18n('Must be a valid port range');
4729                         return false;
4730                 },
4731
4732                 'macaddr': function()
4733                 {
4734                         if (this.match(/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/) != null)
4735                                 return true;
4736
4737                         validation.i18n('Must be a valid MAC address');
4738                         return false;
4739                 },
4740
4741                 'host': function()
4742                 {
4743                         if (validation.types['hostname'].apply(this) ||
4744                             validation.types['ipaddr'].apply(this))
4745                                 return true;
4746
4747                         validation.i18n('Must be a valid hostname or IP address');
4748                         return false;
4749                 },
4750
4751                 'hostname': function()
4752                 {
4753                         if ((this.length <= 253) &&
4754                             ((this.match(/^[a-zA-Z0-9]+$/) != null ||
4755                              (this.match(/^[a-zA-Z0-9_][a-zA-Z0-9_\-.]*[a-zA-Z0-9]$/) &&
4756                               this.match(/[^0-9.]/)))))
4757                                 return true;
4758
4759                         validation.i18n('Must be a valid host name');
4760                         return false;
4761                 },
4762
4763                 'network': function()
4764                 {
4765                         if (validation.types['uciname'].apply(this) ||
4766                             validation.types['host'].apply(this))
4767                                 return true;
4768
4769                         validation.i18n('Must be a valid network name');
4770                         return false;
4771                 },
4772
4773                 'wpakey': function()
4774                 {
4775                         var v = this;
4776
4777                         if ((v.length == 64)
4778                               ? (v.match(/^[a-fA-F0-9]{64}$/) != null)
4779                                   : ((v.length >= 8) && (v.length <= 63)))
4780                                 return true;
4781
4782                         validation.i18n('Must be a valid WPA key');
4783                         return false;
4784                 },
4785
4786                 'wepkey': function()
4787                 {
4788                         var v = this;
4789
4790                         if (v.substr(0,2) == 's:')
4791                                 v = v.substr(2);
4792
4793                         if (((v.length == 10) || (v.length == 26))
4794                               ? (v.match(/^[a-fA-F0-9]{10,26}$/) != null)
4795                               : ((v.length == 5) || (v.length == 13)))
4796                                 return true;
4797
4798                         validation.i18n('Must be a valid WEP key');
4799                         return false;
4800                 },
4801
4802                 'uciname': function()
4803                 {
4804                         if (this.match(/^[a-zA-Z0-9_]+$/) != null)
4805                                 return true;
4806
4807                         validation.i18n('Must be a valid UCI identifier');
4808                         return false;
4809                 },
4810
4811                 'range': function(min, max)
4812                 {
4813                         var val = parseFloat(this);
4814
4815                         if (validation.types['integer'].apply(this) &&
4816                             !isNaN(min) && !isNaN(max) && ((val >= min) && (val <= max)))
4817                                 return true;
4818
4819                         validation.i18n('Must be a number between %d and %d');
4820                         return false;
4821                 },
4822
4823                 'min': function(min)
4824                 {
4825                         var val = parseFloat(this);
4826
4827                         if (validation.types['integer'].apply(this) &&
4828                             !isNaN(min) && !isNaN(val) && (val >= min))
4829                                 return true;
4830
4831                         validation.i18n('Must be a number greater or equal to %d');
4832                         return false;
4833                 },
4834
4835                 'max': function(max)
4836                 {
4837                         var val = parseFloat(this);
4838
4839                         if (validation.types['integer'].apply(this) &&
4840                             !isNaN(max) && !isNaN(val) && (val <= max))
4841                                 return true;
4842
4843                         validation.i18n('Must be a number lower or equal to %d');
4844                         return false;
4845                 },
4846
4847                 'rangelength': function(min, max)
4848                 {
4849                         var val = '' + this;
4850
4851                         if (!isNaN(min) && !isNaN(max) &&
4852                             (val.length >= min) && (val.length <= max))
4853                                 return true;
4854
4855                         validation.i18n('Must be between %d and %d characters');
4856                         return false;
4857                 },
4858
4859                 'minlength': function(min)
4860                 {
4861                         var val = '' + this;
4862
4863                         if (!isNaN(min) && (val.length >= min))
4864                                 return true;
4865
4866                         validation.i18n('Must be at least %d characters');
4867                         return false;
4868                 },
4869
4870                 'maxlength': function(max)
4871                 {
4872                         var val = '' + this;
4873
4874                         if (!isNaN(max) && (val.length <= max))
4875                                 return true;
4876
4877                         validation.i18n('Must be at most %d characters');
4878                         return false;
4879                 },
4880
4881                 'or': function()
4882                 {
4883                         var msgs = [ ];
4884
4885                         for (var i = 0; i < arguments.length; i += 2)
4886                         {
4887                                 delete validation.message;
4888
4889                                 if (typeof(arguments[i]) != 'function')
4890                                 {
4891                                         if (arguments[i] == this)
4892                                                 return true;
4893                                         i--;
4894                                 }
4895                                 else if (arguments[i].apply(this, arguments[i+1]))
4896                                 {
4897                                         return true;
4898                                 }
4899
4900                                 if (validation.message)
4901                                         msgs.push(validation.message.format.apply(validation.message, arguments[i+1]));
4902                         }
4903
4904                         validation.message = msgs.join( L.tr(' - or - '));
4905                         return false;
4906                 },
4907
4908                 'and': function()
4909                 {
4910                         var msgs = [ ];
4911
4912                         for (var i = 0; i < arguments.length; i += 2)
4913                         {
4914                                 delete validation.message;
4915
4916                                 if (typeof arguments[i] != 'function')
4917                                 {
4918                                         if (arguments[i] != this)
4919                                                 return false;
4920                                         i--;
4921                                 }
4922                                 else if (!arguments[i].apply(this, arguments[i+1]))
4923                                 {
4924                                         return false;
4925                                 }
4926
4927                                 if (validation.message)
4928                                         msgs.push(validation.message.format.apply(validation.message, arguments[i+1]));
4929                         }
4930
4931                         validation.message = msgs.join(', ');
4932                         return true;
4933                 },
4934
4935                 'neg': function()
4936                 {
4937                         return validation.types['or'].apply(
4938                                 this.replace(/^[ \t]*![ \t]*/, ''), arguments);
4939                 },
4940
4941                 'list': function(subvalidator, subargs)
4942                 {
4943                         if (typeof subvalidator != 'function')
4944                                 return false;
4945
4946                         var tokens = this.match(/[^ \t]+/g);
4947                         for (var i = 0; i < tokens.length; i++)
4948                                 if (!subvalidator.apply(tokens[i], subargs))
4949                                         return false;
4950
4951                         return true;
4952                 },
4953
4954                 'phonedigit': function()
4955                 {
4956                         if (this.match(/^[0-9\*#!\.]+$/) != null)
4957                                 return true;
4958
4959                         validation.i18n('Must be a valid phone number digit');
4960                         return false;
4961                 },
4962
4963                 'string': function()
4964                 {
4965                         return true;
4966                 }
4967         };
4968
4969
4970         this.cbi.AbstractValue = this.ui.AbstractWidget.extend({
4971                 init: function(name, options)
4972                 {
4973                         this.name = name;
4974                         this.instance = { };
4975                         this.dependencies = [ ];
4976                         this.rdependency = { };
4977
4978                         this.options = L.defaults(options, {
4979                                 placeholder: '',
4980                                 datatype: 'string',
4981                                 optional: false,
4982                                 keep: true
4983                         });
4984                 },
4985
4986                 id: function(sid)
4987                 {
4988                         return this.section.id('field', sid || '__unknown__', this.name);
4989                 },
4990
4991                 render: function(sid, condensed)
4992                 {
4993                         var i = this.instance[sid] = { };
4994
4995                         i.top = $('<div />');
4996
4997                         if (!condensed)
4998                         {
4999                                 i.top.addClass('form-group');
5000
5001                                 if (typeof(this.options.caption) == 'string')
5002                                         $('<label />')
5003                                                 .addClass('col-lg-2 control-label')
5004                                                 .attr('for', this.id(sid))
5005                                                 .text(this.options.caption)
5006                                                 .appendTo(i.top);
5007                         }
5008
5009                         i.error = $('<div />')
5010                                 .hide()
5011                                 .addClass('label label-danger');
5012
5013                         i.widget = $('<div />')
5014
5015                                 .append(this.widget(sid))
5016                                 .append(i.error)
5017                                 .appendTo(i.top);
5018
5019                         if (!condensed)
5020                         {
5021                                 i.widget.addClass('col-lg-5');
5022
5023                                 $('<div />')
5024                                         .addClass('col-lg-5')
5025                                         .text((typeof(this.options.description) == 'string') ? this.options.description : '')
5026                                         .appendTo(i.top);
5027                         }
5028
5029                         return i.top;
5030                 },
5031
5032                 active: function(sid)
5033                 {
5034                         return (this.instance[sid] && !this.instance[sid].disabled);
5035                 },
5036
5037                 ucipath: function(sid)
5038                 {
5039                         return {
5040                                 config:  (this.options.uci_package || this.map.uci_package),
5041                                 section: (this.options.uci_section || sid),
5042                                 option:  (this.options.uci_option  || this.name)
5043                         };
5044                 },
5045
5046                 ucivalue: function(sid)
5047                 {
5048                         var uci = this.ucipath(sid);
5049                         var val = this.map.get(uci.config, uci.section, uci.option);
5050
5051                         if (typeof(val) == 'undefined')
5052                                 return this.options.initial;
5053
5054                         return val;
5055                 },
5056
5057                 formvalue: function(sid)
5058                 {
5059                         var v = $('#' + this.id(sid)).val();
5060                         return (v === '') ? undefined : v;
5061                 },
5062
5063                 textvalue: function(sid)
5064                 {
5065                         var v = this.formvalue(sid);
5066
5067                         if (typeof(v) == 'undefined' || ($.isArray(v) && !v.length))
5068                                 v = this.ucivalue(sid);
5069
5070                         if (typeof(v) == 'undefined' || ($.isArray(v) && !v.length))
5071                                 v = this.options.placeholder;
5072
5073                         if (typeof(v) == 'undefined' || v === '')
5074                                 return undefined;
5075
5076                         if (typeof(v) == 'string' && $.isArray(this.choices))
5077                         {
5078                                 for (var i = 0; i < this.choices.length; i++)
5079                                         if (v === this.choices[i][0])
5080                                                 return this.choices[i][1];
5081                         }
5082                         else if (v === true)
5083                                 return L.tr('yes');
5084                         else if (v === false)
5085                                 return L.tr('no');
5086                         else if ($.isArray(v))
5087                                 return v.join(', ');
5088
5089                         return v;
5090                 },
5091
5092                 changed: function(sid)
5093                 {
5094                         var a = this.ucivalue(sid);
5095                         var b = this.formvalue(sid);
5096
5097                         if (typeof(a) != typeof(b))
5098                                 return true;
5099
5100                         if (typeof(a) == 'object')
5101                         {
5102                                 if (a.length != b.length)
5103                                         return true;
5104
5105                                 for (var i = 0; i < a.length; i++)
5106                                         if (a[i] != b[i])
5107                                                 return true;
5108
5109                                 return false;
5110                         }
5111
5112                         return (a != b);
5113                 },
5114
5115                 save: function(sid)
5116                 {
5117                         var uci = this.ucipath(sid);
5118
5119                         if (this.instance[sid].disabled)
5120                         {
5121                                 if (!this.options.keep)
5122                                         return this.map.set(uci.config, uci.section, uci.option, undefined);
5123
5124                                 return false;
5125                         }
5126
5127                         var chg = this.changed(sid);
5128                         var val = this.formvalue(sid);
5129
5130                         if (chg)
5131                                 this.map.set(uci.config, uci.section, uci.option, val);
5132
5133                         return chg;
5134                 },
5135
5136                 _ev_validate: function(ev)
5137                 {
5138                         var d = ev.data;
5139                         var rv = true;
5140                         var val = d.elem.val();
5141                         var vstack = d.vstack;
5142
5143                         if (vstack && typeof(vstack[0]) == 'function')
5144                         {
5145                                 delete validation.message;
5146
5147                                 if ((val.length == 0 && !d.opt))
5148                                 {
5149                                         d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
5150                                         d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
5151
5152                                         d.inst.error.text(L.tr('Field must not be empty')).show();
5153                                         rv = false;
5154                                 }
5155                                 else if (val.length > 0 && !vstack[0].apply(val, vstack[1]))
5156                                 {
5157                                         d.elem.parents('div.form-group, td').first().addClass('luci2-form-error');
5158                                         d.elem.parents('div.input-group, div.form-group, td').first().addClass('has-error');
5159
5160                                         d.inst.error.text(validation.message.format.apply(validation.message, vstack[1])).show();
5161                                         rv = false;
5162                                 }
5163                                 else
5164                                 {
5165                                         d.elem.parents('div.form-group, td').first().removeClass('luci2-form-error');
5166                                         d.elem.parents('div.input-group, div.form-group, td').first().removeClass('has-error');
5167
5168                                         if (d.multi && d.inst.widget && d.inst.widget.find('input.error, select.error').length > 0)
5169                                                 rv = false;
5170                                         else
5171                                                 d.inst.error.text('').hide();
5172                                 }
5173                         }
5174
5175                         if (rv)
5176                         {
5177                                 for (var field in d.self.rdependency)
5178                                         d.self.rdependency[field].toggle(d.sid);
5179
5180                                 d.self.section.tabtoggle(d.sid);
5181                         }
5182
5183                         return rv;
5184                 },
5185
5186                 validator: function(sid, elem, multi)
5187                 {
5188                         var evdata = {
5189                                 self:   this,
5190                                 sid:    sid,
5191                                 elem:   elem,
5192                                 multi:  multi,
5193                                 inst:   this.instance[sid],
5194                                 opt:    this.options.optional
5195                         };
5196
5197                         if (this.events)
5198                                 for (var evname in this.events)
5199                                         elem.on(evname, evdata, this.events[evname]);
5200
5201                         if (typeof(this.options.datatype) == 'undefined' && $.isEmptyObject(this.rdependency))
5202                                 return elem;
5203
5204                         var vstack;
5205                         if (typeof(this.options.datatype) == 'string')
5206                         {
5207                                 try {
5208                                         evdata.vstack = L.cbi.validation.compile(this.options.datatype);
5209                                 } catch(e) { };
5210                         }
5211                         else if (typeof(this.options.datatype) == 'function')
5212                         {
5213                                 var vfunc = this.options.datatype;
5214                                 evdata.vstack = [ function(elem) {
5215                                         var rv = vfunc(this, elem);
5216                                         if (rv !== true)
5217                                                 validation.message = rv;
5218                                         return (rv === true);
5219                                 }, [ elem ] ];
5220                         }
5221
5222                         if (elem.prop('tagName') == 'SELECT')
5223                         {
5224                                 elem.change(evdata, this._ev_validate);
5225                         }
5226                         else if (elem.prop('tagName') == 'INPUT' && elem.attr('type') == 'checkbox')
5227                         {
5228                                 elem.click(evdata, this._ev_validate);
5229                                 elem.blur(evdata, this._ev_validate);
5230                         }
5231                         else
5232                         {
5233                                 elem.keyup(evdata, this._ev_validate);
5234                                 elem.blur(evdata, this._ev_validate);
5235                         }
5236
5237                         elem.attr('cbi-validate', true).on('validate', evdata, this._ev_validate);
5238
5239                         return elem;
5240                 },
5241
5242                 validate: function(sid)
5243                 {
5244                         var i = this.instance[sid];
5245
5246                         i.widget.find('[cbi-validate]').trigger('validate');
5247
5248                         return (i.disabled || i.error.text() == '');
5249                 },
5250
5251                 depends: function(d, v, add)
5252                 {
5253                         var dep;
5254
5255                         if ($.isArray(d))
5256                         {
5257                                 dep = { };
5258                                 for (var i = 0; i < d.length; i++)
5259                                 {
5260                                         if (typeof(d[i]) == 'string')
5261                                                 dep[d[i]] = true;
5262                                         else if (d[i] instanceof L.cbi.AbstractValue)
5263                                                 dep[d[i].name] = true;
5264                                 }
5265                         }
5266                         else if (d instanceof L.cbi.AbstractValue)
5267                         {
5268                                 dep = { };
5269                                 dep[d.name] = (typeof(v) == 'undefined') ? true : v;
5270                         }
5271                         else if (typeof(d) == 'object')
5272                         {
5273                                 dep = d;
5274                         }
5275                         else if (typeof(d) == 'string')
5276                         {
5277                                 dep = { };
5278                                 dep[d] = (typeof(v) == 'undefined') ? true : v;
5279                         }
5280
5281                         if (!dep || $.isEmptyObject(dep))
5282                                 return this;
5283
5284                         for (var field in dep)
5285                         {
5286                                 var f = this.section.fields[field];
5287                                 if (f)
5288                                         f.rdependency[this.name] = this;
5289                                 else
5290                                         delete dep[field];
5291                         }
5292
5293                         if ($.isEmptyObject(dep))
5294                                 return this;
5295
5296                         if (!add || !this.dependencies.length)
5297                                 this.dependencies.push(dep);
5298                         else
5299                                 for (var i = 0; i < this.dependencies.length; i++)
5300                                         $.extend(this.dependencies[i], dep);
5301
5302                         return this;
5303                 },
5304
5305                 toggle: function(sid)
5306                 {
5307                         var d = this.dependencies;
5308                         var i = this.instance[sid];
5309
5310                         if (!d.length)
5311                                 return true;
5312
5313                         for (var n = 0; n < d.length; n++)
5314                         {
5315                                 var rv = true;
5316
5317                                 for (var field in d[n])
5318                                 {
5319                                         var val = this.section.fields[field].formvalue(sid);
5320                                         var cmp = d[n][field];
5321
5322                                         if (typeof(cmp) == 'boolean')
5323                                         {
5324                                                 if (cmp == (typeof(val) == 'undefined' || val === '' || val === false))
5325                                                 {
5326                                                         rv = false;
5327                                                         break;
5328                                                 }
5329                                         }
5330                                         else if (typeof(cmp) == 'string' || typeof(cmp) == 'number')
5331                                         {
5332                                                 if (val != cmp)
5333                                                 {
5334                                                         rv = false;
5335                                                         break;
5336                                                 }
5337                                         }
5338                                         else if (typeof(cmp) == 'function')
5339                                         {
5340                                                 if (!cmp(val))
5341                                                 {
5342                                                         rv = false;
5343                                                         break;
5344                                                 }
5345                                         }
5346                                         else if (cmp instanceof RegExp)
5347                                         {
5348                                                 if (!cmp.test(val))
5349                                                 {
5350                                                         rv = false;
5351                                                         break;
5352                                                 }
5353                                         }
5354                                 }
5355
5356                                 if (rv)
5357                                 {
5358                                         if (i.disabled)
5359                                         {
5360                                                 i.disabled = false;
5361                                                 i.top.fadeIn();
5362                                         }
5363
5364                                         return true;
5365                                 }
5366                         }
5367
5368                         if (!i.disabled)
5369                         {
5370                                 i.disabled = true;
5371                                 i.top.is(':visible') ? i.top.fadeOut() : i.top.hide();
5372                         }
5373
5374                         return false;
5375                 }
5376         });
5377
5378         this.cbi.CheckboxValue = this.cbi.AbstractValue.extend({
5379                 widget: function(sid)
5380                 {
5381                         var o = this.options;
5382
5383                         if (typeof(o.enabled)  == 'undefined') o.enabled  = '1';
5384                         if (typeof(o.disabled) == 'undefined') o.disabled = '0';
5385
5386                         var i = $('<input />')
5387                                 .attr('id', this.id(sid))
5388                                 .attr('type', 'checkbox')
5389                                 .prop('checked', this.ucivalue(sid));
5390
5391                         return $('<div />')
5392                                 .addClass('checkbox')
5393                                 .append(this.validator(sid, i));
5394                 },
5395
5396                 ucivalue: function(sid)
5397                 {
5398                         var v = this.callSuper('ucivalue', sid);
5399
5400                         if (typeof(v) == 'boolean')
5401                                 return v;
5402
5403                         return (v == this.options.enabled);
5404                 },
5405
5406                 formvalue: function(sid)
5407                 {
5408                         var v = $('#' + this.id(sid)).prop('checked');
5409
5410                         if (typeof(v) == 'undefined')
5411                                 return !!this.options.initial;
5412
5413                         return v;
5414                 },
5415
5416                 save: function(sid)
5417                 {
5418                         var uci = this.ucipath(sid);
5419
5420                         if (this.instance[sid].disabled)
5421                         {
5422                                 if (!this.options.keep)
5423                                         return this.map.set(uci.config, uci.section, uci.option, undefined);
5424
5425                                 return false;
5426                         }
5427
5428                         var chg = this.changed(sid);
5429                         var val = this.formvalue(sid);
5430
5431                         if (chg)
5432                         {
5433                                 if (this.options.optional && val == this.options.initial)
5434                                         this.map.set(uci.config, uci.section, uci.option, undefined);
5435                                 else
5436                                         this.map.set(uci.config, uci.section, uci.option, val ? this.options.enabled : this.options.disabled);
5437                         }
5438
5439                         return chg;
5440                 }
5441         });
5442
5443         this.cbi.InputValue = this.cbi.AbstractValue.extend({
5444                 widget: function(sid)
5445                 {
5446                         var i = $('<input />')
5447                                 .addClass('form-control')
5448                                 .attr('id', this.id(sid))
5449                                 .attr('type', 'text')
5450                                 .attr('placeholder', this.options.placeholder)
5451                                 .val(this.ucivalue(sid));
5452
5453                         return this.validator(sid, i);
5454                 }
5455         });
5456
5457         this.cbi.PasswordValue = this.cbi.AbstractValue.extend({
5458                 widget: function(sid)
5459                 {
5460                         var i = $('<input />')
5461                                 .addClass('form-control')
5462                                 .attr('id', this.id(sid))
5463                                 .attr('type', 'password')
5464                                 .attr('placeholder', this.options.placeholder)
5465                                 .val(this.ucivalue(sid));
5466
5467                         var t = $('<span />')
5468                                 .addClass('input-group-btn')
5469                                 .append(L.ui.button(L.tr('Reveal'), 'default')
5470                                         .click(function(ev) {
5471                                                 var b = $(this);
5472                                                 var i = b.parent().prev();
5473                                                 var t = i.attr('type');
5474                                                 b.text(t == 'password' ? L.tr('Hide') : L.tr('Reveal'));
5475                                                 i.attr('type', (t == 'password') ? 'text' : 'password');
5476                                                 b = i = t = null;
5477                                         }));
5478
5479                         this.validator(sid, i);
5480
5481                         return $('<div />')
5482                                 .addClass('input-group')
5483                                 .append(i)
5484                                 .append(t);
5485                 }
5486         });
5487
5488         this.cbi.ListValue = this.cbi.AbstractValue.extend({
5489                 widget: function(sid)
5490                 {
5491                         var s = $('<select />')
5492                                 .addClass('form-control');
5493
5494                         if (this.options.optional && !this.has_empty)
5495                                 $('<option />')
5496                                         .attr('value', '')
5497                                         .text(L.tr('-- Please choose --'))
5498                                         .appendTo(s);
5499
5500                         if (this.choices)
5501                                 for (var i = 0; i < this.choices.length; i++)
5502                                         $('<option />')
5503                                                 .attr('value', this.choices[i][0])
5504                                                 .text(this.choices[i][1])
5505                                                 .appendTo(s);
5506
5507                         s.attr('id', this.id(sid)).val(this.ucivalue(sid));
5508
5509                         return this.validator(sid, s);
5510                 },
5511
5512                 value: function(k, v)
5513                 {
5514                         if (!this.choices)
5515                                 this.choices = [ ];
5516
5517                         if (k == '')
5518                                 this.has_empty = true;
5519
5520                         this.choices.push([k, v || k]);
5521                         return this;
5522                 }
5523         });
5524
5525         this.cbi.MultiValue = this.cbi.ListValue.extend({
5526                 widget: function(sid)
5527                 {
5528                         var v = this.ucivalue(sid);
5529                         var t = $('<div />').attr('id', this.id(sid));
5530
5531                         if (!$.isArray(v))
5532                                 v = (typeof(v) != 'undefined') ? v.toString().split(/\s+/) : [ ];
5533
5534                         var s = { };
5535                         for (var i = 0; i < v.length; i++)
5536                                 s[v[i]] = true;
5537
5538                         if (this.choices)
5539                                 for (var i = 0; i < this.choices.length; i++)
5540                                 {
5541                                         $('<label />')
5542                                                 .addClass('checkbox')
5543                                                 .append($('<input />')
5544                                                         .attr('type', 'checkbox')
5545                                                         .attr('value', this.choices[i][0])
5546                                                         .prop('checked', s[this.choices[i][0]]))
5547                                                 .append(this.choices[i][1])
5548                                                 .appendTo(t);
5549                                 }
5550
5551                         return t;
5552                 },
5553
5554                 formvalue: function(sid)
5555                 {
5556                         var rv = [ ];
5557                         var fields = $('#' + this.id(sid) + ' > label > input');
5558
5559                         for (var i = 0; i < fields.length; i++)
5560                                 if (fields[i].checked)
5561                                         rv.push(fields[i].getAttribute('value'));
5562
5563                         return rv;
5564                 },
5565
5566                 textvalue: function(sid)
5567                 {
5568                         var v = this.formvalue(sid);
5569                         var c = { };
5570
5571                         if (this.choices)
5572                                 for (var i = 0; i < this.choices.length; i++)
5573                                         c[this.choices[i][0]] = this.choices[i][1];
5574
5575                         var t = [ ];
5576
5577                         for (var i = 0; i < v.length; i++)
5578                                 t.push(c[v[i]] || v[i]);
5579
5580                         return t.join(', ');
5581                 }
5582         });
5583
5584         this.cbi.ComboBox = this.cbi.AbstractValue.extend({
5585                 _change: function(ev)
5586                 {
5587                         var s = ev.target;
5588                         var self = ev.data.self;
5589
5590                         if (s.selectedIndex == (s.options.length - 1))
5591                         {
5592                                 ev.data.select.hide();
5593                                 ev.data.input.show().focus();
5594                                 ev.data.input.val('');
5595                         }
5596                         else if (self.options.optional && s.selectedIndex == 0)
5597                         {
5598                                 ev.data.input.val('');
5599                         }
5600                         else
5601                         {
5602                                 ev.data.input.val(ev.data.select.val());
5603                         }
5604
5605                         ev.stopPropagation();
5606                 },
5607
5608                 _blur: function(ev)
5609                 {
5610                         var seen = false;
5611                         var val = this.value;
5612                         var self = ev.data.self;
5613
5614                         ev.data.select.empty();
5615
5616                         if (self.options.optional && !self.has_empty)
5617                                 $('<option />')
5618                                         .attr('value', '')
5619                                         .text(L.tr('-- please choose --'))
5620                                         .appendTo(ev.data.select);
5621
5622                         if (self.choices)
5623                                 for (var i = 0; i < self.choices.length; i++)
5624                                 {
5625                                         if (self.choices[i][0] == val)
5626                                                 seen = true;
5627
5628                                         $('<option />')
5629                                                 .attr('value', self.choices[i][0])
5630                                                 .text(self.choices[i][1])
5631                                                 .appendTo(ev.data.select);
5632                                 }
5633
5634                         if (!seen && val != '')
5635                                 $('<option />')
5636                                         .attr('value', val)
5637                                         .text(val)
5638                                         .appendTo(ev.data.select);
5639
5640                         $('<option />')
5641                                 .attr('value', ' ')
5642                                 .text(L.tr('-- custom --'))
5643                                 .appendTo(ev.data.select);
5644
5645                         ev.data.input.hide();
5646                         ev.data.select.val(val).show().blur();
5647                 },
5648
5649                 _enter: function(ev)
5650                 {
5651                         if (ev.which != 13)
5652                                 return true;
5653
5654                         ev.preventDefault();
5655                         ev.data.self._blur(ev);
5656                         return false;
5657                 },
5658
5659                 widget: function(sid)
5660                 {
5661                         var d = $('<div />')
5662                                 .attr('id', this.id(sid));
5663
5664                         var t = $('<input />')
5665                                 .addClass('form-control')
5666                                 .attr('type', 'text')
5667                                 .hide()
5668                                 .appendTo(d);
5669
5670                         var s = $('<select />')
5671                                 .addClass('form-control')
5672                                 .appendTo(d);
5673
5674                         var evdata = {
5675                                 self: this,
5676                                 input: t,
5677                                 select: s
5678                         };
5679
5680                         s.change(evdata, this._change);
5681                         t.blur(evdata, this._blur);
5682                         t.keydown(evdata, this._enter);
5683
5684                         t.val(this.ucivalue(sid));
5685                         t.blur();
5686
5687                         this.validator(sid, t);
5688                         this.validator(sid, s);
5689
5690                         return d;
5691                 },
5692
5693                 value: function(k, v)
5694                 {
5695                         if (!this.choices)
5696                                 this.choices = [ ];
5697
5698                         if (k == '')
5699                                 this.has_empty = true;
5700
5701                         this.choices.push([k, v || k]);
5702                         return this;
5703                 },
5704
5705                 formvalue: function(sid)
5706                 {
5707                         var v = $('#' + this.id(sid)).children('input').val();
5708                         return (v == '') ? undefined : v;
5709                 }
5710         });
5711
5712         this.cbi.DynamicList = this.cbi.ComboBox.extend({
5713                 _redraw: function(focus, add, del, s)
5714                 {
5715                         var v = s.values || [ ];
5716                         delete s.values;
5717
5718                         $(s.parent).children('div.input-group').children('input').each(function(i) {
5719                                 if (i != del)
5720                                         v.push(this.value || '');
5721                         });
5722
5723                         $(s.parent).empty();
5724
5725                         if (add >= 0)
5726                         {
5727                                 focus = add + 1;
5728                                 v.splice(focus, 0, '');
5729                         }
5730                         else if (v.length == 0)
5731                         {
5732                                 focus = 0;
5733                                 v.push('');
5734                         }
5735
5736                         for (var i = 0; i < v.length; i++)
5737                         {
5738                                 var evdata = {
5739                                         sid: s.sid,
5740                                         self: s.self,
5741                                         parent: s.parent,
5742                                         index: i,
5743                                         remove: ((i+1) < v.length)
5744                                 };
5745
5746                                 var btn;
5747                                 if (evdata.remove)
5748                                         btn = L.ui.button('–', 'danger').click(evdata, this._btnclick);
5749                                 else
5750                                         btn = L.ui.button('+', 'success').click(evdata, this._btnclick);
5751
5752                                 if (this.choices)
5753                                 {
5754                                         var txt = $('<input />')
5755                                                 .addClass('form-control')
5756                                                 .attr('type', 'text')
5757                                                 .hide();
5758
5759                                         var sel = $('<select />')
5760                                                 .addClass('form-control');
5761
5762                                         $('<div />')
5763                                                 .addClass('input-group')
5764                                                 .append(txt)
5765                                                 .append(sel)
5766                                                 .append($('<span />')
5767                                                         .addClass('input-group-btn')
5768                                                         .append(btn))
5769                                                 .appendTo(s.parent);
5770
5771                                         evdata.input = this.validator(s.sid, txt, true);
5772                                         evdata.select = this.validator(s.sid, sel, true);
5773
5774                                         sel.change(evdata, this._change);
5775                                         txt.blur(evdata, this._blur);
5776                                         txt.keydown(evdata, this._keydown);
5777
5778                                         txt.val(v[i]);
5779                                         txt.blur();
5780
5781                                         if (i == focus || -(i+1) == focus)
5782                                                 sel.focus();
5783
5784                                         sel = txt = null;
5785                                 }
5786                                 else
5787                                 {
5788                                         var f = $('<input />')
5789                                                 .attr('type', 'text')
5790                                                 .attr('index', i)
5791                                                 .attr('placeholder', (i == 0) ? this.options.placeholder : '')
5792                                                 .addClass('form-control')
5793                                                 .keydown(evdata, this._keydown)
5794                                                 .keypress(evdata, this._keypress)
5795                                                 .val(v[i]);
5796
5797                                         $('<div />')
5798                                                 .addClass('input-group')
5799                                                 .append(f)
5800                                                 .append($('<span />')
5801                                                         .addClass('input-group-btn')
5802                                                         .append(btn))
5803                                                 .appendTo(s.parent);
5804
5805                                         if (i == focus)
5806                                         {
5807                                                 f.focus();
5808                                         }
5809                                         else if (-(i+1) == focus)
5810                                         {
5811                                                 f.focus();
5812
5813                                                 /* force cursor to end */
5814                                                 var val = f.val();
5815                                                 f.val(' ');
5816                                                 f.val(val);
5817                                         }
5818
5819                                         evdata.input = this.validator(s.sid, f, true);
5820
5821                                         f = null;
5822                                 }
5823
5824                                 evdata = null;
5825                         }
5826
5827                         s = null;
5828                 },
5829
5830                 _keypress: function(ev)
5831                 {
5832                         switch (ev.which)
5833                         {
5834                                 /* backspace, delete */
5835                                 case 8:
5836                                 case 46:
5837                                         if (ev.data.input.val() == '')
5838                                         {
5839                                                 ev.preventDefault();
5840                                                 return false;
5841                                         }
5842
5843                                         return true;
5844
5845                                 /* enter, arrow up, arrow down */
5846                                 case 13:
5847                                 case 38:
5848                                 case 40:
5849                                         ev.preventDefault();
5850                                         return false;
5851                         }
5852
5853                         return true;
5854                 },
5855
5856                 _keydown: function(ev)
5857                 {
5858                         var input = ev.data.input;
5859
5860                         switch (ev.which)
5861                         {
5862                                 /* backspace, delete */
5863                                 case 8:
5864                                 case 46:
5865                                         if (input.val().length == 0)
5866                                         {
5867                                                 ev.preventDefault();
5868
5869                                                 var index = ev.data.index;
5870                                                 var focus = index;
5871
5872                                                 if (ev.which == 8)
5873                                                         focus = -focus;
5874
5875                                                 ev.data.self._redraw(focus, -1, index, ev.data);
5876                                                 return false;
5877                                         }
5878
5879                                         break;
5880
5881                                 /* enter */
5882                                 case 13:
5883                                         ev.data.self._redraw(NaN, ev.data.index, -1, ev.data);
5884                                         break;
5885
5886                                 /* arrow up */
5887                                 case 38:
5888                                         var prev = input.parent().prevAll('div.input-group:first').children('input');
5889                                         if (prev.is(':visible'))
5890                                                 prev.focus();
5891                                         else
5892                                                 prev.next('select').focus();
5893                                         break;
5894
5895                                 /* arrow down */
5896                                 case 40:
5897                                         var next = input.parent().nextAll('div.input-group:first').children('input');
5898                                         if (next.is(':visible'))
5899                                                 next.focus();
5900                                         else
5901                                                 next.next('select').focus();
5902                                         break;
5903                         }
5904
5905                         return true;
5906                 },
5907
5908                 _btnclick: function(ev)
5909                 {
5910                         if (!this.getAttribute('disabled'))
5911                         {
5912                                 if (ev.data.remove)
5913                                 {
5914                                         var index = ev.data.index;
5915                                         ev.data.self._redraw(-index, -1, index, ev.data);
5916                                 }
5917                                 else
5918                                 {
5919                                         ev.data.self._redraw(NaN, ev.data.index, -1, ev.data);
5920                                 }
5921                         }
5922
5923                         return false;
5924                 },
5925
5926                 widget: function(sid)
5927                 {
5928                         this.options.optional = true;
5929
5930                         var v = this.ucivalue(sid);
5931
5932                         if (!$.isArray(v))
5933                                 v = (typeof(v) != 'undefined') ? v.toString().split(/\s+/) : [ ];
5934
5935                         var d = $('<div />')
5936                                 .attr('id', this.id(sid))
5937                                 .addClass('cbi-input-dynlist');
5938
5939                         this._redraw(NaN, -1, -1, {
5940                                 self:      this,
5941                                 parent:    d[0],
5942                                 values:    v,
5943                                 sid:       sid
5944                         });
5945
5946                         return d;
5947                 },
5948
5949                 ucivalue: function(sid)
5950                 {
5951                         var v = this.callSuper('ucivalue', sid);
5952
5953                         if (!$.isArray(v))
5954                                 v = (typeof(v) != 'undefined') ? v.toString().split(/\s+/) : [ ];
5955
5956                         return v;
5957                 },
5958
5959                 formvalue: function(sid)
5960                 {
5961                         var rv = [ ];
5962                         var fields = $('#' + this.id(sid) + ' input');
5963
5964                         for (var i = 0; i < fields.length; i++)
5965                                 if (typeof(fields[i].value) == 'string' && fields[i].value.length)
5966                                         rv.push(fields[i].value);
5967
5968                         return rv;
5969                 }
5970         });
5971
5972         this.cbi.DummyValue = this.cbi.AbstractValue.extend({
5973                 widget: function(sid)
5974                 {
5975                         return $('<div />')
5976                                 .addClass('form-control-static')
5977                                 .attr('id', this.id(sid))
5978                                 .html(this.ucivalue(sid));
5979                 },
5980
5981                 formvalue: function(sid)
5982                 {
5983                         return this.ucivalue(sid);
5984                 }
5985         });
5986
5987         this.cbi.ButtonValue = this.cbi.AbstractValue.extend({
5988                 widget: function(sid)
5989                 {
5990                         this.options.optional = true;
5991
5992                         var btn = $('<button />')
5993                                 .addClass('btn btn-default')
5994                                 .attr('id', this.id(sid))
5995                                 .attr('type', 'button')
5996                                 .text(this.label('text'));
5997
5998                         return this.validator(sid, btn);
5999                 }
6000         });
6001
6002         this.cbi.NetworkList = this.cbi.AbstractValue.extend({
6003                 load: function(sid)
6004                 {
6005                         return L.NetworkModel.init();
6006                 },
6007
6008                 _device_icon: function(dev)
6009                 {
6010                         return $('<img />')
6011                                 .attr('src', dev.icon())
6012                                 .attr('title', '%s (%s)'.format(dev.description(), dev.name() || '?'));
6013                 },
6014
6015                 widget: function(sid)
6016                 {
6017                         var id = this.id(sid);
6018                         var ul = $('<ul />')
6019                                 .attr('id', id)
6020                                 .addClass('list-unstyled');
6021
6022                         var itype = this.options.multiple ? 'checkbox' : 'radio';
6023                         var value = this.ucivalue(sid);
6024                         var check = { };
6025
6026                         if (!this.options.multiple)
6027                                 check[value] = true;
6028                         else
6029                                 for (var i = 0; i < value.length; i++)
6030                                         check[value[i]] = true;
6031
6032                         var interfaces = L.NetworkModel.getInterfaces();
6033
6034                         for (var i = 0; i < interfaces.length; i++)
6035                         {
6036                                 var iface = interfaces[i];
6037
6038                                 $('<li />')
6039                                         .append($('<label />')
6040                                                 .addClass(itype + ' inline')
6041                                                 .append(this.validator(sid, $('<input />')
6042                                                         .attr('name', itype + id)
6043                                                         .attr('type', itype)
6044                                                         .attr('value', iface.name())
6045                                                         .prop('checked', !!check[iface.name()]), true))
6046                                                 .append(iface.renderBadge()))
6047                                         .appendTo(ul);
6048                         }
6049
6050                         if (!this.options.multiple)
6051                         {
6052                                 $('<li />')
6053                                         .append($('<label />')
6054                                                 .addClass(itype + ' inline text-muted')
6055                                                 .append($('<input />')
6056                                                         .attr('name', itype + id)
6057                                                         .attr('type', itype)
6058                                                         .attr('value', '')
6059                                                         .prop('checked', $.isEmptyObject(check)))
6060                                                 .append(L.tr('unspecified')))
6061                                         .appendTo(ul);
6062                         }
6063
6064                         return ul;
6065                 },
6066
6067                 ucivalue: function(sid)
6068                 {
6069                         var v = this.callSuper('ucivalue', sid);
6070
6071                         if (!this.options.multiple)
6072                         {
6073                                 if ($.isArray(v))
6074                                 {
6075                                         return v[0];
6076                                 }
6077                                 else if (typeof(v) == 'string')
6078                                 {
6079                                         v = v.match(/\S+/);
6080                                         return v ? v[0] : undefined;
6081                                 }
6082
6083                                 return v;
6084                         }
6085                         else
6086                         {
6087                                 if (typeof(v) == 'string')
6088                                         v = v.match(/\S+/g);
6089
6090                                 return v || [ ];
6091                         }
6092                 },
6093
6094                 formvalue: function(sid)
6095                 {
6096                         var inputs = $('#' + this.id(sid) + ' input');
6097
6098                         if (!this.options.multiple)
6099                         {
6100                                 for (var i = 0; i < inputs.length; i++)
6101                                         if (inputs[i].checked && inputs[i].value !== '')
6102                                                 return inputs[i].value;
6103
6104                                 return undefined;
6105                         }
6106
6107                         var rv = [ ];
6108
6109                         for (var i = 0; i < inputs.length; i++)
6110                                 if (inputs[i].checked)
6111                                         rv.push(inputs[i].value);
6112
6113                         return rv.length ? rv : undefined;
6114                 }
6115         });
6116
6117         this.cbi.DeviceList = this.cbi.NetworkList.extend({
6118                 _ev_focus: function(ev)
6119                 {
6120                         var self = ev.data.self;
6121                         var input = $(this);
6122
6123                         input.parent().prev().prop('checked', true);
6124                 },
6125
6126                 _ev_blur: function(ev)
6127                 {
6128                         ev.which = 10;
6129                         ev.data.self._ev_keydown.call(this, ev);
6130                 },
6131
6132                 _ev_keydown: function(ev)
6133                 {
6134                         if (ev.which != 10 && ev.which != 13)
6135                                 return;
6136
6137                         var sid = ev.data.sid;
6138                         var self = ev.data.self;
6139                         var input = $(this);
6140                         var ifnames = L.toArray(input.val());
6141
6142                         if (!ifnames.length)
6143                                 return;
6144
6145                         L.NetworkModel.createDevice(ifnames[0]);
6146
6147                         self._redraw(sid, $('#' + self.id(sid)), ifnames[0]);
6148                 },
6149
6150                 load: function(sid)
6151                 {
6152                         return L.NetworkModel.init();
6153                 },
6154
6155                 _redraw: function(sid, ul, sel)
6156                 {
6157                         var id = ul.attr('id');
6158                         var devs = L.NetworkModel.getDevices();
6159                         var iface = L.NetworkModel.getInterface(sid);
6160                         var itype = this.options.multiple ? 'checkbox' : 'radio';
6161                         var check = { };
6162
6163                         if (!sel)
6164                         {
6165                                 for (var i = 0; i < devs.length; i++)
6166                                         if (devs[i].isInNetwork(iface))
6167                                                 check[devs[i].name()] = true;
6168                         }
6169                         else
6170                         {
6171                                 if (this.options.multiple)
6172                                         check = L.toObject(this.formvalue(sid));
6173
6174                                 check[sel] = true;
6175                         }
6176
6177                         ul.empty();
6178
6179                         for (var i = 0; i < devs.length; i++)
6180                         {
6181                                 var dev = devs[i];
6182
6183                                 if (dev.isBridge() && this.options.bridges === false)
6184                                         continue;
6185
6186                                 if (!dev.isBridgeable() && this.options.multiple)
6187                                         continue;
6188
6189                                 var badge = $('<span />')
6190                                         .addClass('badge')
6191                                         .append($('<img />').attr('src', dev.icon()))
6192                                         .append(' %s: %s'.format(dev.name(), dev.description()));
6193
6194                                 //var ifcs = dev.getInterfaces();
6195                                 //if (ifcs.length)
6196                                 //{
6197                                 //      for (var j = 0; j < ifcs.length; j++)
6198                                 //              badge.append((j ? ', ' : ' (') + ifcs[j].name());
6199                                 //
6200                                 //      badge.append(')');
6201                                 //}
6202
6203                                 $('<li />')
6204                                         .append($('<label />')
6205                                                 .addClass(itype + ' inline')
6206                                                 .append($('<input />')
6207                                                         .attr('name', itype + id)
6208                                                         .attr('type', itype)
6209                                                         .attr('value', dev.name())
6210                                                         .prop('checked', !!check[dev.name()]))
6211                                                 .append(badge))
6212                                         .appendTo(ul);
6213                         }
6214
6215
6216                         $('<li />')
6217                                 .append($('<label />')
6218                                         .attr('for', 'custom' + id)
6219                                         .addClass(itype + ' inline')
6220                                         .append($('<input />')
6221                                                 .attr('name', itype + id)
6222                                                 .attr('type', itype)
6223                                                 .attr('value', ''))
6224                                         .append($('<span />')
6225                                                 .addClass('badge')
6226                                                 .append($('<input />')
6227                                                         .attr('id', 'custom' + id)
6228                                                         .attr('type', 'text')
6229                                                         .attr('placeholder', L.tr('Custom device …'))
6230                                                         .on('focus', { self: this, sid: sid }, this._ev_focus)
6231                                                         .on('blur', { self: this, sid: sid }, this._ev_blur)
6232                                                         .on('keydown', { self: this, sid: sid }, this._ev_keydown))))
6233                                 .appendTo(ul);
6234
6235                         if (!this.options.multiple)
6236                         {
6237                                 $('<li />')
6238                                         .append($('<label />')
6239                                                 .addClass(itype + ' inline text-muted')
6240                                                 .append($('<input />')
6241                                                         .attr('name', itype + id)
6242                                                         .attr('type', itype)
6243                                                         .attr('value', '')
6244                                                         .prop('checked', $.isEmptyObject(check)))
6245                                                 .append(L.tr('unspecified')))
6246                                         .appendTo(ul);
6247                         }
6248                 },
6249
6250                 widget: function(sid)
6251                 {
6252                         var id = this.id(sid);
6253                         var ul = $('<ul />')
6254                                 .attr('id', id)
6255                                 .addClass('list-unstyled');
6256
6257                         this._redraw(sid, ul);
6258
6259                         return ul;
6260                 },
6261
6262                 save: function(sid)
6263                 {
6264                         if (this.instance[sid].disabled)
6265                                 return;
6266
6267                         var ifnames = this.formvalue(sid);
6268                         //if (!ifnames)
6269                         //      return;
6270
6271                         var iface = L.NetworkModel.getInterface(sid);
6272                         if (!iface)
6273                                 return;
6274
6275                         iface.setDevices($.isArray(ifnames) ? ifnames : [ ifnames ]);
6276                 }
6277         });
6278
6279
6280         this.cbi.AbstractSection = this.ui.AbstractWidget.extend({
6281                 id: function()
6282                 {
6283                         var s = [ arguments[0], this.map.uci_package, this.uci_type ];
6284
6285                         for (var i = 1; i < arguments.length; i++)
6286                                 s.push(arguments[i].replace(/\./g, '_'));
6287
6288                         return s.join('_');
6289                 },
6290
6291                 option: function(widget, name, options)
6292                 {
6293                         if (this.tabs.length == 0)
6294                                 this.tab({ id: '__default__', selected: true });
6295
6296                         return this.taboption('__default__', widget, name, options);
6297                 },
6298
6299                 tab: function(options)
6300                 {
6301                         if (options.selected)
6302                                 this.tabs.selected = this.tabs.length;
6303
6304                         this.tabs.push({
6305                                 id:          options.id,
6306                                 caption:     options.caption,
6307                                 description: options.description,
6308                                 fields:      [ ],
6309                                 li:          { }
6310                         });
6311                 },
6312
6313                 taboption: function(tabid, widget, name, options)
6314                 {
6315                         var tab;
6316                         for (var i = 0; i < this.tabs.length; i++)
6317                         {
6318                                 if (this.tabs[i].id == tabid)
6319                                 {
6320                                         tab = this.tabs[i];
6321                                         break;
6322                                 }
6323                         }
6324
6325                         if (!tab)
6326                                 throw 'Cannot append to unknown tab ' + tabid;
6327
6328                         var w = widget ? new widget(name, options) : null;
6329
6330                         if (!(w instanceof L.cbi.AbstractValue))
6331                                 throw 'Widget must be an instance of AbstractValue';
6332
6333                         w.section = this;
6334                         w.map     = this.map;
6335
6336                         this.fields[name] = w;
6337                         tab.fields.push(w);
6338
6339                         return w;
6340                 },
6341
6342                 tabtoggle: function(sid)
6343                 {
6344                         for (var i = 0; i < this.tabs.length; i++)
6345                         {
6346                                 var tab = this.tabs[i];
6347                                 var elem = $('#' + this.id('nodetab', sid, tab.id));
6348                                 var empty = true;
6349
6350                                 for (var j = 0; j < tab.fields.length; j++)
6351                                 {
6352                                         if (tab.fields[j].active(sid))
6353                                         {
6354                                                 empty = false;
6355                                                 break;
6356                                         }
6357                                 }
6358
6359                                 if (empty && elem.is(':visible'))
6360                                         elem.fadeOut();
6361                                 else if (!empty)
6362                                         elem.fadeIn();
6363                         }
6364                 },
6365
6366                 ucipackages: function(pkg)
6367                 {
6368                         for (var i = 0; i < this.tabs.length; i++)
6369                                 for (var j = 0; j < this.tabs[i].fields.length; j++)
6370                                         if (this.tabs[i].fields[j].options.uci_package)
6371                                                 pkg[this.tabs[i].fields[j].options.uci_package] = true;
6372                 },
6373
6374                 formvalue: function()
6375                 {
6376                         var rv = { };
6377
6378                         this.sections(function(s) {
6379                                 var sid = s['.name'];
6380                                 var sv = rv[sid] || (rv[sid] = { });
6381
6382                                 for (var i = 0; i < this.tabs.length; i++)
6383                                         for (var j = 0; j < this.tabs[i].fields.length; j++)
6384                                         {
6385                                                 var val = this.tabs[i].fields[j].formvalue(sid);
6386                                                 sv[this.tabs[i].fields[j].name] = val;
6387                                         }
6388                         });
6389
6390                         return rv;
6391                 },
6392
6393                 validate_section: function(sid)
6394                 {
6395                         var inst = this.instance[sid];
6396
6397                         var invals = 0;
6398                         var badge = $('#' + this.id('teaser', sid)).children('span:first');
6399
6400                         for (var i = 0; i < this.tabs.length; i++)
6401                         {
6402                                 var inval = 0;
6403                                 var stbadge = $('#' + this.id('nodetab', sid, this.tabs[i].id)).children('span:first');
6404
6405                                 for (var j = 0; j < this.tabs[i].fields.length; j++)
6406                                         if (!this.tabs[i].fields[j].validate(sid))
6407                                                 inval++;
6408
6409                                 if (inval > 0)
6410                                         stbadge.show()
6411                                                 .text(inval)
6412                                                 .attr('title', L.trp('1 Error', '%d Errors', inval).format(inval));
6413                                 else
6414                                         stbadge.hide();
6415
6416                                 invals += inval;
6417                         }
6418
6419                         if (invals > 0)
6420                                 badge.show()
6421                                         .text(invals)
6422                                         .attr('title', L.trp('1 Error', '%d Errors', invals).format(invals));
6423                         else
6424                                 badge.hide();
6425
6426                         return invals;
6427                 },
6428
6429                 validate: function()
6430                 {
6431                         var errors = 0;
6432                         var as = this.sections();
6433
6434                         for (var i = 0; i < as.length; i++)
6435                         {
6436                                 var invals = this.validate_section(as[i]['.name']);
6437
6438                                 if (invals > 0)
6439                                         errors += invals;
6440                         }
6441
6442                         var badge = $('#' + this.id('sectiontab')).children('span:first');
6443
6444                         if (errors > 0)
6445                                 badge.show()
6446                                         .text(errors)
6447                                         .attr('title', L.trp('1 Error', '%d Errors', errors).format(errors));
6448                         else
6449                                 badge.hide();
6450
6451                         return (errors == 0);
6452                 }
6453         });
6454
6455         this.cbi.TypedSection = this.cbi.AbstractSection.extend({
6456                 init: function(uci_type, options)
6457                 {
6458                         this.uci_type = uci_type;
6459                         this.options  = options;
6460                         this.tabs     = [ ];
6461                         this.fields   = { };
6462                         this.active_panel = 0;
6463                         this.active_tab   = { };
6464                 },
6465
6466                 filter: function(section)
6467                 {
6468                         return true;
6469                 },
6470
6471                 sections: function(cb)
6472                 {
6473                         var s1 = L.uci.sections(this.map.uci_package);
6474                         var s2 = [ ];
6475
6476                         for (var i = 0; i < s1.length; i++)
6477                                 if (s1[i]['.type'] == this.uci_type)
6478                                         if (this.filter(s1[i]))
6479                                                 s2.push(s1[i]);
6480
6481                         if (typeof(cb) == 'function')
6482                                 for (var i = 0; i < s2.length; i++)
6483                                         cb.call(this, s2[i]);
6484
6485                         return s2;
6486                 },
6487
6488                 add: function(name)
6489                 {
6490                         return this.map.add(this.map.uci_package, this.uci_type, name);
6491                 },
6492
6493                 remove: function(sid)
6494                 {
6495                         return this.map.remove(this.map.uci_package, sid);
6496                 },
6497
6498                 _ev_add: function(ev)
6499                 {
6500                         var addb = $(this);
6501                         var name = undefined;
6502                         var self = ev.data.self;
6503
6504                         if (addb.prev().prop('nodeName') == 'INPUT')
6505                                 name = addb.prev().val();
6506
6507                         if (addb.prop('disabled') || name === '')
6508                                 return;
6509
6510                         L.ui.saveScrollTop();
6511
6512                         self.active_panel = -1;
6513                         self.map.save();
6514
6515                         ev.data.sid  = self.add(name);
6516                         ev.data.type = self.uci_type;
6517                         ev.data.name = name;
6518
6519                         self.trigger('add', ev);
6520
6521                         self.map.redraw();
6522
6523                         L.ui.restoreScrollTop();
6524                 },
6525
6526                 _ev_remove: function(ev)
6527                 {
6528                         var self = ev.data.self;
6529                         var sid  = ev.data.sid;
6530
6531                         L.ui.saveScrollTop();
6532
6533                         self.trigger('remove', ev);
6534
6535                         self.map.save();
6536                         self.remove(sid);
6537                         self.map.redraw();
6538
6539                         L.ui.restoreScrollTop();
6540
6541                         ev.stopPropagation();
6542                 },
6543
6544                 _ev_sid: function(ev)
6545                 {
6546                         var self = ev.data.self;
6547                         var text = $(this);
6548                         var addb = text.next();
6549                         var errt = addb.next();
6550                         var name = text.val();
6551
6552                         if (!/^[a-zA-Z0-9_]*$/.test(name))
6553                         {
6554                                 errt.text(L.tr('Invalid section name')).show();
6555                                 text.addClass('error');
6556                                 addb.prop('disabled', true);
6557                                 return false;
6558                         }
6559
6560                         if (L.uci.get(self.map.uci_package, name))
6561                         {
6562                                 errt.text(L.tr('Name already used')).show();
6563                                 text.addClass('error');
6564                                 addb.prop('disabled', true);
6565                                 return false;
6566                         }
6567
6568                         errt.text('').hide();
6569                         text.removeClass('error');
6570                         addb.prop('disabled', false);
6571                         return true;
6572                 },
6573
6574                 _ev_tab: function(ev)
6575                 {
6576                         var self = ev.data.self;
6577                         var sid  = ev.data.sid;
6578
6579                         self.validate();
6580                         self.active_tab[sid] = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
6581                 },
6582
6583                 _ev_panel_collapse: function(ev)
6584                 {
6585                         var self = ev.data.self;
6586
6587                         var this_panel = $(ev.target);
6588                         var this_toggle = this_panel.prevAll('[data-toggle="collapse"]:first');
6589
6590                         var prev_toggle = $($(ev.delegateTarget).find('[data-toggle="collapse"]:eq(%d)'.format(self.active_panel)));
6591                         var prev_panel = $(prev_toggle.attr('data-target'));
6592
6593                         prev_panel
6594                                 .removeClass('in')
6595                                 .addClass('collapse');
6596
6597                         prev_toggle.find('.luci2-section-teaser')
6598                                 .show()
6599                                 .children('span:last')
6600                                 .empty()
6601                                 .append(self.teaser(prev_panel.attr('data-luci2-sid')));
6602
6603                         this_toggle.find('.luci2-section-teaser')
6604                                 .hide();
6605
6606                         self.active_panel = parseInt(this_panel.attr('data-luci2-panel-index'));
6607                         self.validate();
6608                 },
6609
6610                 _ev_panel_open: function(ev)
6611                 {
6612                         var self  = ev.data.self;
6613                         var panel = $($(this).attr('data-target'));
6614                         var index = parseInt(panel.attr('data-luci2-panel-index'));
6615
6616                         if (index == self.active_panel)
6617                                 ev.stopPropagation();
6618                 },
6619
6620                 _ev_sort: function(ev)
6621                 {
6622                         var self    = ev.data.self;
6623                         var cur_idx = ev.data.index;
6624                         var new_idx = cur_idx + (ev.data.up ? -1 : 1);
6625                         var s       = self.sections();
6626
6627                         if (new_idx >= 0 && new_idx < s.length)
6628                         {
6629                                 L.uci.swap(self.map.uci_package, s[cur_idx]['.name'], s[new_idx]['.name']);
6630
6631                                 self.map.save();
6632                                 self.map.redraw();
6633                         }
6634
6635                         ev.stopPropagation();
6636                 },
6637
6638                 teaser: function(sid)
6639                 {
6640                         var tf = this.teaser_fields;
6641
6642                         if (!tf)
6643                         {
6644                                 tf = this.teaser_fields = [ ];
6645
6646                                 if ($.isArray(this.options.teasers))
6647                                 {
6648                                         for (var i = 0; i < this.options.teasers.length; i++)
6649                                         {
6650                                                 var f = this.options.teasers[i];
6651                                                 if (f instanceof L.cbi.AbstractValue)
6652                                                         tf.push(f);
6653                                                 else if (typeof(f) == 'string' && this.fields[f] instanceof L.cbi.AbstractValue)
6654                                                         tf.push(this.fields[f]);
6655                                         }
6656                                 }
6657                                 else
6658                                 {
6659                                         for (var i = 0; tf.length <= 5 && i < this.tabs.length; i++)
6660                                                 for (var j = 0; tf.length <= 5 && j < this.tabs[i].fields.length; j++)
6661                                                         tf.push(this.tabs[i].fields[j]);
6662                                 }
6663                         }
6664
6665                         var t = '';
6666
6667                         for (var i = 0; i < tf.length; i++)
6668                         {
6669                                 if (tf[i].instance[sid] && tf[i].instance[sid].disabled)
6670                                         continue;
6671
6672                                 var n = tf[i].options.caption || tf[i].name;
6673                                 var v = tf[i].textvalue(sid);
6674
6675                                 if (typeof(v) == 'undefined')
6676                                         continue;
6677
6678                                 t = t + '%s%s: <strong>%s</strong>'.format(t ? ' | ' : '', n, v);
6679                         }
6680
6681                         return t;
6682                 },
6683
6684                 _render_add: function()
6685                 {
6686                         if (!this.options.addremove)
6687                                 return null;
6688
6689                         var text = L.tr('Add section');
6690                         var ttip = L.tr('Create new section...');
6691
6692                         if ($.isArray(this.options.add_caption))
6693                                 text = this.options.add_caption[0], ttip = this.options.add_caption[1];
6694                         else if (typeof(this.options.add_caption) == 'string')
6695                                 text = this.options.add_caption, ttip = '';
6696
6697                         var add = $('<div />');
6698
6699                         if (this.options.anonymous === false)
6700                         {
6701                                 $('<input />')
6702                                         .addClass('cbi-input-text')
6703                                         .attr('type', 'text')
6704                                         .attr('placeholder', ttip)
6705                                         .blur({ self: this }, this._ev_sid)
6706                                         .keyup({ self: this }, this._ev_sid)
6707                                         .appendTo(add);
6708
6709                                 $('<img />')
6710                                         .attr('src', L.globals.resource + '/icons/cbi/add.gif')
6711                                         .attr('title', text)
6712                                         .addClass('cbi-button')
6713                                         .click({ self: this }, this._ev_add)
6714                                         .appendTo(add);
6715
6716                                 $('<div />')
6717                                         .addClass('cbi-value-error')
6718                                         .hide()
6719                                         .appendTo(add);
6720                         }
6721                         else
6722                         {
6723                                 L.ui.button(text, 'success', ttip)
6724                                         .click({ self: this }, this._ev_add)
6725                                         .appendTo(add);
6726                         }
6727
6728                         return add;
6729                 },
6730
6731                 _render_remove: function(sid, index)
6732                 {
6733                         if (!this.options.addremove)
6734                                 return null;
6735
6736                         var text = L.tr('Remove');
6737                         var ttip = L.tr('Remove this section');
6738
6739                         if ($.isArray(this.options.remove_caption))
6740                                 text = this.options.remove_caption[0], ttip = this.options.remove_caption[1];
6741                         else if (typeof(this.options.remove_caption) == 'string')
6742                                 text = this.options.remove_caption, ttip = '';
6743
6744                         return L.ui.button(text, 'danger', ttip)
6745                                 .click({ self: this, sid: sid, index: index }, this._ev_remove);
6746                 },
6747
6748                 _render_sort: function(sid, index)
6749                 {
6750                         if (!this.options.sortable)
6751                                 return null;
6752
6753                         var b1 = L.ui.button('↑', 'info', L.tr('Move up'))
6754                                 .click({ self: this, index: index, up: true }, this._ev_sort);
6755
6756                         var b2 = L.ui.button('↓', 'info', L.tr('Move down'))
6757                                 .click({ self: this, index: index, up: false }, this._ev_sort);
6758
6759                         return b1.add(b2);
6760                 },
6761
6762                 _render_caption: function()
6763                 {
6764                         return $('<h3 />')
6765                                 .addClass('panel-title')
6766                                 .append(this.label('caption') || this.uci_type);
6767                 },
6768
6769                 _render_description: function()
6770                 {
6771                         var text = this.label('description');
6772
6773                         if (text)
6774                                 return $('<div />')
6775                                         .addClass('luci2-section-description')
6776                                         .text(text);
6777
6778                         return null;
6779                 },
6780
6781                 _render_teaser: function(sid, index)
6782                 {
6783                         if (this.options.collabsible || this.map.options.collabsible)
6784                         {
6785                                 return $('<div />')
6786                                         .attr('id', this.id('teaser', sid))
6787                                         .addClass('luci2-section-teaser well well-sm')
6788                                         .append($('<span />')
6789                                                 .addClass('badge'))
6790                                         .append($('<span />'));
6791                         }
6792
6793                         return null;
6794                 },
6795
6796                 _render_head: function(condensed)
6797                 {
6798                         if (condensed)
6799                                 return null;
6800
6801                         return $('<div />')
6802                                 .addClass('panel-heading')
6803                                 .append(this._render_caption())
6804                                 .append(this._render_description());
6805                 },
6806
6807                 _render_tab_description: function(sid, index, tab_index)
6808                 {
6809                         var tab = this.tabs[tab_index];
6810
6811                         if (typeof(tab.description) == 'string')
6812                         {
6813                                 return $('<div />')
6814                                         .addClass('cbi-tab-descr')
6815                                         .text(tab.description);
6816                         }
6817
6818                         return null;
6819                 },
6820
6821                 _render_tab_head: function(sid, index, tab_index)
6822                 {
6823                         var tab = this.tabs[tab_index];
6824                         var cur = this.active_tab[sid] || 0;
6825
6826                         var tabh = $('<li />')
6827                                 .append($('<a />')
6828                                         .attr('id', this.id('nodetab', sid, tab.id))
6829                                         .attr('href', '#' + this.id('node', sid, tab.id))
6830                                         .attr('data-toggle', 'tab')
6831                                         .attr('data-luci2-tab-index', tab_index)
6832                                         .text((tab.caption ? tab.caption.format(tab.id) : tab.id) + ' ')
6833                                         .append($('<span />')
6834                                                 .addClass('badge'))
6835                                         .on('shown.bs.tab', { self: this, sid: sid }, this._ev_tab));
6836
6837                         if (cur == tab_index)
6838                                 tabh.addClass('active');
6839
6840                         if (!tab.fields.length)
6841                                 tabh.hide();
6842
6843                         return tabh;
6844                 },
6845
6846                 _render_tab_body: function(sid, index, tab_index)
6847                 {
6848                         var tab = this.tabs[tab_index];
6849                         var cur = this.active_tab[sid] || 0;
6850
6851                         var tabb = $('<div />')
6852                                 .addClass('tab-pane')
6853                                 .attr('id', this.id('node', sid, tab.id))
6854                                 .attr('data-luci2-tab-index', tab_index)
6855                                 .append(this._render_tab_description(sid, index, tab_index));
6856
6857                         if (cur == tab_index)
6858                                 tabb.addClass('active');
6859
6860                         for (var i = 0; i < tab.fields.length; i++)
6861                                 tabb.append(tab.fields[i].render(sid));
6862
6863                         return tabb;
6864                 },
6865
6866                 _render_section_head: function(sid, index)
6867                 {
6868                         var head = $('<div />')
6869                                 .addClass('luci2-section-header')
6870                                 .append(this._render_teaser(sid, index))
6871                                 .append($('<div />')
6872                                         .addClass('btn-group')
6873                                         .append(this._render_sort(sid, index))
6874                                         .append(this._render_remove(sid, index)));
6875
6876                         if (this.options.collabsible)
6877                         {
6878                                 head.attr('data-toggle', 'collapse')
6879                                         .attr('data-parent', this.id('sectiongroup'))
6880                                         .attr('data-target', '#' + this.id('panel', sid))
6881                                         .on('click', { self: this }, this._ev_panel_open);
6882                         }
6883
6884                         return head;
6885                 },
6886
6887                 _render_section_body: function(sid, index)
6888                 {
6889                         var body = $('<div />')
6890                                 .attr('id', this.id('panel', sid))
6891                                 .attr('data-luci2-panel-index', index)
6892                                 .attr('data-luci2-sid', sid);
6893
6894                         if (this.options.collabsible || this.map.options.collabsible)
6895                         {
6896                                 body.addClass('panel-collapse collapse');
6897
6898                                 if (index == this.active_panel)
6899                                         body.addClass('in');
6900                         }
6901
6902                         var tab_heads = $('<ul />')
6903                                 .addClass('nav nav-tabs');
6904
6905                         var tab_bodies = $('<div />')
6906                                 .addClass('form-horizontal tab-content')
6907                                 .append(tab_heads);
6908
6909                         for (var j = 0; j < this.tabs.length; j++)
6910                         {
6911                                 tab_heads.append(this._render_tab_head(sid, index, j));
6912                                 tab_bodies.append(this._render_tab_body(sid, index, j));
6913                         }
6914
6915                         body.append(tab_bodies);
6916
6917                         if (this.tabs.length <= 1)
6918                                 tab_heads.hide();
6919
6920                         return body;
6921                 },
6922
6923                 _render_body: function(condensed)
6924                 {
6925                         var s = this.sections();
6926
6927                         if (this.active_panel < 0)
6928                                 this.active_panel += s.length;
6929                         else if (this.active_panel >= s.length)
6930                                 this.active_panel = s.length - 1;
6931
6932                         var body = $('<ul />')
6933                                 .addClass('list-group');
6934
6935                         if (this.options.collabsible)
6936                         {
6937                                 body.attr('id', this.id('sectiongroup'))
6938                                         .on('show.bs.collapse', { self: this }, this._ev_panel_collapse);
6939                         }
6940
6941                         if (s.length == 0)
6942                         {
6943                                 body.append($('<li />')
6944                                         .addClass('list-group-item text-muted')
6945                                         .text(this.label('placeholder') || L.tr('There are no entries defined yet.')))
6946                         }
6947
6948                         for (var i = 0; i < s.length; i++)
6949                         {
6950                                 var sid = s[i]['.name'];
6951                                 var inst = this.instance[sid] = { tabs: [ ] };
6952
6953                                 body.append($('<li />')
6954                                         .addClass('list-group-item')
6955                                         .append(this._render_section_head(sid, i))
6956                                         .append(this._render_section_body(sid, i)));
6957                         }
6958
6959                         return body;
6960                 },
6961
6962                 render: function(condensed)
6963                 {
6964                         this.instance = { };
6965
6966                         var panel = $('<div />')
6967                                 .addClass('panel panel-default')
6968                                 .append(this._render_head(condensed))
6969                                 .append(this._render_body(condensed));
6970
6971                         if (this.options.addremove)
6972                                 panel.append($('<div />')
6973                                         .addClass('panel-footer')
6974                                         .append(this._render_add()));
6975
6976                         return panel;
6977                 },
6978
6979                 finish: function()
6980                 {
6981                         var s = this.sections();
6982
6983                         for (var i = 0; i < s.length; i++)
6984                         {
6985                                 var sid = s[i]['.name'];
6986
6987                                 this.validate_section(sid);
6988
6989                                 if (i != this.active_panel)
6990                                         $('#' + this.id('teaser', sid)).children('span:last')
6991                                                 .append(this.teaser(sid));
6992                                 else
6993                                         $('#' + this.id('teaser', sid))
6994                                                 .hide();
6995                         }
6996                 }
6997         });
6998
6999         this.cbi.TableSection = this.cbi.TypedSection.extend({
7000                 _render_table_head: function()
7001                 {
7002                         var thead = $('<thead />')
7003                                 .append($('<tr />')
7004                                         .addClass('cbi-section-table-titles'));
7005
7006                         for (var j = 0; j < this.tabs[0].fields.length; j++)
7007                                 thead.children().append($('<th />')
7008                                         .addClass('cbi-section-table-cell')
7009                                         .css('width', this.tabs[0].fields[j].options.width || '')
7010                                         .append(this.tabs[0].fields[j].label('caption')));
7011
7012                         if (this.options.addremove !== false || this.options.sortable)
7013                                 thead.children().append($('<th />')
7014                                         .addClass('cbi-section-table-cell')
7015                                         .text(' '));
7016
7017                         return thead;
7018                 },
7019
7020                 _render_table_row: function(sid, index)
7021                 {
7022                         var row = $('<tr />')
7023                                 .attr('data-luci2-sid', sid);
7024
7025                         for (var j = 0; j < this.tabs[0].fields.length; j++)
7026                         {
7027                                 row.append($('<td />')
7028                                         .css('width', this.tabs[0].fields[j].options.width || '')
7029                                         .append(this.tabs[0].fields[j].render(sid, true)));
7030                         }
7031
7032                         if (this.options.addremove !== false || this.options.sortable)
7033                         {
7034                                 row.append($('<td />')
7035                                         .addClass('text-right')
7036                                         .append($('<div />')
7037                                                 .addClass('btn-group')
7038                                                 .append(this._render_sort(sid, index))
7039                                                 .append(this._render_remove(sid, index))));
7040                         }
7041
7042                         return row;
7043                 },
7044
7045                 _render_table_body: function()
7046                 {
7047                         var s = this.sections();
7048
7049                         var tbody = $('<tbody />');
7050
7051                         if (s.length == 0)
7052                         {
7053                                 var cols = this.tabs[0].fields.length;
7054
7055                                 if (this.options.addremove !== false || this.options.sortable)
7056                                         cols++;
7057
7058                                 tbody.append($('<tr />')
7059                                         .append($('<td />')
7060                                                 .addClass('text-muted')
7061                                                 .attr('colspan', cols)
7062                                                 .text(this.label('placeholder') || L.tr('There are no entries defined yet.'))));
7063                         }
7064
7065                         for (var i = 0; i < s.length; i++)
7066                         {
7067                                 var sid = s[i]['.name'];
7068                                 var inst = this.instance[sid] = { tabs: [ ] };
7069
7070                                 tbody.append(this._render_table_row(sid, i));
7071                         }
7072
7073                         return tbody;
7074                 },
7075
7076                 _render_body: function(condensed)
7077                 {
7078                         return $('<table />')
7079                                 .addClass('table table-condensed table-hover')
7080                                 .append(this._render_table_head())
7081                                 .append(this._render_table_body());
7082                 }
7083         });
7084
7085         this.cbi.NamedSection = this.cbi.TypedSection.extend({
7086                 sections: function(cb)
7087                 {
7088                         var sa = [ ];
7089                         var sl = L.uci.sections(this.map.uci_package);
7090
7091                         for (var i = 0; i < sl.length; i++)
7092                                 if (sl[i]['.name'] == this.uci_type)
7093                                 {
7094                                         sa.push(sl[i]);
7095                                         break;
7096                                 }
7097
7098                         if (typeof(cb) == 'function' && sa.length > 0)
7099                                 cb.call(this, sa[0]);
7100
7101                         return sa;
7102                 }
7103         });
7104
7105         this.cbi.SingleSection = this.cbi.NamedSection.extend({
7106                 render: function()
7107                 {
7108                         this.instance = { };
7109                         this.instance[this.uci_type] = { tabs: [ ] };
7110
7111                         return this._render_section_body(this.uci_type, 0);
7112                 }
7113         });
7114
7115         this.cbi.DummySection = this.cbi.TypedSection.extend({
7116                 sections: function(cb)
7117                 {
7118                         if (typeof(cb) == 'function')
7119                                 cb.apply(this, [ { '.name': this.uci_type } ]);
7120
7121                         return [ { '.name': this.uci_type } ];
7122                 }
7123         });
7124
7125         this.cbi.Map = this.ui.AbstractWidget.extend({
7126                 init: function(uci_package, options)
7127                 {
7128                         var self = this;
7129
7130                         this.uci_package = uci_package;
7131                         this.sections = [ ];
7132                         this.options = L.defaults(options, {
7133                                 save:    function() { },
7134                                 prepare: function() { }
7135                         });
7136                 },
7137
7138                 _load_cb: function()
7139                 {
7140                         var deferreds = [ L.deferrable(this.options.prepare()) ];
7141
7142                         for (var i = 0; i < this.sections.length; i++)
7143                         {
7144                                 for (var f in this.sections[i].fields)
7145                                 {
7146                                         if (typeof(this.sections[i].fields[f].load) != 'function')
7147                                                 continue;
7148
7149                                         var s = this.sections[i].sections();
7150                                         for (var j = 0; j < s.length; j++)
7151                                         {
7152                                                 var rv = this.sections[i].fields[f].load(s[j]['.name']);
7153                                                 if (L.isDeferred(rv))
7154                                                         deferreds.push(rv);
7155                                         }
7156                                 }
7157                         }
7158
7159                         return $.when.apply($, deferreds);
7160                 },
7161
7162                 load: function()
7163                 {
7164                         var self = this;
7165                         var packages = { };
7166
7167                         for (var i = 0; i < this.sections.length; i++)
7168                                 this.sections[i].ucipackages(packages);
7169
7170                         packages[this.uci_package] = true;
7171
7172                         for (var pkg in packages)
7173                                 if (!L.uci.writable(pkg))
7174                                         this.options.readonly = true;
7175
7176                         return L.uci.load(L.toArray(packages)).then(function() {
7177                                 return self._load_cb();
7178                         });
7179                 },
7180
7181                 _ev_tab: function(ev)
7182                 {
7183                         var self = ev.data.self;
7184
7185                         self.validate();
7186                         self.active_tab = parseInt(ev.target.getAttribute('data-luci2-tab-index'));
7187                 },
7188
7189                 _ev_apply: function(ev)
7190                 {
7191                         var self = ev.data.self;
7192
7193                         self.trigger('apply', ev);
7194                 },
7195
7196                 _ev_save: function(ev)
7197                 {
7198                         var self = ev.data.self;
7199
7200                         self.send().then(function() {
7201                                 self.trigger('save', ev);
7202                         });
7203                 },
7204
7205                 _ev_reset: function(ev)
7206                 {
7207                         var self = ev.data.self;
7208
7209                         self.trigger('reset', ev);
7210                         self.reset();
7211                 },
7212
7213                 _render_tab_head: function(tab_index)
7214                 {
7215                         var section = this.sections[tab_index];
7216                         var cur = this.active_tab || 0;
7217
7218                         var tabh = $('<li />')
7219                                 .append($('<a />')
7220                                         .attr('id', section.id('sectiontab'))
7221                                         .attr('href', '#' + section.id('section'))
7222                                         .attr('data-toggle', 'tab')
7223                                         .attr('data-luci2-tab-index', tab_index)
7224                                         .text(section.label('caption') + ' ')
7225                                         .append($('<span />')
7226                                                 .addClass('badge'))
7227                                         .on('shown.bs.tab', { self: this }, this._ev_tab));
7228
7229                         if (cur == tab_index)
7230                                 tabh.addClass('active');
7231
7232                         return tabh;
7233                 },
7234
7235                 _render_tab_body: function(tab_index)
7236                 {
7237                         var section = this.sections[tab_index];
7238                         var desc = section.label('description');
7239                         var cur = this.active_tab || 0;
7240
7241                         var tabb = $('<div />')
7242                                 .addClass('tab-pane')
7243                                 .attr('id', section.id('section'))
7244                                 .attr('data-luci2-tab-index', tab_index);
7245
7246                         if (cur == tab_index)
7247                                 tabb.addClass('active');
7248
7249                         if (desc)
7250                                 tabb.append($('<p />')
7251                                         .text(desc));
7252
7253                         var s = section.render(this.options.tabbed);
7254
7255                         if (this.options.readonly || section.options.readonly)
7256                                 s.find('input, select, button, img.cbi-button').attr('disabled', true);
7257
7258                         tabb.append(s);
7259
7260                         return tabb;
7261                 },
7262
7263                 _render_body: function()
7264                 {
7265                         var tabs = $('<ul />')
7266                                 .addClass('nav nav-tabs');
7267
7268                         var body = $('<div />')
7269                                 .append(tabs);
7270
7271                         for (var i = 0; i < this.sections.length; i++)
7272                         {
7273                                 tabs.append(this._render_tab_head(i));
7274                                 body.append(this._render_tab_body(i));
7275                         }
7276
7277                         if (this.options.tabbed)
7278                                 body.addClass('tab-content');
7279                         else
7280                                 tabs.hide();
7281
7282                         return body;
7283                 },
7284
7285                 _render_footer: function()
7286                 {
7287                         var evdata = {
7288                                 self: this
7289                         };
7290
7291                         return $('<div />')
7292                                 .addClass('panel panel-default panel-body text-right')
7293                                 .append($('<div />')
7294                                         .addClass('btn-group')
7295                                         .append(L.ui.button(L.tr('Save & Apply'), 'primary')
7296                                                 .click(evdata, this._ev_apply))
7297                                         .append(L.ui.button(L.tr('Save'), 'default')
7298                                                 .click(evdata, this._ev_save))
7299                                         .append(L.ui.button(L.tr('Reset'), 'default')
7300                                                 .click(evdata, this._ev_reset)));
7301                 },
7302
7303                 render: function()
7304                 {
7305                         var map = $('<form />');
7306
7307                         if (typeof(this.options.caption) == 'string')
7308                                 map.append($('<h2 />')
7309                                         .text(this.options.caption));
7310
7311                         if (typeof(this.options.description) == 'string')
7312                                 map.append($('<p />')
7313                                         .text(this.options.description));
7314
7315                         map.append(this._render_body());
7316
7317                         if (this.options.pageaction !== false)
7318                                 map.append(this._render_footer());
7319
7320                         return map;
7321                 },
7322
7323                 finish: function()
7324                 {
7325                         for (var i = 0; i < this.sections.length; i++)
7326                                 this.sections[i].finish();
7327
7328                         this.validate();
7329                 },
7330
7331                 redraw: function()
7332                 {
7333                         this.target.hide().empty().append(this.render());
7334                         this.finish();
7335                         this.target.show();
7336                 },
7337
7338                 section: function(widget, uci_type, options)
7339                 {
7340                         var w = widget ? new widget(uci_type, options) : null;
7341
7342                         if (!(w instanceof L.cbi.AbstractSection))
7343                                 throw 'Widget must be an instance of AbstractSection';
7344
7345                         w.map = this;
7346                         w.index = this.sections.length;
7347
7348                         this.sections.push(w);
7349                         return w;
7350                 },
7351
7352                 formvalue: function()
7353                 {
7354                         var rv = { };
7355
7356                         for (var i = 0; i < this.sections.length; i++)
7357                         {
7358                                 var sids = this.sections[i].formvalue();
7359                                 for (var sid in sids)
7360                                 {
7361                                         var s = rv[sid] || (rv[sid] = { });
7362                                         $.extend(s, sids[sid]);
7363                                 }
7364                         }
7365
7366                         return rv;
7367                 },
7368
7369                 add: function(conf, type, name)
7370                 {
7371                         return L.uci.add(conf, type, name);
7372                 },
7373
7374                 remove: function(conf, sid)
7375                 {
7376                         return L.uci.remove(conf, sid);
7377                 },
7378
7379                 get: function(conf, sid, opt)
7380                 {
7381                         return L.uci.get(conf, sid, opt);
7382                 },
7383
7384                 set: function(conf, sid, opt, val)
7385                 {
7386                         return L.uci.set(conf, sid, opt, val);
7387                 },
7388
7389                 validate: function()
7390                 {
7391                         var rv = true;
7392
7393                         for (var i = 0; i < this.sections.length; i++)
7394                         {
7395                                 if (!this.sections[i].validate())
7396                                         rv = false;
7397                         }
7398
7399                         return rv;
7400                 },
7401
7402                 save: function()
7403                 {
7404                         var self = this;
7405
7406                         if (self.options.readonly)
7407                                 return L.deferrable();
7408
7409                         var deferreds = [ ];
7410
7411                         for (var i = 0; i < self.sections.length; i++)
7412                         {
7413                                 if (self.sections[i].options.readonly)
7414                                         continue;
7415
7416                                 for (var f in self.sections[i].fields)
7417                                 {
7418                                         if (typeof(self.sections[i].fields[f].save) != 'function')
7419                                                 continue;
7420
7421                                         var s = self.sections[i].sections();
7422                                         for (var j = 0; j < s.length; j++)
7423                                         {
7424                                                 var rv = self.sections[i].fields[f].save(s[j]['.name']);
7425                                                 if (L.isDeferred(rv))
7426                                                         deferreds.push(rv);
7427                                         }
7428                                 }
7429                         }
7430
7431                         return $.when.apply($, deferreds).then(function() {
7432                                 return L.deferrable(self.options.save());
7433                         });
7434                 },
7435
7436                 send: function()
7437                 {
7438                         if (!this.validate())
7439                                 return L.deferrable();
7440
7441                         var self = this;
7442
7443                         L.ui.saveScrollTop();
7444                         L.ui.loading(true);
7445
7446                         return this.save().then(function() {
7447                                 return L.uci.save();
7448                         }).then(function() {
7449                                 return L.ui.updateChanges();
7450                         }).then(function() {
7451                                 return self.load();
7452                         }).then(function() {
7453                                 self.redraw();
7454                                 self = null;
7455
7456                                 L.ui.loading(false);
7457                                 L.ui.restoreScrollTop();
7458                         });
7459                 },
7460
7461                 revert: function()
7462                 {
7463                         var packages = { };
7464
7465                         for (var i = 0; i < this.sections.length; i++)
7466                                 this.sections[i].ucipackages(packages);
7467
7468                         packages[this.uci_package] = true;
7469
7470                         L.uci.unload(L.toArray(packages));
7471                 },
7472
7473                 reset: function()
7474                 {
7475                         var self = this;
7476
7477                         self.revert();
7478
7479                         return self.insertInto(self.target);
7480                 },
7481
7482                 insertInto: function(id)
7483                 {
7484                         var self = this;
7485                             self.target = $(id);
7486
7487                         L.ui.loading(true);
7488                         self.target.hide();
7489
7490                         return self.load().then(function() {
7491                                 self.target.empty().append(self.render());
7492                                 self.finish();
7493                                 self.target.show();
7494                                 self = null;
7495                                 L.ui.loading(false);
7496                         });
7497                 }
7498         });
7499
7500         this.cbi.Modal = this.cbi.Map.extend({
7501                 _ev_apply: function(ev)
7502                 {
7503                         var self = ev.data.self;
7504
7505                         self.trigger('apply', ev);
7506                 },
7507
7508                 _ev_save: function(ev)
7509                 {
7510                         var self = ev.data.self;
7511
7512                         self.send().then(function() {
7513                                 self.trigger('save', ev);
7514                                 self.close();
7515                         });
7516                 },
7517
7518                 _ev_reset: function(ev)
7519                 {
7520                         var self = ev.data.self;
7521
7522                         self.trigger('close', ev);
7523                         self.revert();
7524                         self.close();
7525                 },
7526
7527                 _render_footer: function()
7528                 {
7529                         var evdata = {
7530                                 self: this
7531                         };
7532
7533                         return $('<div />')
7534                                 .addClass('btn-group')
7535                                 .append(L.ui.button(L.tr('Save & Apply'), 'primary')
7536                                         .click(evdata, this._ev_apply))
7537                                 .append(L.ui.button(L.tr('Save'), 'default')
7538                                         .click(evdata, this._ev_save))
7539                                 .append(L.ui.button(L.tr('Cancel'), 'default')
7540                                         .click(evdata, this._ev_reset));
7541                 },
7542
7543                 render: function()
7544                 {
7545                         var modal = L.ui.dialog(this.label('caption'), null, { wide: true });
7546                         var map = $('<form />');
7547
7548                         var desc = this.label('description');
7549                         if (desc)
7550                                 map.append($('<p />').text(desc));
7551
7552                         map.append(this._render_body());
7553
7554                         modal.find('.modal-body').append(map);
7555                         modal.find('.modal-footer').append(this._render_footer());
7556
7557                         return modal;
7558                 },
7559
7560                 redraw: function()
7561                 {
7562                         this.render();
7563                         this.finish();
7564                 },
7565
7566                 show: function()
7567                 {
7568                         var self = this;
7569
7570                         L.ui.loading(true);
7571
7572                         return self.load().then(function() {
7573                                 self.render();
7574                                 self.finish();
7575
7576                                 L.ui.loading(false);
7577                         });
7578                 },
7579
7580                 close: function()
7581                 {
7582                         L.ui.dialog(false);
7583                 }
7584         });
7585 };