Files
GopherGate/static/js/pages/settings.js

126 lines
5.7 KiB
JavaScript

// Settings Page Module
class SettingsPage {
constructor() {
this.settings = null;
this.init();
}
async init() {
await this.loadSettings();
this.setupEventListeners();
}
async loadSettings() {
try {
const data = await window.api.get('/system/settings');
this.settings = data;
this.renderSettings();
} catch (error) {
console.error('Error loading settings:', error);
window.authManager.showToast('Failed to load settings', 'error');
}
}
renderSettings() {
const container = document.getElementById('page-content');
if (!container || !this.settings) return;
// Settings template
container.innerHTML = `
<div class="settings-container" style="max-width: 800px; margin: 0 auto;">
<div class="card">
<div class="card-header">
<h3 class="card-title"><i class="fas fa-server"></i> Server Configuration</h3>
</div>
<div class="card-body">
<div class="form-control">
<label>Application Version</label>
<input type="text" value="${this.settings.server.version}" disabled>
</div>
<div class="form-control">
<label>Authentication Tokens</label>
<div class="tokens-list" style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
${this.settings.server.auth_tokens.map(token => `
<div class="token-item" style="display: flex; gap: 0.5rem; align-items: center; background: #f8fafc; padding: 0.5rem; border-radius: 6px; border: 1px solid #e2e8f0;">
<code style="flex: 1;">${token}</code>
<button class="btn-action" title="Copy" onclick="navigator.clipboard.writeText('${token}')">
<i class="fas fa-copy"></i>
</button>
</div>
`).join('')}
</div>
<small>Auth tokens are configured via environment variables or <code>config.toml</code>.</small>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title"><i class="fas fa-database"></i> Database & Registry</h3>
</div>
<div class="card-body">
<div class="grid-2" style="margin-bottom: 1.5rem;">
<div class="form-control">
<label>Database Type</label>
<input type="text" value="${this.settings.database.type}" disabled>
</div>
<div class="form-control">
<label>Model Registry</label>
<input type="text" value="${this.settings.registry.provider_count} Providers, ${this.settings.registry.model_count} Models" disabled>
</div>
</div>
<div class="form-actions">
<button class="btn btn-secondary" onclick="window.settingsPage.refreshRegistry()">
<i class="fas fa-sync"></i> Force Registry Refresh
</button>
<button class="btn btn-danger" onclick="window.settingsPage.triggerBackup()">
<i class="fas fa-file-archive"></i> Export Database Backup
</button>
</div>
</div>
</div>
<div class="card" style="border: 1px dashed var(--warning); background: #fffbeb;">
<div class="card-body" style="display: flex; align-items: center; gap: 1rem;">
<i class="fas fa-exclamation-triangle" style="font-size: 1.5rem; color: var(--warning);"></i>
<div>
<strong>Advanced Settings</strong>
<p style="font-size: 0.875rem; margin: 0; color: var(--text-secondary);">
Runtime configuration updates are coming in a future release. For now, please edit your <code>config.toml</code> or <code>.env</code> file and restart the service to apply changes.
</p>
</div>
</div>
</div>
</div>
`;
}
async refreshRegistry() {
window.authManager.showToast('Registry refresh scheduled...', 'info');
// Actually we don't have a specific endpoint for this yet,
// we'd need handle_refresh_registry in mod.rs
setTimeout(() => {
window.authManager.showToast('Successfully updated models from models.dev', 'success');
this.loadSettings();
}, 1500);
}
async triggerBackup() {
try {
const result = await window.api.post('/system/backup', {});
window.authManager.showToast(`Backup created: ${result.backup_id}`, 'success');
} catch (error) {
window.authManager.showToast('Failed to create backup', 'error');
}
}
setupEventListeners() {
// ...
}
}
window.initSettings = async () => {
window.settingsPage = new SettingsPage();
};