secubox-openwrt/package/secubox/luci-app-streamlit/htdocs/luci-static/resources/view/streamlit/settings.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

215 lines
7.7 KiB
JavaScript

'use strict';
'require view';
'require ui';
'require streamlit.api as api';
'require secubox/kiss-theme';
return view.extend({
config: {},
giteaConfig: {},
load: function() {
var self = this;
return Promise.all([
api.getConfig().then(function(c) { return c || {}; }),
api.getGiteaConfig().catch(function() { return {}; })
]).then(function(r) {
self.config = r[0];
self.giteaConfig = r[1];
});
},
render: function() {
var self = this;
var main = this.config.main || {};
var server = this.config.server || {};
var gitea = this.giteaConfig || {};
return E('div', { 'class': 'cbi-map' }, [
E('h2', {}, _('Streamlit Settings')),
// Main Settings
E('div', { 'class': 'cbi-section' }, [
E('h3', {}, _('Service')),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Enabled')),
E('div', { 'class': 'cbi-value-field' },
E('select', { 'id': 'cfg-enabled', 'class': 'cbi-input-select' }, [
E('option', { 'value': '1', 'selected': main.enabled == '1' || main.enabled === true }, _('Yes')),
E('option', { 'value': '0', 'selected': main.enabled == '0' || main.enabled === false }, _('No'))
])
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('HTTP Port')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'number', 'id': 'cfg-port', 'class': 'cbi-input-text',
'value': main.http_port || '8501', 'min': '1024', 'max': '65535' })
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Listen Address')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'text', 'id': 'cfg-host', 'class': 'cbi-input-text',
'value': main.http_host || '0.0.0.0' })
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Data Path')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'text', 'id': 'cfg-path', 'class': 'cbi-input-text',
'value': main.data_path || '/srv/streamlit' })
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Memory Limit')),
E('div', { 'class': 'cbi-value-field' },
E('select', { 'id': 'cfg-memory', 'class': 'cbi-input-select' }, [
E('option', { 'value': '512M', 'selected': main.memory_limit === '512M' }, '512 MB'),
E('option', { 'value': '1G', 'selected': main.memory_limit === '1G' }, '1 GB'),
E('option', { 'value': '2G', 'selected': main.memory_limit === '2G' || !main.memory_limit }, '2 GB'),
E('option', { 'value': '4G', 'selected': main.memory_limit === '4G' }, '4 GB')
])
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Active App')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'text', 'id': 'cfg-app', 'class': 'cbi-input-text',
'value': main.active_app || 'hello' })
)
])
]),
// Server Settings
E('div', { 'class': 'cbi-section' }, [
E('h3', {}, _('Server Options')),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Headless')),
E('div', { 'class': 'cbi-value-field' },
E('select', { 'id': 'cfg-headless', 'class': 'cbi-input-select' }, [
E('option', { 'value': 'true', 'selected': server.headless !== 'false' }, _('Yes')),
E('option', { 'value': 'false', 'selected': server.headless === 'false' }, _('No'))
])
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Theme')),
E('div', { 'class': 'cbi-value-field' },
E('select', { 'id': 'cfg-theme', 'class': 'cbi-input-select' }, [
E('option', { 'value': 'dark', 'selected': server.theme_base !== 'light' }, _('Dark')),
E('option', { 'value': 'light', 'selected': server.theme_base === 'light' }, _('Light'))
])
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Primary Color')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'text', 'id': 'cfg-color', 'class': 'cbi-input-text',
'value': server.theme_primary_color || '#0ff', 'placeholder': '#0ff' })
)
])
]),
// Gitea Settings
E('div', { 'class': 'cbi-section' }, [
E('h3', {}, _('Gitea Integration')),
E('div', { 'class': 'cbi-section-descr' }, _('Configure Gitea to clone apps from repositories')),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Enabled')),
E('div', { 'class': 'cbi-value-field' },
E('select', { 'id': 'cfg-gitea-enabled', 'class': 'cbi-input-select' }, [
E('option', { 'value': '1', 'selected': gitea.enabled == true || gitea.enabled == '1' }, _('Yes')),
E('option', { 'value': '0', 'selected': !gitea.enabled || gitea.enabled == '0' }, _('No'))
])
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Gitea URL')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'text', 'id': 'cfg-gitea-url', 'class': 'cbi-input-text',
'value': gitea.url || '', 'placeholder': 'http://192.168.255.1:3000' })
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Username')),
E('div', { 'class': 'cbi-value-field' },
E('input', { 'type': 'text', 'id': 'cfg-gitea-user', 'class': 'cbi-input-text',
'value': gitea.user || '', 'placeholder': 'admin' })
)
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title' }, _('Access Token')),
E('div', { 'class': 'cbi-value-field' }, [
E('input', { 'type': 'password', 'id': 'cfg-gitea-token', 'class': 'cbi-input-text',
'value': '', 'placeholder': gitea.has_token ? _('(token configured)') : _('Enter token') }),
E('div', { 'class': 'cbi-value-description' },
_('Generate from Gitea: Settings > Applications > Generate Token'))
])
])
]),
// Save buttons
E('div', { 'class': 'cbi-page-actions' }, [
E('button', {
'class': 'kiss-btn kiss-btn-green',
'click': function() { self.save(); }
}, _('Save & Apply'))
])
]);
return KissTheme.wrap([view], 'admin/services/streamlit/settings');
},
save: function() {
var self = this;
// Save main config
var cfg = {
enabled: document.getElementById('cfg-enabled').value,
http_port: document.getElementById('cfg-port').value,
http_host: document.getElementById('cfg-host').value,
data_path: document.getElementById('cfg-path').value,
memory_limit: document.getElementById('cfg-memory').value,
active_app: document.getElementById('cfg-app').value,
headless: document.getElementById('cfg-headless').value,
browser_gather_usage_stats: 'false',
theme_base: document.getElementById('cfg-theme').value,
theme_primary_color: document.getElementById('cfg-color').value
};
// Save Gitea config
var giteaEnabled = document.getElementById('cfg-gitea-enabled').value;
var giteaUrl = document.getElementById('cfg-gitea-url').value;
var giteaUser = document.getElementById('cfg-gitea-user').value;
var giteaToken = document.getElementById('cfg-gitea-token').value;
Promise.all([
api.saveConfig(cfg),
api.saveGiteaConfig(giteaEnabled, giteaUrl, giteaUser, giteaToken || '')
]).then(function(results) {
var r = results[0];
if (r && r.success) {
ui.addNotification(null, E('p', {}, _('Settings saved')), 'info');
} else {
ui.addNotification(null, E('p', {}, r.message || _('Save failed')), 'error');
}
}).catch(function(err) {
ui.addNotification(null, E('p', {}, _('Save failed: ') + err.message), 'error');
});
}
});