django-cfg 1.4.74__py3-none-any.whl → 1.4.76__py3-none-any.whl

django_cfg/templates/admin/layouts/dashboard_with_tabs.html

@@ -6,425 +6,29 @@
     {{ block.super }}
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Removed Tailwind CDN - using CSS-only solution -->
-    
-    <script>
-    // Dashboard tabs functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const tabs = document.querySelectorAll('#dashboard-tabs button');
-        const contents = document.querySelectorAll('.tab-content');
-        
-        if (!tabs.length || !contents.length) return;
-        
-        // Tab names for URL hash
-        const tabNames = ['overview', 'zones', 'users', 'system', 'stats', 'app-stats', 'commands', 'documentation', 'widgets'];
-        
-        // Global function for tab switching
-        window.switchTab = function(idx, updateHash = true) {
-            tabs.forEach((t, i) => {
-                if (i === idx) {
-                    // Active tab
-                    t.classList.add('active');
-                } else {
-                    // Inactive tab  
-                    t.classList.remove('active');
-                }
-            });
-            
-            contents.forEach((content, i) => {
-                content.style.display = i === idx ? 'block' : 'none';
-                content.classList.toggle('active', i === idx);
-            });
-            
-            // Update URL hash
-            if (updateHash && tabNames[idx]) {
-                history.replaceState(null, null, '#' + tabNames[idx]);
-            }
-        };
-        
-        // Function to get tab index from hash
-        function getTabFromHash() {
-            const hash = window.location.hash.substring(1); // Remove #
-            const tabIndex = tabNames.indexOf(hash);
-            return tabIndex >= 0 ? tabIndex : 0; // Default to first tab
-        }
-        
-        // Add click handlers
-        tabs.forEach((tab, idx) => {
-            tab.onclick = function(e) {
-                e.preventDefault();
-                switchTab(idx, true);
-            };
-        });
-        
-        // Handle browser back/forward buttons
-        window.addEventListener('hashchange', function() {
-            const tabIndex = getTabFromHash();
-            switchTab(tabIndex, false); // Don't update hash to avoid loop
-        });
-        
-        // Activate tab based on URL hash or default to first tab
-        const initialTab = getTabFromHash();
-        switchTab(initialTab, false);
-    });
-    
-    // Global functions for components
-    window.toggleCategory = function(category) {
-        const content = document.getElementById(`content-${category}`);
-        const icon = document.getElementById(`icon-${category}`);
-        
-        if (!content || !icon) return;
-        
-        if (content.style.display === 'none' || content.style.display === '') {
-            content.style.display = 'block';
-            icon.style.transform = 'rotate(0deg)';
-            icon.textContent = 'expand_more';
-        } else {
-            content.style.display = 'none';
-            icon.style.transform = 'rotate(-90deg)';
-            icon.textContent = 'expand_less';
-        }
-    };
 
-    // Command execution functions
-    window.copyToClipboard = function(text) {
-        navigator.clipboard.writeText(text).then(function() {
-            const button = event.target.closest('button');
-            const originalText = button.innerHTML;
-            button.innerHTML = '<span class="material-icons text-xs mr-1">check</span>Copied';
-            button.classList.remove('bg-gray-100', 'dark:bg-gray-700', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
-            button.classList.add('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
-            
-            setTimeout(function() {
-                button.innerHTML = originalText;
-                button.classList.remove('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
-                button.classList.add('bg-gray-100', 'dark:bg-gray-700', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
-            }, 2000);
-        }).catch(function(err) {
-            console.error('Could not copy text: ', err);
-        });
-    };
+    <!-- Alpine.js Components - Load before Alpine.js -->
+    {% load static %}
+    <script src="{% static 'admin/js/utils.js' %}"></script>
+    <script src="{% static 'admin/js/alpine/dashboard-tabs.js' %}"></script>
 
-    // No JS needed - using pure CSS solution
+    <!-- Alpine.js Collapse Plugin (must load before Alpine.js) -->
+    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
 
-    window.executeCommand = function(commandName) {
-        const modal = document.getElementById('commandModal');
-        const commandNameEl = document.getElementById('commandName');
-        const commandOutput = document.getElementById('commandOutput');
-        const commandStatus = document.getElementById('commandStatus');
-        
-        if (!modal || !commandNameEl || !commandOutput || !commandStatus) {
-            console.error('Command modal elements not found');
-            return;
-        }
+    <!-- Alpine.js - Load last with defer -->
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
-        commandNameEl.textContent = commandName;
-        commandOutput.textContent = '';
-        commandStatus.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Executing...</span>';
-        modal.classList.remove('hidden');
-        
-        fetch('/cfg/commands/execute/', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-CSRFToken': getCookie('csrftoken')
-            },
-            body: JSON.stringify({
-                command: commandName,
-                args: [],
-                options: {}
-            })
-        })
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            
-            function readStream() {
-                return reader.read().then(({done, value}) => {
-                    if (done) return;
-                    
-                    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));
-                                handleCommandData(data);
-                            } catch (e) {
-                                console.error('Error parsing command data:', e);
-                            }
-                        }
-                    });
-                    
-                    return readStream();
-                });
-            }
-            
-            return readStream();
-        })
-        .catch(error => {
-            console.error('Error executing command:', error);
-            commandOutput.textContent += `\n❌ Error: ${error.message}`;
-            commandStatus.innerHTML = '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Error</span>';
-        });
-    };
+    <!-- Admin Styles -->
+    <link rel="stylesheet" href="{% static 'admin/css/layout.css' %}">
+    <link rel="stylesheet" href="{% static 'admin/css/theme.css' %}">
+    <link rel="stylesheet" href="{% static 'admin/css/tabs.css' %}">
 
-    function handleCommandData(data) {
-        const output = document.getElementById('commandOutput');
-        const status = document.getElementById('commandStatus');
-        
-        if (!output || !status) return;
-        
-        switch (data.type) {
-            case 'start':
-                // Clear previous content and add header
-                output.innerHTML = '';
-                addLogLine(output, `🚀 Starting command: ${data.command}`, 'info');
-                addLogLine(output, `📝 Arguments: ${data.args.join(' ')}`, 'info');
-                addLogLine(output, '', 'spacer');
-                status.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Executing...</span>';
-                break;
-            case 'output':
-                addLogLine(output, data.line, 'output');
-                scrollToBottom(output);
-                break;
-            case 'complete':
-                const success = data.return_code === 0;
-                status.innerHTML = success 
-                    ? '<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div><span class="text-sm font-medium text-green-600 dark:text-green-400">Completed</span>'
-                    : '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Failed</span>';
-                
-                addLogLine(output, '', 'spacer');
-                let completionMessage = `${success ? '✅' : '❌'} Command completed with exit code: ${data.return_code}`;
-                if (data.execution_time) {
-                    completionMessage += ` (${data.execution_time}s)`;
-                }
-                addLogLine(output, completionMessage, success ? 'success' : 'error');
-                scrollToBottom(output);
-                break;
-            case 'error':
-                addLogLine(output, `❌ Error: ${data.error}`, 'error');
-                status.innerHTML = '<div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div><span class="text-sm font-medium text-red-600 dark:text-red-400">Error</span>';
-                scrollToBottom(output);
-                break;
-        }
-    }
-
-    function addLogLine(container, text, type = 'output') {
-        const line = document.createElement('div');
-        line.className = 'log-line';
-        
-        // Add type-specific styling
-        switch (type) {
-            case 'info':
-                line.className += ' text-blue-600 dark:text-blue-400 font-medium';
-                break;
-            case 'success':
-                line.className += ' text-green-600 dark:text-green-400 font-medium';
-                break;
-            case 'error':
-                line.className += ' text-red-600 dark:text-red-400 font-medium';
-                break;
-            case 'spacer':
-                line.className += ' h-2';
-                break;
-            default:
-                line.className += ' text-gray-700 dark:text-gray-300';
-        }
-        
-        // Set content
-        if (type === 'spacer') {
-            line.innerHTML = '&nbsp;';
-        } else {
-            line.textContent = text;
-        }
-        
-        container.appendChild(line);
-    }
-
-    function scrollToBottom(element) {
-        if (!element) return;
-        
-        // Принудительно скроллим элемент
-        setTimeout(() => {
-            element.scrollTop = element.scrollHeight;
-            console.log('Scrolled to bottom:', element.scrollTop, element.scrollHeight);
-        }, 50);
-    }
-
-    window.closeCommandModal = function() {
-        const modal = document.getElementById('commandModal');
-        if (modal) {
-            modal.classList.add('hidden');
-        }
-    };
-
-    function getCookie(name) {
-        let cookieValue = null;
-        if (document.cookie && document.cookie !== '') {
-            const cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
-                const cookie = cookies[i].trim();
-                if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
-                }
-            }
-        }
-        return cookieValue;
-    }
-    </script>
-    
-    <style>
-    /* Dashboard tab styles */
-    .tab-content {
-        display: none;
-        animation: fadeIn 0.3s ease-in-out;
-    }
-    .tab-content.active {
-        display: block;
-    }
-    #dashboard-tabs button {
-        cursor: pointer;
-        transition: all 0.2s ease-in-out;
-    }
-    
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-    
-    /* 🎨 Theme classes - cross-theme compatible cards */
-    .theme-card {
-        background-color: rgba(255, 255, 255, 0.2) !important;
-        backdrop-filter: blur(10px) !important;
-        color: #111827 !important;
-        border-color: rgba(229, 231, 235, 0.6) !important;
-        border-radius: 10px !important;
-        transition: all 0.2s ease;
-    }
-    
-    html.dark .theme-card {
-        background-color: rgba(31, 41, 55, 0.2) !important;
-        backdrop-filter: blur(10px) !important;
-        color: white !important;
-        border-color: rgba(55, 65, 81, 0.6) !important;
-        border-radius: 10px !important;
-    }
-    
-    .theme-text {
-        color: #111827 !important;
-    }
-    
-    html.dark .theme-text {
-        color: white !important;
-    }
-    
-    .theme-border {
-        border-color: rgba(229, 231, 235, 0.6) !important;
-    }
-    
-    html.dark .theme-border {
-        border-color: rgba(55, 65, 81, 0.6) !important;
-    }
-
-    /* Fix grid layout */
-    .overview-grid {
-        display: grid !important;
-        grid-template-columns: 1fr !important;
-    }
-    
-    @media (min-width: 1280px) {
-        .overview-grid {
-            grid-template-columns: 2fr 1fr !important;
-        }
-    }
-
-    /* 🎯 Tab styling */
-    #dashboard-tabs {
-        border-bottom: 2px solid #e5e7eb !important;
-    }
-    
-    html.dark #dashboard-tabs {
-        border-bottom-color: #374151 !important;
-    }
-    
-    #dashboard-tabs button {
-        background-color: #f3f4f6 !important;
-        color: #6b7280 !important;
-        border-bottom: 2px solid transparent !important;
-        transition: all 0.2s ease !important;
-    }
-    
-    html.dark #dashboard-tabs button {
-        background-color: #374151 !important;
-        color: #9ca3af !important;
-    }
-    
-    #dashboard-tabs button:hover {
-        background-color: #e5e7eb !important;
-        color: #374151 !important;
-    }
-    
-    html.dark #dashboard-tabs button:hover {
-        background-color: #4b5563 !important;
-        color: #d1d5db !important;
-    }
-    
-    /* Active tab */
-    #dashboard-tabs button.active,
-    #dashboard-tabs button[class*="bg-blue"] {
-        background-color: #2563eb !important;
-        color: white !important;
-        border-bottom-color: #2563eb !important;
-    }
-    
-    html.dark #dashboard-tabs button.active,
-    html.dark #dashboard-tabs button[class*="bg-blue"] {
-        background-color: #3b82f6 !important;
-        color: white !important;
-        border-bottom-color: #3b82f6 !important;
-    }
-
-    /* 🎯 Universal card borders - transparent cross-theme */
-    .card-border,
-    .border-base-200,
-    [class*="border-base-200"],
-    [class*="dark:border-base-700"] {
-        border-color: rgba(229, 231, 235, 0.6) !important;
-    }
-    
-    html.dark .card-border,
-    html.dark .border-base-200,
-    html.dark [class*="border-base-200"],
-    html.dark [class*="dark:border-base-700"] {
-        border-color: rgba(55, 65, 81, 0.6) !important;
-    }
-
-    /* 🎯 Icon spacing defaults - more specific targeting */
-    .theme-card .material-icons:not(.no-margin) {
-        margin-right: 0.75rem !important; /* 12px default spacing */
-    }
-    
-    /* Override for specific contexts */
-    .theme-card .flex.items-center .material-icons {
-        margin-right: 0.75rem !important;
-    }
-    
-    .theme-card .status-badge .material-icons {
-        margin-right: 0.25rem !important; /* 4px for badges */
-    }
-    
-    /* Fix for buttons and interactive elements */
-    .theme-card button .material-icons,
-    .theme-card a .material-icons {
-        margin-right: 0.5rem !important;
-    }
-    </style>
+    <!-- JavaScript Component Notes:
+         - Dashboard tabs functionality: dashboard-tabs.js Alpine component
+         - Toggle category functionality: commands-panel.js Alpine component
+         - Command execution: command-modal.js Alpine component
+         - copyToClipboard and getCookie: dashboard.js (loaded in base_dashboard.html)
+    -->
 {% endblock %}
 
 {% block breadcrumbs %}{% endblock %}
@@ -443,120 +47,118 @@
 {% block content %}
     <!-- Main Dashboard Container -->
     {% component "unfold/components/container.html" %}
-        <!-- Tabs Navigation -->
-        <div class="flex gap-1 mb-4" id="dashboard-tabs">
-            <button 
-                type="button" 
-                data-tab="0"
-                class="px-4 py-3 rounded-t-lg focus:outline-none font-semibold active"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">dashboard</span>
-                Overview
-            </button>
-            <button 
-                type="button" 
-                data-tab="1"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">public</span>
-                API Zones
-            </button>
-            <button 
-                type="button" 
-                data-tab="2"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">people</span>
-                Users
-            </button>
-            <button 
-                type="button" 
-                data-tab="3"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">settings</span>
-                System
-            </button>
-            <button 
-                type="button" 
-                data-tab="4"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">analytics</span>
-                Statistics
-            </button>
-            <button 
-                type="button" 
-                data-tab="5"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">apps</span>
-                App Stats
-            </button>
-            <button
-                type="button"
-                data-tab="6"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">terminal</span>
-                Commands
-            </button>
-            <button
-                type="button"
-                data-tab="7"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">description</span>
-                Documentation
-            </button>
-            <button
-                type="button"
-                data-tab="8"
-                class="px-4 py-3 rounded-t-lg focus:outline-none"
-            >
-                <span class="material-icons mr-2 align-middle text-sm">widgets</span>
-                Widgets
-            </button>
-        </div>
+        <div x-data="dashboardTabs">
+            <!-- Tabs Navigation -->
+            <div class="flex gap-1 mb-4" id="dashboard-tabs">
+                <button
+                    type="button"
+                    @click="switchTab(0)"
+                    :class="isActive(0) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none font-semibold"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">dashboard</span>
+                    Overview
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(1)"
+                    :class="isActive(1) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">public</span>
+                    API Zones
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(2)"
+                    :class="isActive(2) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">people</span>
+                    Users
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(3)"
+                    :class="isActive(3) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">settings</span>
+                    System
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(4)"
+                    :class="isActive(4) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">analytics</span>
+                    Statistics
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(5)"
+                    :class="isActive(5) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">apps</span>
+                    App Stats
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(6)"
+                    :class="isActive(6) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">terminal</span>
+                    Commands
+                </button>
+                <button
+                    type="button"
+                    @click="switchTab(7)"
+                    :class="isActive(7) ? 'active' : ''"
+                    class="px-4 py-3 rounded-t-lg focus:outline-none"
+                >
+                    <span class="material-icons mr-2 align-middle text-sm">widgets</span>
+                    Widgets
+                </button>
+            </div>
 
-        <div class="flex flex-col gap-5">
+            <div class="flex flex-col gap-5">
 
             <!-- Tab Content with improved spacing -->
-            <div class="tab-content active" data-tab="0">
+            <div class="tab-content" x-show="isActive(0)">
                 {% block overview_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="1">
+            <div class="tab-content" x-show="isActive(1)">
                 {% block zones_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="2">
+            <div class="tab-content" x-show="isActive(2)">
                 {% block users_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="3">
+            <div class="tab-content" x-show="isActive(3)">
                 {% block system_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="4">
+            <div class="tab-content" x-show="isActive(4)">
                 {% block stats_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="5">
+            <div class="tab-content" x-show="isActive(5)">
                 {% block app_stats_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="6">
+            <div class="tab-content" x-show="isActive(6)">
                 {% block commands_tab %}{% endblock %}
             </div>
 
-            <div class="tab-content" data-tab="7">
-                {% block documentation_tab %}{% endblock %}
-            </div>
-
-            <div class="tab-content" data-tab="8">
+            <div class="tab-content" x-show="isActive(7)">
                 {% block widgets_tab %}{% endblock %}
             </div>
+            </div>
         </div>
 
         <!-- Footer Section -->