70 lines
3.8 KiB
JavaScript
70 lines
3.8 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require bandwidth-manager.api as api';
|
|
|
|
return view.extend({
|
|
load: function() {
|
|
return Promise.all([api.getStatus(), api.getClasses(), api.getClients()]);
|
|
},
|
|
render: function(data) {
|
|
var status = data[0] || {};
|
|
var classes = data[1].classes || [];
|
|
var clients = data[2].clients || [];
|
|
|
|
return E('div', {class:'cbi-map'}, [
|
|
E('style', {}, [
|
|
'.bw{font-family:system-ui,sans-serif}',
|
|
'.bw-hdr{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:24px;border-radius:12px;margin-bottom:20px}',
|
|
'.bw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}',
|
|
'.bw-stat{background:#1e293b;padding:20px;border-radius:10px;text-align:center}',
|
|
'.bw-stat-val{font-size:28px;font-weight:700;color:#a855f7}',
|
|
'.bw-stat-lbl{font-size:12px;color:#94a3b8;margin-top:4px}',
|
|
'.bw-section{background:#1e293b;padding:20px;border-radius:10px;margin-bottom:16px}',
|
|
'.bw-section-title{font-size:16px;font-weight:600;color:#f1f5f9;margin-bottom:16px}',
|
|
'.bw-class{display:flex;align-items:center;gap:12px;padding:12px;background:#0f172a;border-radius:8px;margin-bottom:8px}',
|
|
'.bw-class-bar{height:8px;border-radius:4px;background:#334155;flex:1}',
|
|
'.bw-class-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#7c3aed,#a855f7)}',
|
|
'.bw-badge{padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600}'
|
|
].join('')),
|
|
E('div', {class:'bw'}, [
|
|
E('div', {class:'bw-hdr'}, [
|
|
E('h1', {style:'margin:0 0 8px;font-size:24px'}, '⚡ Bandwidth Manager'),
|
|
E('p', {style:'margin:0;opacity:.9'}, 'QoS, Quotas & Media Detection')
|
|
]),
|
|
E('div', {class:'bw-stats'}, [
|
|
E('div', {class:'bw-stat'}, [
|
|
E('div', {class:'bw-stat-val'}, status.qos_active ? '✓' : '✗'),
|
|
E('div', {class:'bw-stat-lbl'}, 'QoS Status')
|
|
]),
|
|
E('div', {class:'bw-stat'}, [
|
|
E('div', {class:'bw-stat-val'}, clients.length),
|
|
E('div', {class:'bw-stat-lbl'}, 'Active Clients')
|
|
]),
|
|
E('div', {class:'bw-stat'}, [
|
|
E('div', {class:'bw-stat-val'}, api.formatBytes(status.rx_bytes || 0)),
|
|
E('div', {class:'bw-stat-lbl'}, 'Downloaded')
|
|
]),
|
|
E('div', {class:'bw-stat'}, [
|
|
E('div', {class:'bw-stat-val'}, api.formatBytes(status.tx_bytes || 0)),
|
|
E('div', {class:'bw-stat-lbl'}, 'Uploaded')
|
|
])
|
|
]),
|
|
E('div', {class:'bw-section'}, [
|
|
E('div', {class:'bw-section-title'}, '📊 QoS Classes'),
|
|
E('div', {}, classes.map(function(c) {
|
|
return E('div', {class:'bw-class'}, [
|
|
E('span', {style:'width:100px;font-weight:600;color:#f1f5f9'}, c.name),
|
|
E('span', {class:'bw-badge',style:'background:#7c3aed20;color:#a855f7'}, 'P'+c.priority),
|
|
E('div', {class:'bw-class-bar'}, [
|
|
E('div', {class:'bw-class-fill',style:'width:'+c.rate+'%'})
|
|
]),
|
|
E('span', {style:'color:#94a3b8;font-size:12px'}, c.rate+'% / '+c.ceil+'%')
|
|
]);
|
|
}))
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
handleSaveApply:null,handleSave:null,handleReset:null
|
|
});
|