fixed the damn discord button

staticfiles/css/inline-edit.css

@@ -0,0 +1,187 @@
+/* Inline editing styles */
+.editable-container {
+    position: relative;
+}
+
+[data-editable] {
+    position: relative;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.2s;
+}
+
+[data-editable]:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.dark [data-editable]:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+[data-edit-button] {
+    opacity: 0;
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    transition: opacity 0.2s;
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.dark [data-edit-button] {
+    background-color: rgba(31, 41, 55, 0.9);
+}
+
+.editable-container:hover [data-edit-button] {
+    opacity: 1;
+}
+
+.form-input, .form-textarea, .form-select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.375rem;
+    background-color: white;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.dark .form-input, .dark .form-textarea, .dark .form-select {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: white;
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+    outline: none;
+    border-color: #4f46e5;
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.dark .form-input:focus, .dark .form-textarea:focus, .dark .form-select:focus {
+    border-color: #6366f1;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+/* Notifications */
+.notification {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    color: white;
+    max-width: 24rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    z-index: 50;
+    animation: slide-in 0.3s ease-out;
+}
+
+.notification-success {
+    background-color: #059669;
+}
+
+.dark .notification-success {
+    background-color: #047857;
+}
+
+.notification-error {
+    background-color: #dc2626;
+}
+
+.dark .notification-error {
+    background-color: #b91c1c;
+}
+
+.notification-info {
+    background-color: #3b82f6;
+}
+
+.dark .notification-info {
+    background-color: #2563eb;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Add/Edit Form Styles */
+.form-section {
+    @apply space-y-6;
+}
+
+.form-group {
+    @apply space-y-2;
+}
+
+.form-label {
+    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
+.form-error {
+    @apply mt-1 text-sm text-red-600 dark:text-red-400;
+}
+
+.form-help {
+    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+}
+
+/* Button Styles */
+.btn {
+    @apply inline-flex items-center justify-center px-4 py-2 font-medium transition-colors rounded-lg;
+}
+
+.btn-primary {
+    @apply text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600;
+}
+
+.btn-secondary {
+    @apply text-gray-700 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500;
+}
+
+.btn-danger {
+    @apply text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600;
+}
+
+/* Status Badges */
+.status-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+}
+
+.status-operating {
+    @apply text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-200;
+}
+
+.status-closed {
+    @apply text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-200;
+}
+
+.status-construction {
+    @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-200;
+}
+
+/* Navigation Links */
+.nav-link {
+    @apply flex items-center px-3 py-2 text-gray-700 transition-colors rounded-lg dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
+}
+
+.nav-link i {
+    @apply mr-2;
+}
+
+/* Menu Items */
+.menu-item {
+    @apply flex items-center w-full px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
+}
+
+.menu-item i {
+    @apply mr-3;
+}

staticfiles/js/inline-edit.js

@@ -0,0 +1,262 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Handle edit button clicks
+    document.querySelectorAll('[data-edit-button]').forEach(button => {
+        button.addEventListener('click', function() {
+            const contentId = this.dataset.contentId;
+            const contentType = this.dataset.contentType;
+            const editableFields = document.querySelectorAll(`[data-editable][data-content-id="${contentId}"]`);
+            
+            // Toggle edit mode
+            editableFields.forEach(field => {
+                const currentValue = field.textContent.trim();
+                const fieldName = field.dataset.fieldName;
+                const fieldType = field.dataset.fieldType || 'text';
+                
+                // Create input field
+                let input;
+                if (fieldType === 'textarea') {
+                    input = document.createElement('textarea');
+                    input.value = currentValue;
+                    input.rows = 4;
+                } else if (fieldType === 'select') {
+                    input = document.createElement('select');
+                    // Get options from data attribute
+                    const options = JSON.parse(field.dataset.options || '[]');
+                    options.forEach(option => {
+                        const optionEl = document.createElement('option');
+                        optionEl.value = option.value;
+                        optionEl.textContent = option.label;
+                        optionEl.selected = option.value === currentValue;
+                        input.appendChild(optionEl);
+                    });
+                } else if (fieldType === 'date') {
+                    input = document.createElement('input');
+                    input.type = 'date';
+                    input.value = currentValue;
+                } else if (fieldType === 'number') {
+                    input = document.createElement('input');
+                    input.type = 'number';
+                    input.value = currentValue;
+                    if (field.dataset.min) input.min = field.dataset.min;
+                    if (field.dataset.max) input.max = field.dataset.max;
+                    if (field.dataset.step) input.step = field.dataset.step;
+                } else {
+                    input = document.createElement('input');
+                    input.type = fieldType;
+                    input.value = currentValue;
+                }
+                
+                input.className = 'w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white';
+                input.dataset.originalValue = currentValue;
+                input.dataset.fieldName = fieldName;
+                
+                // Replace content with input
+                field.textContent = '';
+                field.appendChild(input);
+            });
+            
+            // Show save/cancel buttons
+            const actionButtons = document.createElement('div');
+            actionButtons.className = 'flex gap-2 mt-2';
+            actionButtons.innerHTML = `
+                <button class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600" data-save-button>
+                    <i class="mr-2 fas fa-save"></i>Save Changes
+                </button>
+                <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500" data-cancel-button>
+                    <i class="mr-2 fas fa-times"></i>Cancel
+                </button>
+                ${this.dataset.requireReason ? `
+                    <div class="flex-grow">
+                        <input type="text" class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" 
+                               placeholder="Reason for changes (required)" 
+                               data-reason-input>
+                        <input type="text" class="w-full mt-1 border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white" 
+                               placeholder="Source (optional)" 
+                               data-source-input>
+                    </div>
+                ` : ''}
+            `;
+            
+            const container = editableFields[0].closest('.editable-container');
+            container.appendChild(actionButtons);
+            
+            // Hide edit button while editing
+            this.style.display = 'none';
+        });
+    });
+    
+    // Handle form submissions
+    document.querySelectorAll('form[data-submit-type]').forEach(form => {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const submitType = this.dataset.submitType;
+            const formData = new FormData(this);
+            const data = {};
+            
+            formData.forEach((value, key) => {
+                data[key] = value;
+            });
+            
+            // Get CSRF token from meta tag
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+            
+            // Submit form
+            fetch(this.action, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                body: JSON.stringify({
+                    submission_type: submitType,
+                    ...data
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    showNotification(data.message, 'success');
+                    if (data.redirect_url) {
+                        window.location.href = data.redirect_url;
+                    }
+                } else {
+                    showNotification(data.message, 'error');
+                }
+            })
+            .catch(error => {
+                showNotification('An error occurred while submitting the form.', 'error');
+                console.error('Error:', error);
+            });
+        });
+    });
+    
+    // Handle save button clicks using event delegation
+    document.addEventListener('click', function(e) {
+        if (e.target.matches('[data-save-button]')) {
+            const container = e.target.closest('.editable-container');
+            const contentId = container.querySelector('[data-editable]').dataset.contentId;
+            const contentType = container.querySelector('[data-edit-button]').dataset.contentType;
+            const editableFields = container.querySelectorAll('[data-editable]');
+            
+            // Collect changes
+            const changes = {};
+            editableFields.forEach(field => {
+                const input = field.querySelector('input, textarea, select');
+                if (input && input.value !== input.dataset.originalValue) {
+                    changes[input.dataset.fieldName] = input.value;
+                }
+            });
+            
+            // If no changes, just cancel
+            if (Object.keys(changes).length === 0) {
+                cancelEdit(container);
+                return;
+            }
+            
+            // Get reason and source if required
+            const reasonInput = container.querySelector('[data-reason-input]');
+            const sourceInput = container.querySelector('[data-source-input]');
+            const reason = reasonInput ? reasonInput.value : '';
+            const source = sourceInput ? sourceInput.value : '';
+            
+            // Validate reason if required
+            if (reasonInput && !reason) {
+                alert('Please provide a reason for your changes.');
+                return;
+            }
+            
+            // Get CSRF token from meta tag
+            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+            
+            // Submit changes
+            fetch(window.location.pathname, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': csrfToken
+                },
+                body: JSON.stringify({
+                    content_type: contentType,
+                    content_id: contentId,
+                    changes,
+                    reason,
+                    source
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    if (data.auto_approved) {
+                        // Update the display immediately
+                        Object.entries(changes).forEach(([field, value]) => {
+                            const element = container.querySelector(`[data-editable][data-field-name="${field}"]`);
+                            if (element) {
+                                element.textContent = value;
+                            }
+                        });
+                    }
+                    showNotification(data.message, 'success');
+                    if (data.redirect_url) {
+                        window.location.href = data.redirect_url;
+                    }
+                } else {
+                    showNotification(data.message, 'error');
+                }
+                cancelEdit(container);
+            })
+            .catch(error => {
+                showNotification('An error occurred while saving changes.', 'error');
+                console.error('Error:', error);
+                cancelEdit(container);
+            });
+        }
+    });
+    
+    // Handle cancel button clicks using event delegation
+    document.addEventListener('click', function(e) {
+        if (e.target.matches('[data-cancel-button]')) {
+            const container = e.target.closest('.editable-container');
+            cancelEdit(container);
+        }
+    });
+});
+
+function cancelEdit(container) {
+    // Restore original content
+    container.querySelectorAll('[data-editable]').forEach(field => {
+        const input = field.querySelector('input, textarea, select');
+        if (input) {
+            field.textContent = input.dataset.originalValue;
+        }
+    });
+    
+    // Remove action buttons
+    const actionButtons = container.querySelector('.flex.gap-2');
+    if (actionButtons) {
+        actionButtons.remove();
+    }
+    
+    // Show edit button
+    const editButton = container.querySelector('[data-edit-button]');
+    if (editButton) {
+        editButton.style.display = '';
+    }
+}
+
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `fixed bottom-4 right-4 p-4 rounded-lg shadow-lg text-white ${
+        type === 'success' ? 'bg-green-600 dark:bg-green-500' :
+        type === 'error' ? 'bg-red-600 dark:bg-red-500' :
+        'bg-blue-600 dark:bg-blue-500'
+    }`;
+    notification.textContent = message;
+    
+    document.body.appendChild(notification);
+    
+    // Remove after 5 seconds
+    setTimeout(() => {
+        notification.remove();
+    }, 5000);
+}