Update js/proa.js

js/proa.js

@@ -1,28 +1,27 @@
-// js/proa.js - Lógica para el visor de Guías PROA (v6.1 - Dropdowns + Debugging)
+// js/proa.js - Lógica para el visor de Guías PROA (v10 - Un Solo Desplegable)
 
 // ======================================================================
 // BLOCK START: DOM Elements Selection & Initial Setup
 // ======================================================================
-console.log("[proa.js v6.1] Script cargado. Esperando DOMContentLoaded...");
+console.log("[proa.js v10] Script cargado. Esperando DOMContentLoaded...");
 
 window.addEventListener('DOMContentLoaded', () => {
-  console.log("[proa.js v6.1] DOMContentLoaded detectado. Iniciando setup...");
+  console.log("[proa.js v10] DOMContentLoaded detectado. Iniciando setup...");
 
-  // Selectores principales
-  const categorySelector = document.getElementById('categorySelector');
+  // Selector ÚNICO de Guías
   const guideSelector = document.getElementById('guideSelector');
-  const guideSelectorContainer = document.getElementById('guideSelectorContainer');
   const guideContentDisplay = document.getElementById('guide-content-display');
   const togglePediatricCheckbox = document.getElementById('togglePediatric');
 
   const guidesDataUrl = 'guides_data.json'; // Asume que está en proa/
 
-  if (!categorySelector || !guideSelector || !guideSelectorContainer || !guideContentDisplay || !togglePediatricCheckbox) {
-    console.error("[proa.js v6.1] Error Crítico: No se encontraron elementos DOM esenciales.");
+  // Verificar elementos críticos
+  if (!guideSelector || !guideContentDisplay || !togglePediatricCheckbox) {
+    console.error("[proa.js v10] Error Crítico: No se encontraron elementos DOM esenciales (selector, display o checkbox).");
     guideContentDisplay.innerHTML = '<p class="text-red-500 font-semibold text-center py-10">Error: Interfaz no inicializada.</p>';
     return;
   }
-  console.log("[proa.js v6.1] Elementos DOM encontrados.");
+  console.log("[proa.js v10] Elementos DOM encontrados.");
   // ======================================================================
   // BLOCK END: DOM Elements Selection & Initial Setup
   // ======================================================================
@@ -32,7 +31,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // ======================================================================
   let allGuides = []; 
   let currentGuideFile = null;
-  let categories = []; 
+  // Ya no necesitamos la variable 'categories' para la UI
   // ======================================================================
   // BLOCK END: State Variables
   // ======================================================================
@@ -41,50 +40,43 @@ window.addEventListener('DOMContentLoaded', () => {
   // BLOCK START: Function to Fetch Guides Data (from JSON)
   // ======================================================================
   async function loadGuidesData() {
-    console.log(`[proa.js v6.1] Iniciando loadGuidesData desde: ${guidesDataUrl}`);
-    categorySelector.innerHTML = '<option value="">Cargando...</option>';
-    guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>';
-    guideSelectorContainer.classList.add('hidden');
-    guideContentDisplay.innerHTML = '<div class="text-center py-16"><i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i><p class="mt-2 text-gray-500">Cargando datos...</p></div>';
+    console.log(`[proa.js v10] Iniciando loadGuidesData desde: ${guidesDataUrl}`);
+    guideSelector.innerHTML = '<option value="">Cargando...</option>';
+    guideSelector.disabled = true; // Deshabilitar mientras carga
+    guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-spinner fa-spin text-3xl"></i><p class="mt-2">Cargando datos...</p></div>';
     allGuides = [];
-    categories = [];
 
     try {
-      console.log("[proa.js v6.1] Realizando fetch...");
+      console.log("[proa.js v10] Realizando fetch...");
       const response = await fetch(guidesDataUrl); 
-      console.log(`[proa.js v6.1] Fetch completado. Status: ${response.status}`);
-      if (!response.ok) {
-         throw new Error(`Error HTTP ${response.status} al cargar ${guidesDataUrl}. ¿Existe el archivo en proa/ y es accesible?`);
-      }
+      console.log(`[proa.js v10] Fetch completado. Status: ${response.status}`);
+      if (!response.ok) throw new Error(`Error HTTP ${response.status} al cargar ${guidesDataUrl}.`);
       
-      console.log("[proa.js v6.1] Parseando JSON...");
+      console.log("[proa.js v10] Parseando JSON...");
       allGuides = await response.json(); 
-      console.log("[proa.js v6.1] JSON parseado.");
+      console.log("[proa.js v10] JSON parseado.");
 
-      if (!Array.isArray(allGuides)) {
-          console.error("[proa.js v6.1] El contenido parseado no es un Array:", allGuides);
-          throw new Error("El archivo JSON no contiene un array válido.");
-       }
+      if (!Array.isArray(allGuides)) throw new Error("JSON no es un array válido.");
        
-      // Filtrar por si alguna entrada no tiene los campos mínimos
       allGuides = allGuides.filter(g => g.id && g.title && g.category && g.file);
-      console.log(`[proa.js v6.1] Guías válidas filtradas: ${allGuides.length}`);
+      console.log(`[proa.js v10] Guías válidas filtradas: ${allGuides.length}`);
+      
+      if (allGuides.length === 0) throw new Error("No hay guías válidas en los datos.");
       
-      // Extraer y ordenar categorías únicas
-      console.log("[proa.js v6.1] Extrayendo y ordenando categorías...");
-      categories = [...new Set(allGuides.map(g => g.category))].sort();
-      console.log(`[proa.js v6.1] Categorías encontradas: ${categories.join(', ')}`);
+      // Ordenar guías (opcional, pero útil para el desplegable)
+      allGuides.sort((a, b) => a.title.localeCompare(b.title));
       
-      console.log("[proa.js v6.1] Llamando a populateCategorySelector...");
-      populateCategorySelector(); 
-      console.log("[proa.js v6.1] Llamando a resetToInitialState...");
-      resetToInitialState(); 
-      console.log("[proa.js v6.1] Carga inicial completada con éxito.");
+      console.log("[proa.js v10] Llamando a populateGuideSelector para mostrar Adultos por defecto...");
+      populateGuideSelector(); // Poblar el desplegable (mostrará Adultos por defecto)
+      resetContentArea(); // Mostrar mensaje inicial en área de contenido
+      guideSelector.disabled = false; // Habilitar selector
+      console.log("[proa.js v10] Carga inicial completada.");
 
     } catch (error) {
-      console.error("[proa.js v6.1] Error durante loadGuidesData:", error);
-      categorySelector.innerHTML = '<option value="">Error carga</option>';
-      guideContentDisplay.innerHTML = `<p class="text-red-600 font-semibold text-center py-10">Error al cargar datos: ${error.message}. Revisa la consola.</p>`;
+      console.error("[proa.js v10] Error durante loadGuidesData:", error);
+      guideSelector.innerHTML = '<option value="">Error carga</option>';
+      guideSelector.disabled = true;
+      guideContentDisplay.innerHTML = `<p class="text-red-600 font-semibold text-center py-10">Error al cargar datos: ${error.message}. Revisa la consola y el archivo JSON.</p>`;
     }
   }
   // ======================================================================
@@ -95,87 +87,48 @@ window.addEventListener('DOMContentLoaded', () => {
   // BLOCK START: UI Update Functions
   // ======================================================================
 
-  function resetToInitialState() {
-       console.log("[proa.js v6.1] Reseteando a estado inicial.");
-       try {
-           categorySelector.value = "";
-           guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>';
-           guideSelectorContainer.classList.add('hidden');
-           guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-file-alt text-5xl mb-4"></i><p>Selecciona una categoría y guía.</p></div>';
-           currentGuideFile = null;
-       } catch (e) {
-            console.error("[proa.js v6.1] Error en resetToInitialState:", e);
-       }
-  }
-
-  function populateCategorySelector() {
-      console.log("[proa.js v6.1] Poblando selector de categorías...");
-      try {
-          categorySelector.innerHTML = '<option value="">-- Seleccione Categoría --</option>'; 
-          if (categories.length === 0) {
-               console.warn("[proa.js v6.1] No hay categorías para poblar.");
-                categorySelector.innerHTML = '<option value="">No hay categorías</option>'; 
-               return;
-          }
-          categories.forEach(category => {
-              const option = document.createElement('option');
-              option.value = category;
-              option.textContent = category;
-              categorySelector.appendChild(option);
-          });
-          console.log("[proa.js v6.1] Selector de categorías poblado OK.");
-      } catch (e) {
-          console.error("[proa.js v6.1] Error en populateCategorySelector:", e);
-           categorySelector.innerHTML = '<option value="">Error</option>'; 
-      }
+  function resetContentArea() {
+       guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-file-alt text-5xl mb-4"></i><p>Selecciona una guía del desplegable.</p></div>';
+       currentGuideFile = null;
   }
 
+  // Llena el selector ÚNICO de guías aplicando el filtro
   function populateGuideSelector() {
-      const selectedCategory = categorySelector.value;
       const showOnlyPediatric = togglePediatricCheckbox.checked;
-      console.log(`[proa.js v6.1] Poblando selector de guías para Categoría: '${selectedCategory}', Solo Pediátricas: ${showOnlyPediatric}`);
+      console.log(`[proa.js v10] Poblando selector de guías. Mostrar solo Pediátricas: ${showOnlyPediatric}`);
       
-      try {
-          guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>'; 
-          currentGuideFile = null; 
-
-          if (!selectedCategory) {
-              guideSelectorContainer.classList.add('hidden'); 
-              // No resetear contenido aquí, solo ocultar selector
-              console.log("[proa.js v6.1] No hay categoría seleccionada, ocultando selector de guías.");
-              return;
-          }
+      // Limpiar selector ANTES del try-catch
+      guideSelector.innerHTML = `<option value="">-- Seleccione Guía (${showOnlyPediatric ? 'Pediátricas' : 'Adultos'}) --</option>`; 
+      currentGuideFile = null; // Deseleccionar guía al repoblar
 
-          const guidesInCategory = allGuides.filter(guide => 
-              guide.category === selectedCategory && 
-              guide.isPediatric === showOnlyPediatric
-          );
-          
-          guidesInCategory.sort((a,b) => a.title.localeCompare(b.title)); 
-
-          if (guidesInCategory.length > 0) {
-              guidesInCategory.forEach(guide => {
+      try {
+          // Filtrar por Adulto o Pediátrico ESTRICTAMENTE
+          const filteredGuides = allGuides.filter(guide => guide.isPediatric === showOnlyPediatric);
+
+           // Ordenar alfabéticamente las guías filtradas
+           filteredGuides.sort((a, b) => a.title.localeCompare(b.title));
+           
+          if (filteredGuides.length > 0) {
+              const fragment = document.createDocumentFragment(); 
+              filteredGuides.forEach(guide => {
                   const option = document.createElement('option');
-                  option.value = guide.file; 
-                  option.textContent = guide.title;
-                  guideSelector.appendChild(option);
+                  option.value = guide.file; // El valor es el nombre del archivo
+                  option.textContent = guide.title; // El texto es el título
+                  // Añadir "(PED)" al texto si es pediátrica para mayor claridad en el desplegable
+                   if (guide.isPediatric) {
+                      option.textContent += " (PED)"; 
+                   }
+                  fragment.appendChild(option);
               });
-              guideSelectorContainer.classList.remove('hidden'); 
-              console.log(`[proa.js v6.1] Selector de guías poblado con ${guidesInCategory.length} guías.`);
-              // Si el contenido estaba mostrando algo, lo limpiamos al cambiar las opciones de guía
-              if (guideContentDisplay.firstChild && !guideContentDisplay.firstChild.classList?.contains('text-gray-400')) {
-                   guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-hand-pointer text-5xl mb-4"></i><p>Selecciona una guía específica.</p></div>';
-              }
+              guideSelector.appendChild(fragment); // Añadir opciones
+              console.log(`[proa.js v10] Selector poblado con ${filteredGuides.length} guías.`);
           } else {
-              guideSelector.innerHTML = '<option value="">-- No hay guías --</option>'; 
-              guideSelectorContainer.classList.remove('hidden'); 
-               guideContentDisplay.innerHTML = `<div class="text-center py-16 text-gray-400"><i class="fas fa-info-circle text-5xl mb-4"></i><p>No hay guías ${showOnlyPediatric ? 'pediátricas' : 'de adultos'} para '${selectedCategory}'.</p></div>`;
-              console.log(`[proa.js v6.1] No se encontraron guías para los filtros actuales.`);
+              guideSelector.innerHTML = `<option value="">-- No hay guías ${showOnlyPediatric ? 'Pediátricas' : 'Adultos'} --</option>`; 
+              console.log(`[proa.js v10] No se encontraron guías para el filtro actual.`);
           }
        } catch (e) {
-            console.error("[proa.js v6.1] Error en populateGuideSelector:", e);
+            console.error("[proa.js v10] Error en populateGuideSelector:", e);
              guideSelector.innerHTML = '<option value="">Error</option>'; 
-             guideSelectorContainer.classList.add('hidden');
        }
   }
   // ======================================================================
@@ -183,16 +136,14 @@ window.addEventListener('DOMContentLoaded', () => {
   // ======================================================================
 
   // ======================================================================
-  // BLOCK START: Function to Load External Guide Content (Sin cambios v5->v6.1)
+  // BLOCK START: Function to Load External Guide Content (Sin cambios v6.2->v10)
   // ======================================================================
   async function loadGuideContent(guideFileName) {
     if (!guideFileName) { 
-         // Si se selecciona "-- Seleccione Guía --", limpiar contenido
-         guideContentDisplay.innerHTML = '<div class="text-center py-16 text-gray-400"><i class="fas fa-hand-pointer text-5xl mb-4"></i><p>Selecciona una guía específica.</p></div>';
-         currentGuideFile = null;
+         resetContentArea();
          return;
     }
-    console.log(`[proa.js v6.1] Solicitando contenido de: ${guideFileName}`);
+    console.log(`[proa.js v10] Solicitando contenido de: ${guideFileName}`);
     guideContentDisplay.innerHTML = '<div class="text-center py-20"><i class="fas fa-spinner fa-spin text-3xl text-gray-400"></i><p class="mt-2 text-gray-500">Cargando contenido...</p></div>'; 
     const guideUrl = guideFileName; 
     currentGuideFile = guideFileName; 
@@ -203,25 +154,24 @@ window.addEventListener('DOMContentLoaded', () => {
       const htmlText = await response.text();
       const parser = new DOMParser();
       const doc = parser.parseFromString(htmlText, 'text/html');
-      // Selector del contenido principal en las guías individuales
       const contentNode = doc.querySelector('.max-w-4xl.mx-auto.px-4.py-8') || doc.body; 
 
       if (contentNode) {
         const clonedContent = contentNode.cloneNode(true);
         const scripts = clonedContent.querySelectorAll('script');
         scripts.forEach(script => script.remove());
-        if (scripts.length > 0) console.log(`[proa.js v6.1] Eliminados ${scripts.length} script(s) de ${guideFileName}.`);
+        if (scripts.length > 0) console.log(`[proa.js v10] Eliminados ${scripts.length} script(s) de ${guideFileName}.`);
         
         guideContentDisplay.innerHTML = ''; 
         guideContentDisplay.appendChild(clonedContent); 
-        console.log(`[proa.js v6.1] Contenido de ${guideFileName} mostrado.`);
+        console.log(`[proa.js v10] Contenido de ${guideFileName} mostrado.`);
         guideContentDisplay.scrollTop = 0; 
 
       } else {
          throw new Error(`No se encontró nodo de contenido en '${guideFileName}'.`);
       }
     } catch (error) {
-       console.error(`[proa.js v6.1] Error al cargar/mostrar ${guideFileName}:`, error);
+       console.error(`[proa.js v10] Error al cargar/mostrar ${guideFileName}:`, error);
        guideContentDisplay.innerHTML = `<div class="text-center py-20 text-red-600">Error: ${error.message}</div>`;
        currentGuideFile = null; 
     }
@@ -233,24 +183,19 @@ window.addEventListener('DOMContentLoaded', () => {
   // ======================================================================
   // BLOCK START: Event Listeners Setup
   // ======================================================================
-  categorySelector.addEventListener('change', () => {
-      console.log("[proa.js v6.1] Cambió la categoría.");
-      guideContentDisplay.innerHTML = ''; // Limpiar contenido
-      populateGuideSelector(); 
-  });
-
+  // Cuando cambia la guía específica seleccionada
   guideSelector.addEventListener('change', (event) => {
-       console.log("[proa.js v6.1] Cambió la guía específica.");
-      loadGuideContent(event.target.value); 
+       console.log("[proa.js v10] Cambió la guía seleccionada.");
+      loadGuideContent(event.target.value); // Cargar el contenido del archivo seleccionado
   });
 
+  // Cuando cambia el filtro pediátrico
   togglePediatricCheckbox.addEventListener('change', () => {
-      console.log('[proa.js v6.1] Cambiado filtro pediátrico.');
-      // Limpiar contenido y repoblar selector de guías (manteniendo categoría)
-      guideContentDisplay.innerHTML = ''; 
-      populateGuideSelector(); 
+      console.log('[proa.js v10] Cambiado filtro pediátrico.');
+      resetContentArea(); // Limpiar área de contenido
+      populateGuideSelector(); // Repoblar el ÚNICO desplegable con las guías filtradas
   });
-  console.log("[proa.js v6.1] Listeners añadidos.");
+  console.log("[proa.js v10] Listeners añadidos.");
   // ======================================================================
   // BLOCK END: Event Listeners Setup
   // ======================================================================
@@ -258,12 +203,11 @@ window.addEventListener('DOMContentLoaded', () => {
   // ======================================================================
   // BLOCK START: Initial Execution
   // ======================================================================
-  loadGuidesData(); // Cargar JSON e iniciar UI
-  console.log("[proa.js v6.1] Llamada inicial a loadGuidesData() realizada.");
+  loadGuidesData(); // Cargar JSON, poblar desplegable (adultos por defecto) e iniciar UI
   // ======================================================================
   // BLOCK END: Initial Execution
   // ======================================================================
 
 }); // Fin DOMContentLoaded
 
-console.log("[proa.js v6.1] Script completamente definido.");
+console.log("[proa.js v10] Script completamente definido.");