django-cfg 1.4.75__py3-none-any.whl → 1.4.77__py3-none-any.whl

django_cfg/static/admin/js/alpine/commands-panel.js

@@ -0,0 +1,139 @@
+/**
+ * Commands Panel Alpine.js Component
+ *
+ * Manages command search, filtering, and category toggling
+ */
+
+function commandsPanelComponent(totalCommands) {
+    return {
+        searchQuery: '',
+        totalCommands: totalCommands,
+        visibleCommands: totalCommands,
+        expandedCategories: new Set(),
+
+        init() {
+            // Keyboard shortcuts
+            document.addEventListener('keydown', (e) => {
+                // Focus search with Ctrl+F or Cmd+F
+                if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+                    e.preventDefault();
+                    this.$refs.searchInput?.focus();
+                }
+
+                // Clear search with Escape
+                if (e.key === 'Escape' && document.activeElement === this.$refs.searchInput) {
+                    this.clearSearch();
+                    this.$refs.searchInput?.blur();
+                }
+            });
+        },
+
+        search() {
+            const query = this.searchQuery.toLowerCase().trim();
+            let visibleCount = 0;
+
+            // Get all categories
+            const categories = document.querySelectorAll('[id^="content-"]');
+
+            categories.forEach(category => {
+                const categoryName = category.id.replace('content-', '');
+                const commands = category.querySelectorAll('.command-item');
+                let categoryHasVisibleCommands = false;
+
+                commands.forEach(command => {
+                    const commandName = command.querySelector('.command-name')?.textContent.toLowerCase() || '';
+                    const commandDesc = command.querySelector('.command-description')?.textContent.toLowerCase() || '';
+
+                    if (!query || commandName.includes(query) || commandDesc.includes(query)) {
+                        command.style.display = 'block';
+                        categoryHasVisibleCommands = true;
+                        visibleCount++;
+                    } else {
+                        command.style.display = 'none';
+                    }
+                });
+
+                // Show/hide category based on whether it has visible commands
+                const categoryHeader = document.querySelector(`button[data-category="${categoryName}"]`);
+                const categoryContainer = categoryHeader?.parentElement;
+
+                if (categoryContainer) {
+                    if (categoryHasVisibleCommands) {
+                        categoryContainer.style.display = 'block';
+
+                        // Auto-expand categories when searching
+                        if (query) {
+                            this.expandedCategories.add(categoryName);
+                        }
+                    } else {
+                        categoryContainer.style.display = 'none';
+                    }
+                }
+            });
+
+            this.visibleCommands = visibleCount;
+        },
+
+        clearSearch() {
+            this.searchQuery = '';
+            this.visibleCommands = this.totalCommands;
+
+            // Show all commands and categories
+            const categories = document.querySelectorAll('[id^="content-"]');
+            const allCommands = document.querySelectorAll('.command-item');
+
+            categories.forEach(category => {
+                const categoryName = category.id.replace('content-', '');
+                const categoryHeader = document.querySelector(`button[data-category="${categoryName}"]`);
+                const categoryContainer = categoryHeader?.parentElement;
+
+                if (categoryContainer) {
+                    categoryContainer.style.display = 'block';
+                }
+
+                // Collapse all categories
+                this.expandedCategories.delete(categoryName);
+            });
+
+            allCommands.forEach(command => {
+                command.style.display = 'block';
+            });
+        },
+
+        toggleCategory(categoryName) {
+            if (this.expandedCategories.has(categoryName)) {
+                this.expandedCategories.delete(categoryName);
+            } else {
+                this.expandedCategories.add(categoryName);
+            }
+        },
+
+        isCategoryExpanded(categoryName) {
+            return this.expandedCategories.has(categoryName);
+        },
+
+        get showNoResults() {
+            return this.visibleCommands === 0 && this.searchQuery.trim() !== '';
+        },
+
+        get showClearButton() {
+            return this.searchQuery.trim() !== '';
+        }
+    };
+}
+
+// Register component when Alpine initializes
+document.addEventListener('alpine:init', () => {
+    Alpine.data('commandsPanel', commandsPanelComponent);
+});
+
+// Global wrapper for backward compatibility
+window.toggleCategory = function(category) {
+    const panel = document.querySelector('[x-data*="commandsPanel"]');
+    if (panel && Alpine) {
+        const component = Alpine.$data(panel);
+        if (component && component.toggleCategory) {
+            component.toggleCategory(category);
+        }
+    }
+};

django_cfg/static/admin/js/alpine/commands-section.js

@@ -0,0 +1,260 @@
+/**
+ * Commands Section Alpine.js Component
+ *
+ * Manages command execution, modals, search, and category toggling
+ */
+
+function commandsSectionComponent(totalCommands) {
+    return {
+        // State
+        totalCommands: totalCommands,
+        visibleCommands: totalCommands,
+        searchQuery: '',
+        expandedCategories: new Set(),
+
+        // Modals
+        showConfirmModal: false,
+        showOutputModal: false,
+
+        // Current command
+        currentCommand: '',
+        currentCommandApp: '',
+        currentCommandDescription: '',
+
+        // Output
+        commandOutput: '',
+        commandStatus: 'idle', // idle, running, success, error
+        statusText: '',
+        statusClass: '',
+
+        init() {
+            // Keyboard shortcuts
+            document.addEventListener('keydown', (e) => {
+                // ESC to close modals
+                if (e.key === 'Escape') {
+                    this.showConfirmModal = false;
+                    this.showOutputModal = false;
+                }
+            });
+        },
+
+        // Search functionality
+        search() {
+            const query = this.searchQuery.toLowerCase().trim();
+            let visibleCount = 0;
+
+            // Get all categories
+            const categories = document.querySelectorAll('.category-block');
+
+            categories.forEach(categoryBlock => {
+                const commands = categoryBlock.querySelectorAll('.command-item');
+                let categoryHasVisibleCommands = false;
+
+                commands.forEach(command => {
+                    const commandName = command.querySelector('.command-name')?.textContent.toLowerCase() || '';
+                    const commandDesc = command.dataset.description?.toLowerCase() || '';
+
+                    if (!query || commandName.includes(query) || commandDesc.includes(query)) {
+                        command.style.display = 'block';
+                        categoryHasVisibleCommands = true;
+                        visibleCount++;
+                    } else {
+                        command.style.display = 'none';
+                    }
+                });
+
+                // Show/hide category
+                if (categoryHasVisibleCommands) {
+                    categoryBlock.style.display = 'block';
+
+                    // Auto-expand when searching
+                    if (query) {
+                        const category = categoryBlock.querySelector('.category-toggle')?.dataset.category;
+                        if (category) {
+                            this.expandedCategories.add(category);
+                        }
+                    }
+                } else {
+                    categoryBlock.style.display = 'none';
+                }
+            });
+
+            this.visibleCommands = visibleCount;
+        },
+
+        clearSearch() {
+            this.searchQuery = '';
+            this.visibleCommands = this.totalCommands;
+
+            // Show all
+            document.querySelectorAll('.category-block').forEach(block => {
+                block.style.display = 'block';
+            });
+            document.querySelectorAll('.command-item').forEach(item => {
+                item.style.display = 'block';
+            });
+
+            // Collapse all
+            this.expandedCategories.clear();
+        },
+
+        // Category toggle
+        toggleCategory(category) {
+            if (this.expandedCategories.has(category)) {
+                this.expandedCategories.delete(category);
+            } else {
+                this.expandedCategories.add(category);
+            }
+        },
+
+        isCategoryExpanded(category) {
+            return this.expandedCategories.has(category);
+        },
+
+        // Command confirmation
+        confirmCommand(commandName, commandApp, commandDesc) {
+            this.currentCommand = commandName;
+            this.currentCommandApp = commandApp || '';
+            this.currentCommandDescription = commandDesc || '';
+            this.showConfirmModal = true;
+        },
+
+        cancelExecution() {
+            this.showConfirmModal = false;
+            this.currentCommand = '';
+        },
+
+        // Command execution
+        async executeCommand() {
+            this.showConfirmModal = false;
+            this.showOutputModal = true;
+            this.commandOutput = '';
+            this.commandStatus = 'running';
+            this.statusText = 'Executing...';
+            this.statusClass = 'bg-yellow-500 animate-pulse';
+
+            const commandName = this.currentCommand;
+
+            try {
+                const response = await fetch('/cfg/commands/execute/', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': window.getCookie('csrftoken')
+                    },
+                    body: JSON.stringify({
+                        command: commandName,
+                        args: [],
+                        options: {}
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const {done, value} = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+
+                    lines.forEach(line => {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                this.handleCommandData(data);
+                            } catch (e) {
+                                console.error('Error parsing SSE data:', e);
+                            }
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('Error executing command:', error);
+                this.addOutput(`\n❌ Error: ${error.message}`, 'error');
+                this.commandStatus = 'error';
+                this.statusText = 'Error';
+                this.statusClass = 'bg-red-500';
+            }
+        },
+
+        handleCommandData(data) {
+            switch (data.type) {
+                case 'start':
+                    this.addOutput(`🚀 Starting command: ${data.command}\n📝 Arguments: ${data.args.join(' ')}\n\n`, 'info');
+                    this.commandStatus = 'running';
+                    this.statusText = 'Executing...';
+                    this.statusClass = 'bg-yellow-500 animate-pulse';
+                    break;
+
+                case 'output':
+                    this.addOutput(data.line + '\n', 'output');
+                    break;
+
+                case 'complete':
+                    const success = data.return_code === 0;
+                    this.commandStatus = success ? 'success' : 'error';
+                    this.statusText = success ? 'Completed' : 'Failed';
+                    this.statusClass = success ? 'bg-green-500' : 'bg-red-500';
+
+                    let message = `${success ? '✅' : '❌'} Command completed with exit code: ${data.return_code}`;
+                    if (data.execution_time) {
+                        message += ` (${data.execution_time}s)`;
+                    }
+                    this.addOutput('\n' + message, success ? 'success' : 'error');
+                    break;
+
+                case 'error':
+                    this.addOutput(`❌ Error: ${data.error}\n`, 'error');
+                    this.commandStatus = 'error';
+                    this.statusText = 'Error';
+                    this.statusClass = 'bg-red-500';
+                    break;
+            }
+
+            // Auto-scroll
+            this.$nextTick(() => {
+                const outputEl = this.$refs.commandOutput;
+                if (outputEl) {
+                    outputEl.scrollTop = outputEl.scrollHeight;
+                }
+            });
+        },
+
+        addOutput(text, type = 'output') {
+            this.commandOutput += text;
+        },
+
+        closeOutputModal() {
+            this.showOutputModal = false;
+        },
+
+        copyOutput() {
+            navigator.clipboard.writeText(this.commandOutput).then(() => {
+                // Could add a toast notification here
+                console.log('Output copied to clipboard');
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+            });
+        },
+
+
+        get showClearButton() {
+            return this.searchQuery.trim() !== '';
+        },
+
+        get showNoResults() {
+            return this.visibleCommands === 0 && this.searchQuery.trim() !== '';
+        }
+    };
+}
+
+// Register component
+document.addEventListener('alpine:init', () => {
+    Alpine.data('commandsSection', commandsSectionComponent);
+});

django_cfg/static/admin/js/alpine/dashboard-tabs.js

@@ -0,0 +1,46 @@
+/**
+ * Dashboard Tabs Alpine.js Component
+ *
+ * Manages dashboard tabs with URL hash navigation and browser history
+ */
+
+function dashboardTabsComponent() {
+    return {
+        activeTab: 0,
+        tabNames: ['overview', 'zones', 'users', 'system', 'stats', 'app-stats', 'commands', 'widgets'],
+
+        init() {
+            // Initialize from URL hash or default to first tab
+            this.activeTab = this.getTabFromHash();
+
+            // Handle browser back/forward buttons
+            window.addEventListener('hashchange', () => {
+                this.activeTab = this.getTabFromHash();
+            });
+        },
+
+        switchTab(index) {
+            this.activeTab = index;
+
+            // Update URL hash
+            if (this.tabNames[index]) {
+                history.replaceState(null, null, '#' + this.tabNames[index]);
+            }
+        },
+
+        getTabFromHash() {
+            const hash = window.location.hash.substring(1); // Remove #
+            const tabIndex = this.tabNames.indexOf(hash);
+            return tabIndex >= 0 ? tabIndex : 0; // Default to first tab
+        },
+
+        isActive(index) {
+            return this.activeTab === index;
+        }
+    };
+}
+
+// Register component when Alpine initializes
+document.addEventListener('alpine:init', () => {
+    Alpine.data('dashboardTabs', dashboardTabsComponent);
+});

django_cfg/static/admin/js/alpine/system-metrics.js

@@ -0,0 +1,20 @@
+/**
+ * System Metrics Alpine.js Component
+ *
+ * Provides reactive width styling for health percentage bars
+ */
+
+function systemMetricsComponent(metricsData) {
+    return {
+        metrics: metricsData || {},
+
+        getBarStyle(percentage) {
+            return `width: ${percentage}%`;
+        }
+    };
+}
+
+// Register component
+document.addEventListener('alpine:init', () => {
+    Alpine.data('systemMetrics', systemMetricsComponent);
+});

django_cfg/static/admin/js/alpine/toggle-section.js

@@ -0,0 +1,28 @@
+/**
+ * Toggle Section Alpine.js Component
+ *
+ * Simple collapsible section toggle
+ */
+
+function toggleSectionComponent() {
+    return {
+        expandedSections: new Set(),
+
+        toggleSection(sectionId) {
+            if (this.expandedSections.has(sectionId)) {
+                this.expandedSections.delete(sectionId);
+            } else {
+                this.expandedSections.add(sectionId);
+            }
+        },
+
+        isSectionExpanded(sectionId) {
+            return this.expandedSections.has(sectionId);
+        }
+    };
+}
+
+// Register component
+document.addEventListener('alpine:init', () => {
+    Alpine.data('toggleSection', toggleSectionComponent);
+});

django_cfg/static/admin/js/utils.js

@@ -0,0 +1,60 @@
+/**
+ * Django CFG Utility Functions
+ *
+ * Modern ES6+ utility functions for the admin interface
+ * These are minimal utilities that don't require Alpine.js
+ */
+
+/**
+ * Get CSRF token from cookies
+ * @param {string} name - Cookie name (usually 'csrftoken')
+ * @returns {string|null} Cookie value or null if not found
+ */
+function getCookie(name) {
+    if (!document.cookie) return null;
+
+    const cookies = document.cookie.split(';');
+    for (const cookie of cookies) {
+        const [cookieName, cookieValue] = cookie.trim().split('=');
+        if (cookieName === name) {
+            return decodeURIComponent(cookieValue);
+        }
+    }
+    return null;
+}
+
+/**
+ * Copy text to clipboard with visual feedback
+ * @param {Event} event - Click event from button
+ * @param {string} text - Text to copy
+ */
+async function copyToClipboard(event, text) {
+    try {
+        await navigator.clipboard.writeText(text);
+
+        const button = event?.target?.closest('button');
+        if (!button) return;
+
+        // Store original state
+        const originalHTML = button.innerHTML;
+        const originalClasses = button.className;
+
+        // Show success state
+        button.innerHTML = '<span class="material-icons text-xs mr-1">check</span>Copied';
+        button.className = 'inline-flex items-center justify-center px-3 py-2 bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white rounded-lg text-xs font-medium transition-colors';
+
+        // Reset after 2 seconds
+        setTimeout(() => {
+            button.innerHTML = originalHTML;
+            button.className = originalClasses;
+        }, 2000);
+    } catch (err) {
+        console.error('Failed to copy to clipboard:', err);
+    }
+}
+
+// Export to window for global access
+if (typeof window !== 'undefined') {
+    window.getCookie = getCookie;
+    window.copyToClipboard = copyToClipboard;
+}

django_cfg/templates/admin/components/modal.html

@@ -29,7 +29,7 @@
                 {% endif %}
                 
                 {% if closable %}
-                <button onclick="{{ close_function|default:'closeModal()' }}" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
+                <button @click="{{ close_function|default:'close' }}" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
                     <span class="material-icons">close</span>
                 </button>
                 {% endif %}

django_cfg/templates/admin/constance/change_list.html

@@ -8,48 +8,9 @@
     {{ block.super }}
     {{ media.js }}
     <script type="text/javascript" src="{% static 'admin/js/constance.js' %}"></script>
-    
-    <!-- Enhanced Constance UI Styles -->
-    <style>
-        /* Smooth transitions for all interactive elements */
-        .constance-expandable {
-            transition: all 0.2s ease-in-out;
-        }
-        
-        /* Better hover states */
-        .constance tr:hover {
-            background-color: rgba(0, 0, 0, 0.02);
-        }
-        
-        .dark .constance tr:hover {
-            background-color: rgba(255, 255, 255, 0.02);
-        }
-        
-        /* Improved focus states for accessibility */
-        .constance a:focus,
-        .constance button:focus {
-            outline: 2px solid rgb(59, 130, 246);
-            outline-offset: 2px;
-            border-radius: 4px;
-        }
-        
-        /* Better spacing for long text */
-        .constance .break-words {
-            word-break: break-word;
-            overflow-wrap: break-word;
-            hyphens: auto;
-        }
-        
-        /* Smooth animations for expand/collapse */
-        .constance [x-show] {
-            transition: opacity 0.2s ease-in-out;
-        }
-        
-        /* Icon rotation animation */
-        .constance .material-symbols-outlined {
-            transition: transform 0.3s ease-in-out;
-        }
-    </style>
+
+    <!-- Constance UI Styles -->
+    <link rel="stylesheet" href="{% static 'admin/css/constance.css' %}"}
 {% endblock %}
 
 {% block content %}

django_cfg/templates/admin/index.html

@@ -71,14 +71,6 @@
     {% endif %}
 {% endblock %}
 
-{% block documentation_tab %}
-    {% if documentation_section %}
-        {{ documentation_section|safe }}
-    {% else %}
-        {% include 'admin/snippets/tabs/documentation_tab.html' %}
-    {% endif %}
-{% endblock %}
-
 {% block widgets_tab %}
     {% if widgets_section %}
         {{ widgets_section|safe }}

django_cfg/templates/admin/layouts/base_dashboard.html

@@ -55,6 +55,8 @@
 
 {% block footer %}
     {{ block.super }}
-    <script src="{% static 'admin/js/dashboard.js' %}"></script>
-    <script src="{% static 'admin/js/commands.js' %}"></script>
+
+    <!-- Utils.js is loaded in dashboard_with_tabs.html extrahead -->
+    <!-- All legacy Vanilla JS files have been migrated to Alpine.js components -->
+    <!-- Old files removed: dashboard.js, commands.js -->
 {% endblock %}