marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar js/dflayout.js

Browse Source
This commit is contained in:
marsalva
2026-02-11 21:36:33 +00:00
parent 936058b3d4
commit c0345464dd
1 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
js/layout.js
View File

@@ -1,127 +0,0 @@
// 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. Generar Sidebar (Con los nuevos enlaces)
renderSidebar();
// 3. Cargar Header (Mantenemos carga externa para la cabecera)
await loadComponent("header-container", "header.html");
// 4. Inicializar Iconos
if (window.lucide) lucide.createIcons();
// 5. Lógica del Usuario (Header)
setupUserInfo(token);
// 6. Configurar Logout (Ahora manejado dentro de renderSidebar para asegurar que existe el botón)
const btnLogout = document.getElementById("globalBtnLogout");
if(btnLogout) {
btnLogout.addEventListener("click", () => {
localStorage.removeItem("token");
window.location.href = "index.html";
});
}
});
// --- GENERADOR DE SIDEBAR (NUEVO) ---
function renderSidebar() {
const container = document.getElementById('sidebar-container');
if (!container) return;
// Detectar página actual
const path = window.location.pathname.split("/").pop() || "index.html";
// DEFINICIÓN DE MENÚ (Aquí añadimos Calendario y Automatizaciones)
const menuItems = [
{ name: "Servicios", link: "servicios.html", icon: "briefcase" },
{ name: "Calendario", link: "calendario.html", icon: "calendar-days" }, // ✅ NUEVO
{ name: "Clientes", link: "clientes.html", icon: "users" },
{ name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, // ✅ NUEVO (Icono rayo)
{ name: "Configuración", link: "configuracion.html", icon: "settings" },
];
// Construir HTML de los enlaces
const linksHtml = menuItems.map(item => {
const isActive = path === item.link;
// Estilos basados en tu diseño actual (Slate oscuro)
const baseClasses = "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 font-medium mb-1 text-sm";
const activeClasses = "bg-blue-600 text-white shadow-lg shadow-blue-500/30";
const inactiveClasses = "text-slate-400 hover:text-white hover:bg-slate-800";
return `
<a href="${item.link}" class="${baseClasses} ${isActive ? activeClasses : inactiveClasses}">
<i data-lucide="${item.icon}" class="w-5 h-5"></i>
${item.name}
</a>
`;
}).join("");
// Inyectar HTML completo del Sidebar
container.innerHTML = `
<aside class="w-64 bg-slate-900 h-full flex flex-col text-white shadow-xl">
<div class="p-6 border-b border-slate-800 flex items-center gap-3">
<div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-700 rounded-lg flex items-center justify-center font-bold text-white shadow-lg">I</div>
<div>
<h1 class="font-bold text-lg tracking-tight leading-none">Integra</h1>
<span class="text-[10px] text-slate-400 uppercase tracking-widest font-semibold">Repara</span>
</div>
</div>
<nav class="flex-1 overflow-y-auto p-4 no-scrollbar">
<p class="text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-4 px-2 mt-2">Principal</p>
${linksHtml}
</nav>
<div class="p-4 border-t border-slate-800 bg-slate-900/50">
<button id="globalBtnLogout" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all w-full text-left text-sm font-medium">
<i data-lucide="log-out" class="w-5 h-5"></i>
Cerrar Sesión
</button>
</div>
</aside>
`;
}
// --- FUNCIONES AUXILIARES ---
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.warn(`No se pudo cargar ${filePath} (puede que no sea necesario si usas el sidebar generado)`);
}
} catch (e) {
// Ignoramos errores silenciosos para no molestar en consola
}
}
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";
}
}