luci-mod-system: rework leds.js and system.js views
authorJo-Philipp Wich <jo@mein.io>
Fri, 5 Apr 2019 06:17:10 +0000 (08:17 +0200)
committerJo-Philipp Wich <jo@mein.io>
Sun, 7 Jul 2019 13:36:25 +0000 (15:36 +0200)
- Drop manual RPC batch usage
- Use LuCI.Poll for status updates

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
modules/luci-mod-system/htdocs/luci-static/resources/view/system/leds.js
modules/luci-mod-system/htdocs/luci-static/resources/view/system/system.js

index eba366519f4bca9c0a1aeb3675b54e64a377cb95..adcf4a4f8b09c3bcf76e7e00bf831114bdd23838 100644 (file)
@@ -3,42 +3,44 @@
 'require rpc';
 'require form';
 
-return L.view.extend({
-       callInitAction: rpc.declare({
-               object: 'luci',
-               method: 'initCall',
-               params: [ 'name', 'action' ],
-               expect: { result: false }
-       }),
-
-       callLeds: rpc.declare({
-               object: 'luci',
-               method: 'leds'
-       }),
-
-       callUSB: rpc.declare({
-               object: 'luci',
-               method: 'usb'
-       }),
-
-       callNetdevs: rpc.declare({
-               object: 'luci',
-               method: 'ifaddrs',
-               expect: { result: [] },
-               filter: function(res) {
-                       var devs = {};
-                       for (var i = 0; i < res.length; i++)
-                               devs[res[i].name] = true;
-                       return Object.keys(devs).sort();
-               }
-       }),
+var callInitAction, callLeds, callUSB, callNetdevs;
+
+callInitAction = rpc.declare({
+       object: 'luci',
+       method: 'initCall',
+       params: [ 'name', 'action' ],
+       expect: { result: false }
+});
+
+callLeds = rpc.declare({
+       object: 'luci',
+       method: 'leds'
+});
 
+callUSB = rpc.declare({
+       object: 'luci',
+       method: 'usb'
+});
+
+callNetdevs = rpc.declare({
+       object: 'luci',
+       method: 'ifaddrs',
+       expect: { result: [] },
+       filter: function(res) {
+               var devs = {};
+               for (var i = 0; i < res.length; i++)
+                       devs[res[i].name] = true;
+               return Object.keys(devs).sort();
+       }
+});
+
+return L.view.extend({
        load: function() {
-               rpc.batch();
-               this.callLeds();
-               this.callUSB();
-               this.callNetdevs();
-               return rpc.flush();
+               return Promise.all([
+                       callLeds(),
+                       callUSB(),
+                       callNetdevs()
+               ]);
        },
 
        render: function(results) {
index bbe483c0ab6439e5ef46579066a6c3b7653eb8af..4b833a3f834eff225929e599d7b5f2c997303ba8 100644 (file)
@@ -3,82 +3,84 @@
 'require rpc';
 'require form';
 
-return L.view.extend({
-       callInitList: rpc.declare({
-               object: 'luci',
-               method: 'initList',
-               params: [ 'name' ],
-               expect: { result: {} },
-               filter: function(res) {
-                       for (var k in res)
-                               return +res[k].enabled;
-                       return null;
-               }
-       }),
-
-       callInitAction: rpc.declare({
-               object: 'luci',
-               method: 'initCall',
-               params: [ 'name', 'action' ],
-               expect: { result: false }
-       }),
-
-       callLocaltime: rpc.declare({
-               object: 'luci',
-               method: 'localtime',
-               expect: { localtime: 0 }
-       }),
-
-       callTimezone: rpc.declare({
-               object: 'luci',
-               method: 'timezone',
-               expect: { result: {} }
-       }),
-
-       CBILocalTime: form.DummyValue.extend({
-               renderWidget: function(section_id, option_id, cfgvalue) {
-                       return E([], [
-                               E('span', { 'id': 'localtime' },
-                                       new Date(cfgvalue * 1000).toLocaleString()),
-                               ' ',
-                               E('button', {
-                                       'class': 'cbi-button cbi-button-apply',
-                                       'click': L.bind(function(ev) {
-                                               ev.target.blur();
-                                               ev.target.classList.add('spinning');
-                                               ev.target.disabled = true;
-                                               this.callLocaltime(Math.floor(Date.now() / 1000)).then(function() {
-                                                       ev.target.classList.remove('spinning');
-                                                       ev.target.disabled = false;
-                                               });
-                                       }, this)
-                               }, _('Sync with browser')),
-                               ' ',
-                               this.ntpd_support ? E('button', {
-                                       'class': 'cbi-button cbi-button-apply',
-                                       'click': L.bind(function(ev) {
-                                               ev.target.blur();
-                                               ev.target.classList.add('spinning');
-                                               ev.target.disabled = true;
-                                               this.callLocaltime(Math.floor(Date.now() / 1000)).then(function() {
-                                                       ev.target.classList.remove('spinning');
-                                                       ev.target.disabled = false;
-                                               });
-                                       }, this)
-                               }, _('Sync with NTP-Server')) : ''
-                       ]);
-               },
-       }),
+var callInitList, callInitAction, callLocaltime, callTimezone, CBILocalTime;
+
+callInitList = rpc.declare({
+       object: 'luci',
+       method: 'initList',
+       params: [ 'name' ],
+       expect: { result: {} },
+       filter: function(res) {
+               for (var k in res)
+                       return +res[k].enabled;
+               return null;
+       }
+});
+
+callInitAction = rpc.declare({
+       object: 'luci',
+       method: 'initCall',
+       params: [ 'name', 'action' ],
+       expect: { result: false }
+});
+
+callLocaltime = rpc.declare({
+       object: 'luci',
+       method: 'localtime',
+       expect: { localtime: 0 }
+});
 
+callTimezone = rpc.declare({
+       object: 'luci',
+       method: 'timezone',
+       expect: { result: {} }
+});
+
+CBILocalTime = form.DummyValue.extend({
+       renderWidget: function(section_id, option_id, cfgvalue) {
+               return E([], [
+                       E('span', { 'id': 'localtime' },
+                               new Date(cfgvalue * 1000).toLocaleString()),
+                       ' ',
+                       E('button', {
+                               'class': 'cbi-button cbi-button-apply',
+                               'click': function() {
+                                       this.blur();
+                                       this.classList.add('spinning');
+                                       this.disabled = true;
+                                       callLocaltime(Math.floor(Date.now() / 1000)).then(L.bind(function() {
+                                               this.classList.remove('spinning');
+                                               this.disabled = false;
+                                       }, this));
+                               }
+                       }, _('Sync with browser')),
+                       ' ',
+                       this.ntpd_support ? E('button', {
+                               'class': 'cbi-button cbi-button-apply',
+                               'click': function() {
+                                       this.blur();
+                                       this.classList.add('spinning');
+                                       this.disabled = true;
+                                       callInitAction('sysntpd', 'restart').then(L.bind(function() {
+                                               this.classList.remove('spinning');
+                                               this.disabled = false;
+                                       }, this));
+                               }
+                       }, _('Sync with NTP-Server')) : ''
+               ]);
+       },
+});
+
+return L.view.extend({
        load: function() {
-               rpc.batch();
-               this.callInitList('sysntpd');
-               this.callInitList('zram');
-               this.callTimezone();
-               this.callLocaltime();
-               uci.load('luci');
-               uci.load('system');
-               return rpc.flush();
+               return Promise.all([
+                       callInitList('sysntpd'),
+                       callInitList('zram'),
+                       callTimezone(),
+                       callLocaltime(),
+                       uci.load('luci'),
+                       uci.load('system')
+               ]);
        },
 
        render: function(rpc_replies) {
@@ -86,7 +88,6 @@ return L.view.extend({
                    zram_support = rpc_replies[1],
                    timezones = rpc_replies[2],
                    localtime = rpc_replies[3],
-                   view = this,
                    ntp_setup, ntp_enabled, m, s, o;
 
                m = new form.Map('system',
@@ -109,7 +110,7 @@ return L.view.extend({
                 * System Properties
                 */
 
-               o = s.taboption('general', this.CBILocalTime, '_systime', _('Local Time'));
+               o = s.taboption('general', CBILocalTime, '_systime', _('Local Time'));
                o.cfgvalue = function() { return localtime };
                o.ntpd_support = ntpd_support;
 
@@ -249,7 +250,7 @@ return L.view.extend({
                                else
                                        uci.unset('system', 'ntp', 'enabled');
 
-                               return view.callInitAction('sysntpd', 'enable');
+                               return callInitAction('sysntpd', 'enable');
                        };
                        o.load = function(section_id) {
                                return (ntpd_support == 1 &&
@@ -273,13 +274,14 @@ return L.view.extend({
                        };
                }
 
-               window.setInterval(L.bind(function() {
-                       this.callLocaltime().then(function(t) {
-                               var lt = document.getElementById('localtime');
-                               if (lt) lt.innerHTML = new Date(t * 1000).toLocaleString();
+               return m.render().then(function(mapEl) {
+                       L.Poll.add(function() {
+                               return callLocaltime().then(function(t) {
+                                       mapEl.querySelector('#localtime').innerHTML = new Date(t * 1000).toLocaleString();
+                               });
                        });
-               }, this), 5000);
 
-               return m.render();
+                       return mapEl;
+               });
        }
 });