-
Mezzeh (Destination)
+
Mezzeh (Destination)
@@ -1784,6 +1784,17 @@
fillEl.style.strokeDashoffset = '0';
document.getElementById('txt-overlay-timer').innerText = overlayTimer;
+ // Draw BOTH routes on the map during the Order Request view
+ drawRoute(driverPos, paxPos, 'both');
+
+ // Show both markers on map
+ document.getElementById('marker-pax').style.display = 'flex';
+ document.getElementById('marker-dest').style.display = 'flex';
+
+ // Update markers to act as dynamic Info Windows (Time & Distance)
+ document.getElementById('pax-label').innerHTML = `Mahmoud (Pickup)
2.1 km | 5 min`;
+ document.getElementById('dest-label').innerHTML = `Mezzeh (Destination)
12.5 km | 20 min`;
+
overlayInterval = setInterval(() => {
overlayTimer--;
document.getElementById('txt-overlay-timer').innerText = overlayTimer;
@@ -1798,6 +1809,11 @@
addLog("Order Request timed out. Missed count incremented.", "error");
orderOverlay.style.display = 'none';
driverState = 'ONLINE';
+
+ // Clear map state
+ document.getElementById('marker-pax').style.display = 'none';
+ document.getElementById('marker-dest').style.display = 'none';
+ ctx.clearRect(0, 0, routeCanvas.width, routeCanvas.height);
}
}, 1000);
}
@@ -1842,11 +1858,13 @@
document.getElementById('panel-online').style.display = 'none';
document.getElementById('panel-ride-active').style.display = 'flex';
+ // Show passenger marker and hide destination marker initially
document.getElementById('marker-pax').style.display = 'flex';
- document.getElementById('marker-dest').style.display = 'flex';
+ document.getElementById('marker-dest').style.display = 'none'; // Clear destination marker
+ document.getElementById('pax-label').innerHTML = `Mahmoud (Pickup)`; // Restore default label
document.getElementById('radar-pulse').style.display = 'none';
- // Draw route on map
+ // Draw ONLY the yellow route to passenger
drawRoute(driverPos, paxPos, 'yellow');
// Update TBT instructions Panel
@@ -1858,6 +1876,37 @@
// Draw lines on canvas
function drawRoute(start, end, type = 'yellow') {
ctx.clearRect(0, 0, routeCanvas.width, routeCanvas.height);
+
+ if (type === 'both') {
+ // 1. Draw yellow route (driver to passenger)
+ ctx.beginPath();
+ ctx.lineWidth = 6;
+ ctx.strokeStyle = '#eab308'; // Amber
+ ctx.moveTo(start.x, start.y);
+ ctx.lineTo(end.x, start.y);
+ ctx.lineTo(end.x, end.y);
+ ctx.stroke();
+
+ // Draw dotted walk line from road (corner) to actual offroad pax position
+ ctx.beginPath();
+ ctx.lineWidth = 3;
+ ctx.strokeStyle = '#94a3b8';
+ ctx.setLineDash([6, 6]);
+ ctx.moveTo(end.x, start.y);
+ ctx.lineTo(end.x + 20, end.y - 30);
+ ctx.stroke();
+ ctx.setLineDash([]);
+
+ // 2. Draw blue route (passenger to destination)
+ ctx.beginPath();
+ ctx.lineWidth = 6;
+ ctx.strokeStyle = '#3b82f6'; // Blue
+ ctx.moveTo(end.x, end.y);
+ ctx.lineTo(destPos.x, destPos.y);
+ ctx.stroke();
+ return;
+ }
+
ctx.beginPath();
ctx.lineWidth = 6;
ctx.strokeStyle = type === 'yellow' ? '#eab308' : '#3b82f6';
@@ -1920,6 +1969,9 @@
addLog("Driver marked Arrived. Waiting compensation timer started.", "info");
document.getElementById('btn-arrive-action').style.display = 'none';
+ // Clear route line (deletes the first yellow polyline)
+ ctx.clearRect(0, 0, routeCanvas.width, routeCanvas.height);
+
// Update badge
document.getElementById('txt-lifecycle-phase').innerHTML = `
@@ -2025,6 +2077,10 @@
document.getElementById('marker-driver').style.left = driverPos.x + 'px';
document.getElementById('marker-driver').style.top = driverPos.y + 'px';
+ // Show destination marker on map
+ document.getElementById('marker-dest').style.display = 'flex';
+ document.getElementById('dest-label').innerHTML = `Mezzeh (Destination)`;
+
// Draw Trip Route (solid blue/black)
drawRoute(driverPos, destPos, 'blue');