1405 lines
53 KiB
JavaScript
1405 lines
53 KiB
JavaScript
/* Autobooking Driver Dashboard v2 — Complete JS */
|
|
(function () {
|
|
'use strict';
|
|
|
|
/* ── Bootstrap ──────────────────────────────────────────────── */
|
|
const CFG = window.AB_DRIVER_CFG || {};
|
|
const ROOT = (CFG.api_root || '').replace(/\/$/, '');
|
|
const NONCE = CFG.nonce || '';
|
|
const GMAPS_KEY = CFG.gmaps_key || '';
|
|
const DRV = CFG.driver || {};
|
|
|
|
/* ── State ──────────────────────────────────────────────────── */
|
|
const S = {
|
|
online: false,
|
|
trip: null,
|
|
tripStatus: null,
|
|
incidentId: null,
|
|
mediaRec: null,
|
|
mediaStream: null,
|
|
map: null,
|
|
driverMarker: null,
|
|
routePolyline: null,
|
|
suggestPolyline: null,
|
|
destMarker: null,
|
|
watchId: null,
|
|
lat: null,
|
|
lng: null,
|
|
accuracy: null,
|
|
chatLastId: 0,
|
|
unreadChat: 0,
|
|
chatOpen: true,
|
|
earnPeriod: 'day',
|
|
histPage: 1,
|
|
histFrom: '',
|
|
histTo: '',
|
|
zoneTimers: {},
|
|
activeZoneId: null,
|
|
courtesyInterval: null,
|
|
courtesySecondsLeft: 180,
|
|
telemetryInterval: null,
|
|
tripPollInterval: null,
|
|
chatPollInterval: null,
|
|
zonePollInterval: null,
|
|
sosChunkIndex: 0,
|
|
sosInterval: null,
|
|
historyData: [],
|
|
yearData: null,
|
|
};
|
|
|
|
/* ── DOM refs ───────────────────────────────────────────────── */
|
|
function el(id) { return document.getElementById(id); }
|
|
|
|
/* ── API helper ─────────────────────────────────────────────── */
|
|
async function api(path, method, body) {
|
|
method = method || 'GET';
|
|
const opts = {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-WP-Nonce': NONCE,
|
|
},
|
|
};
|
|
if (body) opts.body = JSON.stringify(body);
|
|
const r = await fetch(ROOT + '/wp-json/autobooking/v1' + path, opts);
|
|
if (!r.ok) throw new Error(await r.text());
|
|
return r.json();
|
|
}
|
|
|
|
/* ── Toast ──────────────────────────────────────────────────── */
|
|
let toastTimer;
|
|
function toast(msg, type) {
|
|
type = type || 'info';
|
|
let t = el('abd-toast');
|
|
if (!t) {
|
|
t = document.createElement('div');
|
|
t.id = 'abd-toast';
|
|
document.body.appendChild(t);
|
|
}
|
|
t.textContent = msg;
|
|
t.className = 'abd-toast--show abd-toast--' + type;
|
|
clearTimeout(toastTimer);
|
|
toastTimer = setTimeout(() => { t.className = ''; }, 3000);
|
|
}
|
|
|
|
/* ── Tab navigation ─────────────────────────────────────────── */
|
|
function initTabs() {
|
|
document.querySelectorAll('.abd-tab').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
const tab = this.dataset.tab;
|
|
document.querySelectorAll('.abd-tab').forEach(b => b.classList.remove('abd-tab--active'));
|
|
document.querySelectorAll('.abd-panel').forEach(p => { p.style.display = 'none'; p.classList.remove('abd-panel--active'); });
|
|
this.classList.add('abd-tab--active');
|
|
const panel = el('abd-tab-' + tab);
|
|
if (panel) { panel.style.display = ''; panel.classList.add('abd-panel--active'); }
|
|
if (tab === 'ganancias') loadEarnings(S.earnPeriod, true);
|
|
if (tab === 'metricas') loadMetrics();
|
|
if (tab === 'historial') loadHistory(1, S.histFrom, S.histTo);
|
|
if (tab === 'perfil') loadProfile();
|
|
});
|
|
});
|
|
}
|
|
|
|
/* ── Header / Driver info ────────────────────────────────────── */
|
|
function populateHeader() {
|
|
const nameEl = el('abd-header-name');
|
|
const plateEl = el('abd-header-plate');
|
|
const photoEl = el('abd-header-photo');
|
|
|
|
if (nameEl) nameEl.textContent = DRV.name || 'Conductor';
|
|
if (plateEl) plateEl.textContent = [DRV.vehicle_type, DRV.vehicle_plate].filter(Boolean).join(' • ');
|
|
if (photoEl && DRV.photo) { photoEl.src = DRV.photo; } else if (photoEl) { photoEl.style.display = 'none'; }
|
|
|
|
const nameTrip = el('abd-driver-name-trip');
|
|
const plateTrip = el('abd-driver-vehicle-trip');
|
|
const photoTrip = el('abd-driver-avatar-trip');
|
|
if (nameTrip) nameTrip.textContent = DRV.name || 'Conductor';
|
|
if (plateTrip) plateTrip.textContent = [DRV.vehicle_type, DRV.vehicle_plate].filter(Boolean).join(' • ');
|
|
if (photoTrip && DRV.photo) photoTrip.src = DRV.photo;
|
|
}
|
|
|
|
/* ── Connect toggle ─────────────────────────────────────────── */
|
|
function initToggle() {
|
|
const toggle = el('abd-online-toggle');
|
|
if (!toggle) return;
|
|
toggle.addEventListener('change', async function () {
|
|
const online = this.checked;
|
|
toggle.disabled = true;
|
|
try {
|
|
await api('/driver/status', 'POST', { online, lat: S.lat, lng: S.lng });
|
|
S.online = online;
|
|
updateStatusLabel(online);
|
|
if (online) {
|
|
startGPS();
|
|
startPolls();
|
|
toast('¡Conectado! Esperando viajes...', 'success');
|
|
} else {
|
|
stopGPS();
|
|
stopPolls();
|
|
toast('Desconectado.', 'info');
|
|
}
|
|
} catch (e) {
|
|
toggle.checked = !online;
|
|
toast('Error al cambiar estado.', 'error');
|
|
}
|
|
toggle.disabled = false;
|
|
});
|
|
}
|
|
|
|
function updateStatusLabel(online) {
|
|
const lbl = el('abd-status-label');
|
|
if (!lbl) return;
|
|
if (online) {
|
|
lbl.textContent = 'ONLINE';
|
|
lbl.className = 'abd-status-label abd-status--online';
|
|
} else {
|
|
lbl.textContent = 'OFFLINE';
|
|
lbl.className = 'abd-status-label abd-status--offline';
|
|
}
|
|
}
|
|
|
|
/* ── GPS ─────────────────────────────────────────────────────── */
|
|
function startGPS() {
|
|
if (!navigator.geolocation) return;
|
|
if (S.watchId !== null) navigator.geolocation.clearWatch(S.watchId);
|
|
S.watchId = navigator.geolocation.watchPosition(
|
|
pos => {
|
|
S.lat = pos.coords.latitude;
|
|
S.lng = pos.coords.longitude;
|
|
S.accuracy = Math.round(pos.coords.accuracy);
|
|
updateGPSBadge();
|
|
updateDriverMarker();
|
|
},
|
|
null,
|
|
{ enableHighAccuracy: true, maximumAge: 5000, timeout: 10000 }
|
|
);
|
|
// Telemetry — 60s sin viaje, 20s con viaje activo
|
|
S.telemetryInterval = setInterval(sendTelemetry, 60000);
|
|
}
|
|
|
|
function stopGPS() {
|
|
if (S.watchId !== null) { navigator.geolocation.clearWatch(S.watchId); S.watchId = null; }
|
|
if (S.telemetryInterval) { clearInterval(S.telemetryInterval); S.telemetryInterval = null; }
|
|
}
|
|
|
|
function updateGPSBadge() {
|
|
const badge = el('abd-gps-badge');
|
|
if (badge) badge.textContent = S.accuracy !== null ? 'GPS: \u00b1' + S.accuracy + 'm' : 'GPS: \u2014';
|
|
}
|
|
|
|
async function sendTelemetry() {
|
|
if (S.lat === null) return;
|
|
try {
|
|
await api('/telemetry/position', 'POST', {
|
|
lat: S.lat,
|
|
lng: S.lng,
|
|
accuracy: S.accuracy || 0,
|
|
trip_id: S.trip ? S.trip.id : undefined,
|
|
});
|
|
} catch (_) {}
|
|
}
|
|
|
|
/* ── Google Maps ─────────────────────────────────────────────── */
|
|
function loadGoogleMaps() {
|
|
return new Promise(resolve => {
|
|
if (window.google && window.google.maps) { resolve(); return; }
|
|
window._abdMapsReady = resolve;
|
|
const s = document.createElement('script');
|
|
s.src = 'https://maps.googleapis.com/maps/api/js?key=' + GMAPS_KEY + '&callback=_abdMapsReady';
|
|
s.async = true;
|
|
document.head.appendChild(s);
|
|
});
|
|
}
|
|
|
|
/* ── Temas del mapa ─────────────────────────────────────────── */
|
|
const ABD_THEMES = {
|
|
dark: [
|
|
{ elementType: 'geometry', stylers: [{ color: '#1a1a2e' }] },
|
|
{ elementType: 'labels.text.stroke', stylers: [{ color: '#1a1a2e' }] },
|
|
{ elementType: 'labels.text.fill', stylers: [{ color: '#8a8a9a' }] },
|
|
{ featureType: 'road', elementType: 'geometry', stylers: [{ color: '#0f3460' }] },
|
|
{ featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#16213e' }] },
|
|
{ featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#9ca5b3' }] },
|
|
{ featureType: 'road.highway', elementType: 'geometry', stylers: [{ color: '#1a4a6e' }] },
|
|
{ featureType: 'water', elementType: 'geometry', stylers: [{ color: '#0b1929' }] },
|
|
{ featureType: 'poi', elementType: 'geometry', stylers: [{ color: '#151e2d' }] },
|
|
{ featureType: 'transit', elementType: 'geometry', stylers: [{ color: '#2f3948' }] },
|
|
{ featureType: 'administrative', elementType: 'geometry.stroke', stylers: [{ color: '#334155' }] },
|
|
],
|
|
normal: [],
|
|
};
|
|
|
|
function getAutoTheme() {
|
|
const h = new Date().getHours();
|
|
return (h >= 6 && h < 19) ? 'normal' : 'dark';
|
|
}
|
|
|
|
function applyDriverMapTheme(theme) {
|
|
const resolved = theme === 'auto' ? getAutoTheme() : theme;
|
|
if (S.map) S.map.setOptions({ styles: ABD_THEMES[resolved] || [] });
|
|
localStorage.setItem('abd_map_theme', theme);
|
|
document.querySelectorAll('.abd-theme-btn').forEach(b => {
|
|
b.classList.toggle('active', b.dataset.theme === theme);
|
|
});
|
|
}
|
|
|
|
function initMap() {
|
|
const mapEl = el('abd-map');
|
|
if (!mapEl || !window.google) return;
|
|
|
|
const savedTheme = localStorage.getItem('abd_map_theme') || 'auto';
|
|
const resolved = savedTheme === 'auto' ? getAutoTheme() : savedTheme;
|
|
|
|
const center = { lat: S.lat || 4.7110, lng: S.lng || -74.0721 };
|
|
S.map = new window.google.maps.Map(mapEl, {
|
|
center,
|
|
zoom: 14,
|
|
styles: ABD_THEMES[resolved] || [],
|
|
disableDefaultUI: true,
|
|
zoomControl: true,
|
|
zoomControlOptions: { position: window.google.maps.ControlPosition.RIGHT_CENTER },
|
|
gestureHandling: 'greedy',
|
|
});
|
|
|
|
// Botones de tema
|
|
document.querySelectorAll('.abd-theme-btn').forEach(b => {
|
|
b.classList.toggle('active', b.dataset.theme === savedTheme);
|
|
b.addEventListener('click', () => applyDriverMapTheme(b.dataset.theme));
|
|
});
|
|
|
|
// Driver marker
|
|
S.driverMarker = new window.google.maps.Marker({
|
|
position: center,
|
|
map: S.map,
|
|
icon: {
|
|
path: window.google.maps.SymbolPath.CIRCLE,
|
|
scale: 10,
|
|
fillColor: '#FF6F00',
|
|
fillOpacity: 1,
|
|
strokeColor: '#fff',
|
|
strokeWeight: 2,
|
|
},
|
|
title: 'Tu posición',
|
|
});
|
|
}
|
|
|
|
function updateDriverMarker() {
|
|
if (!S.map || S.lat === null) return;
|
|
const pos = { lat: S.lat, lng: S.lng };
|
|
if (S.driverMarker) S.driverMarker.setPosition(pos);
|
|
if (!S.trip) S.map.panTo(pos);
|
|
}
|
|
|
|
function setDestMarker(lat, lng) {
|
|
if (!S.map) return;
|
|
const pos = { lat: parseFloat(lat), lng: parseFloat(lng) };
|
|
if (S.destMarker) {
|
|
S.destMarker.setPosition(pos);
|
|
} else {
|
|
S.destMarker = new window.google.maps.Marker({
|
|
position: pos,
|
|
map: S.map,
|
|
icon: {
|
|
path: window.google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
|
|
scale: 8,
|
|
fillColor: '#22C55E',
|
|
fillOpacity: 1,
|
|
strokeColor: '#fff',
|
|
strokeWeight: 2,
|
|
},
|
|
title: 'Destino',
|
|
});
|
|
}
|
|
}
|
|
|
|
function drawTripRoute(trip) {
|
|
if (!S.map) return;
|
|
clearRoute();
|
|
const pickup = { lat: parseFloat(trip.pickup_lat), lng: parseFloat(trip.pickup_lng) };
|
|
const dropoff = { lat: parseFloat(trip.dropoff_lat), lng: parseFloat(trip.dropoff_lng) };
|
|
|
|
if (trip.route_polyline) {
|
|
const path = window.google.maps.geometry
|
|
? window.google.maps.geometry.encoding.decodePath(trip.route_polyline)
|
|
: [pickup, dropoff];
|
|
S.routePolyline = new window.google.maps.Polyline({
|
|
path,
|
|
map: S.map,
|
|
strokeColor: '#3b82f6',
|
|
strokeWeight: 4,
|
|
strokeOpacity: .85,
|
|
});
|
|
} else {
|
|
S.routePolyline = new window.google.maps.Polyline({
|
|
path: [pickup, dropoff],
|
|
map: S.map,
|
|
strokeColor: '#3b82f6',
|
|
strokeWeight: 4,
|
|
strokeOpacity: .7,
|
|
geodesic: true,
|
|
});
|
|
}
|
|
|
|
setDestMarker(trip.dropoff_lat, trip.dropoff_lng);
|
|
|
|
const bounds = new window.google.maps.LatLngBounds();
|
|
if (S.lat) bounds.extend({ lat: S.lat, lng: S.lng });
|
|
bounds.extend(pickup);
|
|
bounds.extend(dropoff);
|
|
S.map.fitBounds(bounds, { top: 40, right: 20, bottom: 20, left: 20 });
|
|
}
|
|
|
|
function clearRoute() {
|
|
if (S.routePolyline) { S.routePolyline.setMap(null); S.routePolyline = null; }
|
|
if (S.suggestPolyline) { S.suggestPolyline.setMap(null); S.suggestPolyline = null; }
|
|
if (S.destMarker) { S.destMarker.setMap(null); S.destMarker = null; }
|
|
}
|
|
|
|
function initRouteBanner() {
|
|
const accept = el('abd-route-accept');
|
|
const keep = el('abd-route-keep');
|
|
const banner = el('abd-route-banner');
|
|
if (accept) accept.addEventListener('click', () => {
|
|
if (S.routePolyline && S.suggestPolyline) {
|
|
S.routePolyline.setMap(null);
|
|
S.routePolyline = S.suggestPolyline;
|
|
S.suggestPolyline = null;
|
|
}
|
|
if (banner) banner.style.display = 'none';
|
|
});
|
|
if (keep) keep.addEventListener('click', () => {
|
|
if (S.suggestPolyline) { S.suggestPolyline.setMap(null); S.suggestPolyline = null; }
|
|
if (banner) banner.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
/* ── Polls ───────────────────────────────────────────────────── */
|
|
function startPolls() {
|
|
if (!S.tripPollInterval) S.tripPollInterval = setInterval(pollTrip, 8000);
|
|
if (!S.zonePollInterval) S.zonePollInterval = setInterval(pollZones, 30000);
|
|
pollTrip();
|
|
pollZones();
|
|
}
|
|
|
|
function stopPolls() {
|
|
if (S.tripPollInterval) { clearInterval(S.tripPollInterval); S.tripPollInterval = null; }
|
|
if (S.chatPollInterval) { clearInterval(S.chatPollInterval); S.chatPollInterval = null; }
|
|
if (S.zonePollInterval) { clearInterval(S.zonePollInterval); S.zonePollInterval = null; }
|
|
}
|
|
|
|
function startChatPoll(rideId) {
|
|
if (S.chatPollInterval) clearInterval(S.chatPollInterval);
|
|
S.chatPollInterval = setInterval(() => pollChat(rideId), 3000);
|
|
pollChat(rideId);
|
|
}
|
|
|
|
/* ── Trip poll ───────────────────────────────────────────────── */
|
|
async function pollTrip() {
|
|
try {
|
|
const trip = await api('/driver/current-trip');
|
|
if (trip && trip.id) {
|
|
if (!S.trip || S.trip.id !== trip.id || S.tripStatus !== trip.status) {
|
|
showTrip(trip);
|
|
} else {
|
|
S.trip = trip;
|
|
updateUnreadBadge(trip.unread_count || 0);
|
|
}
|
|
} else {
|
|
if (S.trip) hideTrip();
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
|
|
/* ── Trip state machine ──────────────────────────────────────── */
|
|
function setTelemetryInterval(ms) {
|
|
if (S.telemetryInterval) { clearInterval(S.telemetryInterval); S.telemetryInterval = null; }
|
|
S.telemetryInterval = setInterval(sendTelemetry, ms);
|
|
}
|
|
|
|
function showTrip(trip) {
|
|
const prevStatus = S.tripStatus;
|
|
S.trip = trip;
|
|
S.tripStatus = trip.status;
|
|
setTelemetryInterval(20000);
|
|
|
|
if (trip.status === 'finished') {
|
|
hideTrip();
|
|
toast('¡Viaje completado! Bien hecho. 🎉', 'success');
|
|
return;
|
|
}
|
|
if (trip.status === 'canceled') {
|
|
hideTrip();
|
|
toast('Viaje cancelado.', 'warn');
|
|
return;
|
|
}
|
|
|
|
el('abd-no-trip').style.display = 'none';
|
|
el('abd-active-trip').style.display = '';
|
|
|
|
// Passenger
|
|
const passName = el('abd-pass-name');
|
|
const passPhoto = el('abd-pass-photo');
|
|
if (passName) passName.textContent = trip.passenger_name || 'Pasajero';
|
|
if (passPhoto) {
|
|
passPhoto.src = trip.passenger_photo || '';
|
|
passPhoto.style.display = trip.passenger_photo ? '' : 'none';
|
|
}
|
|
|
|
// Status badge
|
|
const badge = el('abd-trip-status-badge');
|
|
if (badge) {
|
|
badge.textContent = statusLabel(trip.status);
|
|
badge.className = 'abd-trip-status-badge ' + statusBadgeClass(trip.status);
|
|
}
|
|
|
|
// Origin / Dest
|
|
const origin = el('abd-origin');
|
|
const dest = el('abd-dest');
|
|
if (origin) origin.textContent = coordStr(trip.pickup_lat, trip.pickup_lng);
|
|
if (dest) dest.textContent = coordStr(trip.dropoff_lat, trip.dropoff_lng);
|
|
|
|
// Distance
|
|
const distEl = el('abd-distance');
|
|
if (distEl && trip.fare_distance_m > 0) {
|
|
const km = (trip.fare_distance_m / 1000).toFixed(1);
|
|
const mi = (trip.fare_distance_m / 1609.34).toFixed(1);
|
|
distEl.textContent = km + ' km (' + mi + ' mi)';
|
|
} else if (distEl) {
|
|
distEl.textContent = '—';
|
|
}
|
|
|
|
// Fare
|
|
const fareEl = el('abd-fare');
|
|
if (fareEl) {
|
|
const cur = trip.currency || 'USD';
|
|
fareEl.textContent = cur + ' ' + parseFloat(trip.fare_total_amount || 0).toFixed(2);
|
|
}
|
|
|
|
// Instructions
|
|
const instrEl = el('abd-trip-instructions');
|
|
if (instrEl) instrEl.textContent = tripInstruction(trip.status);
|
|
|
|
// Courtesy timer
|
|
if (trip.status === 'waiting') {
|
|
if (prevStatus !== 'waiting') {
|
|
S.courtesySecondsLeft = 180;
|
|
startCourtesyTimer();
|
|
}
|
|
} else {
|
|
stopCourtesyTimer();
|
|
}
|
|
|
|
// SOS button
|
|
const sosBtn = el('abd-sos-btn');
|
|
if (sosBtn) sosBtn.style.display = trip.status === 'in_progress' ? '' : 'none';
|
|
|
|
// Chat
|
|
const chatDiv = el('abd-chat');
|
|
if (chatDiv) chatDiv.style.display = '';
|
|
startChatPoll(trip.id);
|
|
|
|
// Map route
|
|
if (trip.pickup_lat && trip.dropoff_lat) drawTripRoute(trip);
|
|
|
|
// Action buttons
|
|
renderButtons(trip.status, trip);
|
|
}
|
|
|
|
function hideTrip() {
|
|
S.trip = null;
|
|
S.tripStatus = null;
|
|
setTelemetryInterval(60000);
|
|
el('abd-no-trip').style.display = '';
|
|
el('abd-active-trip').style.display = 'none';
|
|
const chatDiv = el('abd-chat');
|
|
if (chatDiv) chatDiv.style.display = 'none';
|
|
if (S.chatPollInterval) { clearInterval(S.chatPollInterval); S.chatPollInterval = null; }
|
|
stopCourtesyTimer();
|
|
clearRoute();
|
|
el('abd-trip-actions').innerHTML = '';
|
|
S.chatLastId = 0;
|
|
S.unreadChat = 0;
|
|
}
|
|
|
|
function renderButtons(status, trip) {
|
|
const box = el('abd-trip-actions');
|
|
if (!box) return;
|
|
box.innerHTML = '';
|
|
|
|
function mkBtn(label, cls, onClick) {
|
|
const b = document.createElement('button');
|
|
b.className = 'abd-btn ' + cls;
|
|
b.textContent = label;
|
|
b.onclick = onClick;
|
|
box.appendChild(b);
|
|
}
|
|
|
|
if (status === 'assigned') {
|
|
mkBtn('✅ Aceptar viaje', 'abd-btn--brand', async () => {
|
|
box.querySelectorAll('button').forEach(b => { b.disabled = true; });
|
|
try {
|
|
await api('/trip/accept', 'POST', { trip_uuid: trip.trip_uuid });
|
|
toast('¡En camino al pasajero!', 'success');
|
|
pollTrip();
|
|
} catch (e) { toast('Error al aceptar viaje.', 'error'); box.querySelectorAll('button').forEach(b => { b.disabled = false; }); }
|
|
});
|
|
} else if (status === 'en_route') {
|
|
mkBtn('📍 Ya llegué', 'abd-btn--brand', async () => {
|
|
box.querySelectorAll('button').forEach(b => { b.disabled = true; });
|
|
try {
|
|
await api('/trip/arrive', 'POST', { trip_uuid: trip.trip_uuid });
|
|
toast('¡Esperando al pasajero!', 'success');
|
|
pollTrip();
|
|
} catch (e) { toast('Error.', 'error'); box.querySelectorAll('button').forEach(b => { b.disabled = false; }); }
|
|
});
|
|
mkBtn('❌ Cancelar viaje', 'abd-btn--ghost', () => confirmCancel(trip));
|
|
} else if (status === 'waiting') {
|
|
mkBtn('🚗 Iniciar viaje', 'abd-btn--brand', async () => {
|
|
box.querySelectorAll('button').forEach(b => { b.disabled = true; });
|
|
try {
|
|
await api('/trip/start', 'POST', { trip_uuid: trip.trip_uuid });
|
|
toast('¡Viaje iniciado!', 'success');
|
|
stopCourtesyTimer();
|
|
pollTrip();
|
|
} catch (e) { toast('Error al iniciar viaje.', 'error'); box.querySelectorAll('button').forEach(b => { b.disabled = false; }); }
|
|
});
|
|
mkBtn('❌ Cancelar viaje', 'abd-btn--ghost', () => confirmCancel(trip));
|
|
} else if (status === 'in_progress') {
|
|
mkBtn('🏁 Finalizar viaje', 'abd-btn--brand', () => openFinishModal(trip));
|
|
}
|
|
}
|
|
|
|
function confirmCancel(trip) {
|
|
if (!confirm('¿Cancelar este viaje?')) return;
|
|
api('/trip/cancel', 'POST', { trip_uuid: trip.trip_uuid })
|
|
.then(() => { toast('Viaje cancelado.', 'info'); pollTrip(); })
|
|
.catch(() => toast('Error al cancelar.', 'error'));
|
|
}
|
|
|
|
function tripInstruction(status) {
|
|
const map = {
|
|
assigned: 'Nuevo viaje asignado. Presiona ACEPTAR para confirmar.',
|
|
en_route: 'En camino al pasajero. Presiona LLEGUÉ cuando estés en el punto.',
|
|
waiting: 'Esperando al pasajero. Inicia el viaje cuando suba al vehículo.',
|
|
in_progress: 'Viaje en curso. Finaliza cuando llegues al destino.',
|
|
finished: '¡Viaje completado! Bien hecho.',
|
|
canceled: 'Viaje cancelado.',
|
|
};
|
|
return map[status] || '';
|
|
}
|
|
|
|
function statusLabel(status) {
|
|
const map = {
|
|
assigned: 'Asignado',
|
|
en_route: 'En camino',
|
|
waiting: 'Esperando',
|
|
in_progress: 'En progreso',
|
|
finished: 'Finalizado',
|
|
canceled: 'Cancelado',
|
|
};
|
|
return map[status] || status;
|
|
}
|
|
|
|
function statusBadgeClass(status) {
|
|
const map = {
|
|
assigned: 'abd-status-badge abd-status-badge--assigned',
|
|
en_route: 'abd-status-badge abd-status-badge--progress',
|
|
waiting: 'abd-status-badge abd-status-badge--waiting',
|
|
in_progress: 'abd-status-badge abd-status-badge--progress',
|
|
finished: 'abd-status-badge abd-status-badge--finished',
|
|
canceled: 'abd-status-badge abd-status-badge--canceled',
|
|
};
|
|
return map[status] || 'abd-status-badge';
|
|
}
|
|
|
|
function coordStr(lat, lng) {
|
|
if (!lat || !lng) return '—';
|
|
return parseFloat(lat).toFixed(4) + ', ' + parseFloat(lng).toFixed(4);
|
|
}
|
|
|
|
/* ── Courtesy timer ──────────────────────────────────────────── */
|
|
function startCourtesyTimer() {
|
|
stopCourtesyTimer();
|
|
const wrap = el('abd-courtesy-timer');
|
|
const val = el('abd-courtesy-val');
|
|
if (wrap) wrap.style.display = '';
|
|
function tick() {
|
|
if (!val) return;
|
|
const m = Math.floor(S.courtesySecondsLeft / 60);
|
|
const s = S.courtesySecondsLeft % 60;
|
|
val.textContent = m + ':' + (s < 10 ? '0' : '') + s;
|
|
if (S.courtesySecondsLeft <= 0) {
|
|
stopCourtesyTimer();
|
|
toast('Tiempo de cortesía expirado.', 'warn');
|
|
}
|
|
S.courtesySecondsLeft--;
|
|
}
|
|
tick();
|
|
S.courtesyInterval = setInterval(tick, 1000);
|
|
}
|
|
|
|
function stopCourtesyTimer() {
|
|
if (S.courtesyInterval) { clearInterval(S.courtesyInterval); S.courtesyInterval = null; }
|
|
const wrap = el('abd-courtesy-timer');
|
|
if (wrap) wrap.style.display = 'none';
|
|
}
|
|
|
|
/* ── Finish modal ────────────────────────────────────────────── */
|
|
function openFinishModal(trip) {
|
|
el('abd-tolls-input').value = '0';
|
|
el('abd-tips-input').value = '0';
|
|
el('abd-finish-modal').style.display = 'flex';
|
|
|
|
el('abd-finish-confirm').onclick = async () => {
|
|
const tolls = parseFloat(el('abd-tolls-input').value) || 0;
|
|
const tips = parseFloat(el('abd-tips-input').value) || 0;
|
|
el('abd-finish-confirm').disabled = true;
|
|
try {
|
|
await api('/trip/finish', 'POST', {
|
|
trip_uuid: trip.trip_uuid,
|
|
tolls_amount: tolls,
|
|
tips_amount: tips,
|
|
});
|
|
el('abd-finish-modal').style.display = 'none';
|
|
toast('¡Viaje finalizado! 🎉', 'success');
|
|
hideTrip();
|
|
if (S.online) loadEarnings('day', false);
|
|
} catch (e) {
|
|
toast('Error al finalizar viaje.', 'error');
|
|
}
|
|
el('abd-finish-confirm').disabled = false;
|
|
};
|
|
el('abd-finish-cancel').onclick = () => { el('abd-finish-modal').style.display = 'none'; };
|
|
}
|
|
|
|
/* ── Chat ────────────────────────────────────────────────────── */
|
|
async function pollChat(rideId) {
|
|
if (!rideId) return;
|
|
try {
|
|
const msgs = await api('/chat/list?ride_id=' + rideId + '&after_id=' + S.chatLastId);
|
|
if (msgs && msgs.length) {
|
|
msgs.forEach(m => appendChatBubble(m));
|
|
S.chatLastId = msgs[msgs.length - 1].id;
|
|
if (!S.chatOpen) {
|
|
S.unreadChat += msgs.filter(m => m.sender !== 'driver').length;
|
|
updateUnreadBadge(S.unreadChat);
|
|
}
|
|
const msgsDiv = el('abd-chat-msgs');
|
|
if (msgsDiv) msgsDiv.scrollTop = msgsDiv.scrollHeight;
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
|
|
function appendChatBubble(m) {
|
|
const msgsDiv = el('abd-chat-msgs');
|
|
if (!msgsDiv) return;
|
|
const isDriver = m.sender === 'driver';
|
|
const div = document.createElement('div');
|
|
div.className = 'abd-chat-bubble ' + (isDriver ? 'abd-chat-bubble--driver' : 'abd-chat-bubble--customer');
|
|
const timeStr = m.created_at ? new Date(m.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
|
|
div.innerHTML = escapeHtml(m.message) + '<span class="abd-chat-time">' + timeStr + '</span>';
|
|
msgsDiv.appendChild(div);
|
|
}
|
|
|
|
function updateUnreadBadge(count) {
|
|
S.unreadChat = count;
|
|
const badge = el('abd-chat-badge');
|
|
if (!badge) return;
|
|
if (count > 0) { badge.textContent = count; badge.style.display = ''; }
|
|
else { badge.style.display = 'none'; }
|
|
}
|
|
|
|
function initChat() {
|
|
const sendBtn = el('abd-chat-send');
|
|
const input = el('abd-chat-input');
|
|
if (sendBtn) sendBtn.addEventListener('click', sendChat);
|
|
if (input) input.addEventListener('keypress', e => { if (e.key === 'Enter') sendChat(); });
|
|
|
|
const hdr = el('abd-chat-toggle-header');
|
|
if (hdr) hdr.addEventListener('click', () => {
|
|
S.chatOpen = !S.chatOpen;
|
|
const body = el('abd-chat-body');
|
|
if (body) body.style.display = S.chatOpen ? '' : 'none';
|
|
if (S.chatOpen) { S.unreadChat = 0; updateUnreadBadge(0); }
|
|
});
|
|
}
|
|
|
|
async function sendChat() {
|
|
const input = el('abd-chat-input');
|
|
if (!input || !S.trip) return;
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
input.value = '';
|
|
try {
|
|
await api('/chat/send', 'POST', { ride_id: S.trip.id, message: msg, sender: 'driver' });
|
|
} catch (e) { toast('Error al enviar mensaje.', 'error'); }
|
|
}
|
|
|
|
/* ── Zone alerts ─────────────────────────────────────────────── */
|
|
async function pollZones() {
|
|
try {
|
|
const zones = await api('/driver/zones');
|
|
if (zones && zones.length > 0) {
|
|
showZoneCard(zones[0]);
|
|
} else {
|
|
hideZoneCard();
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
|
|
function showZoneCard(zone) {
|
|
if (S.activeZoneId === zone.id) return;
|
|
S.activeZoneId = zone.id;
|
|
el('abd-zone-card').style.display = '';
|
|
el('abd-zone-title').textContent = zone.title || '';
|
|
el('abd-zone-desc').textContent = zone.description || '';
|
|
const typeBadge = el('abd-zone-type-badge');
|
|
if (typeBadge) typeBadge.textContent = (zone.type || 'hotspot').toUpperCase();
|
|
|
|
const bonusWrap = el('abd-zone-bonus');
|
|
const bonusVal = el('abd-zone-bonus-val');
|
|
if (zone.bonus_amount > 0) {
|
|
bonusWrap.style.display = '';
|
|
bonusVal.textContent = zone.bonus_currency + ' ' + parseFloat(zone.bonus_amount).toFixed(2);
|
|
} else {
|
|
bonusWrap.style.display = 'none';
|
|
}
|
|
|
|
// Countdown
|
|
let secs = parseInt(zone.countdown_seconds) || 180;
|
|
if (S.zoneTimers[zone.id]) clearInterval(S.zoneTimers[zone.id]);
|
|
const cdEl = el('abd-zone-countdown');
|
|
function renderCountdown() {
|
|
const m = Math.floor(secs / 60);
|
|
const s = secs % 60;
|
|
if (cdEl) cdEl.textContent = m + ':' + (s < 10 ? '0' : '') + s;
|
|
if (secs <= 0) {
|
|
clearInterval(S.zoneTimers[zone.id]);
|
|
api('/driver/zone-response', 'POST', { zone_id: zone.id, response: 'not_going' }).catch(() => {});
|
|
hideZoneCard();
|
|
}
|
|
secs--;
|
|
}
|
|
renderCountdown();
|
|
S.zoneTimers[zone.id] = setInterval(renderCountdown, 1000);
|
|
|
|
// Buttons
|
|
const goBtn = el('abd-zone-going');
|
|
const noBtn = el('abd-zone-no');
|
|
goBtn.onclick = async () => {
|
|
try {
|
|
await api('/driver/zone-response', 'POST', { zone_id: zone.id, response: 'going' });
|
|
toast('¡En camino a la zona!', 'success');
|
|
} catch (_) {}
|
|
clearInterval(S.zoneTimers[zone.id]);
|
|
hideZoneCard();
|
|
};
|
|
noBtn.onclick = async () => {
|
|
try {
|
|
await api('/driver/zone-response', 'POST', { zone_id: zone.id, response: 'not_going' });
|
|
} catch (_) {}
|
|
clearInterval(S.zoneTimers[zone.id]);
|
|
hideZoneCard();
|
|
};
|
|
}
|
|
|
|
function hideZoneCard() {
|
|
S.activeZoneId = null;
|
|
const card = el('abd-zone-card');
|
|
if (card) card.style.display = 'none';
|
|
}
|
|
|
|
/* ── Earnings ────────────────────────────────────────────────── */
|
|
async function loadEarnings(period, loadYear) {
|
|
S.earnPeriod = period;
|
|
try {
|
|
const data = await api('/driver/earnings?period=' + period);
|
|
el('abd-earn-gross').textContent = '$' + data.gross.toFixed(2);
|
|
el('abd-earn-fee').textContent = '-$' + data.fee.toFixed(2);
|
|
el('abd-earn-net').textContent = '$' + data.net.toFixed(2);
|
|
el('abd-earn-trips').textContent = data.trips_count + ' viaje' + (data.trips_count !== 1 ? 's' : '') + ' · ' + data.distance_km + ' km';
|
|
renderBarChart(data.last_7_days || []);
|
|
} catch (_) { toast('Error al cargar ganancias.', 'error'); }
|
|
|
|
if (loadYear || !S.yearData) {
|
|
try {
|
|
const yData = await api('/driver/earnings?period=year');
|
|
S.yearData = yData;
|
|
el('abd-tax-gross').textContent = '$' + yData.gross.toFixed(2);
|
|
el('abd-tax-fee').textContent = '-$' + yData.fee.toFixed(2);
|
|
el('abd-tax-net').textContent = '$' + yData.net.toFixed(2);
|
|
} catch (_) {}
|
|
}
|
|
}
|
|
|
|
function renderBarChart(days) {
|
|
const container = el('abd-bar-chart');
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
const max = Math.max(...days.map(d => d.net), 0.01);
|
|
const dayNames = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
|
|
|
|
days.forEach(d => {
|
|
const col = document.createElement('div');
|
|
col.className = 'abd-bar-col';
|
|
|
|
const bar = document.createElement('div');
|
|
bar.className = 'abd-bar';
|
|
const pct = Math.max(4, Math.round((d.net / max) * 100));
|
|
bar.style.height = pct + 'px';
|
|
|
|
const tip = document.createElement('div');
|
|
tip.className = 'abd-bar-tooltip';
|
|
tip.textContent = '$' + parseFloat(d.net).toFixed(2);
|
|
bar.appendChild(tip);
|
|
|
|
const lbl = document.createElement('div');
|
|
lbl.className = 'abd-bar-label';
|
|
const dt = new Date(d.date + 'T00:00:00');
|
|
lbl.textContent = dayNames[dt.getDay()];
|
|
|
|
col.appendChild(bar);
|
|
col.appendChild(lbl);
|
|
container.appendChild(col);
|
|
});
|
|
}
|
|
|
|
function initPeriodTabs() {
|
|
document.querySelectorAll('.abd-period-tab').forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
document.querySelectorAll('.abd-period-tab').forEach(b => b.classList.remove('abd-period-tab--active'));
|
|
this.classList.add('abd-period-tab--active');
|
|
loadEarnings(this.dataset.period, false);
|
|
});
|
|
});
|
|
}
|
|
|
|
function initExportCSV() {
|
|
const btn = el('abd-export-csv');
|
|
if (btn) btn.addEventListener('click', exportEarningsCSV);
|
|
}
|
|
|
|
async function exportEarningsCSV() {
|
|
try {
|
|
const data = await api('/driver/history?per_page=1000');
|
|
const rows = data.rows || data.trips || [];
|
|
let csv = '\uFEFF' + 'Fecha,Pasajero,Bruto,Comisión,Neto,Estado\r\n';
|
|
rows.forEach(t => {
|
|
const date = (t.created_at || '').slice(0, 10);
|
|
csv += [
|
|
date,
|
|
'"' + (t.passenger_name || '').replace(/"/g, '""') + '"',
|
|
parseFloat(t.fare_total_amount || 0).toFixed(2),
|
|
parseFloat(t.platform_fee_amount || 0).toFixed(2),
|
|
parseFloat(t.driver_payout_amount || 0).toFixed(2),
|
|
t.status || '',
|
|
].join(',') + '\r\n';
|
|
});
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
downloadCSV(csv, 'ganancias_' + today + '.csv');
|
|
} catch (_) { toast('Error al exportar.', 'error'); }
|
|
}
|
|
|
|
function downloadCSV(content, filename) {
|
|
const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
/* ── Metrics ─────────────────────────────────────────────────── */
|
|
async function loadMetrics() {
|
|
try {
|
|
const m = await api('/driver/metrics');
|
|
setBar('bar-acceptance', 'val-acceptance', m.acceptance_rate, m.acceptance_rate + '%');
|
|
setBar('bar-completion', 'val-completion', m.completion_rate, m.completion_rate + '%');
|
|
renderStars(m.avg_rating || 0);
|
|
el('val-rating').textContent = m.avg_rating ? m.avg_rating.toFixed(1) + '★' : '—';
|
|
const maxHours = 60;
|
|
const hrPct = Math.min(100, (m.online_hours_week / maxHours) * 100);
|
|
setBar('bar-hours', 'val-hours', hrPct, m.online_hours_week + 'h');
|
|
const total = m.zones_responded + m.zones_ignored;
|
|
const zpct = total > 0 ? Math.round((m.zones_responded / total) * 100) : 0;
|
|
setBar('bar-zones', 'val-zones', zpct, m.zones_responded + '/' + total);
|
|
} catch (_) { toast('Error al cargar métricas.', 'error'); }
|
|
}
|
|
|
|
function setBar(barId, valId, pct, label) {
|
|
const bar = el(barId);
|
|
const val = el(valId);
|
|
if (bar) bar.style.width = Math.min(100, Math.max(0, pct)) + '%';
|
|
if (val) val.textContent = label;
|
|
}
|
|
|
|
function renderStars(rating) {
|
|
const container = el('abd-stars');
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
for (let i = 1; i <= 5; i++) {
|
|
const span = document.createElement('span');
|
|
span.textContent = '★';
|
|
span.className = i <= Math.round(rating) ? 'abd-star-fill' : 'abd-star-empty';
|
|
container.appendChild(span);
|
|
}
|
|
}
|
|
|
|
/* ── History ─────────────────────────────────────────────────── */
|
|
async function loadHistory(page, from, to) {
|
|
S.histPage = page || 1;
|
|
S.histFrom = from || '';
|
|
S.histTo = to || '';
|
|
const tbody = el('abd-history-tbody');
|
|
if (tbody) tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:20px;color:rgba(255,255,255,.4);">Cargando...</td></tr>';
|
|
try {
|
|
let url = '/driver/history?page=' + S.histPage + '&per_page=20';
|
|
if (S.histFrom) url += '&date_from=' + S.histFrom;
|
|
if (S.histTo) url += '&date_to=' + S.histTo;
|
|
const data = await api(url);
|
|
S.historyData = data.rows || data.trips || [];
|
|
renderHistoryTable(S.historyData);
|
|
renderPagination(data.page, data.total_pages);
|
|
} catch (_) {
|
|
if (tbody) tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:32px;"><div style="font-size:32px;margin-bottom:8px;">🚗</div><div style="color:rgba(255,255,255,.5);font-size:14px;">Sin viajes aún</div></td></tr>';
|
|
}
|
|
}
|
|
|
|
function renderHistoryTable(trips) {
|
|
const tbody = el('abd-history-tbody');
|
|
if (!tbody) return;
|
|
if (!trips.length) {
|
|
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;padding:32px;"><div style="font-size:32px;margin-bottom:8px;">🚗</div><div style="color:rgba(255,255,255,.5);font-size:14px;">Sin viajes aún</div></td></tr>';
|
|
return;
|
|
}
|
|
tbody.innerHTML = '';
|
|
trips.forEach(t => {
|
|
const tr = document.createElement('tr');
|
|
const date = (t.created_at || '').slice(0, 10);
|
|
const ruta = coordStr(t.pickup_lat, t.pickup_lng) + ' → ' + coordStr(t.dropoff_lat, t.dropoff_lng);
|
|
const gross = '$' + parseFloat(t.fare_total_amount || 0).toFixed(2);
|
|
const fee = '-$'+ parseFloat(t.platform_fee_amount || 0).toFixed(2);
|
|
const net = '$' + parseFloat(t.driver_payout_amount || 0).toFixed(2);
|
|
tr.innerHTML = [
|
|
'<td>' + escapeHtml(date) + '</td>',
|
|
'<td>' + escapeHtml(t.passenger_name || '—') + '</td>',
|
|
'<td style="font-size:11px;color:rgba(255,255,255,.5);">' + escapeHtml(ruta) + '</td>',
|
|
'<td>' + gross + '</td>',
|
|
'<td style="color:var(--ab-red)">' + fee + '</td>',
|
|
'<td style="color:var(--ab-orange);font-weight:700">' + net + '</td>',
|
|
'<td><span class="abd-status-badge ' + statusBadgeClass(t.status) + '">' + statusLabel(t.status) + '</span></td>',
|
|
].join('');
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function renderPagination(page, totalPages) {
|
|
const box = el('abd-history-pagination');
|
|
if (!box) return;
|
|
box.innerHTML = '';
|
|
if (totalPages <= 1) return;
|
|
|
|
function mkBtn(label, pg, active, disabled) {
|
|
const b = document.createElement('button');
|
|
b.className = 'abd-page-btn' + (active ? ' abd-page-btn--active' : '');
|
|
b.textContent = label;
|
|
b.disabled = !!disabled;
|
|
if (!disabled) b.onclick = () => loadHistory(pg, S.histFrom, S.histTo);
|
|
box.appendChild(b);
|
|
}
|
|
|
|
mkBtn('← Ant', page - 1, false, page <= 1);
|
|
const info = document.createElement('span');
|
|
info.className = 'abd-page-info';
|
|
info.textContent = 'Pág ' + page + ' / ' + totalPages;
|
|
box.appendChild(info);
|
|
mkBtn('Sig →', page + 1, false, page >= totalPages);
|
|
}
|
|
|
|
function initHistoryFilters() {
|
|
const btn = el('abd-hist-filter');
|
|
if (btn) btn.addEventListener('click', () => {
|
|
const from = el('abd-hist-from').value;
|
|
const to = el('abd-hist-to').value;
|
|
loadHistory(1, from, to);
|
|
});
|
|
}
|
|
|
|
/* ── Profile ─────────────────────────────────────────────────── */
|
|
async function loadProfile() {
|
|
try {
|
|
const p = await api('/driver/profile');
|
|
const photoEl = el('abd-prof-photo');
|
|
if (photoEl) { photoEl.src = p.photo_url || ''; photoEl.style.display = p.photo_url ? '' : 'none'; }
|
|
setTextEl('abd-prof-name', p.name || '—');
|
|
setTextEl('abd-prof-vehicle', [p.vehicle_type, p.vehicle_plate].filter(Boolean).join(' • ') || '—');
|
|
setTextEl('abd-prof-email', p.email ? '✉ ' + p.email : '');
|
|
setTextEl('abd-prof-phone', p.phone ? '📞 ' + p.phone : '');
|
|
|
|
renderDocRow('doc-insurance', p.insurance_expiry, p.insurance_status);
|
|
renderDocRow('doc-license', p.license_expiry, p.license_status);
|
|
renderDocRow('doc-inspection', p.inspection_expiry, p.inspection_status);
|
|
|
|
loadScheduled();
|
|
} catch (_) { toast('Error al cargar perfil.', 'error'); }
|
|
}
|
|
|
|
function renderDocRow(rowId, expiry, status) {
|
|
const row = el(rowId);
|
|
if (!row) return;
|
|
const icon = row.querySelector('.abd-doc-icon');
|
|
const exp = row.querySelector('.abd-doc-expiry');
|
|
const badge = row.querySelector('.abd-doc-status-badge');
|
|
const icons = { ok: '✅', warning: '⚠️', expired: '❌', unknown: '❓' };
|
|
const labels= { ok: 'Vigente', warning: 'Por vencer', expired: 'Vencido', unknown: 'Sin dato' };
|
|
if (icon) icon.textContent = icons[status] || '❓';
|
|
if (exp) exp.textContent = expiry ? expiry : '—';
|
|
if (badge) {
|
|
badge.textContent = labels[status] || '—';
|
|
badge.className = 'abd-doc-status-badge abd-doc-status-badge--' + (status || 'unknown');
|
|
}
|
|
}
|
|
|
|
async function loadScheduled() {
|
|
const list = el('abd-scheduled-list');
|
|
if (!list) return;
|
|
try {
|
|
const trips = await api('/driver/scheduled');
|
|
if (!trips || !trips.length) {
|
|
list.innerHTML = '<p style="color:rgba(255,255,255,.5);font-size:14px;">Sin viajes programados próximamente.</p>';
|
|
return;
|
|
}
|
|
list.innerHTML = '';
|
|
trips.forEach(t => {
|
|
const div = document.createElement('div');
|
|
div.className = 'abd-scheduled-item';
|
|
const dt = t.pickup_time ? new Date(t.pickup_time).toLocaleString() : '—';
|
|
div.innerHTML = '<div class="abd-scheduled-time">' + escapeHtml(dt) + '</div>'
|
|
+ '<div class="abd-scheduled-meta">'
|
|
+ '👤 ' + escapeHtml(t.passenger_name || '—') + '<br>'
|
|
+ '📍 ' + escapeHtml(t.pickup_address || '—') + ' → ' + escapeHtml(t.dropoff_address || '—') + '<br>'
|
|
+ '💰 ' + (t.currency || '') + ' ' + parseFloat(t.fare_total_amount || t.estimated_fare || 0).toFixed(2)
|
|
+ '</div>';
|
|
list.appendChild(div);
|
|
});
|
|
} catch (_) {}
|
|
}
|
|
|
|
/* ── Profile edit & change-password ─────────────────────────── */
|
|
function initProfile() {
|
|
const btnEdit = el('abd-btn-edit-profile');
|
|
const btnPwd = el('abd-btn-change-password');
|
|
if (btnEdit) btnEdit.addEventListener('click', openEditProfile);
|
|
if (btnPwd) btnPwd.addEventListener('click', openChangePwd);
|
|
|
|
// Change-password modal
|
|
const pwdModal = el('abd-pwd-modal');
|
|
const pwdSave = el('abd-pwd-save');
|
|
const pwdCancel = el('abd-pwd-cancel');
|
|
if (pwdCancel) pwdCancel.addEventListener('click', () => { pwdModal.style.display = 'none'; });
|
|
if (pwdModal) pwdModal.addEventListener('click', e => { if (e.target === pwdModal) pwdModal.style.display = 'none'; });
|
|
if (pwdSave) pwdSave.addEventListener('click', doChangePwd);
|
|
|
|
// Edit-profile modal
|
|
const epModal = el('abd-editprofile-modal');
|
|
const epSave = el('abd-ep-save');
|
|
const epCancel = el('abd-ep-cancel');
|
|
if (epCancel) epCancel.addEventListener('click', () => { epModal.style.display = 'none'; });
|
|
if (epModal) epModal.addEventListener('click', e => { if (e.target === epModal) epModal.style.display = 'none'; });
|
|
if (epSave) epSave.addEventListener('click', doUpdateProfile);
|
|
|
|
// Photo file picker
|
|
const photoBtn = el('abd-ep-photo-btn');
|
|
const photoFile = el('abd-ep-photo-file');
|
|
const photoPreview = el('abd-ep-photo-preview');
|
|
if (photoBtn && photoFile) {
|
|
photoBtn.addEventListener('click', () => photoFile.click());
|
|
photoFile.addEventListener('change', () => {
|
|
const file = photoFile.files[0];
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
el('abd-ep-photo-url').value = '';
|
|
if (photoPreview) { photoPreview.src = e.target.result; photoPreview.style.display = ''; }
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
// URL field preview
|
|
const photoUrl = el('abd-ep-photo-url');
|
|
if (photoUrl) {
|
|
photoUrl.addEventListener('input', () => {
|
|
if (photoPreview && photoUrl.value) { photoPreview.src = photoUrl.value; photoPreview.style.display = ''; }
|
|
});
|
|
}
|
|
}
|
|
|
|
function openChangePwd() {
|
|
const m = el('abd-pwd-modal');
|
|
if (!m) return;
|
|
['abd-pwd-current','abd-pwd-new','abd-pwd-confirm'].forEach(id => { const i = el(id); if(i) i.value = ''; });
|
|
const s = el('abd-pwd-status'); if(s) s.textContent = '';
|
|
m.style.display = 'flex';
|
|
}
|
|
|
|
async function doChangePwd() {
|
|
const btn = el('abd-pwd-save');
|
|
const status = el('abd-pwd-status');
|
|
const current = el('abd-pwd-current')?.value || '';
|
|
const newPw = el('abd-pwd-new')?.value || '';
|
|
const confirm = el('abd-pwd-confirm')?.value || '';
|
|
|
|
if (!current || !newPw || !confirm) { status.textContent = 'Completa todos los campos.'; return; }
|
|
if (newPw !== confirm) { status.textContent = 'Las contraseñas no coinciden.'; return; }
|
|
if (newPw.length < 8) { status.textContent = 'Mínimo 8 caracteres.'; return; }
|
|
|
|
btn.disabled = true; btn.textContent = 'Guardando…';
|
|
status.textContent = '';
|
|
try {
|
|
const r = await api('/driver/change-password', 'POST', { current_password: current, new_password: newPw, confirm_password: confirm });
|
|
status.style.color = 'var(--ab-green)';
|
|
status.textContent = '✅ ' + (r.msg || 'Contraseña actualizada.');
|
|
setTimeout(() => { el('abd-pwd-modal').style.display = 'none'; }, 1800);
|
|
} catch(e) {
|
|
status.style.color = 'var(--ab-red)';
|
|
status.textContent = e.message || 'Error al cambiar contraseña.';
|
|
} finally {
|
|
btn.disabled = false; btn.textContent = 'Guardar';
|
|
}
|
|
}
|
|
|
|
async function openEditProfile() {
|
|
const m = el('abd-editprofile-modal');
|
|
if (!m) return;
|
|
el('abd-ep-status').textContent = '';
|
|
try {
|
|
const p = await api('/driver/profile');
|
|
const phoneEl = el('abd-ep-phone'); if(phoneEl) phoneEl.value = p.phone || '';
|
|
const vehicleEl = el('abd-ep-vehicle'); if(vehicleEl) vehicleEl.value = p.vehicle_type || '';
|
|
const plateEl = el('abd-ep-plate'); if(plateEl) plateEl.value = p.vehicle_plate || '';
|
|
const urlEl = el('abd-ep-photo-url'); if(urlEl) urlEl.value = '';
|
|
const preview = el('abd-ep-photo-preview');
|
|
if (preview && p.photo_url) { preview.src = p.photo_url; preview.style.display = ''; }
|
|
else if (preview) { preview.style.display = 'none'; }
|
|
} catch(_) {}
|
|
m.style.display = 'flex';
|
|
}
|
|
|
|
async function doUpdateProfile() {
|
|
const btn = el('abd-ep-save');
|
|
const status = el('abd-ep-status');
|
|
btn.disabled = true; btn.textContent = 'Guardando…';
|
|
status.textContent = '';
|
|
|
|
// Determine photo: file upload (base64) or URL
|
|
let photoUrl = el('abd-ep-photo-url')?.value?.trim() || '';
|
|
const photoFile = el('abd-ep-photo-file');
|
|
if (!photoUrl && photoFile && photoFile.files[0]) {
|
|
photoUrl = await new Promise(res => {
|
|
const r = new FileReader();
|
|
r.onload = e => res(e.target.result);
|
|
r.readAsDataURL(photoFile.files[0]);
|
|
});
|
|
}
|
|
|
|
const body = {
|
|
phone: el('abd-ep-phone')?.value.trim() || '',
|
|
vehicle_type: el('abd-ep-vehicle')?.value.trim() || '',
|
|
vehicle_plate: el('abd-ep-plate')?.value.trim() || '',
|
|
photo_url: photoUrl,
|
|
};
|
|
|
|
try {
|
|
const r = await api('/driver/update-profile', 'POST', body);
|
|
status.style.color = 'var(--ab-green)';
|
|
status.textContent = '✅ ' + (r.msg || 'Perfil actualizado.');
|
|
// Reload profile display
|
|
loadProfile();
|
|
setTimeout(() => { el('abd-editprofile-modal').style.display = 'none'; }, 1800);
|
|
} catch(e) {
|
|
status.style.color = 'var(--ab-red)';
|
|
status.textContent = e.message || 'Error al guardar.';
|
|
} finally {
|
|
btn.disabled = false; btn.textContent = 'Guardar cambios';
|
|
}
|
|
}
|
|
|
|
/* ── SOS / Panic ─────────────────────────────────────────────── */
|
|
function initSOS() {
|
|
const sosBtn = el('abd-sos-btn');
|
|
const modal = el('abd-sos-modal');
|
|
const confirm = el('abd-sos-confirm');
|
|
const cancelBtn = el('abd-sos-cancel');
|
|
const stopBtn = el('abd-sos-stop');
|
|
|
|
if (sosBtn) sosBtn.addEventListener('click', () => { if (modal) modal.style.display = 'flex'; startMediaPreview(); });
|
|
if (cancelBtn) cancelBtn.addEventListener('click', () => {
|
|
modal.style.display = 'none';
|
|
stopMediaPreview();
|
|
});
|
|
if (confirm) confirm.addEventListener('click', activateSOS);
|
|
if (stopBtn) stopBtn.addEventListener('click', stopSOS);
|
|
}
|
|
|
|
async function startMediaPreview() {
|
|
const video = el('abd-sos-video');
|
|
const status = el('abd-sos-rec-status');
|
|
try {
|
|
S.mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
|
|
if (video) { video.srcObject = S.mediaStream; video.style.display = ''; }
|
|
if (status) status.textContent = 'Cámara y micrófono listos.';
|
|
} catch (_) {
|
|
try {
|
|
S.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
if (video) video.style.display = 'none';
|
|
if (status) status.textContent = 'Solo audio disponible (sin cámara).';
|
|
} catch (e2) {
|
|
if (status) status.textContent = 'Sin acceso a medios. Se enviará solo ubicación GPS.';
|
|
}
|
|
}
|
|
}
|
|
|
|
function stopMediaPreview() {
|
|
if (S.mediaStream) {
|
|
S.mediaStream.getTracks().forEach(t => t.stop());
|
|
S.mediaStream = null;
|
|
}
|
|
const video = el('abd-sos-video');
|
|
if (video) { video.srcObject = null; video.style.display = 'none'; }
|
|
}
|
|
|
|
async function activateSOS() {
|
|
const modal = el('abd-sos-modal');
|
|
const status = el('abd-sos-rec-status');
|
|
if (status) status.textContent = 'Enviando alerta...';
|
|
el('abd-sos-confirm').disabled = true;
|
|
|
|
try {
|
|
const body = { lat: S.lat || 0, lng: S.lng || 0 };
|
|
if (S.trip) body.trip_uuid = S.trip.trip_uuid;
|
|
const res = await api('/incident/sos', 'POST', body);
|
|
S.incidentId = res.incident_id;
|
|
S.sosChunkIndex = 0;
|
|
|
|
if (modal) modal.style.display = 'none';
|
|
el('abd-sos-badge').style.display = '';
|
|
toast('🚨 Alerta enviada. Admin notificado.', 'error');
|
|
|
|
if (S.mediaStream) {
|
|
startMediaRecording();
|
|
}
|
|
} catch (e) {
|
|
if (status) status.textContent = 'Error al enviar alerta.';
|
|
toast('Error al activar SOS.', 'error');
|
|
}
|
|
el('abd-sos-confirm').disabled = false;
|
|
}
|
|
|
|
function startMediaRecording() {
|
|
if (!S.mediaStream || !S.incidentId) return;
|
|
try {
|
|
const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : '';
|
|
S.mediaRec = new MediaRecorder(S.mediaStream, mimeType ? { mimeType } : {});
|
|
let chunks = [];
|
|
|
|
S.mediaRec.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
|
|
S.mediaRec.onstop = async () => {
|
|
if (!chunks.length || !S.incidentId) return;
|
|
const blob = new Blob(chunks, { type: mimeType || 'audio/webm' });
|
|
const reader = new FileReader();
|
|
reader.onloadend = async () => {
|
|
const b64 = reader.result.split(',')[1];
|
|
try {
|
|
await api('/incident/sos', 'POST', {
|
|
incident_id: S.incidentId,
|
|
chunk_index: S.sosChunkIndex,
|
|
audio_data: b64,
|
|
});
|
|
} catch (_) {}
|
|
S.sosChunkIndex++;
|
|
chunks = [];
|
|
if (S.incidentId && S.mediaRec) {
|
|
S.mediaRec.start();
|
|
setTimeout(() => { if (S.mediaRec && S.mediaRec.state === 'recording') S.mediaRec.stop(); }, 5000);
|
|
}
|
|
};
|
|
reader.readAsDataURL(blob);
|
|
};
|
|
|
|
S.mediaRec.start();
|
|
setTimeout(() => { if (S.mediaRec && S.mediaRec.state === 'recording') S.mediaRec.stop(); }, 5000);
|
|
} catch (_) {}
|
|
}
|
|
|
|
function stopSOS() {
|
|
S.incidentId = null;
|
|
if (S.mediaRec && S.mediaRec.state !== 'inactive') {
|
|
try { S.mediaRec.stop(); } catch (_) {}
|
|
}
|
|
S.mediaRec = null;
|
|
stopMediaPreview();
|
|
el('abd-sos-badge').style.display = 'none';
|
|
toast('Alerta SOS detenida.', 'info');
|
|
}
|
|
|
|
/* ── Utilities ───────────────────────────────────────────────── */
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
return String(str).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
function setTextEl(id, text) {
|
|
const el2 = el(id);
|
|
if (el2) el2.textContent = text;
|
|
}
|
|
|
|
/* ── Init ────────────────────────────────────────────────────── */
|
|
async function init() {
|
|
// Populate header
|
|
populateHeader();
|
|
|
|
// Init UI controls
|
|
initTabs();
|
|
initToggle();
|
|
initChat();
|
|
initRouteBanner();
|
|
initPeriodTabs();
|
|
initExportCSV();
|
|
initHistoryFilters();
|
|
initProfile();
|
|
initSOS();
|
|
|
|
// Load Google Maps
|
|
if (GMAPS_KEY) {
|
|
try {
|
|
await loadGoogleMaps();
|
|
initMap();
|
|
} catch (_) {}
|
|
}
|
|
|
|
// Load driver status
|
|
try {
|
|
const status = await api('/driver/status');
|
|
S.online = !!status.online;
|
|
const toggle = el('abd-online-toggle');
|
|
if (toggle) toggle.checked = S.online;
|
|
updateStatusLabel(S.online);
|
|
if (S.online) {
|
|
startGPS();
|
|
startPolls();
|
|
}
|
|
} catch (_) {}
|
|
|
|
// Hide init loader
|
|
const loader = el('abd-init-loader');
|
|
if (loader) {
|
|
loader.classList.add('abd-fade-out');
|
|
setTimeout(() => { loader.style.display = 'none'; }, 450);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
|
|
})();
|