Update js/proa.js

js/proa.js

@@ -1,23 +1,27 @@
-// js/proa.js - Lógica para el visor de Guías PROA (v5 - Lista Única con Reemplazo y Botones)
+// js/proa.js - Lógica para el visor de Guías PROA (v6 - Basado en JSON y Dropdowns en Cascada)
 
 // ======================================================================
 // BLOCK START: DOM Elements Selection & Initial Setup
 // ======================================================================
-console.log("[proa.js v5] Script cargado. Esperando DOMContentLoaded...");
+console.log("[proa.js v6] Script cargado. Esperando DOMContentLoaded...");
 
 window.addEventListener('DOMContentLoaded', () => {
-  console.log("[proa.js v5] DOMContentLoaded detectado. Iniciando setup...");
+  console.log("[proa.js v6] DOMContentLoaded detectado. Iniciando setup...");
 
-  const guideIndexContainer = document.getElementById('guide-index-container'); 
-  const guideContentDisplay = document.getElementById('guide-content-display'); 
-  const togglePediatricCheckbox = document.getElementById('togglePediatric');   
+  // Selectores principales
+  const categorySelector = document.getElementById('categorySelector');
+  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/
+  const guidesDataUrl = 'guides_data.json'; // Ruta al archivo JSON (en proa/)
 
-  if (!guideIndexContainer || !guideContentDisplay || !togglePediatricCheckbox) {
-    console.error("[proa.js v5] Error Crítico: No se encontraron elementos DOM.");
-    if(guideIndexContainer) guideIndexContainer.innerHTML = '<p class="text-red-500 font-semibold">Error: Interfaz no inicializada.</p>';
-    return; 
+  // Verificar elementos críticos
+  if (!categorySelector || !guideSelector || !guideSelectorContainer || !guideContentDisplay || !togglePediatricCheckbox) {
+    console.error("[proa.js v6] Error Crítico: No se encontraron elementos DOM esenciales (selectores, contenedor o display).");
+    guideContentDisplay.innerHTML = '<p class="text-red-500 font-semibold text-center py-10">Error: No se pudo inicializar la interfaz.</p>';
+    return;
   }
   // ======================================================================
   // BLOCK END: DOM Elements Selection & Initial Setup
@@ -27,74 +31,82 @@ window.addEventListener('DOMContentLoaded', () => {
   // BLOCK START: State Variables
   // ======================================================================
   let allGuides = []; // Datos del JSON
-  let currentGuideFile = null; // Archivo de la guía activa
-  // Mapeo simple de categorías a iconos de FontAwesome (¡Añade más según necesites!)
-  const categoryIcons = {
-      "Infecciones Relacionadas con Dispositivos": "fa-syringe",
-      "Digestivo y Abdominal": "fa-stomach",
-      "Cardiovascular": "fa-heart-pulse",
-      "Gineco-Obstetricia": "fa-person-pregnant", // O fa-venus
-      "Onco-Hematología": "fa-shield-virus",
-      "Oftalmología": "fa-eye",
-      "ORL": "fa-ear-listen",
-      "Osteoarticular": "fa-bone",
-      "Piel y Partes Blandas": "fa-band-aid",
-      "Respiratorio": "fa-lungs",
-      "Neurología": "fa-brain",
-      "Pediatría General": "fa-child",
-      "Urología": "fa-toilet-paper", // O fa-bacteria
-      // Añade más categorías e iconos aquí
-      "default": "fa-book-medical" // Icono por defecto
-  };
+  let currentGuideFile = null; // Nombre del archivo de la guía activa
+  let categories = []; // Lista única de categorías
   // ======================================================================
   // BLOCK END: State Variables
   // ======================================================================
 
   // ======================================================================
-  // BLOCK START: Function to Fetch Guides Data (from JSON) - Sin Cambios
+  // BLOCK START: Function to Fetch Guides Data (from JSON)
   // ======================================================================
   async function loadGuidesData() {
-    console.log(`[proa.js v5] Cargando datos de guías desde: ${guidesDataUrl}`);
-    guideIndexContainer.innerHTML = '<p class="text-gray-500 text-sm">Cargando guías...</p>';
-    allGuides = []; 
+    console.log(`[proa.js v6] Cargando datos de guías desde: ${guidesDataUrl}`);
+    // Limpiar selectores y contenido
+    categorySelector.innerHTML = '<option value="">Cargando categorías...</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>';
+    allGuides = [];
+    categories = [];
 
     try {
-      const response = await fetch(guidesDataUrl); 
+      const response = await fetch(guidesDataUrl);
       if (!response.ok) throw new Error(`Error HTTP ${response.status} al cargar ${guidesDataUrl}`);
-      allGuides = await response.json(); 
+      allGuides = await response.json();
       if (!Array.isArray(allGuides)) throw new Error("JSON no es un array válido.");
       allGuides = allGuides.filter(g => g.id && g.title && g.category && g.file);
       
-      // Ordenar: Pediátricas separadas o juntas según preferencia, luego por categoría y título
-      allGuides.sort((a, b) => {
-          // Puedes descomentar esto si quieres agrupar Ped vs Adulto primero
-          // if (a.isPediatric !== b.isPediatric) return a.isPediatric ? 1 : -1; // Adultos primero
-          if (a.category < b.category) return -1;
-          if (a.category > b.category) return 1;
-          if (a.title < b.title) return -1;
-          if (a.title > b.title) return 1;
-           return a.isPediatric ? 1 : -1; // Si mismo título, adulto primero
-      });
-
-      console.log(`[proa.js v5] Datos JSON cargados (${allGuides.length} guías).`);
-      renderGuideIndex(); // Renderizar el índice inicial (mostrará adultos por defecto)
+      // Extraer y ordenar categorías únicas
+      categories = [...new Set(allGuides.map(g => g.category))].sort();
+      
+      console.log(`[proa.js v6] Datos JSON cargados (${allGuides.length} guías, ${categories.length} categorías).`);
+      
+      populateCategorySelector(); // Poblar el primer dropdown
+      resetToInitialState(); // Poner la UI en estado inicial limpio
 
     } catch (error) {
-      console.error("[proa.js v5] Error fatal al cargar o parsear el JSON:", error);
-      guideIndexContainer.innerHTML = `<p class="text-red-600 font-semibold">Error: ${error.message}.</p>`;
-      guideContentDisplay.innerHTML = '<p class="text-gray-500 text-center mt-10">Error al cargar datos.</p>';
+      console.error("[proa.js v6] Error fatal al cargar o parsear el JSON:", error);
+      categorySelector.innerHTML = '<option value="">Error al cargar</option>';
+      guideContentDisplay.innerHTML = `<p class="text-red-600 font-semibold text-center py-10">Error: ${error.message}.</p>`;
     }
   }
   // ======================================================================
   // BLOCK END: Function to Fetch Guides Data (from JSON)
   // ======================================================================
-
+  
   // ======================================================================
-  // BLOCK START: Function to Render Guide Index (Lista de Botones Agrupados)
+  // BLOCK START: UI Update Functions
   // ======================================================================
-  function renderGuideIndex() {
-    console.log("[proa.js v5] Renderizando índice de guías...");
-    guideIndexContainer.innerHTML = ''; // Limpiar contenedor
-    
-    // --- LÓGICA DE REEMPLAZO ---
-    const showOnly
+
+  // Pone la UI en el estado inicial (sin selecciones)
+  function resetToInitialState() {
+       categorySelector.value = "";
+       guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>';
+       guideSelectorContainer.classList.add('hidden');
+       guideContentDisplay.innerHTML = '<div class="text-center py-16"><i class="fas fa-file-alt text-5xl text-gray-300 mb-4"></i><p class="text-gray-500">Selecciona una categoría y luego una guía específica.</p></div>';
+       currentGuideFile = null;
+  }
+
+  // Llena el selector de categorías
+  function populateCategorySelector() {
+      categorySelector.innerHTML = '<option value="">-- Seleccione Categoría --</option>'; // Opción por defecto
+      categories.forEach(category => {
+          const option = document.createElement('option');
+          option.value = category;
+          option.textContent = category;
+          categorySelector.appendChild(option);
+      });
+      console.log("[proa.js v6] Selector de categorías poblado.");
+  }
+
+  // Llena el selector de guías específicas basado en la categoría y el filtro pediátrico
+  function populateGuideSelector() {
+      const selectedCategory = categorySelector.value;
+      const showOnlyPediatric = togglePediatricCheckbox.checked;
+      guideSelector.innerHTML = '<option value="">-- Seleccione Guía --</option>'; // Resetear opciones
+      currentGuideFile = null; // Deseleccionar guía al cambiar categoría o filtro
+
+      if (!selectedCategory) {
+          guideSelectorContainer.classList.add('hidden'); // Ocultar si no hay categoría
+          resetToInitialState(); // Volver al mensaje