applications/luci-app-lldpd/htdocs/luci-static/resources/lldpd.js

   1 /*
   2  * Copyright (c) 2018-2020, Tano Systems LLC. All Rights Reserved.
   3  * Anton Kikin <a.kikin@tano-systems.com>
   4  */
   5
   6 'use strict';
   7 'require ui';
   8 'require form';
   9 'require network';
  10 'require session';
  11 'require uci';
  12
  13 /*
  14  *      Filter neighbors (-H)
  15  *
  16  *      The filter column means that filtering is enabled
  17  *      The 1proto column tells that only one protocol will be kept.
  18  *      The 1neigh column tells that only one neighbor will be kept.
  19  *
  20  *             incoming                outgoing
  21  *          filter  1proto  1neigh  filter  1proto  1neigh
  22  *      0
  23  *      1    x       x               x       x
  24  *      2    x       x
  25  *      3                            x       x
  26  *      4    x                       x
  27  *      5    x
  28  *      6                            x
  29  *      7    x       x       x       x       x
  30  *      8    x       x       x
  31  *      9    x               x       x       x
  32  *      10                           x               x
  33  *      11   x               x
  34  *      12   x               x       x               x
  35  *      13   x               x       x
  36  *      14   x       x               x               x
  37  *      15   x       x               x
  38  *      16   x       x       x       x               x
  39  *      17   x       x       x       x
  40  *      18   x                       x               x
  41  *      19   x                       x       x
  42  */
  43 var cbiFilterSelect = form.Value.extend({
  44         __name__: 'CBI.LLDPD.FilterSelect',
  45
  46         __init__: function() {
  47                 this.super('__init__', arguments);
  48
  49                 this.selected = null;
  50
  51                 this.filterVal = [
  52                         [ 0, 0, 0, 0, 0, 0 ],
  53                         [ 1, 1, 0, 1, 1, 0 ],
  54                         [ 1, 1, 0, 0, 0, 0 ],
  55                         [ 0, 0, 0, 1, 1, 0 ],
  56                         [ 1, 0, 0, 1, 0, 0 ],
  57                         [ 1, 0, 0, 0, 0, 0 ],
  58                         [ 0, 0, 0, 1, 0, 0 ],
  59                         [ 1, 1, 1, 1, 1, 0 ],
  60                         [ 1, 1, 1, 0, 0, 0 ],
  61                         [ 1, 0, 1, 1, 1, 0 ],
  62                         [ 0, 0, 0, 1, 0, 1 ],
  63                         [ 1, 0, 1, 0, 0, 0 ],
  64                         [ 1, 0, 1, 1, 0, 1 ],
  65                         [ 1, 0, 1, 1, 0, 0 ],
  66                         [ 1, 1, 0, 1, 0, 1 ],
  67                         [ 1, 1, 0, 1, 0, 0 ],
  68                         [ 1, 1, 1, 1, 0, 1 ],
  69                         [ 1, 1, 1, 1, 0, 0 ],
  70                         [ 1, 0, 0, 1, 0, 1 ],
  71                         [ 1, 0, 0, 1, 1, 0 ]
  72                 ];
  73         },
  74
  75         /** @private */
  76         handleRowClick: function(section_id, ev) {
  77                 var row = ev.currentTarget;
  78                 var tbody = row.parentNode;
  79                 var selected = row.getAttribute('data-filter');
  80                 var input = tbody.querySelector('[id="' + this.cbid(section_id) + '-' + selected + '"]');
  81
  82                 this.selected = selected;
  83
  84                 tbody.querySelectorAll('tr').forEach(function(e) {
  85                         e.classList.remove('lldpd-filter-selected');
  86                 });
  87
  88                 input.checked = true;
  89                 row.classList.add('lldpd-filter-selected');
  90         },
  91
  92         formvalue: function(section_id) {
  93                 return this.selected || this.cfgvalue(section_id);
  94         },
  95
  96         renderFrame: function(section_id, in_table, option_index, nodes) {
  97                 var tmp = this.description;
  98
  99                 // Prepend description with table legend
 100                 this.description =
 101                         '<ul><li>' + _('E &mdash; enable filter') + '</li>' +
 102                             '<li>' + _('P &mdash; keep only one protocol') + '</li>' +
 103                             '<li>' + _('N &mdash; keep only one neighbor') + '</li>' +
 104                         '</ul>' + this.description;
 105
 106                 var rendered = this.super('renderFrame', arguments);
 107
 108                 // Restore original description
 109                 this.description = tmp;
 110
 111                 return rendered;
 112         },
 113
 114         renderWidget: function(section_id, option_index, cfgvalue) {
 115                 var selected = parseInt(cfgvalue) - 1;
 116
 117                 var tbody = [];
 118
 119                 var renderFilterVal = L.bind(function(row, col) {
 120                         return this.filterVal[row][col] ? '&#x2714;' : '';
 121                 }, this);
 122
 123                 for (var i = 0; i < this.filterVal.length; i++) {
 124                         tbody.push(E('tr', {
 125                                 'class': ((selected == i) ? 'lldpd-filter-selected' : ''),
 126                                 'click': L.bind(this.handleRowClick, this, section_id),
 127                                 'data-filter': i,
 128                         }, [
 129                                 E('td', {}, [
 130                                         E('input', {
 131                                                 'class': 'cbi-input-radio',
 132                                                 'data-update': 'click change',
 133                                                 'type': 'radio',
 134                                                 'id': this.cbid(section_id) + '-' + i,
 135                                                 'name': this.cbid(section_id),
 136                                                 'checked': (selected == i) ? '' : null,
 137                                                 'value': i
 138                                         })
 139                                 ]),
 140                                 E('td', {}, i),
 141                                 E('td', {}, renderFilterVal(i, 0)),
 142                                 E('td', {}, renderFilterVal(i, 1)),
 143                                 E('td', {}, renderFilterVal(i, 2)),
 144                                 E('td', {}, renderFilterVal(i, 3)),
 145                                 E('td', {}, renderFilterVal(i, 4)),
 146                                 E('td', {}, renderFilterVal(i, 5))
 147                         ]));
 148                 };
 149
 150                 var table = E('table', { 'class': 'lldpd-filter', 'id': this.cbid(section_id) }, [
 151                         E('thead', {}, [
 152                                 E('tr', {}, [
 153                                         E('th', { 'rowspan': 2 }),
 154                                         E('th', { 'rowspan': 2 }, _('Filter')),
 155                                         E('th', { 'colspan': 3 }, _('Incoming')),
 156                                         E('th', { 'colspan': 3 }, _('Outgoing'))
 157                                 ]),
 158                                 E('tr', {}, [
 159                                         E('th', {}, 'E'),
 160                                         E('th', {}, 'P'),
 161                                         E('th', {}, 'N'),
 162                                         E('th', {}, 'E'),
 163                                         E('th', {}, 'P'),
 164                                         E('th', {}, 'N'),
 165                                 ])
 166                         ]),
 167                         E('tbody', {}, tbody)
 168                 ]);
 169
 170                 return table;
 171         },
 172 });
 173
 174 function init() {
 175         return new Promise(function(resolveFn, rejectFn) {
 176                 var data = session.getLocalData('luci-app-lldpd');
 177                 if (data !== null) {
 178                         return resolveFn();
 179                 }
 180
 181                 data = {};
 182
 183                 return uci.load('luci').then(function() {
 184                         session.setLocalData('luci-app-lldpd', data);
 185                         return resolveFn();
 186                 });
 187         });
 188 }
 189
 190 return L.Class.extend({
 191         cbiFilterSelect: cbiFilterSelect,
 192         init: init,
 193 });