applications/luci-app-travelmate/htdocs/luci-static/resources/view/travelmate/overview.js

   1 'use strict';
   2 'require view';
   3 'require poll';
   4 'require fs';
   5 'require ui';
   6 'require uci';
   7 'require form';
   8 'require tools.widgets as widgets';
   9
  10 /*
  11         button handling
  12 */
  13 function handleAction(ev) {
  14         var ifaceValue;
  15         if (ev === 'restart') {
  16                 ifaceValue = String(uci.get('travelmate', 'global', 'trm_iface') || 'trm_wwan');
  17                 return fs.exec('/etc/init.d/travelmate', ['stop'])
  18                         .then(fs.exec('/sbin/ifup', [ifaceValue]))
  19                         .then(fs.exec('/etc/init.d/travelmate', ['start']))
  20         }
  21         if (ev === 'setup') {
  22                 ifaceValue = String(uci.get('travelmate', 'global', 'trm_iface') || '');
  23                 L.ui.showModal(_('Interface Wizard'), [
  24                         E('p', _('To use Travelmate, you have to set up an uplink interface once. This wizard creates an IPv4- and an IPv6 alias network interface with all required network- and firewall settings.')),
  25                         E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [
  26                                 E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [
  27                                         E('input', { 'class': 'cbi-input-text', 'id': 'iface', 'placeholder': 'trm_wwan', 'value': ifaceValue, 'maxlength': '15', 'spellcheck': 'false' }),
  28                                         '\xa0\xa0\xa0',
  29                                         _('The uplink interface name')
  30                                 ]),
  31                                 E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [
  32                                         E('input', { 'class': 'cbi-input-text', 'id': 'zone', 'placeholder': 'wan', 'maxlength': '15', 'spellcheck': 'false' }),
  33                                         '\xa0\xa0\xa0',
  34                                         _('The firewall zone name')
  35                                 ]),
  36                                 E('label', { 'class': 'cbi-input-text', 'style': 'padding-top:.5em' }, [
  37                                         E('input', { 'class': 'cbi-input-text', 'id': 'metric', 'placeholder': '100', 'maxlength': '3', 'spellcheck': 'false' }),
  38                                         '\xa0\xa0\xa0',
  39                                         _('The interface metric')
  40                                 ])
  41                         ]),
  42                         E('div', { 'class': 'right' }, [
  43                                 E('button', {
  44                                         'class': 'btn',
  45                                         'click': L.hideModal
  46                                 }, _('Dismiss')),
  47                                 ' ',
  48                                 E('button', {
  49                                         'class': 'cbi-button cbi-button-positive important',
  50                                         'click': ui.createHandlerFn(this, function (ev) {
  51                                                 var iface = document.getElementById('iface').value || 'trm_wwan',
  52                                                         zone = document.getElementById('zone').value || 'wan',
  53                                                         metric = document.getElementById('metric').value || '100';
  54                                                 L.resolveDefault(fs.exec('/etc/init.d/travelmate', ['setup', iface, zone, metric]))
  55                                                         .then(function (res) {
  56                                                                 if (res) {
  57                                                                         ui.addNotification(null, E('p', res.trim() + '.'), 'error');
  58                                                                 } else {
  59                                                                         ui.addNotification(null, E('p', _('The uplink interface has been updated.')), 'info');
  60                                                                 }
  61                                                         });
  62                                                 L.hideModal();
  63                                         })
  64                                 }, _('Save'))
  65                         ])
  66                 ]);
  67                 return document.getElementById('iface').focus();
  68         }
  69
  70         if (ev === 'qrcode') {
  71                 return Promise.all([
  72                         uci.load('wireless')
  73                 ]).then(function () {
  74                         var w_sid, w_device, w_ssid, w_enc, w_key, w_hidden, result,
  75                                 w_sections = uci.sections('wireless', 'wifi-iface'),
  76                                 optionsAP = [E('option', { value: '' }, [_('-- AP Selection --')])];
  77                         for (var i = 0; i < w_sections.length; i++) {
  78                                 if (w_sections[i].mode === 'ap' && w_sections[i].disabled !== '1') {
  79                                         w_sid = i;
  80                                         w_device = w_sections[i].device;
  81                                         w_ssid = w_sections[i].ssid;
  82                                         optionsAP.push(E('option', { value: w_sid }, w_device + ', ' + w_ssid));
  83                                 }
  84                         }
  85                         var selectAP = E('select', {
  86                                 id: 'selectID',
  87                                 class: 'cbi-input-select',
  88                                 change: function (ev) {
  89                                         result = document.getElementById('qrcode');
  90                                         if (document.getElementById("selectID").value) {
  91                                                 w_sid = document.getElementById("selectID").value;
  92                                                 w_ssid = w_sections[w_sid].ssid;
  93                                                 w_enc = w_sections[w_sid].encryption;
  94                                                 w_key = w_sections[w_sid].key;
  95                                                 w_hidden = (w_sections[w_sid].hidden == 1 ? 'true' : 'false');
  96                                                 if (w_enc.startsWith('psk')) {
  97                                                         w_enc = 'WPA';
  98                                                 }
  99                                                 else if (w_enc === 'none') {
 100                                                         w_enc = 'nopass';
 101                                                         w_key = 'nokey';
 102                                                 }
 103                                                 L.resolveDefault(fs.exec_direct('/usr/bin/qrencode', ['--inline', '--8bit', '--type=SVG', '--output=-', 'WIFI:S:' + w_ssid + ';T:' + w_enc + ';P:' + w_key + ';H:' + w_hidden + ';']), null).then(function (res) {
 104                                                         if (res) {
 105                                                                 result.innerHTML = res.trim();
 106                                                         }
 107                                                         else {
 108                                                                 result.textContent = _('The QR-Code could not be generated!');
 109                                                         }
 110                                                 });
 111                                         }
 112                                         else {
 113                                                 result.textContent = '';
 114                                         }
 115                                 }
 116                         }, optionsAP);
 117                         L.ui.showModal(_('QR-Code Overview'), [
 118                                 E('p', _('Render the QR-Code of the selected Access Point to comfortably transfer the WLAN credentials to your mobile devices.')),
 119                                 E('div', { 'class': 'left', 'style': 'display:flex; flex-direction:column' }, [
 120                                         E('label', { 'class': 'cbi-input-select', 'style': 'padding-top:.5em' }, [
 121                                                 selectAP,
 122                                         ])
 123                                 ]),
 124                                 '\xa0',
 125                                 E('div', {
 126                                         'id': 'qrcode'
 127                                 }),
 128                                 E('div', { 'class': 'right' }, [
 129                                         E('button', {
 130                                                 'class': 'btn',
 131                                                 'click': L.hideModal
 132                                         }, _('Dismiss'))
 133                                 ])
 134                         ]);
 135                 });
 136         }
 137 }
 138
 139 return view.extend({
 140         load: function () {
 141                 return Promise.all([
 142                         uci.load('travelmate')
 143                 ]);
 144         },
 145
 146         render: function (result) {
 147                 var m, s, o;
 148
 149                 m = new form.Map('travelmate', 'Travelmate', _('Configuration of the travelmate package to enable travel router functionality. \
 150                         For further information <a href="https://github.com/openwrt/packages/blob/master/net/travelmate/files/README.md" target="_blank" rel="noreferrer noopener" >check the online documentation</a>. <br /> \
 151                         <em>Please note:</em> On first start please call the \'Interface Wizard\' once, to make the necessary network- and firewall settings.'));
 152
 153                 /*
 154                         poll runtime information
 155                 */
 156                 pollData: poll.add(function () {
 157                         return L.resolveDefault(fs.stat('/tmp/trm_runtime.json'), null).then(function (res) {
 158                                 var status = document.getElementById('status');
 159                                 if (res && res.size > 0) {
 160                                         L.resolveDefault(fs.read_direct('/tmp/trm_runtime.json'), null).then(function (res) {
 161                                                 if (res) {
 162                                                         var info = JSON.parse(res);
 163                                                         if (status && info) {
 164                                                                 status.textContent = (info.data.travelmate_status || '-') + ' / ' + (info.data.travelmate_version || '-');
 165                                                                 if (info.data.travelmate_status.startsWith('running')) {
 166                                                                         if (!status.classList.contains("spinning")) {
 167                                                                                 status.classList.add("spinning");
 168                                                                         }
 169                                                                 } else {
 170                                                                         if (status.classList.contains("spinning")) {
 171                                                                                 status.classList.remove("spinning");
 172                                                                         }
 173                                                                 }
 174                                                         } else if (status) {
 175                                                                 status.textContent = '-';
 176                                                                 if (status.classList.contains("spinning")) {
 177                                                                         status.classList.remove("spinning");
 178                                                                 }
 179                                                         }
 180                                                         var station_id = document.getElementById('station_id');
 181                                                         if (station_id && info) {
 182                                                                 station_id.textContent = info.data.station_id || '-';
 183                                                         }
 184                                                         var station_mac = document.getElementById('station_mac');
 185                                                         if (station_mac && info) {
 186                                                                 station_mac.textContent = info.data.station_mac || '-';
 187                                                         }
 188                                                         var station_interface = document.getElementById('station_interface');
 189                                                         if (station_interface && info) {
 190                                                                 station_interface.textContent = info.data.station_interface || '-';
 191                                                         }
 192                                                         var wpa_flags = document.getElementById('wpa_flags');
 193                                                         if (wpa_flags && info) {
 194                                                                 wpa_flags.textContent = info.data.wpa_flags || '-';
 195                                                         }
 196                                                         var run_flags = document.getElementById('run_flags');
 197                                                         if (run_flags && info) {
 198                                                                 run_flags.textContent = info.data.run_flags || '-';
 199                                                         }
 200                                                         var ext_hooks = document.getElementById('ext_hooks');
 201                                                         if (ext_hooks && info) {
 202                                                                 ext_hooks.textContent = info.data.ext_hooks || '-';
 203                                                         }
 204                                                         var run = document.getElementById('run');
 205                                                         if (run && info) {
 206                                                                 run.textContent = info.data.last_run || '-';
 207                                                         }
 208                                                 }
 209                                         });
 210                                 } else if (status) {
 211                                         status.textContent = '-';
 212                                         if (status.classList.contains("spinning")) {
 213                                                 status.classList.remove("spinning");
 214                                         }
 215                                 }
 216                         });
 217                 }, 1);
 218
 219                 /*
 220                         runtime information and buttons
 221                 */
 222                 s = m.section(form.NamedSection, 'global');
 223                 s.render = L.bind(function (view, section_id) {
 224                         return E('div', { 'class': 'cbi-section' }, [
 225                                 E('h3', _('Information')),
 226                                 E('div', { 'class': 'cbi-value' }, [
 227                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Status / Version')),
 228                                         E('div', { 'class': 'cbi-value-field spinning', 'id': 'status', 'style': 'color:#37c' }, '\xa0')
 229                                 ]),
 230                                 E('div', { 'class': 'cbi-value' }, [
 231                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Station ID')),
 232                                         E('div', { 'class': 'cbi-value-field', 'id': 'station_id', 'style': 'color:#37c' }, '-')
 233                                 ]),
 234                                 E('div', { 'class': 'cbi-value' }, [
 235                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Station MAC')),
 236                                         E('div', { 'class': 'cbi-value-field', 'id': 'station_mac', 'style': 'color:#37c' }, '-')
 237                                 ]),
 238                                 E('div', { 'class': 'cbi-value' }, [
 239                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Station Interface')),
 240                                         E('div', { 'class': 'cbi-value-field', 'id': 'station_interface', 'style': 'color:#37c' }, '-')
 241                                 ]),
 242                                 E('div', { 'class': 'cbi-value' }, [
 243                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('WPA Flags')),
 244                                         E('div', { 'class': 'cbi-value-field', 'id': 'wpa_flags', 'style': 'color:#37c' }, '-')
 245                                 ]),
 246                                 E('div', { 'class': 'cbi-value' }, [
 247                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Run Flags')),
 248                                         E('div', { 'class': 'cbi-value-field', 'id': 'run_flags', 'style': 'color:#37c' }, '-')
 249                                 ]),
 250                                 E('div', { 'class': 'cbi-value' }, [
 251                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Ext. Hooks')),
 252                                         E('div', { 'class': 'cbi-value-field', 'id': 'ext_hooks', 'style': 'color:#37c' }, '-')
 253                                 ]),
 254                                 E('div', { 'class': 'cbi-value' }, [
 255                                         E('label', { 'class': 'cbi-value-title', 'style': 'padding-top:0rem' }, _('Last Run')),
 256                                         E('div', { 'class': 'cbi-value-field', 'id': 'run', 'style': 'color:#37c' }, '-')
 257                                 ]),
 258                                 E('div', { class: 'right' }, [
 259                                         E('button', {
 260                                                 'class': 'cbi-button cbi-button-apply',
 261                                                 'id': 'btn_suspend',
 262                                                 'click': ui.createHandlerFn(this, function () {
 263                                                         L.resolveDefault(fs.stat('/usr/bin/qrencode'), null).then(function (res) {
 264                                                                 if (res) {
 265                                                                         return handleAction('qrcode');
 266                                                                 }
 267                                                                 return ui.addNotification(null, E('p', _('Please install the separate \'qrencode\' package.')), 'info');
 268                                                         })
 269                                                 })
 270                                         }, [_('AP QR-Codes...')]),
 271                                         '\xa0',
 272                                         E('button', {
 273                                                 'class': 'cbi-button cbi-button-negative',
 274                                                 'click': ui.createHandlerFn(this, function () {
 275                                                         return handleAction('restart');
 276                                                 })
 277                                         }, [_('Restart Interface')]),
 278                                         '\xa0',
 279                                         E('button', {
 280                                                 'class': 'cbi-button cbi-button-negative',
 281                                                 'click': ui.createHandlerFn(this, function () {
 282                                                         return handleAction('setup');
 283                                                 })
 284                                         }, [_('Interface Wizard...')])
 285                                 ])
 286                         ]);
 287                 }, o, this);
 288                 this.pollData;
 289
 290                 /*
 291                         tabbed config section
 292                 */
 293                 s = m.section(form.NamedSection, 'global', 'travelmate', _('Settings'));
 294                 s.addremove = false;
 295                 s.tab('general', _('General Settings'));
 296                 s.tab('additional', _('Additional Settings'));
 297                 s.tab('adv_email', _('E-Mail Settings'), _('Please note: E-Mail notifications require the separate setup of the <em>mstmp</em> package.<br /><p>&#xa0;</p>'));
 298
 299                 /*
 300                         general settings tab
 301                 */
 302                 o = s.taboption('general', form.Flag, 'trm_enabled', _('Enabled'), _('Enable the travelmate service.'));
 303                 o.rmempty = false;
 304
 305                 o = s.taboption('general', form.Flag, 'trm_debug', _('Verbose Debug Logging'), _('Enable verbose debug logging in case of any processing errors.'));
 306                 o.rmempty = false;
 307
 308                 o = s.taboption('general', form.Value, 'trm_radio', _('Radio Selection'), _('Restrict travelmate to a single radio or change the overall scanning order.'));
 309                 o.value('radio0', _('use the first radio only (radio0)'));
 310                 o.value('radio1', _('use the second radio only (radio1)'));
 311                 o.value('radio0 radio1', _('use both radios, normal sort order (radio0 radio1)'));
 312                 o.value('radio1 radio0', _('use both radios, reverse sort order (radio1 radio0)'));
 313                 o.rmempty = true;
 314
 315                 o = s.taboption('general', form.Flag, 'trm_captive', _('Captive Portal Detection'), _('Check the internet availability, handle captive portal redirections and keep the uplink connection \'alive\'.'));
 316                 o.default = 1;
 317                 o.rmempty = false;
 318
 319                 o = s.taboption('general', form.Flag, 'trm_netcheck', _('Net Error Check'), _('Treat missing internet availability as an error.'));
 320                 o.depends('trm_captive', '1');
 321                 o.default = 0;
 322                 o.rmempty = false;
 323
 324                 o = s.taboption('general', form.Flag, 'trm_proactive', _('ProActive Uplink Switch'), _('Proactively scan and switch to a higher prioritized uplink, despite of an already existing connection.'));
 325                 o.default = 1;
 326                 o.rmempty = false;
 327
 328                 o = s.taboption('general', form.Flag, 'trm_randomize', _('Randomize MAC Addresses'), _('Generate a random unicast MAC address for each uplink connection.'));
 329                 o.default = 0;
 330                 o.rmempty = false;
 331
 332                 o = s.taboption('general', form.Flag, 'trm_autoadd', _('AutoAdd Open Uplinks'), _('Automatically add open uplinks like hotel captive portals to your wireless config.'));
 333                 o.default = 0;
 334                 o.rmempty = false;
 335
 336                 o = s.taboption('general', form.Value, 'trm_maxautoadd', _('Limit AutoAdd'), _('Limit the maximum number of automatically added open uplinks. To disable this limitation set it to \'0\'.'));
 337                 o.depends('trm_autoadd', '1');
 338                 o.placeholder = '5';
 339                 o.datatype = 'range(0,30)';
 340                 o.rmempty = true;
 341
 342                 /*
 343                         additional settings tab
 344                 */
 345                 o = s.taboption('additional', form.Value, 'trm_triggerdelay', _('Trigger Delay'), _('Additional trigger delay in seconds before travelmate processing begins.'));
 346                 o.placeholder = '2';
 347                 o.datatype = 'range(1,60)';
 348                 o.rmempty = true;
 349
 350                 o = s.taboption('additional', form.Value, 'trm_maxretry', _('Connection Limit'), _('Retry limit to connect to an uplink.'));
 351                 o.placeholder = '3';
 352                 o.datatype = 'range(1,10)';
 353                 o.rmempty = true;
 354
 355                 o = s.taboption('additional', form.Value, 'trm_minquality', _('Signal Quality Threshold'), _('Minimum signal quality threshold as percent for conditional uplink (dis-) connections.'));
 356                 o.placeholder = '35';
 357                 o.datatype = 'range(20,80)';
 358                 o.rmempty = true;
 359
 360                 o = s.taboption('additional', form.Value, 'trm_maxwait', _('Interface Timeout'), _('How long should travelmate wait for a successful wlan uplink connection.'));
 361                 o.placeholder = '30';
 362                 o.datatype = 'range(20,40)';
 363                 o.rmempty = true;
 364
 365                 o = s.taboption('additional', form.Value, 'trm_timeout', _('Overall Timeout'), _('Overall retry timeout in seconds.'));
 366                 o.placeholder = '60';
 367                 o.datatype = 'range(30,300)';
 368                 o.rmempty = true;
 369
 370                 o = s.taboption('additional', form.Value, 'trm_maxscan', _('Scan Limit'), _('Limit the nearby scan results to process only the strongest uplinks.'));
 371                 o.placeholder = '10';
 372                 o.datatype = 'range(1,30)';
 373                 o.rmempty = true;
 374
 375                 o = s.taboption('additional', form.ListValue, 'trm_captiveurl', _('Captive Portal URL'), _('The selected URL will be used for connectivity- and captive portal checks.'));
 376                 o.value('http://detectportal.firefox.com', 'Firefox (default)');
 377                 o.value('http://connectivity-check.ubuntu.com', 'Ubuntu');
 378                 o.value('http://captive.apple.com', 'Apple');
 379                 o.value('http://connectivitycheck.android.com/generate_204', 'Google');
 380                 o.value('http://www.msftncsi.com/ncsi.txt', 'Microsoft');
 381                 o.optional = true;
 382                 o.rmempty = true;
 383
 384                 o = s.taboption('additional', form.ListValue, 'trm_useragent', _('User Agent'), _('The selected user agent will be used for connectivity- and captive portal checks.'));
 385                 o.value('Mozilla/5.0 (X11; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0', 'Firefox (default)');
 386                 o.value('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36', 'Chromium');
 387                 o.value('Mozilla/5.0 (Macintosh; Intel Mac OS X 11_5_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15', 'Safari');
 388                 o.value('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.55', 'Edge');
 389                 o.value('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 OPR/77.0.4054.277', 'Opera');
 390                 o.optional = true;
 391                 o.rmempty = true;
 392
 393                 o = s.taboption('additional', form.ListValue, 'trm_nice', _('Service Priority'), _('The selected priority will be used for travelmate processes.'));
 394                 o.value('-20', 'Highest Priority');
 395                 o.value('-10', 'High Priority');
 396                 o.value('0', 'Normal Priority (default)');
 397                 o.value('10', 'Less Priority');
 398                 o.value('19', 'Least Priority');
 399                 o.optional = true;
 400                 o.rmempty = true;
 401
 402                 /*
 403                         advanced email settings tab
 404                 */
 405                 o = s.taboption('adv_email', form.Flag, 'trm_mail', _('E-Mail Hook'), _('Sends notification E-Mails after every succesful uplink connect.'));
 406                 o.rmempty = false;
 407
 408                 o = s.taboption('adv_email', form.Value, 'trm_mailreceiver', _('E-Mail Receiver Address'), _('Receiver address for travelmate notification E-Mails.'));
 409                 o.depends('trm_mail', '1');
 410                 o.placeholder = 'name@example.com';
 411                 o.rmempty = true;
 412
 413                 o = s.taboption('adv_email', form.Value, 'trm_mailsender', _('E-Mail Sender Address'), _('Sender address for travelmate notification E-Mails.'));
 414                 o.depends({ 'trm_mailreceiver': '@', '!contains': true });
 415                 o.placeholder = 'no-reply@travelmate';
 416                 o.rmempty = true;
 417
 418                 o = s.taboption('adv_email', form.Value, 'trm_mailtopic', _('E-Mail Topic'), _('Topic for travelmate notification E-Mails.'));
 419                 o.depends({ 'trm_mailreceiver': '@', '!contains': true });
 420                 o.placeholder = 'travelmate connection to \'<station>\'';
 421                 o.rmempty = true;
 422
 423                 o = s.taboption('adv_email', form.Value, 'trm_mailprofile', _('E-Mail Profile'), _('Profile used by \'msmtp\' for travelmate notification E-Mails.'));
 424                 o.depends({ 'trm_mailreceiver': '@', '!contains': true });
 425                 o.placeholder = 'trm_notify';
 426                 o.rmempty = true;
 427
 428                 return m.render();
 429         },
 430         handleReset: null
 431 });