secubox-openwrt/package/secubox/luci-app-bandwidth-manager/htdocs/luci-static/resources/view/bandwidth-manager/quotas.js
CyberMind-FR 1bbd345cee refactor(luci): Mass KissTheme UI rework across all LuCI apps
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>
2026-03-12 11:09:34 +01:00

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
});