Add a thin divider above the Save/Reset buttons, and one at the top of #advanced-sections so a line appears between the "Show Advanced Options" toggle and the advanced fields only when they're revealed. Shared config renderer, so it applies to every config category (backup included). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Signed-off-by: librelad <librelad@digitalangels.vip>
116 lines
5.1 KiB
JavaScript
Executable File
116 lines
5.1 KiB
JavaScript
Executable File
// Config Utils - Utility functions for configuration management
|
|
class ConfigUtils {
|
|
constructor() {
|
|
// No initialization needed
|
|
}
|
|
|
|
formatSubcategoryName(subcategoryName) {
|
|
return subcategoryName.replace(/_/g, ' ').replace(/\b\w/g, function(l) { return l.toUpperCase(); });
|
|
}
|
|
|
|
cleanDescription(description) {
|
|
return description
|
|
.replace(/\*\*ADVANCED\*\*/g, '')
|
|
.replace(/\*\*UNUSED\*\*/g, '')
|
|
.replace(/^\s+|\s+$/g, '') // Trim whitespace
|
|
.replace(/\s{2,}/g, ' '); // Replace multiple spaces with single space
|
|
}
|
|
|
|
filterSubcategoriesByType(configData, category) {
|
|
// Filter subcategories by category and separate into regular, advanced, and unused
|
|
var regularSubcategories = [];
|
|
var advancedSubcategories = [];
|
|
var unusedSubcategories = [];
|
|
|
|
for (const [subcategoryName, subcategoryData] of Object.entries(configData)) {
|
|
if (subcategoryData.category === category) {
|
|
if (subcategoryData.description.includes('**ADVANCED**')) {
|
|
advancedSubcategories.push(subcategoryName);
|
|
} else if (subcategoryData.description.includes('**UNUSED**')) {
|
|
unusedSubcategories.push(subcategoryName);
|
|
} else {
|
|
regularSubcategories.push(subcategoryName);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
regular: regularSubcategories,
|
|
advanced: advancedSubcategories,
|
|
unused: unusedSubcategories
|
|
};
|
|
}
|
|
|
|
async renderSectionedContent(formHTML, advancedSubcategories, unusedSubcategories, self, category, configData) {
|
|
// Add danger zone toggle controls if needed
|
|
if (advancedSubcategories.length > 0 || unusedSubcategories.length > 0) {
|
|
formHTML += this.generateToggleControls(advancedSubcategories.length > 0, unusedSubcategories.length > 0);
|
|
}
|
|
|
|
// Render advanced sections (hidden by default). The old grouping
|
|
// header ("🛠️ Advanced Configuration") is gone — each subcategory
|
|
// self-identifies via the red "Advanced" badge on its title (see
|
|
// .is-advanced .domains-header h3::after in config.css).
|
|
if (advancedSubcategories.length > 0) {
|
|
formHTML += '<div id="advanced-sections" class="advanced-sections" style="display: none;">';
|
|
// Divider between the "Show Advanced Options" toggle and the advanced
|
|
// fields. It lives inside #advanced-sections so it only appears once the
|
|
// user reveals them.
|
|
formHTML += '<div class="config-divider"></div>';
|
|
|
|
for (const subcategoryName of advancedSubcategories) {
|
|
const subcategoryData = configData[subcategoryName];
|
|
|
|
if (typeof subcategoryData === 'object' && subcategoryData !== null) {
|
|
formHTML += '<div class="is-advanced">';
|
|
formHTML += await self.renderSubcategory.call(self, category, subcategoryName, subcategoryData);
|
|
formHTML += '</div>';
|
|
}
|
|
}
|
|
formHTML += '</div>';
|
|
}
|
|
|
|
// Render unused sections (hidden by default)
|
|
if (unusedSubcategories.length > 0) {
|
|
formHTML += '<div id="unused-sections" class="unused-sections" style="display: none;">';
|
|
formHTML += '<div class="section-divider"><h3>🗑️ Unused Configuration</h3><p>Deprecated or unused settings</p></div>';
|
|
|
|
for (const subcategoryName of unusedSubcategories) {
|
|
const subcategoryData = configData[subcategoryName];
|
|
//console.log('ConfigUtils: Processing unused subcategory:', subcategoryName, 'data:', subcategoryData);
|
|
|
|
if (typeof subcategoryData === 'object' && subcategoryData !== null) {
|
|
//console.log('ConfigUtils: Calling renderSubcategory for:', subcategoryName);
|
|
formHTML += await self.renderSubcategory.call(self, category, subcategoryName, subcategoryData);
|
|
}
|
|
}
|
|
formHTML += '</div>';
|
|
}
|
|
|
|
return formHTML;
|
|
}
|
|
|
|
generateToggleControls(hasAdvanced = false, hasUnused = false) {
|
|
if (!hasAdvanced && !hasUnused) {
|
|
return ''; // Don't show danger zone if no content
|
|
}
|
|
|
|
let formHTML = '<div class="danger-zone-section"><div class="danger-zone-header"><h3>⚠️ Danger Zone</h3><p>These options are for advanced users and may affect system stability</p></div><div class="config-toggles">';
|
|
|
|
if (hasAdvanced) {
|
|
formHTML += '<div class="toggle-section"><label class="checkbox-label"><input type="checkbox" id="show-advanced" onchange="ConfigShared.toggleAdvancedSections()"><span class="checkbox-custom"></span><div class="toggle-content"><span class="checkbox-text">Show Advanced Options</span><span class="checkbox-description">Display advanced configuration settings for experienced users</span></div></label></div>';
|
|
}
|
|
|
|
if (hasUnused) {
|
|
formHTML += '<div class="toggle-section"><label class="checkbox-label"><input type="checkbox" id="show-unused" onchange="ConfigShared.toggleUnusedSections()"><span class="checkbox-custom"></span><div class="toggle-content"><span class="checkbox-text">Show Unused Options</span><span class="checkbox-description">Display deprecated or unused configuration options</span></div></label></div>';
|
|
}
|
|
|
|
formHTML += '</div></div>';
|
|
|
|
return formHTML;
|
|
}
|
|
}
|
|
|
|
// Export to global scope
|
|
window.ConfigUtils = ConfigUtils;
|