Major Features: • Centralized theme system across SecuBox and System Hub • Three theme modes: dark (default), light, and system (auto-detect) • Single theme setting in SecuBox controls both plugins • Real-time theme switching with OS preference detection SecuBox Changes: • Added theme.js manager for centralized theme control • Implemented CSS variables for dark/light mode (secubox.css) • Fixed hardcoded colors in dashboard.css, alerts.css, monitoring.css • Integrated theme.js in all 7 views (dashboard, modules, alerts, monitoring, settings, etc.) • Added get_theme RPC method to luci.secubox backend • Updated ACL permissions to include get_theme (read access) • Version updated to 0.1.1 System Hub Changes: • Added theme.js manager using SecuBox theme API • Implemented CSS variables for dark/light mode (dashboard.css) • Integrated theme.js in all 9 views (overview, health, services, logs, backup, components, remote, settings, diagnostics) • Version updated to 0.1.1 • README updated with maintainer info Theme System Architecture: • Configuration: /etc/config/secubox (option theme: dark|light|system) • RPCD Backend: luci.secubox/get_theme method • Frontend: theme.js modules (secubox/theme.js, system-hub/theme.js) • CSS Variables: --sb-bg, --sb-bg-card, --sb-border, --sb-text, --sb-text-muted, --sb-shadow • Auto-detection: prefers-color-scheme media query for system mode Documentation: • Added LUCI_DEVELOPMENT_REFERENCE.md with comprehensive LuCI development patterns • Documented ubus/RPC types, baseclass.extend() patterns, ACL structure • Common errors and solutions from implementation experience Bug Fixes: • Fixed SecuBox theme not applying visually (CSS variables now used) • Fixed missing secubox.css in view imports • Fixed ACL access denied for get_theme method • Fixed hardcoded colors preventing theme switching Testing: • Verified theme switching works in all SecuBox tabs • Verified theme switching works in all System Hub tabs • Verified dark/light/system modes function correctly • Verified single setting controls both plugins 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
134 lines
2.7 KiB
JavaScript
134 lines
2.7 KiB
JavaScript
'use strict';
|
|
'require baseclass';
|
|
'require rpc';
|
|
|
|
/**
|
|
* SecuBox Master API
|
|
* Package: luci-app-secubox
|
|
* RPCD object: luci.secubox
|
|
*/
|
|
|
|
var callStatus = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'status',
|
|
expect: { }
|
|
});
|
|
|
|
var callModules = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'modules',
|
|
expect: { modules: [] }
|
|
});
|
|
|
|
var callModulesByCategory = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'modules_by_category',
|
|
params: ['category'],
|
|
expect: { modules: [] }
|
|
});
|
|
|
|
var callModuleInfo = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'module_info',
|
|
params: ['module'],
|
|
expect: { }
|
|
});
|
|
|
|
var callStartModule = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'start_module',
|
|
params: ['module']
|
|
});
|
|
|
|
var callStopModule = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'stop_module',
|
|
params: ['module']
|
|
});
|
|
|
|
var callRestartModule = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'restart_module',
|
|
params: ['module']
|
|
});
|
|
|
|
var callHealth = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'health',
|
|
expect: { checks: [], overall: '' }
|
|
});
|
|
|
|
var callDiagnostics = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'diagnostics',
|
|
expect: { }
|
|
});
|
|
|
|
var callSystemHealth = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'get_system_health',
|
|
expect: { }
|
|
});
|
|
|
|
var callAlerts = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'get_alerts',
|
|
expect: { alerts: [] }
|
|
});
|
|
|
|
var callQuickAction = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'quick_action',
|
|
params: ['action'],
|
|
expect: { }
|
|
});
|
|
|
|
var callDashboardData = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'get_dashboard_data',
|
|
expect: { }
|
|
});
|
|
|
|
var callGetTheme = rpc.declare({
|
|
object: 'luci.secubox',
|
|
method: 'get_theme',
|
|
expect: { }
|
|
});
|
|
|
|
function formatUptime(seconds) {
|
|
if (!seconds) return '0s';
|
|
var d = Math.floor(seconds / 86400);
|
|
var h = Math.floor((seconds % 86400) / 3600);
|
|
var m = Math.floor((seconds % 3600) / 60);
|
|
if (d > 0) return d + 'd ' + h + 'h';
|
|
if (h > 0) return h + 'h ' + m + 'm';
|
|
return m + 'm';
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
if (!bytes) return '0 B';
|
|
var k = 1024;
|
|
var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
var i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
|
|
}
|
|
|
|
return baseclass.extend({
|
|
getStatus: callStatus,
|
|
getModules: callModules,
|
|
getModulesByCategory: callModulesByCategory,
|
|
getModuleInfo: callModuleInfo,
|
|
startModule: callStartModule,
|
|
stopModule: callStopModule,
|
|
restartModule: callRestartModule,
|
|
getHealth: callHealth,
|
|
getDiagnostics: callDiagnostics,
|
|
getSystemHealth: callSystemHealth,
|
|
getAlerts: callAlerts,
|
|
quickAction: callQuickAction,
|
|
getDashboardData: callDashboardData,
|
|
getTheme: callGetTheme,
|
|
formatUptime: formatUptime,
|
|
formatBytes: formatBytes
|
|
});
|