Convert 90+ LuCI view files from legacy cbi-button-* classes to KissTheme kiss-btn-* classes for consistent dark theme styling. Pattern conversions applied: - cbi-button-positive → kiss-btn-green - cbi-button-negative/remove → kiss-btn-red - cbi-button-apply → kiss-btn-cyan - cbi-button-action → kiss-btn-blue - cbi-button (plain) → kiss-btn Also replaced hardcoded colors (#080, #c00, #888, etc.) with CSS variables (--kiss-green, --kiss-red, --kiss-muted, etc.) for proper dark theme compatibility. Apps updated include: ai-gateway, auth-guardian, bandwidth-manager, cloner, config-advisor, crowdsec-dashboard, dns-provider, exposure, glances, haproxy, hexojs, iot-guard, jellyfin, ksm-manager, mac-guardian, magicmirror2, master-link, meshname-dns, metablogizer, metabolizer, mqtt-bridge, netdata-dashboard, picobrew, routes-status, secubox-admin, secubox-mirror, secubox-p2p, secubox-security-threats, service-registry, simplex, streamlit, system-hub, tor-shield, traffic-shaper, vhost-manager, vortex-dns, vortex-firewall, webradio, wireguard-dashboard, zigbee2mqtt, zkp, and more. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
118 lines
3.4 KiB
JavaScript
118 lines
3.4 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require ui';
|
|
'require form';
|
|
'require bandwidth-manager/api as API';
|
|
'require secubox/kiss-theme';
|
|
|
|
return L.view.extend({
|
|
load: function() {
|
|
return API.listQuotas();
|
|
},
|
|
|
|
render: function(quotas) {
|
|
var m = new form.Map('bandwidth', _('Client Quotas'),
|
|
_('Set monthly data quotas for individual clients by MAC address'));
|
|
|
|
var s = m.section(form.GridSection, 'quota', _('Quotas'));
|
|
s.anonymous = false;
|
|
s.addremove = true;
|
|
s.sortable = true;
|
|
|
|
s.modaltitle = function(section_id) {
|
|
return _('Edit Quota: ') + section_id;
|
|
};
|
|
|
|
// Custom render to show usage progress bars
|
|
s.addModalOptions = function(s, section_id, ev) {
|
|
var mac = this.section.formvalue(section_id, 'mac');
|
|
|
|
if (!mac) {
|
|
ui.addNotification(null, E('p', _('MAC address is required')), 'error');
|
|
return;
|
|
}
|
|
|
|
// Save quota via API
|
|
var name = this.section.formvalue(section_id, 'name') || '';
|
|
var limit_mb = parseInt(this.section.formvalue(section_id, 'limit_mb')) || 0;
|
|
var action = this.section.formvalue(section_id, 'action') || 'throttle';
|
|
var reset_day = parseInt(this.section.formvalue(section_id, 'reset_day')) || 1;
|
|
|
|
API.setQuota(mac, name, limit_mb, action, reset_day).then(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', '✓ ' + result.message), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', '✗ ' + result.message), 'error');
|
|
}
|
|
});
|
|
};
|
|
|
|
var o;
|
|
|
|
o = s.option(form.Value, 'mac', _('MAC Address'));
|
|
o.rmempty = false;
|
|
o.datatype = 'macaddr';
|
|
o.placeholder = 'AA:BB:CC:DD:EE:FF';
|
|
|
|
o = s.option(form.Value, 'name', _('Client Name'));
|
|
o.placeholder = 'iPhone John';
|
|
o.description = _('Friendly name for this client');
|
|
|
|
o = s.option(form.Value, 'limit_mb', _('Monthly Limit (MB)'));
|
|
o.rmempty = false;
|
|
o.datatype = 'uinteger';
|
|
o.placeholder = '10240';
|
|
o.description = _('Monthly data limit in megabytes (e.g., 10240 = 10GB)');
|
|
|
|
o = s.option(form.ListValue, 'action', _('Action When Exceeded'));
|
|
o.value('throttle', _('Throttle bandwidth'));
|
|
o.value('block', _('Block all traffic'));
|
|
o.value('notify', _('Notify only'));
|
|
o.default = 'throttle';
|
|
|
|
o = s.option(form.Value, 'reset_day', _('Reset Day'));
|
|
o.datatype = 'range(1,28)';
|
|
o.default = '1';
|
|
o.description = _('Day of month to reset quota (1-28)');
|
|
|
|
o = s.option(form.Flag, 'enabled', _('Enabled'));
|
|
o.default = o.enabled;
|
|
|
|
// Show current usage
|
|
s.renderRowActions = function(section_id) {
|
|
var config_name = this.uciconfig || this.map.config;
|
|
var mac = this.cfgvalue(section_id, 'mac');
|
|
|
|
var resetBtn = E('button', {
|
|
'class': 'kiss-btn kiss-btn-blue',
|
|
'click': function(ev) {
|
|
ev.preventDefault();
|
|
if (confirm(_('Reset quota counter for this client?'))) {
|
|
API.resetQuota(mac).then(function(result) {
|
|
if (result.success) {
|
|
ui.addNotification(null, E('p', '✓ ' + result.message), 'info');
|
|
window.location.reload();
|
|
} else {
|
|
ui.addNotification(null, E('p', '✗ ' + result.message), 'error');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}, _('Reset Counter'));
|
|
|
|
var actions = form.GridSection.prototype.renderRowActions.call(this, section_id);
|
|
actions.appendChild(resetBtn);
|
|
return actions;
|
|
};
|
|
|
|
return m.render().then(function(rendered) {
|
|
return KissTheme.wrap(rendered, 'admin/services/bandwidth-manager/quotas');
|
|
});
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|