1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
/* jshint esversion: 2024, module: true */
/**
* Configuration Manager for handling config files
* @class ConfigManager
*/
class ConfigManager {
/**
* @param {Object} elements - DOM elements
* @param {ApiClient} apiClient - API client instance
* @param {Object} state - Application state
*/
constructor(elements, apiClient, state) {
this.elements = elements;
this.apiClient = apiClient;
this.state = state;
}
/**
* Set up configuration event listeners
* @method setupEventListeners
*/
setupEventListeners() {
this.elements.buttons.refreshConfigs?.addEventListener('click', () => this.refreshConfigs());
this.elements.buttons.saveConfig?.addEventListener('click', () => this.saveConfig());
this.elements.buttons.validateConfig?.addEventListener('click', () => this.validateConfig());
this.elements.inputs.configSelect?.addEventListener('change', () => this.loadConfig());
}
/**
* Refresh configuration file list
* @method refreshConfigs
*/
async refreshConfigs() {
try {
const data = await this.apiClient.get('/api/configs');
this.elements.inputs.configSelect.innerHTML = '';
data.files?.forEach(file => {
const option = new Option(file, file);
this.elements.inputs.configSelect.add(option);
});
if (data.files?.length > 0) {
await this.loadConfig();
} else {
this.elements.inputs.cfgEditor.value = '';
}
} catch (error) {
alert(`Failed to list configs: ${error.message}`);
}
}
/**
* Load selected configuration file
* @method loadConfig
*/
async loadConfig() {
const name = this.elements.inputs.configSelect.value;
if (!name) return;
try {
const text = await this.apiClient.getText(`/api/config/${encodeURIComponent(name)}`);
this.elements.inputs.cfgEditor.value = text;
this.elements.outputs.validateResult.textContent = '';
} catch (error) {
alert(`Failed to load: ${error.message}`);
}
}
/**
* Validate current configuration
* @method validateConfig
*/
async validateConfig() {
const name = this.elements.inputs.configSelect.value;
const content = this.elements.inputs.cfgEditor.value;
this.elements.outputs.validateResult.textContent = 'Validating...';
this.elements.outputs.validateResult.className = 'validation-pending';
try {
const result = await this.apiClient.post('/api/validate', { name, content });
if (result.ok) {
this.elements.outputs.validateResult.textContent = '✓ Configuration is valid';
this.elements.outputs.validateResult.className = 'validation-success';
} else {
this.elements.outputs.validateResult.textContent = `✗ ${result.output || 'Validation failed'}`;
this.elements.outputs.validateResult.className = 'validation-error';
}
} catch (error) {
this.elements.outputs.validateResult.textContent = `✗ Error: ${error.message}`;
this.elements.outputs.validateResult.className = 'validation-error';
}
}
/**
* Save current configuration
* @method saveConfig
*/
async saveConfig() {
const name = this.elements.inputs.configSelect.value;
const content = this.elements.inputs.cfgEditor.value;
const restart = this.elements.inputs.restartAfterSave.checked;
if (!confirm(`Save file ${name}? This will create a backup and ${restart ? 'restart' : 'not restart'} networkd.`)) {
return;
}
try {
const result = await this.apiClient.post('/api/save', { name, content, restart });
alert(`Saved: ${result.status ?? 'ok'}`);
} catch (error) {
alert(`Save failed: ${error.message}`);
}
}
}
export { ConfigManager };
|