chore: initial clean commit
This commit is contained in:
318
static/js/pages/settings.js
Normal file
318
static/js/pages/settings.js
Normal file
@@ -0,0 +1,318 @@
|
||||
// Settings Page Module
|
||||
|
||||
class SettingsPage {
|
||||
constructor() {
|
||||
this.settings = {};
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
// Load settings
|
||||
await this.loadSettings();
|
||||
await this.loadSystemInfo();
|
||||
|
||||
// Setup event listeners
|
||||
this.setupEventListeners();
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
try {
|
||||
// In a real app, this would fetch from /api/settings
|
||||
this.settings = {
|
||||
serverPort: 8080,
|
||||
logLevel: 'info',
|
||||
dbPath: './data/llm-proxy.db',
|
||||
backupInterval: 24,
|
||||
sessionTimeout: 30,
|
||||
enableRateLimiting: true,
|
||||
enableCostTracking: true,
|
||||
enableMetrics: true,
|
||||
enableWebSocket: true
|
||||
};
|
||||
|
||||
this.renderSettingsForm();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
renderSettingsForm() {
|
||||
const form = document.getElementById('settings-form');
|
||||
if (!form) return;
|
||||
|
||||
// Server port
|
||||
const portInput = document.getElementById('server-port');
|
||||
if (portInput) portInput.value = this.settings.serverPort;
|
||||
|
||||
// Log level
|
||||
const logLevelSelect = document.getElementById('log-level');
|
||||
if (logLevelSelect) logLevelSelect.value = this.settings.logLevel;
|
||||
|
||||
// Database path
|
||||
const dbPathInput = document.getElementById('db-path');
|
||||
if (dbPathInput) dbPathInput.value = this.settings.dbPath;
|
||||
|
||||
// Backup interval
|
||||
const backupInput = document.getElementById('backup-interval');
|
||||
if (backupInput) backupInput.value = this.settings.backupInterval;
|
||||
|
||||
// Session timeout
|
||||
const sessionInput = document.getElementById('session-timeout');
|
||||
if (sessionInput) sessionInput.value = this.settings.sessionTimeout;
|
||||
}
|
||||
|
||||
async loadSystemInfo() {
|
||||
const container = document.getElementById('system-info');
|
||||
if (!container) return;
|
||||
|
||||
// In a real app, this would fetch system information
|
||||
const systemInfo = {
|
||||
version: '1.0.0',
|
||||
uptime: '5 days, 3 hours',
|
||||
platform: 'Linux x86_64',
|
||||
node: 'v18.17.0',
|
||||
memory: '2.4 GB / 8.0 GB',
|
||||
disk: '45 GB / 256 GB',
|
||||
lastBackup: '2024-01-15 02:00:00',
|
||||
lastRestart: '2024-01-10 14:30:00'
|
||||
};
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Version:</span>
|
||||
<span class="info-value">${systemInfo.version}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Uptime:</span>
|
||||
<span class="info-value">${systemInfo.uptime}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Platform:</span>
|
||||
<span class="info-value">${systemInfo.platform}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Node.js:</span>
|
||||
<span class="info-value">${systemInfo.node}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Memory:</span>
|
||||
<span class="info-value">${systemInfo.memory}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Disk:</span>
|
||||
<span class="info-value">${systemInfo.disk}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Last Backup:</span>
|
||||
<span class="info-value">${systemInfo.lastBackup}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Last Restart:</span>
|
||||
<span class="info-value">${systemInfo.lastRestart}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add CSS for info grid
|
||||
this.addInfoStyles();
|
||||
}
|
||||
|
||||
addInfoStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.form-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-section h4 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Settings form
|
||||
const form = document.getElementById('settings-form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.saveSettings();
|
||||
});
|
||||
}
|
||||
|
||||
// Reset settings button
|
||||
const resetBtn = document.getElementById('reset-settings');
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener('click', () => {
|
||||
this.resetSettings();
|
||||
});
|
||||
}
|
||||
|
||||
// Database management buttons
|
||||
const backupBtn = document.getElementById('backup-db');
|
||||
if (backupBtn) {
|
||||
backupBtn.addEventListener('click', () => {
|
||||
this.backupDatabase();
|
||||
});
|
||||
}
|
||||
|
||||
const optimizeBtn = document.getElementById('optimize-db');
|
||||
if (optimizeBtn) {
|
||||
optimizeBtn.addEventListener('click', () => {
|
||||
this.optimizeDatabase();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
saveSettings() {
|
||||
// Collect form values
|
||||
const settings = {
|
||||
serverPort: parseInt(document.getElementById('server-port').value) || 8080,
|
||||
logLevel: document.getElementById('log-level').value,
|
||||
dbPath: document.getElementById('db-path').value,
|
||||
backupInterval: parseInt(document.getElementById('backup-interval').value) || 24,
|
||||
sessionTimeout: parseInt(document.getElementById('session-timeout').value) || 30,
|
||||
dashboardPassword: document.getElementById('dashboard-password').value
|
||||
};
|
||||
|
||||
// Validate settings
|
||||
if (settings.serverPort < 1024 || settings.serverPort > 65535) {
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Server port must be between 1024 and 65535', 'error');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.backupInterval < 1 || settings.backupInterval > 168) {
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Backup interval must be between 1 and 168 hours', 'error');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.sessionTimeout < 5 || settings.sessionTimeout > 1440) {
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Session timeout must be between 5 and 1440 minutes', 'error');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// In a real app, this would save settings via API
|
||||
this.settings = { ...this.settings, ...settings };
|
||||
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Settings saved successfully', 'success');
|
||||
}
|
||||
|
||||
// Clear password field
|
||||
document.getElementById('dashboard-password').value = '';
|
||||
}
|
||||
|
||||
resetSettings() {
|
||||
if (confirm('Are you sure you want to reset all settings to default values?')) {
|
||||
// Reset to defaults
|
||||
this.settings = {
|
||||
serverPort: 8080,
|
||||
logLevel: 'info',
|
||||
dbPath: './data/llm-proxy.db',
|
||||
backupInterval: 24,
|
||||
sessionTimeout: 30,
|
||||
enableRateLimiting: true,
|
||||
enableCostTracking: true,
|
||||
enableMetrics: true,
|
||||
enableWebSocket: true
|
||||
};
|
||||
|
||||
this.renderSettingsForm();
|
||||
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Settings reset to defaults', 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
backupDatabase() {
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Starting database backup...', 'info');
|
||||
}
|
||||
|
||||
// Simulate backup process
|
||||
setTimeout(() => {
|
||||
// In a real app, this would trigger a database backup via API
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Database backup completed successfully', 'success');
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
optimizeDatabase() {
|
||||
if (confirm('Optimize database? This may improve performance but could take a few moments.')) {
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Optimizing database...', 'info');
|
||||
}
|
||||
|
||||
// Simulate optimization process
|
||||
setTimeout(() => {
|
||||
// In a real app, this would optimize the database via API
|
||||
if (window.authManager) {
|
||||
window.authManager.showToast('Database optimization completed', 'success');
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.loadSettings();
|
||||
this.loadSystemInfo();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize settings page when needed
|
||||
window.initSettings = async () => {
|
||||
window.settingsPage = new SettingsPage();
|
||||
};
|
||||
|
||||
// Export for use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = SettingsPage;
|
||||
}
|
||||
Reference in New Issue
Block a user