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