269 lines
15 KiB
HTML
269 lines
15 KiB
HTML
<!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, viewport-fit=cover">
|
|
<title>Menú - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
/* VARIABLES CORPORATIVAS DINÁMICAS */
|
|
:root {
|
|
--primary: #2563eb;
|
|
--secondary: #f59e0b;
|
|
--app-bg: #f4f7f9;
|
|
}
|
|
|
|
body { background-color: var(--app-bg); -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); } }
|
|
|
|
/* Ajuste limpio para el scroll sin barra abajo */
|
|
.main-content { padding-bottom: calc(env(safe-area-inset-bottom) + 30px); }
|
|
|
|
.app-card { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
|
|
|
|
/* Clases CSS dinámicas para aplicar las variables */
|
|
.bg-primary-dynamic { background-color: var(--primary) !important; }
|
|
.text-primary-dynamic { color: var(--primary) !important; }
|
|
</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-primary-dynamic rounded-b-[2.5rem] z-0 transition-colors duration-500"></div>
|
|
|
|
<header class="px-6 pt-safe mt-8 pb-6 z-10 relative text-white shrink-0">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<div>
|
|
<p class="text-[10px] font-black text-white/70 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>
|
|
|
|
<button onclick="logout()" class="flex flex-col items-center justify-center w-12 h-12 bg-white/20 backdrop-blur-md rounded-full border border-white/30 shadow-inner hover:bg-rose-500 hover:border-rose-400 transition-colors active:scale-95" title="Cerrar sesión">
|
|
<i data-lucide="log-out" class="w-5 h-5 text-white"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<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">
|
|
|
|
<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="solicitar.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="bell-ring" class="w-7 h-7"></i>
|
|
</div>
|
|
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Solicitar<br>Servicios</h3>
|
|
<span id="badgeBolsa" class="hidden mt-3 bg-emerald-500 text-white text-[10px] font-black px-2.5 py-1 rounded-full uppercase tracking-widest shadow-sm z-10 animate-pulse">0 libres</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 id="badgeChat" class="hidden absolute top-4 left-4 w-6 h-6 bg-red-600 text-white text-[10px] font-black flex items-center justify-center rounded-full shadow-lg z-20 animate-bounce border-2 border-white">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>
|
|
|
|
<a href="ranking.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-indigo-50 rounded-bl-full z-0"></div>
|
|
<div class="w-14 h-14 bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
|
|
<i data-lucide="award" class="w-7 h-7"></i>
|
|
</div>
|
|
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Ranking<br>y Estadísticas</h3>
|
|
</a>
|
|
|
|
<a href="configuracion.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-slate-100 rounded-bl-full z-0"></div>
|
|
<div class="w-14 h-14 bg-slate-100 text-slate-500 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
|
|
<i data-lucide="settings" class="w-7 h-7"></i>
|
|
</div>
|
|
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Mi<br>Configuración</h3>
|
|
</a>
|
|
|
|
<a href="presupuestos.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-indigo-50 rounded-bl-full z-0"></div>
|
|
<div class="w-14 h-14 bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center mb-4 z-10 shadow-inner">
|
|
<i data-lucide="file-signature" class="w-7 h-7"></i>
|
|
</div>
|
|
<h3 class="font-black text-slate-800 text-sm leading-tight z-10">Crear<br>Presupuesto</h3>
|
|
</a>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
|
? 'http://localhost:3000'
|
|
: 'https://integrarepara-api.integrarepara.es';
|
|
|
|
let userZones = [];
|
|
let userGuilds = [];
|
|
let systemStatuses = [];
|
|
|
|
async function applyTheme() {
|
|
try {
|
|
let theme = JSON.parse(localStorage.getItem('app_theme'));
|
|
const res = await fetch(`${API_URL}/config/company`, {
|
|
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
|
});
|
|
const data = await res.json();
|
|
if(data.ok && data.config && data.config.portal_settings && data.config.portal_settings.app_settings) {
|
|
theme = data.config.portal_settings.app_settings;
|
|
localStorage.setItem('app_theme', JSON.stringify(theme));
|
|
}
|
|
if(theme) {
|
|
document.documentElement.style.setProperty('--primary', theme.primary);
|
|
document.documentElement.style.setProperty('--secondary', theme.secondary);
|
|
document.documentElement.style.setProperty('--app-bg', theme.bg);
|
|
}
|
|
} catch (e) { console.warn("Usando tema por defecto"); }
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const token = localStorage.getItem("token");
|
|
const role = localStorage.getItem("role");
|
|
|
|
if (!token || (role !== 'operario' && role !== 'operario_cerrado')) {
|
|
window.location.href = "index.html";
|
|
return;
|
|
}
|
|
|
|
await applyTheme();
|
|
lucide.createIcons();
|
|
|
|
const rawName = localStorage.getItem("userName") || "Operario";
|
|
document.getElementById('opName').innerText = rawName.split(' ')[0];
|
|
|
|
const options = { weekday: 'long', day: 'numeric', month: 'long' };
|
|
document.getElementById('headerDate').innerText = new Date().toLocaleDateString('es-ES', options);
|
|
|
|
await loadStatuses();
|
|
await fetchUserData();
|
|
fetchBadges();
|
|
fetchChatNotifications(); // <-- Nueva función
|
|
});
|
|
|
|
async function fetchChatNotifications() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/worker/notifications`, {
|
|
headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
|
|
});
|
|
const data = await res.json();
|
|
if (data.ok && data.unreadCount > 0) {
|
|
const badge = document.getElementById('badgeChat');
|
|
badge.innerText = data.unreadCount;
|
|
badge.classList.remove('hidden');
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function loadStatuses() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/statuses`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
|
const data = await res.json();
|
|
if (data.ok) systemStatuses = data.statuses;
|
|
} catch (e) { console.error("Error cargando estados:", e); }
|
|
}
|
|
|
|
async function fetchUserData() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/auth/me`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
|
const data = await res.json();
|
|
if (data.ok && data.user) {
|
|
userZones = Array.isArray(data.user.zones) ? data.user.zones.map(z => z.cps) : [];
|
|
const resG = await fetch(`${API_URL}/admin/users`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
|
|
const dataG = await resG.json();
|
|
if(dataG.ok) {
|
|
const myUser = dataG.users.find(u => u.id === data.user.id);
|
|
if(myUser) userGuilds = myUser.guilds || [];
|
|
}
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
|
|
async function fetchBadges() {
|
|
try {
|
|
const headers = { "Authorization": `Bearer ${localStorage.getItem("token")}` };
|
|
const resActive = await fetch(`${API_URL}/services/active`, { headers });
|
|
const dataActive = await resActive.json();
|
|
const resReqs = await fetch(`${API_URL}/agenda/requests`, { headers });
|
|
const dataReqs = await resReqs.json();
|
|
|
|
if (dataActive.ok && dataReqs.ok) {
|
|
let sinCitaCount = 0;
|
|
sinCitaCount += dataReqs.requests.length;
|
|
dataActive.services.forEach(s => {
|
|
if (s.provider === 'SYSTEM_BLOCK') return;
|
|
const raw = s.raw_data || {};
|
|
if (raw.appointment_status === 'pending') return;
|
|
if (!raw.scheduled_date || raw.scheduled_date.trim() === "") {
|
|
if (raw.status_operativo) {
|
|
const st = systemStatuses.find(x => String(x.id) === String(raw.status_operativo));
|
|
if (st && st.is_final) return;
|
|
}
|
|
sinCitaCount++;
|
|
}
|
|
});
|
|
if (sinCitaCount > 0) {
|
|
const b1 = document.getElementById('badgeAsignados');
|
|
b1.innerText = `${sinCitaCount} pendiente${sinCitaCount > 1 ? 's' : ''}`;
|
|
b1.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
if (localStorage.getItem("role") === 'operario') {
|
|
const resScraped = await fetch(`${API_URL}/providers/scraped`, { headers });
|
|
const dataScraped = await resScraped.json();
|
|
if (dataScraped.ok) {
|
|
let bolsaCount = 0;
|
|
dataScraped.services.forEach(s => {
|
|
if(s.assigned_to || s.provider === 'SYSTEM_BLOCK') return;
|
|
const raw = s.raw_data || {};
|
|
const dbStatus = raw.status_operativo;
|
|
if(s.status === 'archived' || (dbStatus && ['anulado', 'terminado', 'finalizado'].includes(dbStatus.toLowerCase()))) return;
|
|
const sGuild = String(s.guild_id || raw.guild_id);
|
|
const sCp = String(raw['Código Postal'] || raw['CP'] || "").trim();
|
|
const matchGuild = userGuilds.includes(Number(sGuild)) || userGuilds.includes(String(sGuild));
|
|
const matchZone = userZones.some(z => sCp.startsWith(z));
|
|
if((userGuilds.length === 0 || matchGuild) && (userZones.length === 0 || matchZone)) {
|
|
bolsaCount++;
|
|
}
|
|
});
|
|
if (bolsaCount > 0) {
|
|
const b2 = document.getElementById('badgeBolsa');
|
|
b2.innerText = `${bolsaCount} libre${bolsaCount > 1 ? 's' : ''}`;
|
|
b2.classList.remove('hidden');
|
|
}
|
|
}
|
|
}
|
|
} catch (e) { console.log("Error cargando badges"); }
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.clear();
|
|
window.location.href = "index.html";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |