Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', function() { | |
| const documentInput = document.getElementById('documentInput'); | |
| const frameworksInput = document.getElementById('frameworksInput'); | |
| const analyzeBtn = document.getElementById('analyzeBtn'); | |
| const analysisSection = document.getElementById('analysisSection'); | |
| const uploadedDocuments = document.getElementById('uploadedDocuments'); | |
| const documentsList = document.getElementById('documentsList'); | |
| let uploadedFiles = []; | |
| // Show documents section when files are selected | |
| documentInput.addEventListener('change', function() { | |
| if (this.files.length > 0) { | |
| uploadedFiles.push({ | |
| name: this.files[0].name, | |
| type: 'Documento', | |
| date: new Date().toLocaleString() | |
| }); | |
| updateDocumentsList(); | |
| uploadedDocuments.classList.remove('hidden'); | |
| } | |
| }); | |
| frameworksInput.addEventListener('change', function() { | |
| if (this.files.length > 0) { | |
| Array.from(this.files).forEach(file => { | |
| uploadedFiles.push({ | |
| name: file.name, | |
| type: 'Marco', | |
| date: new Date().toLocaleString() | |
| }); | |
| }); | |
| updateDocumentsList(); | |
| uploadedDocuments.classList.remove('hidden'); | |
| } | |
| }); | |
| function updateDocumentsList() { | |
| documentsList.innerHTML = ''; | |
| uploadedFiles.forEach((file, index) => { | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <i data-feather="${file.type === 'Documento' ? 'file-text' : 'book'}" class="w-5 h-5 text-blue-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-900">${file.name}</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${file.type === 'Documento' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'}"> | |
| ${file.type} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${file.date}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button onclick="removeDocument(${index})" class="text-red-600 hover:text-red-900 mr-3"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| <button onclick="viewDocument(${index})" class="text-blue-600 hover:text-blue-900"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| `; | |
| documentsList.appendChild(row); | |
| }); | |
| feather.replace(); | |
| } | |
| window.removeDocument = function(index) { | |
| uploadedFiles.splice(index, 1); | |
| updateDocumentsList(); | |
| if (uploadedFiles.length === 0) { | |
| uploadedDocuments.classList.add('hidden'); | |
| analysisSection.classList.add('hidden'); | |
| } | |
| }; | |
| window.viewDocument = function(index) { | |
| alert(`Visualizando documento: ${uploadedFiles[index].name}`); | |
| // In a real app, this would open a document viewer | |
| }; | |
| // Analyze button functionality | |
| analyzeBtn.addEventListener('click', function() { | |
| if (!documentInput.files[0] || !frameworksInput.files[0]) { | |
| alert('Por favor sube ambos: el documento a analizar y los marcos funcionales'); | |
| return; | |
| } | |
| // Simulate analysis (in a real app, this would call an API) | |
| simulateAnalysis(); | |
| }); | |
| function simulateAnalysis() { | |
| analyzeBtn.disabled = true; | |
| analyzeBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Analizando iniciativas...'; | |
| feather.replace(); | |
| // Simulate processing delay | |
| setTimeout(() => { | |
| // Generate mock initiatives analysis | |
| const initiatives = [ | |
| { | |
| name: 'Digitalizaci贸n de procesos', | |
| pdiObjectives: ['OE1. Transformaci贸n digital', 'OE3. Eficiencia operativa'], | |
| cfirAspects: ['Intervenci贸n', 'Contexto interno'], | |
| match: 82, | |
| details: [ | |
| { aspect: 'Alineaci贸n con OE1', match: 90, comment: 'Excelente cobertura de objetivos de digitalizaci贸n' }, | |
| { aspect: 'Alineaci贸n con OE3', match: 75, comment: 'Podr铆a incluir m谩s m茅tricas de eficiencia' }, | |
| { aspect: 'CFIR: Intervenci贸n', match: 80, comment: 'Buen dise帽o de la intervenci贸n' }, | |
| { aspect: 'CFIR: Contexto interno', match: 65, comment: 'Necesita mayor an谩lisis del contexto actual' } | |
| ] | |
| }, | |
| { | |
| name: 'Capacitaci贸n continua', | |
| pdiObjectives: ['OE2. Desarrollo de talento', 'OE4. Cultura organizacional'], | |
| cfirAspects: ['Caracter铆sticas individuales', 'Proceso de implementaci贸n'], | |
| match: 78, | |
| details: [ | |
| { aspect: 'Alineaci贸n con OE2', match: 85, comment: 'Cubre bien los objetivos de desarrollo' }, | |
| { aspect: 'Alineaci贸n con OE4', match: 70, comment: 'Podr铆a fortalecer aspectos culturales' }, | |
| { aspect: 'CFIR: Caracter铆sticas individuales', match: 82, comment: 'Buena consideraci贸n de competencias' }, | |
| { aspect: 'CFIR: Proceso de implementaci贸n', match: 60, comment: 'Falta plan detallado de implementaci贸n' } | |
| ] | |
| } | |
| ]; | |
| const recommendations = [ | |
| 'Priorizar la iniciativa de digitalizaci贸n por su alto alineamiento estrat茅gico', | |
| 'Reforzar el an谩lisis de contexto organizacional en todas las iniciativas', | |
| 'Establecer indicadores claros para medir impacto en cultura organizacional' | |
| ]; | |
| // Display initiatives analysis | |
| displayInitiativesAnalysis(initiatives, recommendations); | |
| analyzeBtn.disabled = false; | |
| analyzeBtn.innerHTML = '<i data-feather="refresh-cw" class="mr-2"></i> Reanalizar'; | |
| feather.replace(); | |
| }, 3000); | |
| } | |
| function displayInitiativesAnalysis(initiatives, recommendations) { | |
| const pdiContainer = document.getElementById('pdiResults'); | |
| const cfirContainer = document.getElementById('cfirResults'); | |
| const recContainer = document.getElementById('recommendations'); | |
| // Clear previous results | |
| pdiContainer.innerHTML = ''; | |
| cfirContainer.innerHTML = ''; | |
| recContainer.innerHTML = ''; | |
| // Display initiatives analysis | |
| initiatives.forEach(initiative => { | |
| const initiativeCard = document.createElement('div'); | |
| initiativeCard.className = 'mb-6 p-4 bg-white border rounded-lg shadow-sm analysis-result'; | |
| initiativeCard.innerHTML = ` | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h3 class="font-semibold text-lg text-gray-800">${initiative.name}</h3> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-sm font-medium mr-2">Alineamiento general:</span> | |
| <span class="text-sm font-semibold ${initiative.match > 75 ? 'text-green-600' : initiative.match > 50 ? 'text-yellow-600' : 'text-red-600'}">${initiative.match}%</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"> | |
| ${initiative.pdiObjectives.length} objetivos PDI | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800"> | |
| ${initiative.cfirAspects.length} aspectos CFIR | |
| </span> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Objetivos PDI relacionados:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600 space-y-1"> | |
| ${initiative.pdiObjectives.map(obj => `<li>${obj}</li>`).join('')} | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-2">Aspectos CFIR:</h4> | |
| <ul class="list-disc list-inside text-sm text-gray-600 space-y-1"> | |
| ${initiative.cfirAspects.map(aspect => `<li>${aspect}</li>`).join('')} | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Detalles de alineaci贸n:</h4> | |
| <div class="space-y-3"> | |
| ${initiative.details.map(detail => ` | |
| <div> | |
| <div class="flex justify-between mb-1 text-sm"> | |
| <span>${detail.aspect}</span> | |
| <span class="font-semibold">${detail.match}%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="h-2 rounded-full ${detail.aspect.includes('OE') ? 'bg-green-500' : 'bg-blue-500'}" style="width: ${detail.match}%"></div> | |
| </div> | |
| <p class="text-xs mt-1 text-gray-500">${detail.comment}</p> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| `; | |
| pdiContainer.appendChild(initiativeCard); | |
| }); | |
| // Display recommendations | |
| const recHeader = document.createElement('h3'); | |
| recHeader.className = 'font-medium text-yellow-700 mb-3 flex items-center'; | |
| recHeader.innerHTML = '<i data-feather="alert-triangle" class="mr-2"></i> Recomendaciones estrat茅gicas'; | |
| recContainer.appendChild(recHeader); | |
| recommendations.forEach((rec, index) => { | |
| const recItem = document.createElement('div'); | |
| recItem.className = 'mb-3 p-3 bg-yellow-50 border border-yellow-100 rounded-lg flex items-start analysis-result'; | |
| recItem.innerHTML = ` | |
| <span class="flex-shrink-0 bg-yellow-100 text-yellow-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 text-sm font-medium">${index + 1}</span> | |
| <span class="text-yellow-700">${rec}</span> | |
| `; | |
| recContainer.appendChild(recItem); | |
| }); | |
| } | |
| }); |