Bugfix/ma us 17 usuario cuadro texto

harvester-app/src/framework/utils/js/framelayout.js

@@ -1,19 +1,30 @@
-function incluirHTML(id, url, llamada) {
+/**
+ * Inserta un fragmento HTML en un contenedor dado por ID.
+ *
+ * @param {string} idContenedor - ID del elemento donde se insertará el HTML.
+ * @param {string} url - Ruta del archivo HTML a cargar.
+ * @param {Function} [llamada] - Función a ejecutar tras la inserción del HTML.
+ */
+function incluirHTML(idContenedor, url, llamada) {
   fetch(url)
     .then(res => res.text())
     .then(html => {
-      document.getElementById(id).innerHTML = html;
-      if (llamada) llamada(); // Ejecuta la función si la mandas
+      document.getElementById(idContenedor).innerHTML = html;
+      if (llamada) llamada();
     })
-    .catch(err => {
-      console.warn(`Error al cargar ${url}: `, err);
+    .catch(error => {
+      console.warn(`Error al cargar ${url}: `, error);
     });
 }
 
-// Llamadas para insertar los componentes
-window.addEventListener("DOMContentLoaded", () => {
-  incluirHTML("sidebar-wrapper-container", "../vistas/sidebar.html", () => {
-    inicializarSidebar(); // Ejecuta el script una vez insertado el sidebar
-  });
-  incluirHTML("topbar-container", "../vistas/topBar.html");
-});
+// Inserción de componentes una vez cargado el DOM
+window.addEventListener('DOMContentLoaded', () => {
+  incluirHTML(
+    'contenedorBarraLateral',
+    '../vistas/sideBar.html',
+    () => {
+      inicializarBarraLateral();
+    }
+  );
+  incluirHTML('contenedorBarraSuperior', '../vistas/topBar.html');
+});

harvester-app/src/framework/utils/js/sidebar.js

@@ -1,163 +1,183 @@
+/**
+ * Carga dinámicamente el contenido HTML de un módulo en el contenedor principal.
+ *
+ * @param {string} seccion - Identificador de la sección a cargar
+ *   (p.ej., 'inicio', 'analisis', 'plantillas', 'formulas', 'envios', 'usuario', 'gestionUsuarios').
+ * @returns {void}
+ */
 function cargarModulo(seccion) {
-  const rutaModulo = {
-    inicio:      "../vistas/moduloInicio.html",
-    analisis:    "../vistas/moduloAnalisis.html",
-    plantillas:  "../vistas/moduloPlantillas.html",
-    formulas:    "../vistas/moduloFormulas.html",
-    envios:      "../vistas/moduloEnvios.html",
-    usuario:     "../vistas/moduloUsuario.html",
-    gestionUsuarios:     "../vistas/moduloGestionUsuarios.html"
+  const rutasModulo = {
+    inicio:          '../vistas/moduloInicio.html',
+    analisis:        '../vistas/moduloAnalisis.html',
+    plantillas:      '../vistas/moduloPlantillas.html',
+    formulas:        '../vistas/moduloFormulas.html',
+    envios:          '../vistas/moduloEnvios.html',
+    usuario:         '../vistas/moduloUsuario.html',
+    gestionUsuarios: '../vistas/moduloGestionUsuarios.html'
     // tema no va aquí
   };
 
-  const contenedor = document.querySelector(".ventana-principal");
+  const contenedorVentanaPrincipal = document.querySelector('.ventana-principal');
 
-  if (contenedor && rutaModulo[seccion]) {
-    fetch(rutaModulo[seccion])
-      .then(res => res.text())
+  if (contenedorVentanaPrincipal && rutasModulo[seccion]) {
+    fetch(rutasModulo[seccion])
+      .then(respuesta => respuesta.text())
       .then(html => {
-        contenedor.innerHTML = html;
+        contenedorVentanaPrincipal.innerHTML = html;
 
         // Inicializar el módulo según la sección
         if (seccion === 'inicio') {
-          if (window.botonCargar) {
-            window.botonCargar();
-          }
-          if (window.botonAnalisis) {
-            window.botonAnalisis();
-          }
-          if (window.botonBorrar) {
-            window.botonBorrar();
-          }
+          if (window.botonCargar)    window.botonCargar();
+          if (window.botonAnalisis)  window.botonAnalisis();
+          if (window.botonBorrar)    window.botonBorrar();
         } else if (seccion === 'analisis') {
-          if (window.cargarDatosExcel) {
-            window.cargarDatosExcel();
-          }
-          if (window.inicializarModuloAnalisis) {
-            window.inicializarModuloAnalisis();
-          }
-        } else if (seccion === 'plantillas'){
-          if (window.inicializarModuloPlantillas) {
-            window.inicializarModuloPlantillas();
-          }
-        } else if (seccion == 'usuario') {
-          if (window.inicializarModuloUsuario) {
-            window.inicializarModuloUsuario();
-          }
+            if (window.cargarDatosExcel)           window.cargarDatosExcel();
+            if (window.inicializarModuloAnalisis)  window.inicializarModuloAnalisis();
+        } else if (seccion === 'plantillas') {
+            if (window.inicializarModuloPlantillas) window.inicializarModuloPlantillas();
+        } else if (seccion === 'usuario') {
+            if (window.inicializarModuloUsuario)    window.inicializarModuloUsuario();
         }
         // Añadir más inicializaciones para otros módulos según sea necesario
       })
-      .catch(err => {
-        console.error("Error al cargar el módulo:", err);
+      .catch(error => {
+        console.error('Error al cargar el módulo:', error);
       });
   }
 }
-const topbarInfo = {
-  inicio:    { titulo: "Inicio",     icono: "../utils/iconos/Casa.svg" },
-  analisis:  { titulo: "Análisis",   icono: "../utils/iconos/GraficaBarras.svg" },
-  plantillas:{ titulo: "Plantillas", icono: "../utils/iconos/Portapapeles.svg" },
-  formulas:  { titulo: "Fórmulas",   icono: "../utils/iconos/Funcion.svg" },
-  envios:    { titulo: "Envíos",     icono: "../utils/iconos/Correo.svg" },
-  usuario:   { titulo: "Usuario",    icono: "../utils/iconos/Usuario.svg" },
-  gestionUsuarios:   { titulo: "Usuario",    icono: "../utils/iconos/Usuario.svg" }
-};
 
-function inicializarSidebar() {
-  const btnCollapse = document.getElementById('collapse-button');
-  const btnExpand = document.getElementById('expand-button');
-  const sidebarExpanded = document.getElementById('sidebar-expanded');
-  const sidebarCollapsed = document.getElementById('sidebar-collapsed');
+/**
+ * Mapa de configuración para la barra superior: títulos e íconos según sección.
+ *
+ * @constant {Object.<string, { titulo: string, icono: string }>}
+ */
+const infoBarraSuperior = {
+  inicio:          { titulo: 'Inicio',     icono: '../utils/iconos/Casa.svg' },
+  analisis:        { titulo: 'Análisis',   icono: '../utils/iconos/GraficaBarras.svg' },
+  plantillas:      { titulo: 'Plantillas', icono: '../utils/iconos/Portapapeles.svg' },
+  formulas:        { titulo: 'Fórmulas',   icono: '../utils/iconos/Funcion.svg' },
+  envios:          { titulo: 'Envíos',     icono: '../utils/iconos/Correo.svg' },
+  usuario:         { titulo: 'Usuario',    icono: '../utils/iconos/Usuario.svg' },
+  gestionUsuarios: { titulo: 'Usuario',    icono: '../utils/iconos/Usuario.svg' }
+};
 
-  if (btnCollapse && btnExpand && sidebarExpanded && sidebarCollapsed) {
-    btnCollapse.addEventListener('click', () => {
-      sidebarExpanded.style.display = 'none';
-      sidebarCollapsed.style.display = 'flex';
+/**
+ * Inicializa la barra lateral: enlaza los botones de colapsar/expandir
+ * y configura la navegación entre secciones.
+ *
+ * @returns {void}
+ */
+function inicializarBarraLateral() {
+  const botonColapsar         = document.getElementById('botonColapsar');
+  const botonExpandir         = document.getElementById('botonExpandir');
+  const barraLateralExpandida = document.getElementById('barraLateralExpandida');
+  const barraLateralColapsada = document.getElementById('barraLateralColapsada');
+
+  if (botonColapsar && botonExpandir && barraLateralExpandida && barraLateralColapsada) {
+    botonColapsar.addEventListener('click', () => {
+      barraLateralExpandida.style.display = 'none';
+      barraLateralColapsada.style.display = 'flex';
     });
-
-    btnExpand.addEventListener('click', () => {
-      sidebarCollapsed.style.display = 'none';
-      sidebarExpanded.style.display = 'flex';
+    botonExpandir.addEventListener('click', () => {
+      barraLateralColapsada.style.display = 'none';
+      barraLateralExpandida.style.display = 'flex';
     });
   }
 
-  activarBotonesSidebar();
+  activarBotonesBarraLateral();
 
-  // Siempre iniciar en el módulo "inicio"
+  // Siempre iniciar en el módulo 'inicio'
   localStorage.setItem('seccion-activa', 'inicio');
-  aplicarActivoDesdeStorage();
+  aplicarActivoDesdeAlmacenamiento();
 }
 
-function activarBotonesSidebar() {
-  const botones = document.querySelectorAll('.boton-sidebar');
+/**
+ * Añade listeners de navegación a los botones de la barra lateral.
+ *
+ * @returns {void}
+ */
+function activarBotonesBarraLateral() {
+  const botonesSidebar = document.querySelectorAll('.boton-sidebar');
 
-  botones.forEach(boton => {
+  botonesSidebar.forEach(boton => {
     boton.addEventListener('click', () => {
       const seccion = boton.getAttribute('data-seccion');
-      if (!seccion) return;
-
-      if (seccion === "tema") {
-        // Aquí más adelante activaremos modo oscuro/claro
-        return;
-      }
+      if (!seccion || seccion === 'tema') return;
 
       // Guardamos la sección real
       localStorage.setItem('seccion-activa', seccion);
-      console.log("Sección activa guardada:", seccion);
+      console.log('Sección activa guardada:', seccion);
 
       // Determinar cuál botón mostrar como activo visualmente
       const seccionVisual = seccion === 'gestionUsuarios' ? 'usuario' : seccion;
 
-      // Quitar "activo" de todos los botones
-      document.querySelectorAll('.boton-sidebar').forEach(boton => boton.classList.remove('activo'));
+      // Desactivar todos los botones
+      botonesSidebar.forEach(botonItem => botonItem.classList.remove('activo'));
 
-      // Activar el botón visualmente representativo
-      document.querySelectorAll(`.boton-sidebar[data-seccion="${seccionVisual}"]`)
-        .forEach(boton => boton.classList.add('activo'));
+      // Activar el botón correspondiente
+      document
+        .querySelectorAll(`.boton-sidebar[data-seccion='${seccionVisual}']`)
+        .forEach(botonItem => botonItem.classList.add('activo'));
 
-      // Actualizar topbar y cargar el contenido real
-      actualizarTopbar(seccion);
+      // Actualizar barra superior y cargar contenido
+      actualizarBarraSuperior(seccion);
       cargarModulo(seccion);
     });
   });
 }
 
-
-function aplicarActivoDesdeStorage() {
-  const seccion = localStorage.getItem('seccion-activa');
-  const todosBotones = document.querySelectorAll('.boton-sidebar');
-  todosBotones.forEach(boton => boton.classList.remove('activo'));
-
-  if (!seccion || seccion === "tema") return;
-
-  const seccionVisual = seccion === "gestionUsuarios" ? "usuario" : seccion;
-
-  const botonesCoincidentes = document.querySelectorAll(`.boton-sidebar[data-seccion="${seccionVisual}"]`);
-  botonesCoincidentes.forEach(boton => boton.classList.add('activo'));
-
-  actualizarTopbar(seccion);
+/**
+ * Marca el botón correspondiente según la sección activa almacenada en localStorage,
+ * y carga la sección.
+ *
+ * @returns {void}
+ */
+function aplicarActivoDesdeAlmacenamiento() {
+  const seccion             = localStorage.getItem('seccion-activa');
+  const botonesSidebarTodos = document.querySelectorAll('.boton-sidebar');
+
+  botonesSidebarTodos.forEach(botonItem => botonItem.classList.remove('activo'));
+  if (!seccion || seccion === 'tema') return;
+
+  const seccionVisual = seccion === 'gestionUsuarios' ? 'usuario' : seccion;
+  document
+    .querySelectorAll(`.boton-sidebar[data-seccion='${seccionVisual}']`)
+    .forEach(botonItem => botonItem.classList.add('activo'));
+
+  actualizarBarraSuperior(seccion);
   cargarModulo(seccion);
 }
 
-function actualizarTopbar(seccion) {
-  const tituloElem = document.getElementById('topbar-titulo');
-  const iconoElem = document.getElementById('topbar-icono');
-  const botonRegresar = document.getElementById('btn-regresar');
-
-  if (!tituloElem || !iconoElem || !topbarInfo[seccion]) return;
+/**
+ * Actualiza el título, el ícono y el estado del botón de regresar
+ * de la barra superior según la sección actual.
+ *
+ * @param {string} seccion - Identificador de la sección activa.
+ * @returns {void}
+ */
+function actualizarBarraSuperior(seccion) {
+  const elementoTituloBarraSuperior = document.getElementById('topbar-titulo');
+  const elementoIconoBarraSuperior  = document.getElementById('topbar-icono');
+  const botonRegresar               = document.getElementById('btn-regresar');
+
+  if (!elementoTituloBarraSuperior || !elementoIconoBarraSuperior || !infoBarraSuperior[seccion]) {
+    return;
+  }
 
   // Cambiar título e ícono
-  tituloElem.textContent = topbarInfo[seccion].titulo;
-  iconoElem.src = topbarInfo[seccion].icono;
+  elementoTituloBarraSuperior.textContent = infoBarraSuperior[seccion].titulo;
+  elementoIconoBarraSuperior.src         = infoBarraSuperior[seccion].icono;
 
-  // Ocultar botón de regresar para ciertas secciones
-  const seccionesSinRegresar = ["inicio", "envios", "plantillas", "usuario"];
+  // Ocultar o mostrar botón de regresar
+  const seccionesSinRegresar = ['inicio', 'envios', 'plantillas', 'usuario'];
   if (seccionesSinRegresar.includes(seccion)) {
-    botonRegresar.style.display = "none";
-    tituloElem.style.marginLeft = "0px";
+    botonRegresar.style.display                  = 'none';
+    elementoTituloBarraSuperior.style.marginLeft = '0px';
   } else {
-    botonRegresar.style.display = "flex";
-    tituloElem.style.marginLeft = "10px";
+    botonRegresar.style.display                  = 'flex';
+    elementoTituloBarraSuperior.style.marginLeft = '10px';
   }
 }
 
-window.actualizarTopbar = actualizarTopbar;
+// Exponer la función de actualización de barra superior globalmente
+window.actualizarBarraSuperior = actualizarBarraSuperior;

harvester-app/src/framework/vistas/FrameLayout.html

@@ -8,18 +8,16 @@
   <link href="../utils/css/sideBar.css" rel="stylesheet" />
   <link href="../utils/css/FrameLayout.css" rel="stylesheet" />
 
-  </style>
 </head>
 <body>
   <div class="formulas-brillante">
     <div class="frame-10">
       <div class="sidebar-container">
-        <div id="sidebar-wrapper-container"></div>
+        <div id="contenedorBarraLateral"></div>
       </div>
-
-      <!-- Main -->
+
       <div class="main-container">
-        <div id="topbar-container"></div>
+        <div id="contenedorBarraSuperior"></div>
         <div class="content-container">
 
           <div id="ventana-principal" class="ventana-principal">
@@ -29,14 +27,15 @@
       </div>
     </div>
   </div>
-<script src="../utils/js/sidebar.js"></script>
-<script src="../utils/js/moduloInicio.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-<script src="../utils/js/moduloAnalisis.js"></script>
-<script src="../utils/js/framelayout.js"></script>
-<script src="../utils/js/moduloPlantillas.js"></script>
-<script src="../utils/js/moduloUsuario.js"></script>
-<script src="../utils/js/agregarGrafica.js"></script>
-<script src="../utils/js/agregarTexto.js"></script>..  
+
+  <script src="../utils/js/sidebar.js"></script>
+  <script src="../utils/js/framelayout.js"></script>
+  <script src="../utils/js/moduloInicio.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <script src="../utils/js/moduloAnalisis.js"></script>
+  <script src="../utils/js/moduloPlantillas.js"></script>
+  <script src="../utils/js/moduloUsuario.js"></script>
+  <script src="../utils/js/agregarGrafica.js"></script>
+  <script src="../utils/js/agregarTexto.js"></script>
 </body>
 </html>