Avalie se é possível preparar um aplicativo web com base na planilha a anexar, onde somente serão imputados os valores que não contém fórmulas, e os demais, devem ser calculados, gerados relatórios etc. Os valores a serem imputados que constam em guias do tipo "lista", devem ser imputados em um campo txt, um do lado do outro e um abaixo do outro, ou mesmo em CSV separado por |
617a965
verified
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const spreadsheetInput = document.getElementById('spreadsheet'); | |
| const inputTypeSelect = document.getElementById('inputType'); | |
| const manualInput = document.getElementById('manualInput'); | |
| const processBtn = document.getElementById('processBtn'); | |
| const dataPreview = document.getElementById('dataPreview'); | |
| const exportBtn = document.getElementById('exportBtn'); | |
| const reportBtn = document.getElementById('reportBtn'); | |
| const formulaDisplay = document.getElementById('formulaDisplay'); | |
| // Event Listeners | |
| inputTypeSelect.addEventListener('change', toggleInputType); | |
| processBtn.addEventListener('click', processData); | |
| exportBtn.addEventListener('click', exportData); | |
| reportBtn.addEventListener('click', generateReport); | |
| // Initialize | |
| toggleInputType(); | |
| feather.replace(); | |
| // Functions | |
| function toggleInputType() { | |
| const inputType = inputTypeSelect.value; | |
| if (inputType === 'text') { | |
| manualInput.placeholder = "Insira os valores (um por linha)\nExemplo:\nvalor1\nvalor2\nvalor3"; | |
| } else { | |
| manualInput.placeholder = "Insira os valores separados por |\nExemplo:\nvalor1|valor2|valor3\nvalor4|valor5|valor6"; | |
| } | |
| } | |
| function processData() { | |
| // Show processing state | |
| processBtn.disabled = true; | |
| processBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Processando...'; | |
| feather.replace(); | |
| // Simulate processing delay | |
| setTimeout(() => { | |
| // Process data based on input type | |
| const inputType = inputTypeSelect.value; | |
| let data = []; | |
| if (inputType === 'text') { | |
| data = manualInput.value.split('\n').filter(item => item.trim() !== ''); | |
| } else { | |
| data = manualInput.value.split('\n') | |
| .filter(row => row.trim() !== '') | |
| .map(row => row.split('|').map(item => item.trim())); | |
| } | |
| // Display preview | |
| displayDataPreview(data); | |
| // Display sample formulas | |
| displayFormulas(data); | |
| // Reset button | |
| processBtn.disabled = false; | |
| processBtn.innerHTML = '<i data-feather="zap" class="mr-2"></i> Processar Dados'; | |
| feather.replace(); | |
| }, 1500); | |
| } | |
| function displayDataPreview(data) { | |
| if (Array.isArray(data[0])) { | |
| // Tabular data | |
| let tableHTML = '<table class="data-table"><thead><tr>'; | |
| // Create headers (assuming first row has all columns) | |
| for (let i = 0; i < data[0].length; i++) { | |
| tableHTML += `<th>Coluna ${i+1}</th>`; | |
| } | |
| tableHTML += '</tr></thead><tbody>'; | |
| // Add rows | |
| data.forEach(row => { | |
| tableHTML += '<tr>'; | |
| row.forEach(cell => { | |
| tableHTML += `<td>${cell}</td>`; | |
| }); | |
| tableHTML += '</tr>'; | |
| }); | |
| tableHTML += '</tbody></table>'; | |
| dataPreview.innerHTML = tableHTML; | |
| } else { | |
| // Simple list | |
| let listHTML = '<ul class="space-y-1">'; | |
| data.forEach(item => { | |
| listHTML += `<li class="px-3 py-2 bg-gray-100 rounded">${item}</li>`; | |
| }); | |
| listHTML += '</ul>'; | |
| dataPreview.innerHTML = listHTML; | |
| } | |
| } | |
| function displayFormulas(data) { | |
| formulaDisplay.innerHTML = ` | |
| <h3 class="font-semibold text-gray-700 mb-2">Fórmulas Aplicadas:</h3> | |
| <ul class="space-y-2"> | |
| <li><span class="font-mono bg-gray-200 px-2 py-1 rounded">SOMA(A1:A${data.length})</span> - Soma de todos os valores</li> | |
| <li><span class="font-mono bg-gray-200 px-2 py-1 rounded">MÉDIA(A1:A${data.length})</span> - Média dos valores</li> | |
| <li><span class="font-mono bg-gray-200 px-2 py-1 rounded">MÁXIMO(A1:A${data.length})</span> - Valor máximo</li> | |
| <li><span class="font-mono bg-gray-200 px-2 py-1 rounded">MÍNIMO(A1:A${data.length})</span> - Valor mínimo</li> | |
| </ul> | |
| <p class="mt-4 text-sm text-gray-600">* As fórmulas serão calculadas automaticamente conforme os dados são processados.</p> | |
| `; | |
| } | |
| function exportData() { | |
| alert('Funcionalidade de exportação será implementada aqui. Os dados serão exportados no formato selecionado.'); | |
| } | |
| function generateReport() { | |
| alert('Relatório gerado com sucesso! Esta funcionalidade criará um PDF/Excel com os dados processados e cálculos aplicados.'); | |
| } | |
| // Handle spreadsheet file upload | |
| spreadsheetInput.addEventListener('change', function(e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| alert(`Planilha "${file.name}" selecionada. O processamento de arquivos será implementado aqui.`); | |
| // In a real app, you would use a library like SheetJS to read the file | |
| } | |
| }); | |
| }); |