import { io } from 'socket.io-client';
class PassengerTripClient {
constructor(accessToken) {
this.socket = io('http://localhost:3000/passengers', {
auth: { token: accessToken },
reconnection: true,
reconnectionAttempts: 5,
});
this.currentTrip = null;
this.setupListeners();
}
setupListeners() {
this.socket.on('connect', () => {
console.log('✅ Connected as passenger');
});
this.socket.on('hello', (data) => {
console.log('👋 Hello:', data);
});
// Trip lifecycle
this.socket.on('trip:requested', (data) => {
console.log('🚕 Trip requested:', data.tripId);
this.currentTrip = data.tripId;
this.onTripRequested(data);
});
this.socket.on('trip:assigning_started', (data) => {
console.log('🔍 Finding driver...');
this.onAssigningStarted(data);
});
this.socket.on('trip:driver_accepted', (data) => {
console.log('✅ Driver accepted!');
this.onDriverAccepted(data);
});
this.socket.on('trip:no_drivers_found', (data) => {
console.log('❌ No drivers found');
this.onNoDriversFound(data);
});
this.socket.on('trip:arriving_started', (data) => {
console.log('🚗 Driver on the way');
this.onArrivingStarted(data);
});
this.socket.on('trip:driver_en_route', (data) => {
console.log(`⏱️ ETA: ${data.etaMinutes} min`);
this.onDriverEnRoute(data);
});
this.socket.on('trip:driver_arrived_pickup', (data) => {
console.log('📍 Driver arrived!');
this.onDriverArrived(data);
});
this.socket.on('trip:started', (data) => {
console.log('🚀 Trip started!');
this.onTripStarted(data);
});
this.socket.on('trip:completed', (data) => {
console.log('🏁 Trip completed!');
this.onTripCompleted(data);
});
this.socket.on('disconnect', (reason) => {
console.log('⚠️ Disconnected:', reason);
this.onDisconnect(reason);
});
}
onTripRequested(data) {
document.getElementById('status').textContent = 'Requesting trip...';
document.getElementById('trip-id').textContent = data.tripId;
document.getElementById('estimated-fare').textContent =
`${data.fareEstimatedTotal} ${data.fareFinalCurrency}`;
}
onAssigningStarted(data) {
document.getElementById('status').textContent = 'Finding nearby drivers...';
this.startSearchAnimation();
}
onDriverAccepted(data) {
this.stopSearchAnimation();
// Display driver info
const driver = data.driver;
const vehicle = data.vehicle;
document.getElementById('status').textContent = 'Driver assigned!';
document.getElementById('driver-name').textContent =
`${driver.firstName} ${driver.lastName}`;
document.getElementById('driver-rating').textContent =
driver.rating?.average?.toFixed(1) || 'N/A';
document.getElementById('vehicle-info').textContent =
`${vehicle.color} ${vehicle.make} ${vehicle.model}`;
document.getElementById('license-plate').textContent = vehicle.licensePlate;
if (driver.profilePictureUrl) {
document.getElementById('driver-photo').src = driver.profilePictureUrl;
}
// Show driver details panel
document.getElementById('driver-panel').classList.remove('hidden');
}
onNoDriversFound(data) {
this.stopSearchAnimation();
document.getElementById('status').textContent = 'No drivers available';
document.getElementById('error-message').textContent =
'Sorry, no drivers are available at the moment. Please try again.';
document.getElementById('retry-button').classList.remove('hidden');
}
onArrivingStarted(data) {
document.getElementById('status').textContent = 'Driver is on the way';
this.startTrackingDriver();
}
onDriverEnRoute(data) {
if (data.etaMinutes !== null) {
document.getElementById('eta').textContent = `${data.etaMinutes} min`;
}
if (data.driverPosition) {
this.updateDriverMarker(data.driverPosition);
}
}
onDriverArrived(data) {
document.getElementById('status').textContent = 'Driver has arrived!';
this.showNotification('Your driver is here!', 'Please head to the pickup location');
this.playSound('arrival.mp3');
}
onTripStarted(data) {
document.getElementById('status').textContent = 'Trip in progress';
this.showRouteToDestination();
}
onTripCompleted(data) {
document.getElementById('status').textContent = 'Trip completed';
document.getElementById('final-fare').textContent =
`${data.fareTotal} ${data.currency}`;
// Show rating prompt
this.showRatingDialog(data.tripId);
this.currentTrip = null;
}
onDisconnect(reason) {
if (reason === 'io server disconnect' && this.currentTrip) {
// Server disconnected during active trip - try to reconnect
console.log('Reconnecting...');
this.socket.connect();
}
}
startSearchAnimation() {
// Implement search animation
}
stopSearchAnimation() {
// Stop search animation
}
startTrackingDriver() {
// Initialize map tracking
}
updateDriverMarker(position) {
// Update driver marker on map
}
showRouteToDestination() {
// Show route on map
}
showNotification(title, message) {
if ('Notification' in window && Notification.permission === 'granted') {
new Notification(title, { body: message });
}
}
playSound(filename) {
const audio = new Audio(`/sounds/${filename}`);
audio.play();
}
showRatingDialog(tripId) {
// Show driver rating dialog
}
disconnect() {
this.socket.disconnect();
}
}
// Usage
const tripClient = new PassengerTripClient(accessToken);
// Request notification permission
if ('Notification' in window && Notification.permission === 'default') {
Notification.requestPermission();
}