django-cfg 1.4.48__py3-none-any.whl → 1.5.7__py3-none-any.whl

django_cfg/static/admin/js/alpine/command-modal.js

@@ -0,0 +1,159 @@
+/**
+ * Command Modal Alpine.js Component
+ *
+ * Manages command execution modal with tabs for output and documentation
+ * Requires: /static/admin/js/utils.js for getCookie function
+ */
+
+function commandModalComponent() {
+    return {
+        open: false,
+        commandName: '',
+        activeTab: 'output',
+        outputHtml: '',
+        docsHtml: '<p class="text-font-subtle-light dark:text-font-subtle-dark">Loading documentation...</p>',
+        statusText: 'Executing...',
+        statusClass: 'bg-yellow-500 animate-pulse',
+
+        async execute(commandName) {
+            this.commandName = commandName;
+            this.open = true;
+            this.activeTab = 'output';
+            this.outputHtml = '';
+            this.statusText = 'Executing...';
+            this.statusClass = 'bg-yellow-500 animate-pulse';
+
+            // Load documentation
+            this.loadDocumentation(commandName);
+
+            // Execute command
+            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 command data:', e);
+                            }
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('Error executing command:', error);
+                this.outputHtml += `\n❌ Error: ${error.message}`;
+                this.statusText = 'Error';
+                this.statusClass = 'bg-red-500';
+            }
+        },
+
+        handleCommandData(data) {
+            switch (data.type) {
+                case 'start':
+                    this.outputHtml = `🚀 Starting command: ${data.command}\n📝 Arguments: ${data.args.join(' ')}\n\n`;
+                    this.statusText = 'Executing...';
+                    this.statusClass = 'bg-yellow-500 animate-pulse';
+                    break;
+                case 'output':
+                    this.outputHtml += data.line + '\n';
+                    break;
+                case 'complete':
+                    const success = data.return_code === 0;
+                    this.statusText = success ? 'Completed' : 'Failed';
+                    this.statusClass = success ? 'bg-green-500' : 'bg-red-500';
+                    let completionMessage = `${success ? '✅' : '❌'} Command completed with exit code: ${data.return_code}`;
+                    if (data.execution_time) {
+                        completionMessage += ` (${data.execution_time}s)`;
+                    }
+                    this.outputHtml += '\n' + completionMessage;
+                    break;
+                case 'error':
+                    this.outputHtml += `❌ Error: ${data.error}\n`;
+                    this.statusText = 'Error';
+                    this.statusClass = 'bg-red-500';
+                    break;
+            }
+        },
+
+        async loadDocumentation(commandName) {
+            this.docsHtml = `
+                <div class="space-y-4">
+                    <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">${commandName}</h3>
+                    <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
+                        <p class="mb-2">Loading documentation for <code class="bg-base-200 dark:bg-base-700 px-2 py-1 rounded">${commandName}</code>...</p>
+                        <p class="mt-4">To view full documentation, run:</p>
+                        <pre class="bg-base-200 dark:bg-base-700 p-3 rounded-lg mt-2"><code>python manage.py help ${commandName}</code></pre>
+                    </div>
+                </div>
+            `;
+
+            try {
+                const response = await fetch(`/cfg/commands/help/${commandName}/`);
+                const data = await response.json();
+                if (data.help_text) {
+                    this.docsHtml = `
+                        <div class="space-y-4">
+                            <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">${commandName}</h3>
+                            <pre class="text-sm text-font-default-light dark:text-font-default-dark whitespace-pre-wrap">${data.help_text}</pre>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                console.error('Error loading documentation:', error);
+                this.docsHtml = `
+                    <div class="text-red-600 dark:text-red-400">
+                        <p>Failed to load documentation.</p>
+                        <p class="text-sm mt-2">Try running: <code class="bg-base-200 dark:bg-base-700 px-2 py-1 rounded">python manage.py help ${commandName}</code></p>
+                    </div>
+                `;
+            }
+        },
+
+        close() {
+            this.open = false;
+        }
+    };
+}
+
+// Register component when Alpine initializes
+document.addEventListener('alpine:init', () => {
+    Alpine.data('commandModal', commandModalComponent);
+});
+
+// Global wrapper for backward compatibility
+window.executeCommand = function(commandName) {
+    const modalEl = document.querySelector('[x-data="commandModal"]');
+    if (modalEl && Alpine) {
+        const component = Alpine.$data(modalEl);
+        if (component && component.execute) {
+            component.execute(commandName);
+        }
+    }
+};

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);
+});