LEDMatrix/web_interface/templates/v3/partials/raw_json.html

<div class="space-y-6">
    <!-- Config.json Editor -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">config.json Editor</h2>
                    <p class="mt-1 text-sm text-gray-600">{{ main_config_path }}</p>
                </div>
                <div class="flex gap-2">
                    <button onclick="formatJson('main-config-editor', 'main-config-validation')" 
                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-align-left mr-2"></i>
                        Format JSON
                    </button>
                    <button onclick="manualValidateJson('main-config-editor', 'main-config-validation')" 
                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
                        <i class="fas fa-check-circle mr-2"></i>
                        Validate JSON
                    </button>
                    <button onclick="saveMainConfig()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-save mr-2"></i>
                        Save
                    </button>
                </div>
            </div>
        </div>

        <div class="relative">
            <textarea id="main-config-editor" 
                      class="w-full h-96 font-mono text-sm p-4 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                      spellcheck="false">{{ main_config_json }}</textarea>
            <div id="main-config-validation" class="mt-2 text-sm"></div>
        </div>

        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Warning</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>Editing this file directly can break your configuration. Always validate JSON syntax before saving.</p>
                        <p class="mt-1">After saving, you may need to restart the display service for changes to take effect.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Config_secrets.json Editor -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">config_secrets.json Editor</h2>
                    <p class="mt-1 text-sm text-gray-600">{{ secrets_config_path }}</p>
                </div>
                <div class="flex gap-2">
                    <button onclick="formatJson('secrets-config-editor', 'secrets-config-validation')" 
                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-align-left mr-2"></i>
                        Format JSON
                    </button>
                    <button onclick="manualValidateJson('secrets-config-editor', 'secrets-config-validation')" 
                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
                        <i class="fas fa-check-circle mr-2"></i>
                        Validate JSON
                    </button>
                    <button onclick="saveSecretsConfig()" 
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-save mr-2"></i>
                        Save
                    </button>
                </div>
            </div>
        </div>

        <div class="relative">
            <textarea id="secrets-config-editor" 
                      class="w-full h-96 font-mono text-sm p-4 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                      spellcheck="false">{{ secrets_config_json }}</textarea>
            <div id="secrets-config-validation" class="mt-2 text-sm"></div>
        </div>

        <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-shield-alt text-red-600"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Security Notice</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>This file contains sensitive information like API keys and passwords.</p>
                        <p class="mt-1">Never share this file or commit it to version control.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Format JSON with proper indentation
function formatJson(editorId, validationDivId) {
    const textarea = document.getElementById(editorId);
    const jsonText = textarea.value;
    
    try {
        const parsed = JSON.parse(jsonText);
        const formatted = JSON.stringify(parsed, null, 4);
        textarea.value = formatted;
        
        // Auto-validate after formatting
        validateJSON(editorId, validationDivId);
        showNotification('JSON formatted successfully!', 'success');
    } catch (error) {
        showNotification('Cannot format invalid JSON: ' + error.message, 'error');
        validateJSON(editorId, validationDivId);
    }
}

// Manual validation with detailed feedback
function manualValidateJson(editorId, validationDivId) {
    const textarea = document.getElementById(editorId);
    const validation = document.getElementById(validationDivId);
    const jsonText = textarea.value;
    
    if (!textarea || !validation) return;
    
    try {
        const parsed = JSON.parse(jsonText);
        validation.innerHTML = `
            <div class="p-3 bg-green-50 border border-green-200 rounded-md">
                <div class="flex items-start">
                    <i class="fas fa-check-circle text-green-600 text-xl mr-3 mt-1"></i>
                    <div>
                        <div class="font-semibold text-green-800">✓ JSON is valid!</div>
                        <div class="text-sm text-green-700 mt-1">
                            ✓ Valid JSON syntax<br>
                            ✓ Proper structure<br>
                            ✓ No syntax errors detected
                        </div>
                    </div>
                </div>
            </div>
        `;
        showNotification('JSON validation successful!', 'success');
    } catch (e) {
        validation.innerHTML = `
            <div class="p-3 bg-red-50 border border-red-200 rounded-md">
                <div class="flex items-start">
                    <i class="fas fa-times-circle text-red-600 text-xl mr-3 mt-1"></i>
                    <div>
                        <div class="font-semibold text-red-800">✗ Invalid JSON syntax</div>
                        <div class="text-sm text-red-700 mt-1">
                            <strong>Error:</strong> ${e.message}
                        </div>
                    </div>
                </div>
            </div>
        `;
        showNotification('JSON validation failed: ' + e.message, 'error');
    }
}

// Auto-validate JSON as user types (simple version)
function validateJSON(editor, validationDiv) {
    const textarea = document.getElementById(editor);
    const validation = document.getElementById(validationDiv);
    
    if (!textarea || !validation) return true;
    
    try {
        JSON.parse(textarea.value);
        validation.innerHTML = '<span class="text-green-600"><i class="fas fa-check-circle mr-1"></i>Valid JSON</span>';
        return true;
    } catch (e) {
        validation.innerHTML = '<span class="text-red-600"><i class="fas fa-times-circle mr-1"></i>Invalid JSON: ' + e.message + '</span>';
        return false;
    }
}

// Auto-validate on input
document.getElementById('main-config-editor')?.addEventListener('input', function() {
    validateJSON('main-config-editor', 'main-config-validation');
});

document.getElementById('secrets-config-editor')?.addEventListener('input', function() {
    validateJSON('secrets-config-editor', 'secrets-config-validation');
});

// Initial validation
setTimeout(() => {
    validateJSON('main-config-editor', 'main-config-validation');
    validateJSON('secrets-config-editor', 'secrets-config-validation');
}, 100);

function saveMainConfig() {
    const textarea = document.getElementById('main-config-editor');
    
    // Validate JSON first
    if (!validateJSON('main-config-editor', 'main-config-validation')) {
        showNotification('Invalid JSON! Please fix errors before saving.', 'error');
        return;
    }
    
    try {
        const config = JSON.parse(textarea.value);
        
        // Save via API
        fetch('/api/v3/config/raw/main', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        })
        .then(response => {
            // Check if response is OK before parsing JSON
            if (!response.ok) {
                // Try to parse error response as JSON, fallback to status text
                return response.json().then(data => {
                    throw new Error(data.message || response.statusText);
                }).catch(() => {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                showNotification('config.json saved successfully!', 'success');
            } else {
                showNotification('Error saving config.json: ' + (data.message || 'Unknown error'), 'error');
            }
        })
        .catch(error => {
            showNotification('Error saving config.json: ' + (error.message || 'An error occurred'), 'error');
        });
    } catch (e) {
        showNotification('Invalid JSON: ' + e.message, 'error');
    }
}

function saveSecretsConfig() {
    const textarea = document.getElementById('secrets-config-editor');
    
    // Validate JSON first
    if (!validateJSON('secrets-config-editor', 'secrets-config-validation')) {
        showNotification('Invalid JSON! Please fix errors before saving.', 'error');
        return;
    }
    
    try {
        const config = JSON.parse(textarea.value);
        
        // Save via API
        fetch('/api/v3/config/raw/secrets', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        })
        .then(response => {
            // Check if response is OK before parsing JSON
            if (!response.ok) {
                // Try to parse error response as JSON, fallback to status text
                return response.json().then(data => {
                    throw new Error(data.message || response.statusText);
                }).catch(() => {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                });
            }
            return response.json();
        })
        .then(data => {
            if (data.status === 'success') {
                showNotification('config_secrets.json saved successfully!', 'success');
            } else {
                showNotification('Error saving config_secrets.json: ' + (data.message || 'Unknown error'), 'error');
            }
        })
        .catch(error => {
            showNotification('Error saving config_secrets.json: ' + (error.message || 'An error occurred'), 'error');
        });
    } catch (e) {
        showNotification('Invalid JSON: ' + e.message, 'error');
    }
}

// Global notification function
function showNotification(message, type = 'info') {
    const notifications = document.getElementById('notifications');
    if (!notifications) return;
    
    const notification = document.createElement('div');
    
    const colors = {
        success: 'bg-green-500',
        error: 'bg-red-500',
        warning: 'bg-yellow-500',
        info: 'bg-blue-500'
    };
    
    notification.className = `px-4 py-3 rounded-md text-white text-sm shadow-lg ${colors[type] || colors.info}`;
    notification.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : 'info'}-circle mr-2"></i>${message}`;
    
    notifications.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 5000);
}
</script>