luci2/htdocs/luci2/luci2.js

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