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>
157 lines
6.2 KiB
JavaScript
157 lines
6.2 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require ui';
|
|
'require secubox-p2p/api as P2PAPI';
|
|
'require secubox/kiss-theme';
|
|
|
|
return view.extend({
|
|
settings: {},
|
|
registry: {},
|
|
|
|
load: function() {
|
|
var self = this;
|
|
return Promise.all([
|
|
P2PAPI.getSettings(),
|
|
P2PAPI.getRegistry()
|
|
]).then(function(results) {
|
|
self.settings = results[0] || {};
|
|
self.registry = results[1] || {};
|
|
return {};
|
|
}).catch(function() { return {}; });
|
|
},
|
|
|
|
renderStats: function() {
|
|
var c = KissTheme.colors;
|
|
return [
|
|
KissTheme.stat(this.settings.enabled ? 'Enabled' : 'Disabled', 'P2P Status', this.settings.enabled ? c.green : c.muted),
|
|
KissTheme.stat(this.settings.discovery_enabled ? 'On' : 'Off', 'Discovery', this.settings.discovery_enabled ? c.cyan : c.muted),
|
|
KissTheme.stat(this.settings.sharing_enabled ? 'On' : 'Off', 'Sharing', this.settings.sharing_enabled ? c.blue : c.muted),
|
|
KissTheme.stat(this.settings.sync_interval || 60, 'Sync Interval (s)', c.purple)
|
|
];
|
|
},
|
|
|
|
render: function() {
|
|
var self = this;
|
|
|
|
var content = [
|
|
// Header
|
|
E('div', { 'style': 'margin-bottom: 24px;' }, [
|
|
E('div', { 'style': 'display: flex; align-items: center; gap: 16px;' }, [
|
|
E('h2', { 'style': 'font-size: 24px; font-weight: 700; margin: 0;' }, 'P2P Hub Settings'),
|
|
KissTheme.badge('Configuration', 'purple')
|
|
]),
|
|
E('p', { 'style': 'color: var(--kiss-muted); margin: 8px 0 0 0;' },
|
|
'Configure P2P network settings, discovery, and hub registry')
|
|
]),
|
|
|
|
// Stats
|
|
E('div', { 'class': 'kiss-grid kiss-grid-4', 'style': 'margin: 20px 0;' },
|
|
this.renderStats()),
|
|
|
|
// General Settings Card
|
|
KissTheme.card('General Settings',
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 16px;' }, [
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'p2p-enabled', 'checked': this.settings.enabled }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'P2P Enabled')
|
|
]),
|
|
E('label', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('span', { 'style': 'font-weight: 500; color: var(--kiss-muted);' }, 'Node Name'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'node-name',
|
|
'value': this.settings.node_name || '',
|
|
'style': 'padding: 10px 14px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); ' +
|
|
'border-radius: 6px; color: var(--kiss-text);'
|
|
})
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'discovery-enabled', 'checked': this.settings.discovery_enabled }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Auto Discovery')
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'sharing-enabled', 'checked': this.settings.sharing_enabled }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Sharing Enabled')
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'auto-sync', 'checked': this.settings.auto_sync }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Auto Sync')
|
|
]),
|
|
E('label', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('span', { 'style': 'font-weight: 500; color: var(--kiss-muted);' }, 'Sync Interval (seconds)'),
|
|
E('input', {
|
|
'type': 'number',
|
|
'id': 'sync-interval',
|
|
'value': this.settings.sync_interval || 60,
|
|
'style': 'padding: 10px 14px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); ' +
|
|
'border-radius: 6px; color: var(--kiss-text); width: 120px;'
|
|
})
|
|
])
|
|
])
|
|
),
|
|
|
|
// Hub Registry Card
|
|
KissTheme.card('Hub Registry',
|
|
E('div', { 'style': 'display: flex; flex-direction: column; gap: 16px;' }, [
|
|
E('label', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('span', { 'style': 'font-weight: 500; color: var(--kiss-muted);' }, 'Base URL'),
|
|
E('input', {
|
|
'type': 'text',
|
|
'id': 'registry-url',
|
|
'value': this.registry.base_url || 'sb.local',
|
|
'style': 'padding: 10px 14px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); ' +
|
|
'border-radius: 6px; color: var(--kiss-text);'
|
|
})
|
|
]),
|
|
E('label', { 'style': 'display: flex; align-items: center; gap: 12px;' }, [
|
|
E('input', { 'type': 'checkbox', 'id': 'cache-enabled', 'checked': this.registry.cache_enabled }),
|
|
E('span', { 'style': 'color: var(--kiss-muted);' }, 'Cache Enabled')
|
|
]),
|
|
E('label', { 'style': 'display: flex; flex-direction: column; gap: 6px;' }, [
|
|
E('span', { 'style': 'font-weight: 500; color: var(--kiss-muted);' }, 'Cache TTL (seconds)'),
|
|
E('input', {
|
|
'type': 'number',
|
|
'id': 'cache-ttl',
|
|
'value': this.registry.cache_ttl || 300,
|
|
'style': 'padding: 10px 14px; background: var(--kiss-bg); border: 1px solid var(--kiss-line); ' +
|
|
'border-radius: 6px; color: var(--kiss-text); width: 120px;'
|
|
})
|
|
])
|
|
])
|
|
),
|
|
|
|
// Save Button
|
|
E('div', { 'style': 'display: flex; justify-content: flex-end; margin-top: 20px;' }, [
|
|
E('button', {
|
|
'class': 'kiss-btn kiss-btn-green',
|
|
'style': 'padding: 12px 24px;',
|
|
'click': function() { self.saveSettings(); }
|
|
}, 'Save & Apply')
|
|
])
|
|
];
|
|
|
|
return KissTheme.wrap(content, 'admin/secubox/p2p/settings');
|
|
},
|
|
|
|
saveSettings: function() {
|
|
var settings = {
|
|
enabled: document.getElementById('p2p-enabled').checked,
|
|
node_name: document.getElementById('node-name').value,
|
|
discovery_enabled: document.getElementById('discovery-enabled').checked,
|
|
sharing_enabled: document.getElementById('sharing-enabled').checked,
|
|
auto_sync: document.getElementById('auto-sync').checked,
|
|
sync_interval: parseInt(document.getElementById('sync-interval').value)
|
|
};
|
|
|
|
P2PAPI.setSettings(settings).then(function() {
|
|
ui.addNotification(null, E('p', 'Settings saved'), 'info');
|
|
}).catch(function(err) {
|
|
ui.addNotification(null, E('p', 'Failed to save: ' + err.message), 'error');
|
|
});
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|