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

Actualizar menu.html

Browse Source
This commit is contained in:
marsalva
2026-02-22 15:04:32 +00:00
parent 6fed0550b4
commit be7e411861
2 changed files with 162 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
menu.html Normal file
View File

@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Menú - IntegraRepara</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body { background-color: #f4f7f9; -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.bottom-nav-safe { padding-bottom: env(safe-area-inset-bottom); }
.app-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
</style>
</head>
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-48 bg-blue-600 rounded-b-[2.5rem] z-0"></div>
<header class="px-6 pt-10 pb-6 z-10 relative text-white">
<div class="flex justify-between items-center mb-6">
<div>
<p class="text-[10px] font-black text-blue-200 uppercase tracking-widest mb-0.5" id="headerDate">HOY</p>
<h1 class="text-3xl font-black tracking-tight leading-none">Hola, <span id="opName"></span></h1>
</div>
<div class="w-12 h-12 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/30 shadow-inner">
<i data-lucide="user" class="w-6 h-6 text-white"></i>
</div>
</div>
</header>
<main class="flex-1 overflow-y-auto px-5 pb-24 z-10 relative fade-in">
<div class="grid grid-cols-2 gap-4">
<a href="asignados.html" class="app-card bg-white p-6 rounded-[2rem] border border-slate-100 flex flex-col items-center text-center active:scale-95 transition-transform relative overflow-hidden">
<div class="absolute top-0 right-0 w-16 h-16 bg-amber-50 rounded-bl-full z-0"></div>
<div class="w-14 h-14 bg-amber-100 text-amber-500 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
<i data-lucide="inbox" class="w-7 h-7"></i>
</div>
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Asignados<br>Sin Cita</h3>
<span id="badgeAsignados" class="hidden mt-3 bg-rose-500 text-white text-[10px] font-black px-2.5 py-1 rounded-full uppercase tracking-widest shadow-sm z-10 animate-pulse">0 pendientes</span>
</a>
<a href="citas.html" class="app-card bg-white p-6 rounded-[2rem] border border-slate-100 flex flex-col items-center text-center active:scale-95 transition-transform relative overflow-hidden">
<div class="absolute top-0 right-0 w-16 h-16 bg-emerald-50 rounded-bl-full z-0"></div>
<div class="w-14 h-14 bg-emerald-100 text-emerald-500 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
<i data-lucide="calendar-check" class="w-7 h-7"></i>
</div>
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Citas<br>Agendadas</h3>
<span id="badgeCitas" class="hidden mt-3 bg-slate-100 text-slate-600 text-[10px] font-black px-2.5 py-1 rounded-full uppercase tracking-widest shadow-sm z-10">0 citas</span>
</a>
<a href="calendario.html" class="app-card bg-white p-6 rounded-[2rem] border border-slate-100 flex flex-col items-center text-center active:scale-95 transition-transform relative overflow-hidden">
<div class="absolute top-0 right-0 w-16 h-16 bg-blue-50 rounded-bl-full z-0"></div>
<div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
<i data-lucide="calendar-days" class="w-7 h-7"></i>
</div>
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Mi<br>Calendario</h3>
</a>
<a href="buscar.html" class="app-card bg-white p-6 rounded-[2rem] border border-slate-100 flex flex-col items-center text-center active:scale-95 transition-transform relative overflow-hidden">
<div class="absolute top-0 right-0 w-16 h-16 bg-purple-50 rounded-bl-full z-0"></div>
<div class="w-14 h-14 bg-purple-100 text-purple-600 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
<i data-lucide="search" class="w-7 h-7"></i>
</div>
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Buscar<br>Servicio</h3>
</a>
</div>
</main>
<nav class="bg-white border-t border-slate-200 shrink-0 pb-safe z-20 absolute bottom-0 w-full shadow-[0_-10px_30px_rgba(0,0,0,0.05)] rounded-t-3xl">
<div class="flex justify-around items-center p-3 bottom-nav-safe">
<button class="flex flex-col items-center p-2 text-blue-600 transition-transform active:scale-95">
<i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-black uppercase tracking-widest">Inicio</span>
</button>
<button onclick="logout()" class="flex flex-col items-center p-2 text-slate-400 hover:text-red-500 transition-transform active:scale-95">
<i data-lucide="log-out" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-bold uppercase tracking-widest">Salir</span>
</button>
</div>
</nav>
<script>
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000'
: 'https://integrarepara-api.integrarepara.es';
document.addEventListener("DOMContentLoaded", () => {
const token = localStorage.getItem("token");
const role = localStorage.getItem("role");
if (!token || role !== 'operario') {
window.location.href = "index.html";
return;
}
lucide.createIcons();
// 1. Mostrar nombre y fecha
const rawName = localStorage.getItem("userName") || "Operario";
document.getElementById('opName').innerText = rawName.split(' ')[0]; // Coge solo el primer nombre
const options = { weekday: 'long', day: 'numeric', month: 'long' };
document.getElementById('headerDate').innerText = new Date().toLocaleDateString('es-ES', options);
// 2. Cargar notificaciones de fondo
fetchBadges();
});
async function fetchBadges() {
try {
// Pedimos los servicios activos al servidor
const res = await fetch(`${API_URL}/services/active`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
});
const data = await res.json();
if (data.ok) {
// Filtramos los bloqueos del sistema
const services = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK');
let sinCitaCount = 0;
let conCitaCount = 0;
// Contamos cuáles tienen fecha y cuáles no
services.forEach(s => {
const raw = s.raw_data || {};
// Excluimos los terminados/anulados
const stId = String(raw.status_operativo || "");
// Solo contamos los que están "vivos"
if (raw.scheduled_date) {
conCitaCount++;
} else {
sinCitaCount++;
}
});
// Pintamos los globos si hay datos
if (sinCitaCount > 0) {
const b1 = document.getElementById('badgeAsignados');
b1.innerText = `${sinCitaCount} pendiente${sinCitaCount > 1 ? 's' : ''}`;
b1.classList.remove('hidden');
}
if (conCitaCount > 0) {
const b2 = document.getElementById('badgeCitas');
b2.innerText = `${conCitaCount} cita${conCitaCount > 1 ? 's' : ''}`;
b2.classList.remove('hidden');
}
}
} catch (e) { console.log("Error cargando badges de notificación"); }
}
function logout() {
localStorage.clear();
window.location.href = "index.html";
}
</script>
</body>
</html>