Anadir enlace de menu 'Recordatorios' (recordatorios-automaticos.html)
This commit is contained in:
207
js/layout.js
207
js/layout.js
@@ -1,135 +1,136 @@
|
|||||||
// CONFIGURACIÓN GLOBAL
|
// CONFIGURACIÓN GLOBAL
|
||||||
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
||||||
? 'http://localhost:3000'
|
? 'http://localhost:3000'
|
||||||
: 'https://integrarepara-api.integrarepara.es';
|
: '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 (CON EL NUEVO ENLACE) ---
|
// --- GENERADOR DE BARRA LATERAL (CON EL NUEVO ENLACE) ---
|
||||||
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";
|
||||||
|
|
||||||
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: "Citas / Bloqueos", link: "agenda.html", icon: "calendar-clock" },
|
{ name: "Citas / Bloqueos", link: "agenda.html", icon: "calendar-clock" },
|
||||||
{ name: "Proveedores", link: "proveedores.html", icon: "building-2" },
|
{ name: "Proveedores", link: "proveedores.html", icon: "building-2" },
|
||||||
{ name: "Calendario", link: "calendario.html", icon: "calendar" },
|
{ name: "Calendario", link: "calendario.html", icon: "calendar" },
|
||||||
// --- NUEVO APARTADO ---
|
// --- NUEVO APARTADO ---
|
||||||
{ name: "Planes de Protección", link: "proteccion.html", icon: "shield-check" },
|
{ name: "Planes de Protección", link: "proteccion.html", icon: "shield-check" },
|
||||||
// ----------------------
|
// ----------------------
|
||||||
{ name: "Clientes", link: "clientes.html", icon: "users" },
|
{ name: "Clientes", link: "clientes.html", icon: "users" },
|
||||||
{ name: "Contabilidad", link: "contabilidad.html", icon: "wallet" },
|
{ name: "Contabilidad", link: "contabilidad.html", icon: "wallet" },
|
||||||
{ name: "Trazabilidad", link: "trazabilidad.html", icon: "activity" },
|
{ name: "Trazabilidad", link: "trazabilidad.html", icon: "activity" },
|
||||||
{ name: "Usuarios", link: "usuarios.html", icon: "user-cog" },
|
{ name: "Usuarios", link: "usuarios.html", icon: "user-cog" },
|
||||||
{ name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" },
|
{ name: "Automatizaciones", link: "automatizaciones.html", icon: "zap" },
|
||||||
{ name: "Configuración", link: "configuracion.html", icon: "settings" },
|
{ name: "Recordatorios", link: "recordatorios-automaticos.html", icon: "bell-ring" },
|
||||||
];
|
{ 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;
|
||||||
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";
|
||||||
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("");
|
||||||
|
|
||||||
// El resto del código de renderSidebar permanece igual...
|
// El resto del código de renderSidebar permanece igual...
|
||||||
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";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user