static/css/edit.css

@@ -0,0 +1,29 @@
+.CodeMirror {
+    height: 500px !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    font-size: 13px;
+}
+
+.CodeMirror-gutters {
+    background-color: #263238;
+    border-right: 1px solid #37474f;
+}
+
+.CodeMirror-linenumber {
+    color: #546e7a;
+}
+
+.CodeMirror-cursor {
+    border-left: 1px solid #fff;
+}
+
+#edit_form button {
+    white-space: nowrap;
+}
+
+@media (max-width: 768px) {
+    .CodeMirror {
+        height: 300px !important;
+        font-size: 12px;
+    }
+}

static/js/editor.js

@@ -0,0 +1,133 @@
+/**
+ * HAProxy Configuration Editor
+ * Auto-grow textarea + CodeMirror integration
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Auto-grow textarea (fallback if CodeMirror fails)
+    initAutoGrowTextarea();
+    
+    // Try to initialize CodeMirror
+    initCodeMirror();
+});
+
+/**
+ * Initialize auto-grow textarea
+ */
+function initAutoGrowTextarea() {
+    'use strict';
+    const ta = document.getElementById('haproxy_config');
+    if (!ta) return;
+    
+    const autoGrow = () => {
+        ta.style.height = 'auto';
+        ta.style.height = (ta.scrollHeight + 6) + 'px';
+    };
+    
+    ta.addEventListener('input', autoGrow);
+    ta.addEventListener('change', autoGrow);
+    
+    // Initial auto-size
+    autoGrow();
+    
+    // Resize on window resize
+    window.addEventListener('resize', autoGrow);
+    
+    console.log('[Editor] Auto-grow textarea initialized');
+}
+
+/**
+ * Initialize CodeMirror editor
+ */
+function initCodeMirror() {
+    'use strict';
+    
+    // Check if CodeMirror is available
+    if (typeof CodeMirror === 'undefined') {
+        console.warn('[Editor] CodeMirror not loaded, using fallback textarea');
+        document.getElementById('haproxy_config').style.display = 'block';
+        return;
+    }
+
+    try {
+        const editorElement = document.getElementById('haproxy_editor');
+        if (!editorElement) {
+            console.warn('[Editor] haproxy_editor element not found');
+            return;
+        }
+
+        const editor = CodeMirror.fromTextArea(editorElement, {
+            lineNumbers: true,
+            lineWrapping: true,
+            indentUnit: 4,
+            indentWithTabs: false,
+            theme: 'material-darker',
+            mode: 'text/x-nginx-conf',
+            styleActiveLine: true,
+            styleSelectedText: true,
+            highlightSelectionMatches: { annotateScrollbar: true },
+            foldGutter: true,
+            gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+            matchBrackets: true,
+            autoCloseBrackets: true,
+            extraKeys: {
+                'Ctrl-S': function() {
+                    document.querySelector('button[value="save"]').click();
+                },
+                'Ctrl-L': function() {
+                    editor.clearHistory();
+                },
+                'Ctrl-/': 'toggleComment'
+            }
+        });
+
+        // Hide fallback textarea
+        document.getElementById('haproxy_config').style.display = 'none';
+
+        // Update line/col info
+        editor.on('cursorActivity', function() {
+            const pos = editor.getCursor();
+            document.getElementById('line_col').textContent = 
+                `Line ${pos.line + 1}, Col ${pos.ch + 1}`;
+            document.getElementById('char_count').textContent = 
+                editor.getValue().length;
+        });
+
+        // Auto-save to localStorage
+        let saveTimeout;
+        editor.on('change', function() {
+            clearTimeout(saveTimeout);
+            saveTimeout = setTimeout(() => {
+                localStorage.setItem('haproxy_draft', editor.getValue());
+            }, 1000);
+        });
+
+        // Recover from localStorage
+        const draft = localStorage.getItem('haproxy_draft');
+        const currentContent = editorElement.value.trim();
+        
+        if (draft && draft.trim() !== currentContent && currentContent === '') {
+            if (confirm('📝 Recover unsaved draft?')) {
+                editor.setValue(draft);
+                localStorage.removeItem('haproxy_draft');
+            }
+        }
+
+        // Form submission - sync values
+        const editForm = document.getElementById('edit_form');
+        editForm.addEventListener('submit', function(e) {
+            editorElement.value = editor.getValue();
+            document.getElementById('haproxy_config').value = editor.getValue();
+        });
+
+        // Initial info
+        document.getElementById('char_count').textContent = editor.getValue().length;
+        
+        console.log('[Editor] CodeMirror initialized successfully');
+
+    } catch (e) {
+        console.warn('[Editor] CodeMirror initialization failed:', e);
+        // Fallback textarea is already visible
+        document.getElementById('haproxy_config').style.display = 'block';
+    }
+}

templates/base.html

@@ -7,6 +7,7 @@
     <title>{% block title %}HAProxy Configurator{% endblock %}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/edit.css') }}">
     {% block head %}{% endblock %}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
   

templates/edit.html

@@ -1,34 +1,91 @@
 {% extends "base.html" %}
-{% set active_page = "" %}
-{% block title %}HAProxy • Edit{% endblock %}
-{% block breadcrumb %}<nav aria-label="breadcrumb" class="mb-3"><ol class="breadcrumb mb-0"><li class="breadcrumb-item"><a href="{{ url_for('main.index') }}"><i class="bi bi-house"></i></a></li><li class="breadcrumb-item active" aria-current="page">Edit Haproxy config file</li></ol></nav>{% endblock %}
-{% block content %}
-<div class="card shadow-sm">
-  <div class="card-body">
-    <h4 class="mb-3 text-muted">Edit HAProxy configuration</h4>
-    <form method="POST" novalidate>
-      <div class="mb-3">
-        <label for="haproxy_config" class="form-label">Config</label>
-        <textarea class="form-control" name="haproxy_config" id="haproxy_config" rows="20">{{ config_content }}</textarea>
-      </div>
-      <div class="d-flex gap-2">
-        <button type="submit" class="btn btn-warning" id="save_check" name="save_check">
-          <i class="bi bi-search me-1"></i> Check & Save
-        </button>
-        <button type="submit" class="btn btn-primary" name="save_reload">
-          <i class="bi bi-arrow-repeat me-1"></i> Check & Restart
-        </button>
-      </div>
-    </form>
-    {% if check_output %}
-    <div class="alert alert-{{ check_level|default('success') }}" role="alert">
-        <pre class="mb-0">{{ check_output }}</pre>
-    </div>
-    {% endif %}
 
+{% set active_page = "edit" %}
+
+{% block title %}HAProxy • Configuration Editor{% endblock %}
+
+{% block breadcrumb %}
+<nav aria-label="breadcrumb" class="mb-3">
+    <ol class="breadcrumb mb-0">
+        <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}"><i class="bi bi-house"></i></a></li>
+        <li class="breadcrumb-item active" aria-current="page">Edit Configuration</li>
+    </ol>
+</nav>
+{% endblock %}
+
+{% block content %}
+
+<!-- CodeMirror CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material-darker.min.css">
+
+<!-- Alert Section -->
+{% if check_output %}
+<div class="alert alert-{{ check_level|default('info') }} alert-dismissible fade show" role="alert">
+    <div class="d-flex align-items-start">
+        <div>
+            <i class="bi bi-{% if check_level == 'success' %}check-circle-fill{% elif check_level == 'danger' %}exclamation-circle-fill{% elif check_level == 'warning' %}exclamation-triangle-fill{% else %}info-circle-fill{% endif %} me-2" style="font-size: 1.2rem;"></i>
+        </div>
+        <div class="flex-grow-1">
+            <strong>
+                {% if check_level == 'success' %}✓ Configuration Valid
+                {% elif check_level == 'danger' %}✗ Configuration Error
+                {% elif check_level == 'warning' %}⚠ Warning
+                {% else %}ℹ Info{% endif %}
+            </strong>
+            <div class="mt-2 small" style="font-family: monospace; background-color: rgba(0,0,0,0.1); padding: 8px; border-radius: 4px; max-height: 200px; overflow-y: auto;">
+                {{ check_output|replace('\n', '<br>') }}
+            </div>
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
 </div>
-{% endblock %}
+{% endif %}
-{% block page_js %}
+
-<script src="{{ url_for('static', filename='js/edit.js') }}"></script>
+<!-- Editor Section -->
+<div class="card shadow-sm">
+    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
+        <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>HAProxy Configuration Editor</h5>
+        <small class="text-white-50">Real-time editor with syntax highlighting</small>
+    </div>
+    
+    <div class="card-body" style="padding: 0;">
+        <form method="post" id="edit_form">
+            <!-- Editor Container -->
+            <div style="border: 1px solid #dee2e6; border-radius: 0 0 4px 4px; overflow: hidden;">
+                <textarea id="haproxy_editor" name="haproxy_config" style="display: none;">{{ config_content }}</textarea>
+                <!-- Fallback textarea (hidden by default) -->
+                <textarea id="haproxy_config" name="haproxy_config" style="display: none; width: 100%; border: none; font-family: monospace; font-size: 13px; resize: none; padding: 12px; min-height: 500px;">{{ config_content }}</textarea>
+            </div>
+            
+            <!-- Toolbar -->
+            <div class="p-3 border-top bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
+                <div class="d-flex gap-2">
+                    <button type="submit" class="btn btn-success btn-sm" name="action" value="check">
+                        <i class="bi bi-check-circle me-1"></i>Validate Configuration
+                    </button>
+                    <button type="submit" class="btn btn-primary btn-sm" name="action" value="save">
+                        <i class="bi bi-save me-1"></i>Save & Restart HAProxy
+                    </button>
+                    <a href="{{ url_for('main.index') }}" class="btn btn-secondary btn-sm">
+                        <i class="bi bi-arrow-left me-1"></i>Cancel
+                    </a>
+                </div>
+                <small class="text-muted">
+                    <i class="bi bi-info-circle me-1"></i>
+                    <span id="line_col">Line 1, Col 1</span> | 
+                    <span id="char_count">0</span> characters
+                </small>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- CodeMirror JS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/nginx/nginx.min.js"></script>
+
+<!-- Editor JS -->
+<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
+
 {% endblock %}