Hamza/Siro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: 2026-06-19 14:01:15

Browse Source
This commit is contained in:
Hamza-Ayed
2026-06-19 14:01:15 +03:00
parent a0495147c4
commit 017bec86fa
3 changed files with 120 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
knowledge/siro_driver_ride_simulation.html
View File

@@ -1317,7 +1317,7 @@
<!-- Passenger Marker -->
<div class="marker" id="marker-pax" style="top: 250px; left: 450px; display: none;">
<div class="marker-label">Mahmoud (Pickup)</div>
<div class="marker-label" id="pax-label">Mahmoud (Pickup)</div>
<div class="marker-dot marker-pax">
<i data-lucide="user" style="width: 14px; height: 14px; color: #000;"></i>
</div>
@@ -1325,7 +1325,7 @@
<!-- Destination Marker -->
<div class="marker" id="marker-dest" style="top: 450px; left: 450px; display: none;">
<div class="marker-label">Mezzeh (Destination)</div>
<div class="marker-label" id="dest-label">Mezzeh (Destination)</div>
<div class="marker-dot marker-dest">
<i data-lucide="flag" style="width: 14px; height: 14px; color: #fff;"></i>
</div>
@@ -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)<br><span style="color:var(--accent-gold); font-weight:bold; font-size:0.7rem;">2.1 km | 5 min</span>`;
document.getElementById('dest-label').innerHTML = `Mezzeh (Destination)<br><span style="color:var(--accent-blue); font-weight:bold; font-size:0.7rem;">12.5 km | 20 min</span>`;
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 = `
<div class="status-dot" style="background-color: var(--accent-emerald); box-shadow: 0 0 8px var(--accent-emerald);"></div>
@@ -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');