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

Actualizar js/layout.js

Browse Source
This commit is contained in:
marsalva
2026-02-21 16:08:41 +00:00
parent 686482a5aa
commit c45639dceb
1 changed files with 98 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
js/layout.js
View File

@@ -2,130 +2,131 @@
const API_URL = "https://integrarepara-api.integrarepara.es"; const API_URL = "https://integrarepara-api.integrarepara.es";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// 1. Verificar Token     // 1. Verificar Token
const token = localStorage.getItem("token");     const token = localStorage.getItem("token");
if (!token) {     if (!token) {
if (!window.location.pathname.endsWith("index.html") && window.location.pathname !== "/") {         if (!window.location.pathname.endsWith("index.html") && window.location.pathname !== "/") {
window.location.href = "index.html";             window.location.href = "index.html";
return;             return;
}         }
}     }
// 2. Generar Sidebar y Header     // 2. Generar Sidebar y Header
renderSidebar();     renderSidebar();
renderHeader();     renderHeader();
// 3. Inicializar Iconos     // 3. Inicializar Iconos
if (window.lucide) lucide.createIcons();     if (window.lucide) lucide.createIcons();
// 4. Datos usuario     // 4. Datos usuario
if (token) setupUserInfo(token);     if (token) setupUserInfo(token);
}); });
// --- GENERADOR DE BARRA LATERAL (DISEÑO ORIGINAL RESTAURADO) --- // --- GENERADOR DE BARRA LATERAL (DISEÑO ORIGINAL RESTAURADO) ---
function renderSidebar() { function renderSidebar() {
const container = document.getElementById('sidebar-container');     const container = document.getElementById('sidebar-container');
if (!container) return;     if (!container) return;
const path = window.location.pathname.split("/").pop() || "index.html";     const path = window.location.pathname.split("/").pop() || "index.html";
// MENUS.  // MENUS.
const menuItems = [ const menuItems = [
{ name: "Dashboard", link: "panel.html", icon: "layout-dashboard" },     { name: "Dashboard", link: "panel.html", icon: "layout-dashboard" },
{ name: "Servicios", link: "servicios.html", icon: "briefcase" },     { name: "Servicios", link: "servicios.html", icon: "briefcase" },
{ name: "Proveedores", link: "proveedores.html", icon: "building-2" }, // Nuevo nombre para el buzón actual     { name: "Agenda", link: "agenda.html", icon: "calendar-clock" },
{ name: "Calendario", link: "calendario.html", icon: "calendar" },     { name: "Proveedores", link: "proveedores.html", icon: "building-2" }, // Nuevo nombre para el buzón actual
{ name: "Clientes", link: "clientes.html", icon: "users" },     { name: "Calendario", link: "calendario.html", icon: "calendar" },
{ name: "Usuarios", link: "usuarios.html", icon: "user-cog" },     { name: "Clientes", link: "clientes.html", icon: "users" },
{ name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, // Queda libre para lo nuevo     { name: "Usuarios", link: "usuarios.html", icon: "user-cog" },
{ name: "Configuración", link: "configuracion.html", icon: "settings" },     { name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" }, // Queda libre para lo nuevo
    { name: "Configuración", link: "configuracion.html", icon: "settings" },
]; ];
const linksHtml = menuItems.map(item => {     const linksHtml = menuItems.map(item => {
const isActive = path === item.link;         const isActive = path === item.link;
// ESTILOS ORIGINALES (Texto Slate-400, Hover Blanco/Slate-800)         // ESTILOS ORIGINALES (Texto Slate-400, Hover Blanco/Slate-800)
const baseClasses = "nav-item flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-sm font-medium";         const baseClasses = "nav-item flex items-center gap-3 px-4 py-3 rounded-lg transition-all text-sm font-medium";
// Si está activo, usamos el azul original de tu diseño, si no, el gris         // Si está activo, usamos el azul original de tu diseño, si no, el gris
const activeClasses = isActive         const activeClasses = isActive 
? "bg-blue-600 text-white shadow-lg shadow-blue-500/30"             ? "bg-blue-600 text-white shadow-lg shadow-blue-500/30" 
: "text-slate-400 hover:text-white hover:bg-slate-800";             : "text-slate-400 hover:text-white hover:bg-slate-800";
return `         return `
<a href="${item.link}" class="${baseClasses} ${activeClasses}">             <a href="${item.link}" class="${baseClasses} ${activeClasses}">
<i data-lucide="${item.icon}" class="w-5 h-5"></i>                 <i data-lucide="${item.icon}" class="w-5 h-5"></i>
<span>${item.name}</span>                 <span>${item.name}</span>
</a>             </a>
`;         `;
}).join("");     }).join("");
container.innerHTML = `     container.innerHTML = `
<aside class="w-64 bg-slate-900 text-white flex flex-col shadow-xl z-20 h-full transition-all">         <aside class="w-64 bg-slate-900 text-white flex flex-col shadow-xl z-20 h-full transition-all">
<div class="h-16 flex items-center justify-center border-b border-slate-800 shrink-0">             <div class="h-16 flex items-center justify-center border-b border-slate-800 shrink-0">
<h1 class="text-xl font-bold tracking-wider text-blue-400">INTEGRA<span class="text-white">REPARA</span></h1>                 <h1 class="text-xl font-bold tracking-wider text-blue-400">INTEGRA<span class="text-white">REPARA</span></h1>
</div>             </div>
            
<nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto no-scrollbar">             <nav class="flex-1 px-4 py-6 space-y-2 overflow-y-auto no-scrollbar">
${linksHtml}                 ${linksHtml}
</nav>             </nav>
<div class="p-4 border-t border-slate-800 shrink-0">             <div class="p-4 border-t border-slate-800 shrink-0">
<button onclick="logout()" class="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors w-full p-2 rounded hover:bg-slate-800 font-medium text-sm">                 <button onclick="logout()" class="flex items-center gap-2 text-slate-400 hover:text-red-400 transition-colors w-full p-2 rounded hover:bg-slate-800 font-medium text-sm">
<i data-lucide="log-out" class="w-5 h-5"></i>                     <i data-lucide="log-out" class="w-5 h-5"></i>
<span>Cerrar Sesión</span>                     <span>Cerrar Sesión</span>
</button>                 </button>
</div>             </div>
</aside>         </aside>
`;     `;
} }
// --- GENERADOR DE CABECERA (HEADER) --- // --- GENERADOR DE CABECERA (HEADER) ---
function renderHeader() { function renderHeader() {
const container = document.getElementById('header-container');     const container = document.getElementById('header-container');
if (!container) return;     if (!container) return;
// Fecha actual     // Fecha actual
const dateStr = new Date().toLocaleDateString('es-ES', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });     const dateStr = new Date().toLocaleDateString('es-ES', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
const dateCapitalized = dateStr.charAt(0).toUpperCase() + dateStr.slice(1);     const dateCapitalized = dateStr.charAt(0).toUpperCase() + dateStr.slice(1);
container.innerHTML = `     container.innerHTML = `
<header class="bg-white h-16 border-b border-gray-200 flex justify-between items-center px-6 shadow-sm z-10 shrink-0">         <header class="bg-white h-16 border-b border-gray-200 flex justify-between items-center px-6 shadow-sm z-10 shrink-0">
<div class="flex items-center text-gray-500 text-sm gap-2">             <div class="flex items-center text-gray-500 text-sm gap-2">
<i data-lucide="calendar" class="w-4 h-4"></i>                 <i data-lucide="calendar" class="w-4 h-4"></i>
<span class="font-medium">${dateCapitalized}</span>                 <span class="font-medium">${dateCapitalized}</span>
</div>             </div>
            
<div class="flex items-center gap-4">             <div class="flex items-center gap-4">
<div class="text-right hidden md:block">                 <div class="text-right hidden md:block">
<p class="text-sm font-bold text-gray-800 leading-none" id="headerUserName">Cargando...</p>                     <p class="text-sm font-bold text-gray-800 leading-none" id="headerUserName">Cargando...</p>
<p class="text-xs text-gray-500 mt-1" id="headerUserRole">...</p>                     <p class="text-xs text-gray-500 mt-1" id="headerUserRole">...</p>
</div>                 </div>
<div class="w-9 h-9 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold shadow-sm" id="headerUserAvatar">                 <div class="w-9 h-9 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold shadow-sm" id="headerUserAvatar">
U                     U
</div>                 </div>
</div>             </div>
</header>         </header>
`;     `;
} }
// --- UTILIDADES --- // --- UTILIDADES ---
function setupUserInfo(token) { function setupUserInfo(token) {
try {     try {
const payload = JSON.parse(atob(token.split('.')[1]));         const payload = JSON.parse(atob(token.split('.')[1]));
const nameEl = document.getElementById("headerUserName");         const nameEl = document.getElementById("headerUserName");
const roleEl = document.getElementById("headerUserRole");         const roleEl = document.getElementById("headerUserRole");
const avatarEl = document.getElementById("headerUserAvatar");         const avatarEl = document.getElementById("headerUserAvatar");
if (nameEl) nameEl.innerText = payload.email || "Usuario";         if (nameEl) nameEl.innerText = payload.email || "Usuario";
if (roleEl) roleEl.innerText = (payload.role || "Operario").toUpperCase();         if (roleEl) roleEl.innerText = (payload.role || "Operario").toUpperCase();
if (avatarEl) avatarEl.innerText = (payload.email?.[0] || "U").toUpperCase();         if (avatarEl) avatarEl.innerText = (payload.email?.[0] || "U").toUpperCase();
} catch (e) {     } catch (e) {
localStorage.removeItem("token");         localStorage.removeItem("token");
}     }
} }
function logout() { function logout() {
if(confirm("¿Cerrar sesión?")) {     if(confirm("¿Cerrar sesión?")) {
localStorage.removeItem("token");         localStorage.removeItem("token");
window.location.href = "index.html";         window.location.href = "index.html";
}     }
} }