Añadir js/layout.js

js/layout.js

@@ -0,0 +1,90 @@
+// CONFIGURACIÓN GLOBAL
+const API_URL = "https://integrarepara-api.integrarepara.es";
+
+document.addEventListener("DOMContentLoaded", async () => {
+    
+    // 1. Verificar Token
+    const token = localStorage.getItem("token");
+    if (!token) {
+        window.location.href = "index.html";
+        return;
+    }
+
+    // 2. Cargar Componentes HTML
+    await loadComponent("sidebar-container", "sidebar.html");
+    await loadComponent("header-container", "header.html");
+
+    // 3. Inicializar Iconos
+    if (window.lucide) lucide.createIcons();
+
+    // 4. Lógica del Usuario (Header)
+    setupUserInfo(token);
+
+    // 5. Marcar enlace activo (Sidebar)
+    highlightActiveLink();
+
+    // 6. Configurar Logout
+    const btnLogout = document.getElementById("globalBtnLogout");
+    if(btnLogout) {
+        btnLogout.addEventListener("click", () => {
+            localStorage.removeItem("token");
+            window.location.href = "index.html";
+        });
+    }
+});
+
+// Función para cargar HTML externo
+async function loadComponent(elementId, filePath) {
+    try {
+        const response = await fetch(filePath);
+        if (response.ok) {
+            const html = await response.text();
+            document.getElementById(elementId).innerHTML = html;
+        } else {
+            console.error(`Error cargando ${filePath}`);
+        }
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+// Función para rellenar datos del usuario
+function setupUserInfo(token) {
+    try {
+        const payload = JSON.parse(atob(token.split('.')[1]));
+        
+        // Elementos del Header
+        const nameEl = document.getElementById("headerUserName");
+        const roleEl = document.getElementById("headerUserRole");
+        const avatarEl = document.getElementById("headerUserAvatar");
+
+        if (nameEl) nameEl.innerText = payload.email || "Usuario";
+        if (roleEl) roleEl.innerText = (payload.role || "Operario").toUpperCase();
+        if (avatarEl) avatarEl.innerText = (payload.email?.[0] || "U").toUpperCase();
+
+    } catch (e) {
+        console.error("Error decodificando token", e);
+        localStorage.removeItem("token");
+        window.location.href = "index.html";
+    }
+}
+
+// Función para poner azul el enlace actual
+function highlightActiveLink() {
+    // Obtenemos el nombre del archivo actual (ej: panel.html)
+    const path = window.location.pathname.split("/").pop() || "index.html";
+    
+    const links = document.querySelectorAll(".nav-item");
+    
+    links.forEach(link => {
+        // Quitamos estilos activos por defecto
+        link.classList.remove("bg-blue-600", "text-white", "shadow-lg", "shadow-blue-500/30");
+        link.classList.add("text-slate-400", "hover:text-white", "hover:bg-slate-800");
+
+        // Si coincide con la página actual, le ponemos el estilo "Activo"
+        if (link.getAttribute("data-page") === path) {
+            link.classList.remove("text-slate-400", "hover:text-white", "hover:bg-slate-800");
+            link.classList.add("bg-blue-600", "text-white", "shadow-lg", "shadow-blue-500/30");
+        }
+    });
+}