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 17:33:58 +00:00
parent e9d3ea3ae2
commit 446c5a05e6
1 changed files with 16 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
menu.html
View File

@@ -2,7 +2,7 @@
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Menú - IntegraRepara</title> <title>Menú - IntegraRepara</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
@@ -10,7 +10,11 @@
body { background-color: #f4f7f9; -webkit-tap-highlight-color: transparent; } body { background-color: #f4f7f9; -webkit-tap-highlight-color: transparent; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; } .fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.bottom-nav-safe { padding-bottom: env(safe-area-inset-bottom); }
/* Ajustes precisos para móviles con Notch/Barra inferior (iPhone) */
.safe-bottom-nav { padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }
.app-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); } .app-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
</style> </style>
</head> </head>
@@ -18,7 +22,7 @@
<div class="absolute top-0 left-0 w-full h-48 bg-blue-600 rounded-b-[2.5rem] z-0"></div> <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"> <header class="px-6 pt-safe mt-10 pb-6 z-10 relative text-white shrink-0">
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<div> <div>
<p class="text-[10px] font-black text-blue-200 uppercase tracking-widest mb-0.5" id="headerDate">HOY</p> <p class="text-[10px] font-black text-blue-200 uppercase tracking-widest mb-0.5" id="headerDate">HOY</p>
@@ -30,7 +34,7 @@
</div> </div>
</header> </header>
<main class="flex-1 overflow-y-auto px-5 pb-24 z-10 relative fade-in"> <main class="flex-1 overflow-y-auto px-5 pt-4 main-content z-10 relative fade-in">
<div class="grid grid-cols-2 gap-4"> <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"> <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">
@@ -70,13 +74,13 @@
</div> </div>
</main> </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"> <nav class="bg-white/90 backdrop-blur-md border-t border-slate-200 z-20 absolute bottom-0 left-0 w-full shadow-[0_-10px_30px_rgba(0,0,0,0.05)] rounded-t-[2rem]">
<div class="flex justify-around items-center p-3 bottom-nav-safe"> <div class="flex justify-around items-center px-3 pt-3 safe-bottom-nav">
<button class="flex flex-col items-center p-2 text-blue-600 transition-transform active:scale-95"> <button class="flex flex-col items-center p-2 text-blue-600 transition-transform active:scale-95 w-20">
<i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i> <i data-lucide="layout-grid" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-black uppercase tracking-widest">Inicio</span> <span class="text-[9px] font-black uppercase tracking-widest">Inicio</span>
</button> </button>
<button onclick="logout()" class="flex flex-col items-center p-2 text-slate-400 hover:text-red-500 transition-transform active:scale-95"> <button onclick="logout()" class="flex flex-col items-center p-2 text-slate-400 hover:text-red-500 transition-transform active:scale-95 w-20">
<i data-lucide="log-out" class="w-6 h-6 mb-1"></i> <i data-lucide="log-out" class="w-6 h-6 mb-1"></i>
<span class="text-[9px] font-bold uppercase tracking-widest">Salir</span> <span class="text-[9px] font-bold uppercase tracking-widest">Salir</span>
</button> </button>
@@ -99,46 +103,34 @@
lucide.createIcons(); lucide.createIcons();
// 1. Mostrar nombre y fecha
const rawName = localStorage.getItem("userName") || "Operario"; const rawName = localStorage.getItem("userName") || "Operario";
document.getElementById('opName').innerText = rawName.split(' ')[0]; // Coge solo el primer nombre document.getElementById('opName').innerText = rawName.split(' ')[0];
const options = { weekday: 'long', day: 'numeric', month: 'long' }; const options = { weekday: 'long', day: 'numeric', month: 'long' };
document.getElementById('headerDate').innerText = new Date().toLocaleDateString('es-ES', options); document.getElementById('headerDate').innerText = new Date().toLocaleDateString('es-ES', options);
// 2. Cargar notificaciones de fondo
fetchBadges(); fetchBadges();
}); });
async function fetchBadges() { async function fetchBadges() {
try { try {
// Pedimos los servicios activos al servidor
const res = await fetch(`${API_URL}/services/active`, { const res = await fetch(`${API_URL}/services/active`, {
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
}); });
const data = await res.json(); const data = await res.json();
if (data.ok) { if (data.ok) {
// Filtramos los bloqueos del sistema
const services = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK'); const services = data.services.filter(s => s.provider !== 'SYSTEM_BLOCK');
let sinCitaCount = 0; let sinCitaCount = 0;
let conCitaCount = 0; let conCitaCount = 0;
// Contamos cuáles tienen fecha y cuáles no
services.forEach(s => { services.forEach(s => {
const raw = s.raw_data || {}; const raw = s.raw_data || {};
// Excluimos los terminados/anulados if (raw.scheduled_date) conCitaCount++;
const stId = String(raw.status_operativo || ""); else sinCitaCount++;
// Solo contamos los que están "vivos"
if (raw.scheduled_date) {
conCitaCount++;
} else {
sinCitaCount++;
}
}); });
// Pintamos los globos si hay datos
if (sinCitaCount > 0) { if (sinCitaCount > 0) {
const b1 = document.getElementById('badgeAsignados'); const b1 = document.getElementById('badgeAsignados');
b1.innerText = `${sinCitaCount} pendiente${sinCitaCount > 1 ? 's' : ''}`; b1.innerText = `${sinCitaCount} pendiente${sinCitaCount > 1 ? 's' : ''}`;
@@ -150,7 +142,7 @@
b2.classList.remove('hidden'); b2.classList.remove('hidden');
} }
} }
} catch (e) { console.log("Error cargando badges de notificación"); } } catch (e) { console.log("Error cargando badges"); }
} }
function logout() { function logout() {