Luccado/formflow-rocket-forms

1// Main JavaScript for Apollo Forms Dashboard2document.addEventListener('DOMContentLoaded', function() {3    console.log('Apollo Dashboard loaded');4 5    // Initialize components6    initTheme();7    initForms();8    initAnalytics();9    initEventListeners();10 11    // Display welcome message12    setTimeout(() => {13        if (!localStorage.getItem('apollo-welcome-shown')) {14            Swal.fire({15                title: 'Bem-vindo ao Apollo!',16                text: 'Comece a criar formulários incríveis em poucos minutos.',17                icon: 'success',18                confirmButtonText: 'Vamos lá!',19                confirmButtonColor: '#6366f1',20                background: document.body.classList.contains('dark-theme') ? '#1e293b' : '#fff',21                color: document.body.classList.contains('dark-theme') ? '#f1f5f9' : '#1e293b',22            });23            localStorage.setItem('apollo-welcome-shown', 'true');24        }25    }, 1000);26});27 28// Theme management29function initTheme() {30    const savedTheme = localStorage.getItem('apollo-theme') || 'light';31    const body = document.body;32    33    if (savedTheme === 'dark') {34        body.classList.remove('light-theme');35        body.classList.add('dark-theme');36    } else {37        body.classList.remove('dark-theme');38        body.classList.add('light-theme');39    }40}41 42// Forms management43function initForms() {44    // Simulate loading forms from API45    const formsContainer = document.getElementById('formsContainer');46    if (!formsContainer) return;47 48    // Use mock data for demo49    const mockForms = [50        { id: 1, name: 'Pesquisa de Satisfação', type: 'survey', responses: 150, updated: '2023-11-15', color: 'primary' },51        { id: 2, name: 'Cadastro de Evento', type: 'registration', responses: 89, updated: '2023-11-14', color: 'success' },52        { id: 3, name: 'Feedback de Produto', type: 'feedback', responses: 203, updated: '2023-11-13', color: 'warning' },53        { id: 4, name: 'Ordem de Serviço', type: 'order', responses: 42, updated: '2023-11-12', color: 'danger' },54        { id: 5, name: 'Avaliação de Desempenho', type: 'survey', responses: 67, updated: '2023-11-11', color: 'info' },55        { id: 6, name: 'Inscrição Workshop', type: 'registration', responses: 312, updated: '2023-11-10', color: 'primary' },56    ];57 58    renderForms(mockForms);59}60 61function renderForms(forms) {62    const container = document.getElementById('formsContainer');63    const emptyState = document.getElementById('emptyState');64    const totalFormsEl = document.getElementById('totalForms');65    const totalResponsesEl = document.getElementById('totalResponses');66 67    if (!container) return;68 69    if (forms.length === 0) {70        if (emptyState) emptyState.classList.remove('d-none');71        container.innerHTML = '';72        if (totalFormsEl) totalFormsEl.textContent = '0';73        if (totalResponsesEl) totalResponsesEl.textContent = '0';74        return;75    }76 77    if (emptyState) emptyState.classList.add('d-none');78 79    container.innerHTML = forms.map(form => `80        <div class="form-card" data-aos="fade-up">81            <div class="form-card-header" style="background: linear-gradient(135deg, var(--primary), var(--secondary));">82                <div>83                    <h5 class="form-title text-white">${form.name}</h5>84                    <span class="badge bg-light text-dark">${form.type}</span>85                </div>86                <i class="fas fa-ellipsis-v text-white"></i>87            </div>88            <div class="form-card-body">89                <p class="small">Última atualização: ${form.updated}</p>90                <div class="progress mb-3" style="height: 8px; border-radius: 4px;">91                    <div class="progress-bar" style="width: ${Math.min(form.responses / 3, 100)}%; background: linear-gradient(135deg, var(--primary), var(--secondary));"></div>92                </div>93                <div class="form-meta">94                    <span><i class="fas fa-reply me-1"></i> ${form.responses} respostas</span>95                    <div>96                        <button class="btn btn-sm btn-outline-primary me-1" onclick="viewForm(${form.id})">Ver</button>97                        <button class="btn btn-sm btn-primary" onclick="editForm(${form.id})">Editar</button>98                    </div>99                </div>100            </div>101        </div>102    `).join('');103 104    // Update stats105    if (totalFormsEl) totalFormsEl.textContent = forms.length;106    if (totalResponsesEl) {107        const totalResponses = forms.reduce((sum, f) => sum + f.responses, 0);108        totalResponsesEl.textContent = totalResponses.toLocaleString();109    }110}111 112// Analytics (mock data)113function initAnalytics() {114    // Simulate loading analytics115    const totalUsersEl = document.getElementById('totalUsers');116    if (totalUsersEl) {117        // Random number for demo118        totalUsersEl.textContent = (Math.floor(Math.random() * 200) + 300).toLocaleString();119    }120}121 122// Event listeners123function initEventListeners() {124    // Create form button125    const createFormBtn = document.getElementById('createFormBtn');126    if (createFormBtn) {127        createFormBtn.addEventListener('click', () => {128            Swal.fire({129                title: 'Criar Novo Formulário',130                html: `131                    <input type="text" id="swal-form-name" class="swal2-input" placeholder="Nome do formulário">132                    <select id="swal-form-type" class="swal2-input">133                        <option value="survey">Pesquisa</option>134                        <option value="registration">Cadastro</option>135                        <option value="feedback">Feedback</option>136                        <option value="order">Pedido</option>137                        <option value="custom">Personalizado</option>138                    </select>139                `,140                showCancelButton: true,141                confirmButtonText: 'Criar',142                cancelButtonText: 'Cancelar',143                background: document.body.classList.contains('dark-theme') ? '#1e293b' : '#fff',144                color: document.body.classList.contains('dark-theme') ? '#f1f5f9' : '#1e293b',145                confirmButtonColor: '#6366f1',146                preConfirm: () => {147                    const name = document.getElementById('swal-form-name').value;148                    const type = document.getElementById('swal-form-type').value;149                    if (!name) {150                        Swal.showValidationMessage('Por favor, insira um nome');151                        return false;152                    }153                    return { name, type };154                }155            }).then((result) => {156                if (result.isConfirmed) {157                    // In a real app, you would send to API158                    Swal.fire({159                        icon: 'success',160                        title: 'Formulário Criado!',161                        text: `"${result.value.name}" foi criado com sucesso.`,162                        confirmButtonColor: '#6366f1',163                    });164                    // Reload forms165                    initForms();166                }167            });168        });169    }170 171    // Search functionality172    const searchInput = document.querySelector('input[type="search"]');173    if (searchInput) {174        searchInput.addEventListener('input', function(e) {175            const searchTerm = e.target.value.toLowerCase();176            // Filter forms (in real app, make API call)177            console.log('Searching for:', searchTerm);178        });179    }180 181    // Template buttons182    document.querySelectorAll('.template-use-btn').forEach(btn => {183        btn.addEventListener('click', function() {184            const templateName = this.closest('.card').querySelector('h5').textContent;185            Swal.fire({186                title: `Usar template "${templateName}"?`,187                text: 'Este template será carregado no editor.',188                icon: 'question',189                showCancelButton: true,190                confirmButtonText: 'Usar Template',191                confirmButtonColor: '#6366f1',192            });193        });194    });195}196 197// Global functions198window.viewForm = function(id) {199    Swal.fire({200        title: 'Visualizando Formulário',201        html: `ID: ${id}<br><br>Em breve você terá uma visualização completa com análises detalhadas.`,202        icon: 'info',203        confirmButtonText: 'Fechar',204        confirmButtonColor: '#6366f1',205        background: document.body.classList.contains('dark-theme') ? '#1e293b' : '#fff',206        color: document.body.classList.contains('dark-theme') ? '#f1f5f9' : '#1e293b',207    });208};209 210window.editForm = function(id) {211    Swal.fire({212        title: 'Editando Formulário',213        html: `ID: ${id}<br><br>Você será redirecionado para o editor de formulários.`,214        icon: 'warning',215        showCancelButton: true,216        confirmButtonText: 'Ir para Editor',217        cancelButtonText: 'Cancelar',218        confirmButtonColor: '#6366f1',219        background: document.body.classList.contains('dark-theme') ? '#1e293b' : '#fff',220        color: document.body.classList.contains('dark-theme') ? '#f1f5f9' : '#1e293b',221    }).then((result) => {222        if (result.isConfirmed) {223            // In real app, navigate to editor224            window.location.href = `/editor.html?id=${id}`;225        }226    });227};228 229// Export forms function230window.exportForms = function() {231    Swal.fire({232        title: 'Exportar Formulários',233        text: 'Escolha o formato para exportação:',234        icon: 'question',235        showCancelButton: true,236        confirmButtonText: 'CSV',237        cancelButtonText: 'JSON',238        showDenyButton: true,239        denyButtonText: 'PDF',240        confirmButtonColor: '#10b981',241        cancelButtonColor: '#6366f1',242        denyButtonColor: '#ef4444',243        background: document.body.classList.contains('dark-theme') ? '#1e293b' : '#fff',244        color: document.body.classList.contains('dark-theme') ? '#f1f5f9' : '#1e293b',245    }).then((result) => {246        if (result.isConfirmed) {247            Swal.fire('Exportado!', 'Seus formulários foram exportados como CSV.', 'success');248        } else if (result.dismiss === Swal.DismissReason.cancel) {249            Swal.fire('Exportado!', 'Seus formulários foram exportados como JSON.', 'success');250        } else if (result.isDenied) {251            Swal.fire('Exportado!', 'Seus formulários foram exportados como PDF.', 'success');252        }253    });254};255 256// Real-time updates simulation257setInterval(() => {258    const totalResponsesEl = document.getElementById('totalResponses');259    if (totalResponsesEl) {260        const current = parseInt(totalResponsesEl.textContent.replace(/,/g, '')) || 0;261        const increment = Math.floor(Math.random() * 5);262        totalResponsesEl.textContent = (current + increment).toLocaleString();263    }264}, 10000); // Update every 10 seconds