mirror of
https://github.com/Ysurac/openmptcprouter-feeds.git
synced 2025-03-09 15:40:03 +00:00
fix luci-mod-dashboard
This commit is contained in:
suyuan
parent
7229f8ae07
commit
a40125ea08
34 changed files with 0 additions and 23765 deletions
|
|
@ -1,300 +0,0 @@
|
|||
/**
|
||||
* Dashboard Principals Styles
|
||||
**/
|
||||
|
||||
.Dashboard {
|
||||
color: #212529!important;
|
||||
}
|
||||
|
||||
.Dashboard h3 {
|
||||
color:#000;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.Dashboard hr {
|
||||
border: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
margin: 0;
|
||||
box-sizing: content-box;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.Dashboard .box-s1 {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.Dashboard .internet-status-self .internet-status-info .title {
|
||||
height: 97px;
|
||||
}
|
||||
|
||||
.Dashboard .dashboard-bg {
|
||||
border-radius: 16px;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.Dashboard div > table > tbody > tr:nth-of-type(2n), div > .table > .tr:nth-of-type(2n) {
|
||||
background-color: transparent;
|
||||
}
|
||||
.Dashboard .tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.Dashboard .title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Dashboard .section-content {
|
||||
display: flex;
|
||||
vertical-align: top;
|
||||
padding: 20px 0 0 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.Dashboard .section-content > div {
|
||||
width:100%;
|
||||
padding:1.5em;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .settings-info {
|
||||
padding-top:1em;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .internet-status-info .settings-info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .internet-status-info .settings-info > div > p > i{
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.Dashboard .section-content > div:nth-child(2) {
|
||||
margin-left:20px;
|
||||
}
|
||||
|
||||
.Dashboard .devices-list .devices-info {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.Dashboard .devices-list .devices-info .tr .td{
|
||||
padding:0px 0 0 10px;
|
||||
}
|
||||
|
||||
.Dashboard .devices-list .devices-info .tr .td:first-child {
|
||||
width: 33%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.Dashboard .devices-list hr:nth-child(4) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-lan .devices-list .table-titles .th:first-child {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-self .router-status-info .settings-info {
|
||||
padding-left:27px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-self .router-status-info .title h3 {
|
||||
margin-top:-2px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-info svg {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.Dashboard .internet-status-self .settings-info p:first-child span:first-child{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
//.Dashboard .internet-status-self .settings-info p:first-child span:first-child,
|
||||
.Dashboard .router-status-wifi .wifi-info .settings-info p:first-child span:first-child,
|
||||
.Dashboard .router-status-wifi .wifi-info .settings-info p:nth-child(2) span:first-child{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.Dashboard .settings-info p span:first-child {
|
||||
width: 35%;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.Dashboard .settings-info p span:nth-child(2){
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
max-height: 16px;
|
||||
position: relative;
|
||||
top:2px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-info .settings-info p span:nth-child(2){
|
||||
max-width: 283px;
|
||||
}
|
||||
|
||||
.Dashboard .settings-info p span.ssid {
|
||||
max-height: 18px;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.Dashboard .settings-info p span.encryption {
|
||||
max-width: 82px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .settings-info,
|
||||
.Dashboard .router-status-lan .lan-info .settings-info
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td {
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:first-child {
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(2) {
|
||||
width: 21%;
|
||||
overflow: hidden;
|
||||
padding-left:0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .settings-info{
|
||||
padding:1em 0 1em 0;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(3) {
|
||||
width: 22%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .devices-info .tr .td:nth-child(5) {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info > hr:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .devices-info .device-info .progress {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Dashboard .wifi-info .devices-info .table-titles {
|
||||
border-bottom:1px solid rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.Dashboard .label-success {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.Dashboard .label-danger {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive
|
||||
**/
|
||||
@media screen and (min-width: 200px) and (max-width: 640px) {
|
||||
|
||||
.Dashboard .cbi-section-1 > .section-content {
|
||||
padding-top:10px;
|
||||
}
|
||||
|
||||
.Dashboard .section-content {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.Dashboard .section-content > div{
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.Dashboard .section-content > div:first-child {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.Dashboard .section-content > div:nth-child(2) {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-self .router-status-info .settings-info {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .internet-status-info .settings-info {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .internet-status-info .settings-info > div:first-child {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.Dashboard .section-content .router-status-lan .devices-info .table-titles {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .settings-info > div{
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .router-status-lan .devices-info .table-titles .th:last-child{
|
||||
padding-left: 70px;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .router-status-lan .devices-info .td:first-child{
|
||||
flex: 2 2 31%;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .router-status-lan .devices-info .td:nth-child(2){
|
||||
flex: 1 1 24%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.Dashboard .section-content .router-status-lan .devices-info .td:last-child{
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.Dashboard .router-status-wifi .wifi-info .settings-info > div p:nth-child(6) > span:last-child{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 14px;
|
||||
width: 52%;
|
||||
word-break: break-word;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.Dashboard .wifi-info .devices-info .table-titles {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
border-radius: initial;
|
||||
}
|
||||
|
||||
.Dashboard .wifi-info .devices-info .table-titles .th {
|
||||
flex: 2 2 24%;
|
||||
}
|
||||
|
||||
.Dashboard .wifi-info .devices-info .tr .td {
|
||||
flex: 2 2 10%;
|
||||
}
|
||||
|
||||
.Dashboard .wifi-info hr:nth-child(4) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><g stroke="#000" fill="none"><defs><symbol id="0"><path d="M6 11l0 -2 -4 0c-1,0 -1,-1 -1,-1l0 -6c0,-1 1,-1 1,-1l10 0c1,0 1,1 1,1l0 6c0,1 -1,1 -1,1l-4 0 0 2m-2 -2l2 0m-5 2l8 0"/></symbol></defs><use xlink:href="#0" x="9" y="2"/><use xlink:href="#0" x="0" y="18"/><use xlink:href="#0" x="18" y="18"/><path d="M16 14l0 3m-8 1l0 -1 16 0 0 1"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 452 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g stroke="#5b5" fill="none"><circle cx="16" cy="16" r="15"/><ellipse cx="16" cy="16" rx="8" ry="15"/><path d="M4 25c6,-3 18,-3 24,0m-27 -9l30 0m-27 -9c6,3 18,3 24,0m-12 -6l0 30"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 250 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g stroke="#000" fill="none"><circle cx="16" cy="16" r="15"/><ellipse cx="16" cy="16" rx="8" ry="15"/><path d="M4 25c6,-3 18,-3 24,0m-27 -9l30 0m-27 -9c6,3 18,3 24,0m-12 -6l0 30"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 250 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path stroke="#000" fill="none" d="M6 22l-4 0c-1,0 -1,1 -1,1l0 4c0,1 1,1 1,1l28 0c1,0 1,-1 1,-1l0 -4c0,-1 -1,-1 -1,-1l-24 0 -2 -18c-0.2,-2 -2.2,-2 -2,0l2 18m22 0l2 -18c0.2,-2 2.2,-2 2,0l-2 18m-2 4l2 0m-5 0l2 0m-12 0l2 0m-5 0l2 0m-5 0l2 0m-5 0l2 0"/></svg>
|
||||
|
Before Width: | Height: | Size: 315 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path stroke="#000" fill="none" d="M4 15l-3 -3c8.4,-8.3 21.6,-8.3 30,0l-3 3c-6.6,-6.6 -17.4,-6.6 -24,0zm6 6l-3 -3c5,-5 13,-5 18,0l-3 3c-3.3,-3.3 -8.7,-3.3 -12,0zm6 6l-3 -3c1.6,-1.7 4.4,-1.7 6,0l-3 3z"/></svg>
|
||||
|
Before Width: | Height: | Size: 268 B |
|
|
@ -1,384 +0,0 @@
|
|||
'use strict';
|
||||
'require baseclass';
|
||||
'require fs';
|
||||
'require rpc';
|
||||
'require network';
|
||||
|
||||
var callSystemBoard = rpc.declare({
|
||||
object: 'system',
|
||||
method: 'board'
|
||||
});
|
||||
|
||||
var callSystemInfo = rpc.declare({
|
||||
object: 'system',
|
||||
method: 'info'
|
||||
});
|
||||
|
||||
var callOpenMPTCProuterInfo = rpc.declare({
|
||||
object: 'openmptcprouter',
|
||||
method: 'status'
|
||||
});
|
||||
|
||||
|
||||
return baseclass.extend({
|
||||
|
||||
params: [],
|
||||
|
||||
formatBytes: function(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"][d]},
|
||||
load: function() {
|
||||
return Promise.all([
|
||||
network.getWANNetworks(),
|
||||
network.getWAN6Networks(),
|
||||
L.resolveDefault(callSystemBoard(), {}),
|
||||
L.resolveDefault(callSystemInfo(), {}),
|
||||
L.resolveDefault(callOpenMPTCProuterInfo(), {})
|
||||
]);
|
||||
},
|
||||
|
||||
renderHtml: function(data, type) {
|
||||
|
||||
var icon = type;
|
||||
var title = 'router' == type ? _('System') : _('Internet');
|
||||
var container_wapper = E('div', { 'class': type + '-status-self dashboard-bg box-s1'});
|
||||
var container_box = E('div', { 'class': type + '-status-info'});
|
||||
var container_item = E('div', { 'class': 'settings-info'});
|
||||
|
||||
if ('internet' == type) {
|
||||
icon = (data.internet.v4.connected.value || data.internet.v6.connected.value) ? type : 'not-internet';
|
||||
}
|
||||
|
||||
container_box.appendChild(E('div', { 'class': 'title'}, [
|
||||
E('img', {
|
||||
'src': L.resource('view/dashboard/icons/' + icon + '.svg'),
|
||||
'width': 'router' == type ? 64 : 54,
|
||||
'title': title,
|
||||
'class': 'middle'
|
||||
}),
|
||||
E('h3', title)
|
||||
]));
|
||||
|
||||
container_box.appendChild(E('hr'));
|
||||
|
||||
if ('internet' == type) {
|
||||
|
||||
var container_internet_v4 = E('div');
|
||||
var container_internet_v6 = E('div');
|
||||
var container_internet_vps = E('div');
|
||||
|
||||
for(var idx in data['vps']) {
|
||||
var classname = ver,
|
||||
suppelements = '',
|
||||
visible = data['vps'][idx].visible;
|
||||
if ('title' === idx) {
|
||||
container_internet_vps.appendChild(
|
||||
E('p', { 'class': 'mt-2'}, [
|
||||
E('h4', {'class': ''}, [ data['vps'].title ]),
|
||||
])
|
||||
);
|
||||
continue;
|
||||
}
|
||||
if (visible) {
|
||||
container_internet_vps.appendChild(
|
||||
E('p', { 'class': 'mt-2'}, [
|
||||
E('span', {'class': ''}, [ data['vps'][idx].title + '：' ]),
|
||||
E('span', {'class': ''}, [ data['vps'][idx].value ]),
|
||||
suppelements
|
||||
])
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
for(var idx in data['internet']) {
|
||||
|
||||
for(var ver in data['internet'][idx]) {
|
||||
var classname = ver,
|
||||
suppelements = '',
|
||||
visible = data['internet'][idx][ver].visible;
|
||||
|
||||
if('connected' === ver) {
|
||||
classname = data['internet'][idx][ver].value ? 'label label-success' : 'label label-danger';
|
||||
data['internet'][idx][ver].value = data['internet'][idx][ver].value ? _('yes') : _('no');
|
||||
}
|
||||
|
||||
if ('v4' === idx) {
|
||||
|
||||
if ('title' === ver) {
|
||||
container_internet_v4.appendChild(
|
||||
E('p', { 'class': 'mt-2'}, [
|
||||
E('h4', {'class': ''}, [ data['internet'][idx].title ]),
|
||||
])
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
if ('addrsv4' === ver) {
|
||||
var addrs = data['internet'][idx][ver].value;
|
||||
if(Array.isArray(addrs) && addrs.length) {
|
||||
for(var ip in addrs) {
|
||||
data['internet'][idx][ver].value = addrs[ip].split('/')[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
container_internet_v4.appendChild(
|
||||
E('p', { 'class': 'mt-2'}, [
|
||||
E('span', {'class': ''}, [ data['internet'][idx][ver].title + '：' ]),
|
||||
E('span', {'class': classname }, [ data['internet'][idx][ver].value ]),
|
||||
suppelements
|
||||
])
|
||||
);
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if ('title' === ver) {
|
||||
container_internet_v6.appendChild(
|
||||
E('p', { 'class': 'mt-2'}, [
|
||||
E('h4', {'class': ''}, [ data['internet'][idx].title ]),
|
||||
])
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
container_internet_v6.appendChild(
|
||||
E('p', {'class': 'mt-2'}, [
|
||||
E('span', {'class': ''}, [data['internet'][idx][ver].title + '：']),
|
||||
E('span', {'class': classname}, [data['internet'][idx][ver].value]),
|
||||
suppelements
|
||||
])
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
container_item.appendChild(E('p', { 'class': 'table'}, [
|
||||
E('div', { 'class': 'tr' }, [
|
||||
E('div', { 'class': 'td' }, [ container_internet_vps ])
|
||||
]),
|
||||
E('div', { 'class': 'tr' }, [
|
||||
E('div', { 'class': 'td' }, [
|
||||
container_internet_v4
|
||||
]),
|
||||
E('div', { 'class': 'td' }, [
|
||||
container_internet_v6
|
||||
])
|
||||
])
|
||||
]));
|
||||
} else {
|
||||
for(var idx in data) {
|
||||
container_item.appendChild(
|
||||
E('p', { 'class': 'mt-2'}, [
|
||||
E('span', {'class': ''}, [ data[idx].title + '：' ]),
|
||||
E('span', {'class': ''}, [ data[idx].value ])
|
||||
])
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
container_box.appendChild(container_item);
|
||||
container_box.appendChild(E('hr'));
|
||||
container_wapper.appendChild(container_box);
|
||||
return container_wapper;
|
||||
},
|
||||
|
||||
renderUpdateWanData: function(data, v6) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var ifc = data[i];
|
||||
|
||||
if (v6) {
|
||||
this.params.internet.v6.ipprefixv6.value = ifc.getIP6Prefix() || '-';
|
||||
this.params.internet.v6.gatewayv6.value = ifc.getGateway6Addr() || '-';
|
||||
this.params.internet.v6.protocol.value= ifc.getI18n() || E('em', _('Not connected'));
|
||||
this.params.internet.v6.addrsv6.value = ifc.getIP6Addrs() || [ '-' ];
|
||||
this.params.internet.v6.dnsv6.value = ifc.getDNS6Addrs() || [ '-' ];
|
||||
this.params.internet.v6.connected.value = ifc.isUp();
|
||||
} else {
|
||||
var uptime = ifc.getUptime();
|
||||
this.params.internet.v4.uptime.value = (uptime > 0) ? '%t'.format(uptime) : '-';
|
||||
this.params.internet.v4.protocol.value= ifc.getI18n() || E('em', _('Not connected'));
|
||||
this.params.internet.v4.gatewayv4.value = ifc.getGatewayAddr() || '0.0.0.0';
|
||||
this.params.internet.v4.connected.value = ifc.isUp();
|
||||
this.params.internet.v4.addrsv4.value = ifc.getIPAddrs() || [ '-'];
|
||||
this.params.internet.v4.dnsv4.value = ifc.getDNSAddrs() || [ '-' ];
|
||||
}
|
||||
}
|
||||
},
|
||||
renderUpdateOpenMPTCProuterData: function(data, v6) {
|
||||
if (data.openmptcprouter != undefined) {
|
||||
if (data.openmptcprouter.wan_addr != '') this.params.omrvps.internet.v4.connected.value = true;
|
||||
if (data.openmptcprouter.wan_addr) this.params.omrvps.internet.v4.addrsv4.value = data.openmptcprouter.wan_addr || [ '-'];
|
||||
if (data.openmptcprouter.wan_addr6) this.params.omrvps.internet.v6.addrsv6.value = data.openmptcprouter.wan_addr6 || [ '-'];
|
||||
if (data.openmptcprouter.vps_kernel) this.params.omrvps.vps.version.value = data.openmptcprouter.vps_kernel + ' ' + data.openmptcprouter.vps_omr_version || [ '-'];
|
||||
if (data.openmptcprouter.vps_loadavg) {
|
||||
var vps_loadavg = data.openmptcprouter.vps_loadavg.split(" ");
|
||||
this.params.omrvps.vps.load.value = '%s, %s, %s'.format(vps_loadavg[0],vps_loadavg[1],vps_loadavg[2]);
|
||||
}
|
||||
if (data.openmptcprouter.vps_uptime) this.params.omrvps.vps.uptime.value = String.format('%t', data.openmptcprouter.vps_uptime) || [ '-'];
|
||||
if (data.openmptcprouter.proxy_traffic) this.params.omrvps.vps.trafficproxy.value = this.formatBytes(data.openmptcprouter.proxy_traffic) || [ '-'];
|
||||
if (data.openmptcprouter.vpn_traffic) this.params.omrvps.vps.trafficvpn.value = this.formatBytes(data.openmptcprouter.vpn_traffic) || [ '-'];
|
||||
if (data.openmptcprouter.total_traffic) this.params.omrvps.vps.traffictotal.value = this.formatBytes(data.openmptcprouter.total_traffic) || [ '-'];
|
||||
if (data.openmptcprouter.ipv6 != 'disabled') this.params.omrvps.internet.v6.connected.value = true;
|
||||
}
|
||||
},
|
||||
|
||||
renderInternetBox: function(data) {
|
||||
|
||||
this.params.omrvps = {
|
||||
vps: {
|
||||
title: _('Server'),
|
||||
|
||||
version: {
|
||||
title: _('Version'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
},
|
||||
|
||||
load: {
|
||||
title: _('Load'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
},
|
||||
|
||||
uptime: {
|
||||
title: _('Uptime'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
},
|
||||
|
||||
trafficproxy: {
|
||||
title: _('Proxy traffic'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
},
|
||||
|
||||
trafficvpn: {
|
||||
title: _('VPN traffic'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
},
|
||||
|
||||
traffictotal: {
|
||||
title: _('Total traffic'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
}
|
||||
},
|
||||
|
||||
internet: {
|
||||
|
||||
v4: {
|
||||
title: _('IPv4 Internet'),
|
||||
|
||||
connected: {
|
||||
title: _('Connected'),
|
||||
visible: true,
|
||||
value: false
|
||||
},
|
||||
|
||||
addrsv4: {
|
||||
title: _('IPv4'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
}
|
||||
},
|
||||
|
||||
v6: {
|
||||
title: _('IPv6 Internet'),
|
||||
|
||||
connected: {
|
||||
title: _('Connected'),
|
||||
visible: true,
|
||||
value: false
|
||||
},
|
||||
|
||||
ipprefixv6 : {
|
||||
title: _('IPv6 prefix'),
|
||||
visible: false,
|
||||
value: ' - '
|
||||
},
|
||||
|
||||
addrsv6: {
|
||||
title: _('IPv6'),
|
||||
visible: true,
|
||||
value: [ '-' ]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//this.renderUpdateWanData(data[0], false);
|
||||
//this.renderUpdateWanData(data[1], true);
|
||||
this.renderUpdateOpenMPTCProuterData(data[4], true);
|
||||
|
||||
return this.renderHtml(this.params.omrvps, 'internet');
|
||||
},
|
||||
|
||||
renderRouterBox: function(data) {
|
||||
|
||||
var boardinfo = data[2],
|
||||
systeminfo = data[3];
|
||||
|
||||
var datestr = null;
|
||||
|
||||
if (systeminfo.localtime) {
|
||||
var date = new Date(systeminfo.localtime * 1000);
|
||||
|
||||
datestr = '%04d-%02d-%02d %02d:%02d:%02d'.format(
|
||||
date.getUTCFullYear(),
|
||||
date.getUTCMonth() + 1,
|
||||
date.getUTCDate(),
|
||||
date.getUTCHours(),
|
||||
date.getUTCMinutes(),
|
||||
date.getUTCSeconds()
|
||||
);
|
||||
}
|
||||
|
||||
this.params.router = {
|
||||
uptime: {
|
||||
title: _('Uptime'),
|
||||
value: systeminfo.uptime ? '%t'.format(systeminfo.uptime) : null,
|
||||
},
|
||||
|
||||
localtime: {
|
||||
title: _('Local Time'),
|
||||
value: datestr
|
||||
},
|
||||
|
||||
load: {
|
||||
title: _('Load Average'),
|
||||
value: Array.isArray(systeminfo.load) ? '%.2f, %.2f, %.2f'.format(systeminfo.load[0] / 65535.0,systeminfo.load[1] / 65535.0,systeminfo.load[2] / 65535.0) : null
|
||||
},
|
||||
|
||||
kernel: {
|
||||
title: _('Kernel Version'),
|
||||
value: boardinfo.kernel
|
||||
},
|
||||
|
||||
model: {
|
||||
title: _('Model'),
|
||||
value: boardinfo.model
|
||||
},
|
||||
|
||||
system: {
|
||||
title: _('Architecture'),
|
||||
value: boardinfo.system
|
||||
},
|
||||
|
||||
release: {
|
||||
title: _('Firmware Version'),
|
||||
value: (typeof boardinfo.release !== "undefined") ? ((typeof boardinfo.release.description !== "undefined") ? boardinfo.release.description : null) : null
|
||||
}
|
||||
};
|
||||
|
||||
return this.renderHtml(this.params.router, 'router');
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
return [this.renderInternetBox(data), this.renderRouterBox(data)];
|
||||
}
|
||||
});
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
'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: function() {
|
||||
return Promise.all([
|
||||
callLuciDHCPLeases(),
|
||||
network.getDevices()
|
||||
]);
|
||||
},
|
||||
|
||||
renderHtml: function() {
|
||||
|
||||
var container_wapper = E('div', { 'class': 'router-status-lan dashboard-bg box-s1' });
|
||||
var container_box = E('div', { 'class': 'lan-info devices-list' });
|
||||
var container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
|
||||
E('tr', { 'class': 'tr table-titles dashboard-bg' }, [
|
||||
E('th', { 'class': 'th nowrap' }, _('Hostname')),
|
||||
E('th', { 'class': 'th' }, _('IP Address')),
|
||||
E('th', { 'class': 'th' }, _('MAC')),
|
||||
])
|
||||
]);
|
||||
|
||||
var container_deviceslist = E('table', { 'class': 'table assoclist devices-info' });
|
||||
|
||||
container_box.appendChild(E('div', { 'class': 'title'}, [
|
||||
E('img', {
|
||||
'src': L.resource('view/dashboard/icons/devices.svg'),
|
||||
'width': 55,
|
||||
'title': this.title,
|
||||
'class': 'middle'
|
||||
}),
|
||||
E('h3', this.title)
|
||||
]));
|
||||
|
||||
for(var idx in this.params.lan.devices) {
|
||||
var deivce = this.params.lan.devices[idx];
|
||||
|
||||
container_deviceslist.appendChild(E('tr', { 'class': 'tr cbi-rowstyle-1'}, [
|
||||
|
||||
E('td', { 'class': 'td device-info'}, [
|
||||
E('p', {}, [
|
||||
E('span', { 'class': 'd-inline-block'}, [ deivce.hostname ]),
|
||||
]),
|
||||
]),
|
||||
|
||||
E('td', { 'class': 'td device-info'}, [
|
||||
E('p', {}, [
|
||||
E('span', { 'class': 'd-inline-block'}, [ deivce.ipv4 ]),
|
||||
]),
|
||||
]),
|
||||
|
||||
E('td', { 'class': 'td device-info'}, [
|
||||
E('p', {}, [
|
||||
E('span', { 'class': 'd-inline-block'}, [ deivce.macaddr ]),
|
||||
]),
|
||||
])
|
||||
]));
|
||||
}
|
||||
|
||||
if (this.params.lan.devices.length > 0) {
|
||||
container_box.appendChild(E('hr'));
|
||||
container_box.appendChild(container_devices);
|
||||
container_box.appendChild(E('hr'));
|
||||
container_box.appendChild(container_deviceslist);
|
||||
container_wapper.appendChild(container_box);
|
||||
}
|
||||
|
||||
return container_wapper;
|
||||
},
|
||||
|
||||
renderUpdateData: function(data, leases) {
|
||||
|
||||
for(var item in data) {
|
||||
if (/lan|br-lan/ig.test(data[item].ifname) && (typeof data[item].dev == 'object' && !data[item].dev.wireless)) {
|
||||
var lan_device = data[item];
|
||||
var ipv4addr = lan_device.dev.ipaddrs.toString().split('/');
|
||||
|
||||
this.params.lan.ipv4 = ipv4addr[0] || '?';
|
||||
this.params.lan.ipv6 = ipv4addr[0] || '?';
|
||||
this.params.lan.macaddr = lan_device.dev.macaddr || '00:00:00:00:00:00';
|
||||
this.params.lan.rx_bytes = lan_device.dev.stats.rx_bytes ? '%.2mB'.format(lan_device.dev.stats.rx_bytes) : '-';
|
||||
this.params.lan.tx_bytes = lan_device.dev.stats.tx_bytes ? '%.2mB'.format(lan_device.dev.stats.tx_bytes) : '-';
|
||||
}
|
||||
}
|
||||
|
||||
var devices = [];
|
||||
leases.map(function(lease) {
|
||||
devices[lease.expires] = {
|
||||
hostname: lease.hostname || '?',
|
||||
ipv4: lease.ipaddr || '-',
|
||||
macaddr: lease.macaddr || '00:00:00:00:00:00',
|
||||
};
|
||||
});
|
||||
this.params.lan.devices = devices;
|
||||
},
|
||||
|
||||
renderLeases: function(data) {
|
||||
|
||||
var leases = Array.isArray(data[0].dhcp_leases) ? data[0].dhcp_leases : [];
|
||||
|
||||
this.params.lan = {
|
||||
ipv4: {
|
||||
title: _('IPv4'),
|
||||
value: '?'
|
||||
},
|
||||
|
||||
macaddr: {
|
||||
title: _('Mac'),
|
||||
value: '00:00:00:00:00:00'
|
||||
},
|
||||
|
||||
rx_bytes: {
|
||||
title: _('Upload'),
|
||||
value: '-'
|
||||
},
|
||||
|
||||
tx_bytes: {
|
||||
title: _('Download'),
|
||||
value: '-'
|
||||
},
|
||||
|
||||
devices: {
|
||||
title: _('Devices'),
|
||||
value: []
|
||||
}
|
||||
};
|
||||
|
||||
this.renderUpdateData(data[1], leases);
|
||||
|
||||
return this.renderHtml();
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
if (L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd'))
|
||||
return this.renderLeases(data);
|
||||
|
||||
return E([]);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,269 +0,0 @@
|
|||
'use strict';
|
||||
'require baseclass';
|
||||
'require dom';
|
||||
'require network';
|
||||
'require rpc';
|
||||
|
||||
return baseclass.extend({
|
||||
|
||||
title: _('Wireless'),
|
||||
|
||||
params: [],
|
||||
|
||||
load: function() {
|
||||
return Promise.all([
|
||||
network.getWifiDevices(),
|
||||
network.getWifiNetworks(),
|
||||
network.getHostHints()
|
||||
]).then(function(radios_networks_hints) {
|
||||
var tasks = [];
|
||||
|
||||
for (var i = 0; i < radios_networks_hints[1].length; i++)
|
||||
tasks.push(L.resolveDefault(radios_networks_hints[1][i].getAssocList(), []).then(L.bind(function(net, list) {
|
||||
net.assoclist = list.sort(function(a, b) { return a.mac > b.mac });
|
||||
}, this, radios_networks_hints[1][i])));
|
||||
|
||||
return Promise.all(tasks).then(function() {
|
||||
return radios_networks_hints;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
renderHtml: function() {
|
||||
|
||||
var container_wapper = E('div', { 'class': 'router-status-wifi dashboard-bg box-s1' });
|
||||
var container_box = E('div', { 'class': 'wifi-info devices-list' });
|
||||
var container_radio = E('div', { 'class': 'settings-info' });
|
||||
var container_radio_item;
|
||||
|
||||
container_box.appendChild(E('div', { 'class': 'title'}, [
|
||||
E('img', {
|
||||
'src': L.resource('view/dashboard/icons/wireless.svg'),
|
||||
'width': 55,
|
||||
'title': this.title,
|
||||
'class': 'middle'
|
||||
}),
|
||||
E('h3', this.title)
|
||||
]));
|
||||
|
||||
container_box.appendChild(E('hr'));
|
||||
|
||||
for (var i =0; i < this.params.wifi.radios.length; i++) {
|
||||
|
||||
container_radio_item = E('div', { 'class': 'radio-info' })
|
||||
|
||||
for(var idx in this.params.wifi.radios[i]) {
|
||||
var classname = idx,
|
||||
radio = this.params.wifi.radios[i];
|
||||
|
||||
if (!radio[idx].visible) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if ('actived' === idx) {
|
||||
classname = radio[idx].value ? 'label label-success' : 'label label-danger';
|
||||
radio[idx].value = radio[idx].value ? _('yes') : _('no');
|
||||
}
|
||||
|
||||
container_radio_item.appendChild(
|
||||
E('p', {}, [
|
||||
E('span', { 'class': ''}, [ radio[idx].title + '：']),
|
||||
E('span', { 'class': classname }, [ radio[idx].value ]),
|
||||
])
|
||||
);
|
||||
}
|
||||
|
||||
container_radio.appendChild(container_radio_item);
|
||||
}
|
||||
|
||||
container_box.appendChild(container_radio);
|
||||
|
||||
var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [
|
||||
E('div', { 'class': 'tr table-titles dashboard-bg' }, [
|
||||
E('div', { 'class': 'th nowrap' }, _('Hostname')),
|
||||
E('div', { 'class': 'th' }, _('Wireless')),
|
||||
E('div', { 'class': 'th' }, _('Signal')),
|
||||
E('div', { 'class': 'th' }, '%s / %s'.format( _('Up.'), _('Down.')))
|
||||
])
|
||||
]);
|
||||
|
||||
var container_devices_item;
|
||||
var container_devices_list = E('div', { 'class': 'table assoclist devices-info' });
|
||||
|
||||
for (var i =0; i < this.params.wifi.devices.length; i++) {
|
||||
container_devices_item = E('div', { 'class': 'tr cbi-rowstyle-1' });
|
||||
|
||||
for(var idx in this.params.wifi.devices[i]) {
|
||||
var device = this.params.wifi.devices[i];
|
||||
|
||||
if (!device[idx].visible) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var container_content;
|
||||
|
||||
if ('progress' == idx) {
|
||||
container_content = E('div', { 'class' : 'td device-info' }, [
|
||||
E('div', { 'class': 'progress' }, [
|
||||
E('div', { 'class': 'progress-bar ' + device[idx].value.style, role: 'progressbar', style: 'width:'+device[idx].value.qualite+'%', 'aria-valuenow': device[idx].value.qualite, 'aria-valuemin': 0, 'aria-valuemax': 100 }),
|
||||
])
|
||||
]);
|
||||
} else if ('rate' == idx) {
|
||||
container_content = E('div', { 'class': 'td device-info' }, [
|
||||
E('p', {}, [
|
||||
E('span', { 'class': ''}, [ device[idx].value.rx ]),
|
||||
E('br'),
|
||||
E('span', { 'class': ''}, [ device[idx].value.tx ])
|
||||
])
|
||||
]);
|
||||
} else {
|
||||
container_content = E('div', { 'class': 'td device-info'}, [
|
||||
E('p', {}, [
|
||||
E('span', { 'class': ''}, [ device[idx].value ]),
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
container_devices_item.appendChild(container_content);
|
||||
}
|
||||
|
||||
container_devices_list.appendChild(container_devices_item);
|
||||
}
|
||||
|
||||
if (this.params.wifi.devices.length > 0) {
|
||||
container_devices.appendChild(container_devices_list);
|
||||
container_box.appendChild(E('hr'));
|
||||
container_box.appendChild(container_devices);
|
||||
container_box.appendChild(container_devices_list);
|
||||
container_wapper.appendChild(container_box);
|
||||
}
|
||||
|
||||
return container_wapper;
|
||||
},
|
||||
|
||||
renderUpdateData: function(radios, networks, hosthints) {
|
||||
|
||||
for (var i = 0; i < radios.sort(function(a, b) { a.getName() > b.getName() }).length; i++) {
|
||||
var network_items = networks.filter(function(net) { return net.getWifiDeviceName() == radios[i].getName() });
|
||||
|
||||
for (var j = 0; j < network_items.length; j++) {
|
||||
var net = network_items[j],
|
||||
is_assoc = (net.getBSSID() != '00:00:00:00:00:00' && net.getChannel() && !net.isDisabled()),
|
||||
chan = net.getChannel(),
|
||||
freq = net.getFrequency(),
|
||||
rate = net.getBitRate();
|
||||
|
||||
this.params.wifi.radios.push(
|
||||
{
|
||||
ssid : {
|
||||
title: _('SSID'),
|
||||
visible: true,
|
||||
value: net.getActiveSSID() || '?'
|
||||
},
|
||||
|
||||
actived : {
|
||||
title: _('Active'),
|
||||
visible: true,
|
||||
value: !net.isDisabled()
|
||||
},
|
||||
|
||||
chan : {
|
||||
title: _('Channel'),
|
||||
visible: true,
|
||||
value: chan ? '%d (%.3f %s)'.format(chan, freq, _('GHz')) : '-'
|
||||
},
|
||||
|
||||
rate : {
|
||||
title: _('Bitrate'),
|
||||
visible: true,
|
||||
value: rate ? '%d %s'.format(rate, _('Mbit/s')) : '-'
|
||||
},
|
||||
|
||||
bssid : {
|
||||
title: _('BSSID'),
|
||||
visible: true,
|
||||
value: is_assoc ? (net.getActiveBSSID() || '-') : '-'
|
||||
},
|
||||
|
||||
encryption : {
|
||||
title: _('Encryption'),
|
||||
visible: true,
|
||||
value: is_assoc ? net.getActiveEncryption() : '-'
|
||||
},
|
||||
|
||||
associations : {
|
||||
title: _('Devices Connected'),
|
||||
visible: true,
|
||||
value: is_assoc ? (net.assoclist.length || '0') : 0
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < networks.length; i++) {
|
||||
for (var k = 0; k < networks[i].assoclist.length; k++) {
|
||||
var bss = networks[i].assoclist[k],
|
||||
name = hosthints.getHostnameByMACAddr(bss.mac);
|
||||
|
||||
var progress_style;
|
||||
var q = Math.min((bss.signal + 110) / 70 * 100, 100);
|
||||
|
||||
if (q == 0 || q < 25)
|
||||
progress_style = 'bg-danger';
|
||||
else if (q < 50)
|
||||
progress_style = 'bg-warning';
|
||||
else if (q < 75)
|
||||
progress_style = 'bg-success';
|
||||
else
|
||||
progress_style = 'bg-success';
|
||||
|
||||
this.params.wifi.devices.push(
|
||||
{
|
||||
hostname : {
|
||||
title: _('Hostname'),
|
||||
visible: true,
|
||||
value: name || '?'
|
||||
},
|
||||
|
||||
ssid : {
|
||||
title: _('SSID'),
|
||||
visible: true,
|
||||
value: networks[i].getActiveSSID()
|
||||
},
|
||||
|
||||
progress : {
|
||||
title: _('Channel'),
|
||||
visible: true,
|
||||
value: {
|
||||
qualite: q,
|
||||
style: progress_style
|
||||
}
|
||||
},
|
||||
|
||||
rate : {
|
||||
title: _('Bitrate'),
|
||||
visible: true,
|
||||
value: {
|
||||
rx: '%s'.format('%.2mB'.format(bss.rx.bytes)),
|
||||
tx: '%s'.format('%.2mB'.format(bss.tx.bytes)),
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render: function(data) {
|
||||
|
||||
this.params.wifi = {
|
||||
radios: [],
|
||||
devices: []
|
||||
};
|
||||
|
||||
this.renderUpdateData(data[0], data[1], data[2]);
|
||||
|
||||
return this.renderHtml();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
'use strict';
|
||||
'require view';
|
||||
'require dom';
|
||||
'require poll';
|
||||
'require fs';
|
||||
'require network';
|
||||
|
||||
document.querySelector('head').appendChild(E('link', {
|
||||
'rel': 'stylesheet',
|
||||
'type': 'text/css',
|
||||
'href': L.resource('view/dashboard/css/custom.css')
|
||||
}));
|
||||
|
||||
function invokeIncludesLoad(includes) {
|
||||
var tasks = [], has_load = false;
|
||||
|
||||
for (var i = 0; i < includes.length; i++) {
|
||||
if (typeof(includes[i].load) == 'function') {
|
||||
tasks.push(includes[i].load().catch(L.bind(function() {
|
||||
this.failed = true;
|
||||
}, includes[i])));
|
||||
|
||||
has_load = true;
|
||||
}
|
||||
else {
|
||||
tasks.push(null);
|
||||
}
|
||||
}
|
||||
|
||||
return has_load ? Promise.all(tasks) : Promise.resolve(null);
|
||||
}
|
||||
|
||||
function startPolling(includes, containers) {
|
||||
var step = function() {
|
||||
return network.flushCache().then(function() {
|
||||
return invokeIncludesLoad(includes);
|
||||
}).then(function(results) {
|
||||
for (var i = 0; i < includes.length; i++) {
|
||||
var content = null;
|
||||
|
||||
if (includes[i].failed)
|
||||
continue;
|
||||
|
||||
if (typeof(includes[i].render) == 'function')
|
||||
content = includes[i].render(results ? results[i] : null);
|
||||
else if (includes[i].content != null)
|
||||
content = includes[i].content;
|
||||
|
||||
if (content != null) {
|
||||
|
||||
if (i > 1) {
|
||||
dom.append(containers[1], content);
|
||||
} else {
|
||||
containers[i].parentNode.style.display = '';
|
||||
containers[i].parentNode.classList.add('fade-in');
|
||||
containers[i].parentNode.classList.add('Dashboard');
|
||||
dom.content(containers[i], content);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var ssi = document.querySelector('div.includes');
|
||||
if (ssi) {
|
||||
ssi.style.display = '';
|
||||
ssi.classList.add('fade-in');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return step().then(function() {
|
||||
poll.add(step);
|
||||
});
|
||||
}
|
||||
|
||||
return view.extend({
|
||||
load: function() {
|
||||
return L.resolveDefault(fs.list('/www' + L.resource('view/dashboard/include')), []).then(function(entries) {
|
||||
return Promise.all(entries.filter(function(e) {
|
||||
return (e.type == 'file' && e.name.match(/\.js$/));
|
||||
}).map(function(e) {
|
||||
return 'view.dashboard.include.' + e.name.replace(/\.js$/, '');
|
||||
}).sort().map(function(n) {
|
||||
return L.require(n);
|
||||
}));
|
||||
});
|
||||
},
|
||||
|
||||
render: function(includes) {
|
||||
var rv = E([]), containers = [];
|
||||
|
||||
for (var i = 0; i < includes.length - 1; i++) {
|
||||
|
||||
var container = E('div', { 'class': 'section-content' });
|
||||
|
||||
rv.appendChild(E('div', { 'class': 'cbi-section-' + i, 'style': 'display:none' }, [
|
||||
container
|
||||
]));
|
||||
|
||||
containers.push(container);
|
||||
}
|
||||
|
||||
return startPolling(includes, containers).then(function() {
|
||||
return rv;
|
||||
});
|
||||
},
|
||||
|
||||
handleSaveApply: null,
|
||||
handleSave: null,
|
||||
handleReset: null
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue