1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
'use strict';
'require baseclass';
'require rpc';
'require network';
var callLuciDHCPLeases = rpc.declare({
object: 'luci-rpc',
method: 'getDHCPLeases',
expect: { '': {} }
});
return baseclass.extend({
title: _('DHCP Devices'),
params: {},
load() {
return Promise.all([
callLuciDHCPLeases(),
]);
},
renderHtml() {
const container_wapper = E('div', { 'class': 'router-status-lan dashboard-bg box-s1' });
const container_box = E('div', { 'class': 'lan-info devices-list' });
container_box.appendChild(E('div', { 'class': 'title'}, [
E('img', {
'src': L.resource('view/dashboard/icons/devices.svg'),
'width': 55,
'title': this.title,
'class': 'middle svgmonotone'
}),
E('h3', this.title)
]));
const container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
E('thead', { 'class': 'thead dashboard-bg' }, [
E('th', { 'class': 'th nowrap' }, _('Hostname')),
E('th', { 'class': 'th' }, _('IP Address')),
E('th', { 'class': 'th' }, _('MAC')),
])
]);
for(let idx in this.params.lan.devices) {
const device = this.params.lan.devices[idx];
container_devices.appendChild(E('tr', { 'class': idx % 2 ? 'tr cbi-rowstyle-2' : 'tr cbi-rowstyle-1' }, [
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ device.hostname ]),
]),
]),
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ device.ipv4 ]),
]),
]),
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ device.macaddr ]),
]),
]),
]));
}
container_devices.appendChild(E('tfoot', { 'class': 'tfoot dashboard-bg' }, [
E('tr', { 'class': 'tr cbi-rowstyle-1' }, [
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ ]),
]),
]),
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ _('Total') + '：' ]),
]),
]),
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ this.params.lan.devices.length ]),
]),
]),
])
]));
container_box.appendChild(container_devices);
container_wapper.appendChild(container_box);
return container_wapper;
},
renderUpdateData(leases) {
const dev_arr = [];
leases.forEach(({ hostname = '?', ipaddr: ipv4 = '-', macaddr = '00:00:00:00:00:00' }) => {
dev_arr.push({ hostname, ipv4, macaddr });
});
this.params.lan = { devices: dev_arr };
},
renderLeases(leases) {
this.renderUpdateData([...leases.dhcp_leases]);
return this.renderHtml();
},
render([leases]) {
if (L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd'))
return this.renderLeases(leases);
return E([]);
}
});
|
