updates on the build regarding the queries page and the dispatch page
This commit is contained in:
@@ -212,25 +212,70 @@ const haversineKm = (lat1, lon1, lat2, lon2) => {
|
||||
// page's own optional-chaining render whatever fields actually come back.
|
||||
// Falls back to the miler record itself (which may carry a last-known
|
||||
// position) if the logs call fails or returns nothing.
|
||||
// Despite the parameter name (kept for caller compatibility), this must be
|
||||
// a milerprofileid — /admin/milers/:id/* routes 404 on a plain userid
|
||||
// (confirmed live).
|
||||
export const getRiderPeriodicLogs = async (userid) => {
|
||||
if (!userid) return null;
|
||||
// Handles both milerprofileid and userid inputs by resolving via getMilers().
|
||||
export const getRiderPeriodicLogs = async (id) => {
|
||||
if (!id) return null;
|
||||
|
||||
let profileId = id;
|
||||
let milerObj = null;
|
||||
|
||||
// Resolve milerprofileid if a userid or generic id was passed
|
||||
try {
|
||||
const logs = await getMilerLogs(userid, undefined, undefined, 1);
|
||||
const milers = await getMilers();
|
||||
const found = (milers || []).find(
|
||||
(m) =>
|
||||
String(m.milerprofileid) === String(id) ||
|
||||
String(m.userid) === String(id) ||
|
||||
String(m.milerid) === String(id) ||
|
||||
String(m.id) === String(id)
|
||||
);
|
||||
if (found) {
|
||||
profileId = found.milerprofileid || found.id || id;
|
||||
milerObj = found;
|
||||
}
|
||||
} catch (e) {
|
||||
logger.debug('getRiderPeriodicLogs: milers lookup fallback', e);
|
||||
}
|
||||
|
||||
// 1. Fetch the latest log via /admin/milers/:profileId/logs?limit=1
|
||||
try {
|
||||
const logs = await getMilerLogs(profileId, undefined, undefined, 1);
|
||||
const latest = Array.isArray(logs) ? logs[0] : logs;
|
||||
if (latest) return latest;
|
||||
} catch {
|
||||
// Falls through to the getMiler() fallback below — this is polled every
|
||||
// 15s by the live map, so a toast here would spam the operator on every
|
||||
// failed tick. Only surface an error if the fallback also fails.
|
||||
}
|
||||
try {
|
||||
return (await getMiler(userid)) || null;
|
||||
if (latest && typeof latest === 'object' && Object.keys(latest).length > 0) {
|
||||
return {
|
||||
...milerObj,
|
||||
...latest,
|
||||
userid: latest.userid ?? milerObj?.userid ?? id,
|
||||
username:
|
||||
(latest.username && latest.username.trim()) ||
|
||||
milerObj?.displayname ||
|
||||
milerObj?.name ||
|
||||
(latest.userid ? `Rider #${latest.userid}` : `Rider #${id}`)
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
return null;
|
||||
logger.debug(`getRiderPeriodicLogs: getMilerLogs failed for profileId ${profileId}`, err);
|
||||
}
|
||||
|
||||
// 2. Fallback to /admin/milers/:profileId if no logs or logs call failed
|
||||
try {
|
||||
const miler = milerObj || (await getMiler(profileId));
|
||||
if (miler) {
|
||||
return {
|
||||
...miler,
|
||||
userid: miler.userid ?? id,
|
||||
username: miler.displayname || miler.name || miler.authname || `Rider #${miler.userid ?? id}`,
|
||||
latitude: miler.currentlatitude ?? miler.latitude,
|
||||
longitude: miler.currentlongitude ?? miler.longitude,
|
||||
status: miler.availabilitystatus ?? miler.status ?? 'offline',
|
||||
logdate: miler.lastpingat ?? miler.updatedat ?? miler.createdat
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
logger.debug(`getRiderPeriodicLogs: getMiler fallback failed for profileId ${profileId}`, err);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
// ==============================|| fetchAppLocations (zone/location picker) ||============================== //
|
||||
@@ -478,10 +523,10 @@ export const resolveMilerForOrder = (order, lookup) => {
|
||||
const matchedVia = lookup.byUserId.has(String(riderUserId))
|
||||
? 'userid'
|
||||
: lookup.byProfileId.has(String(riderUserId))
|
||||
? 'milerprofileid'
|
||||
: lookup.byName.has(normMilerName(riderName))
|
||||
? 'name'
|
||||
: null;
|
||||
? 'milerprofileid'
|
||||
: lookup.byName.has(normMilerName(riderName))
|
||||
? 'name'
|
||||
: null;
|
||||
const rider =
|
||||
lookup.byUserId.get(String(riderUserId)) ?? lookup.byProfileId.get(String(riderUserId)) ?? lookup.byName.get(normMilerName(riderName));
|
||||
return rider?.milerprofileid ? { rider, matchedVia } : null;
|
||||
|
||||
@@ -1113,7 +1113,9 @@ const Dispatch = ({
|
||||
// changing riderInfoUserid itself, which is compared against elsewhere
|
||||
// in this file for sidebar row highlighting in userid-space.
|
||||
queryFn: () => {
|
||||
const match = liveRiderLocations.find((r) => String(r.userid) === String(riderInfoUserid));
|
||||
const match =
|
||||
liveRiderLocations.find((r) => String(r.userid) === String(riderInfoUserid) || String(r.milerprofileid) === String(riderInfoUserid)) ||
|
||||
(ridersList || []).find((r) => String(r.userid) === String(riderInfoUserid) || String(r.milerprofileid) === String(riderInfoUserid));
|
||||
return getRiderPeriodicLogs(match?.milerprofileid ?? riderInfoUserid);
|
||||
},
|
||||
enabled: viewMode === 'rider-info' && riderInfoUserid != null,
|
||||
@@ -1534,8 +1536,8 @@ const Dispatch = ({
|
||||
const dateStr = r.assigntime
|
||||
? parseDoormileTimestamp(r.assigntime).format('YYYY-MM-DD')
|
||||
: r.deliverydate
|
||||
? parseDoormileTimestamp(r.deliverydate).format('YYYY-MM-DD')
|
||||
: 'unknown';
|
||||
? parseDoormileTimestamp(r.deliverydate).format('YYYY-MM-DD')
|
||||
: 'unknown';
|
||||
if (selectedDate && dateStr !== selectedDate) return;
|
||||
|
||||
const batch = getRowBatch(r, selectedTimeField, BATCHES);
|
||||
@@ -1872,8 +1874,8 @@ const Dispatch = ({
|
||||
() =>
|
||||
isAllActiveView
|
||||
? liveRiderLocations
|
||||
.filter((r) => r.status !== 'offline' && r.status !== 'blocked' && activeOrderRiderIdSet.has(String(r.id)))
|
||||
.map((r) => [r.lat, r.lon])
|
||||
.filter((r) => r.status !== 'offline' && r.status !== 'blocked' && activeOrderRiderIdSet.has(String(r.id)))
|
||||
.map((r) => [r.lat, r.lon])
|
||||
: [],
|
||||
[isAllActiveView, liveRiderLocations, activeOrderRiderIdSet]
|
||||
);
|
||||
@@ -2437,8 +2439,8 @@ const Dispatch = ({
|
||||
lp && Number.isFinite(lp.lat) && Number.isFinite(lp.lon)
|
||||
? [lp.lat, lp.lon]
|
||||
: hasValidPickup(activeOrder)
|
||||
? [toNum(pickupLat(activeOrder)), toNum(pickupLon(activeOrder))]
|
||||
: null;
|
||||
? [toNum(pickupLat(activeOrder)), toNum(pickupLon(activeOrder))]
|
||||
: null;
|
||||
const dLat = toNum(activeOrder.droplat || activeOrder.deliverylat);
|
||||
const dLon = toNum(activeOrder.droplon || activeOrder.deliverylong);
|
||||
if (start && Number.isFinite(dLat) && Number.isFinite(dLon)) {
|
||||
@@ -2579,19 +2581,19 @@ const Dispatch = ({
|
||||
const stepSegs = roadPath
|
||||
? splitPolylineByDrops(roadPath, dropCoords)
|
||||
: (() => {
|
||||
const hasPickup = aerialPath.length > dropCoords.length;
|
||||
const out = [];
|
||||
for (let i = 0; i < dropCoords.length; i++) {
|
||||
const a = hasPickup ? i : i - 1;
|
||||
const b = hasPickup ? i + 1 : i;
|
||||
if (a < 0 || a >= aerialPath.length || b >= aerialPath.length) {
|
||||
out.push([]);
|
||||
} else {
|
||||
out.push([aerialPath[a], aerialPath[b]]);
|
||||
}
|
||||
const hasPickup = aerialPath.length > dropCoords.length;
|
||||
const out = [];
|
||||
for (let i = 0; i < dropCoords.length; i++) {
|
||||
const a = hasPickup ? i : i - 1;
|
||||
const b = hasPickup ? i + 1 : i;
|
||||
if (a < 0 || a >= aerialPath.length || b >= aerialPath.length) {
|
||||
out.push([]);
|
||||
} else {
|
||||
out.push([aerialPath[a], aerialPath[b]]);
|
||||
}
|
||||
return out;
|
||||
})();
|
||||
}
|
||||
return out;
|
||||
})();
|
||||
// Map each path index → step index by accumulating segment lengths
|
||||
// (segments share endpoints so we use length-1 per segment).
|
||||
const pathIdxToStepIdx = [];
|
||||
@@ -3055,42 +3057,37 @@ const Dispatch = ({
|
||||
const flagSvg = o.orderstatus
|
||||
? `<svg class="cmark-flag" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="1.5" y1="0" x2="1.5" y2="22" stroke="#0f172a" stroke-width="1.6" stroke-linecap="round"/>
|
||||
<polygon points="2,1 17,1 13.5,5.5 17,10 2,10" fill="${
|
||||
statusStyle.bg
|
||||
}" stroke="#0f172a" stroke-width="0.6" stroke-linejoin="round"/>
|
||||
${
|
||||
isDelivered
|
||||
? '<polyline points="5,5.5 7,7.5 11,3.5" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
: ''
|
||||
}
|
||||
<polygon points="2,1 17,1 13.5,5.5 17,10 2,10" fill="${statusStyle.bg
|
||||
}" stroke="#0f172a" stroke-width="0.6" stroke-linejoin="round"/>
|
||||
${isDelivered
|
||||
? '<polyline points="5,5.5 7,7.5 11,3.5" fill="none" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>'
|
||||
: ''
|
||||
}
|
||||
</svg>`
|
||||
: '';
|
||||
|
||||
const icon = showNumbers
|
||||
? (() => {
|
||||
const seq = compareSeq || o.step || ordersToRender.indexOf(o) + 1;
|
||||
const sz = 32;
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
iconSize: [sz, sz],
|
||||
iconAnchor: [sz / 2, sz / 2],
|
||||
popupAnchor: [0, -28],
|
||||
html: `<div class="cmark is-rider-focused${
|
||||
isPulsing ? ' pulse' : ''
|
||||
}" style="background:${color};width:${sz}px;height:${sz}px;font-size:${seq > 9 ? 12 : 14}px;opacity:${active ? 1 : 0.75}">${
|
||||
seq > 0 ? seq : ''
|
||||
}${flagSvg}</div>`
|
||||
});
|
||||
})()
|
||||
: L.divIcon({
|
||||
const seq = compareSeq || o.step || ordersToRender.indexOf(o) + 1;
|
||||
const sz = 32;
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
iconSize: [24, 30],
|
||||
iconAnchor: [2, 30],
|
||||
popupAnchor: [10, -25], // Lift popup above the flag, not just the larger 32px marker
|
||||
html: `<div class="cmark${isPulsing ? ' pulse' : ''}" style="width:24px;height:30px;opacity:${
|
||||
active ? 1 : 0.75
|
||||
}">${flagSvg}</div>`
|
||||
iconSize: [sz, sz],
|
||||
iconAnchor: [sz / 2, sz / 2],
|
||||
popupAnchor: [0, -28],
|
||||
html: `<div class="cmark is-rider-focused${isPulsing ? ' pulse' : ''
|
||||
}" style="background:${color};width:${sz}px;height:${sz}px;font-size:${seq > 9 ? 12 : 14}px;opacity:${active ? 1 : 0.75}">${seq > 0 ? seq : ''
|
||||
}${flagSvg}</div>`
|
||||
});
|
||||
})()
|
||||
: L.divIcon({
|
||||
className: '',
|
||||
iconSize: [24, 30],
|
||||
iconAnchor: [2, 30],
|
||||
popupAnchor: [10, -25], // Lift popup above the flag, not just the larger 32px marker
|
||||
html: `<div class="cmark${isPulsing ? ' pulse' : ''}" style="width:24px;height:30px;opacity:${active ? 1 : 0.75
|
||||
}">${flagSvg}</div>`
|
||||
});
|
||||
|
||||
return (
|
||||
<Marker
|
||||
@@ -3208,8 +3205,8 @@ const Dispatch = ({
|
||||
lp && Number.isFinite(lp.lat) && Number.isFinite(lp.lon)
|
||||
? [lp.lat, lp.lon]
|
||||
: hasValidPickup(activeLegOrder)
|
||||
? [toNum(pickupLat(activeLegOrder)), toNum(pickupLon(activeLegOrder))]
|
||||
: null;
|
||||
? [toNum(pickupLat(activeLegOrder)), toNum(pickupLon(activeLegOrder))]
|
||||
: null;
|
||||
const dLat = toNum(activeLegOrder.droplat || activeLegOrder.deliverylat);
|
||||
const dLon = toNum(activeLegOrder.droplon || activeLegOrder.deliverylong);
|
||||
if (start && Number.isFinite(dLat) && Number.isFinite(dLon)) {
|
||||
@@ -3455,25 +3452,22 @@ const Dispatch = ({
|
||||
setFocusedZone(null);
|
||||
setBatchMenuOpen(false);
|
||||
}}
|
||||
className={`w-full flex items-center justify-between gap-3 px-2.5 py-2 rounded-lg text-left transition-colors cursor-pointer ${
|
||||
isSelected
|
||||
className={`w-full flex items-center justify-between gap-3 px-2.5 py-2 rounded-lg text-left transition-colors cursor-pointer ${isSelected
|
||||
? 'bg-slate-900 text-white font-bold'
|
||||
: 'text-slate-700 hover:bg-slate-100/80 font-medium'
|
||||
}`}
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<span
|
||||
className={`w-2 h-2 rounded-full shrink-0 ${
|
||||
isSelected ? 'bg-emerald-400' : 'bg-slate-300'
|
||||
}`}
|
||||
className={`w-2 h-2 rounded-full shrink-0 ${isSelected ? 'bg-emerald-400' : 'bg-slate-300'
|
||||
}`}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<div className="text-xs truncate">{b.label}</div>
|
||||
{b.range && (
|
||||
<div
|
||||
className={`text-[10px] ${
|
||||
isSelected ? 'text-slate-300' : 'text-slate-400'
|
||||
}`}
|
||||
className={`text-[10px] ${isSelected ? 'text-slate-300' : 'text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{b.range}
|
||||
</div>
|
||||
@@ -3481,13 +3475,12 @@ const Dispatch = ({
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={`text-[10px] font-bold px-2 py-0.5 rounded-full shrink-0 ${
|
||||
isSelected
|
||||
className={`text-[10px] font-bold px-2 py-0.5 rounded-full shrink-0 ${isSelected
|
||||
? 'bg-white/20 text-white'
|
||||
: count > 0
|
||||
? 'bg-amber-100 text-amber-800'
|
||||
: 'bg-slate-100 text-slate-500'
|
||||
}`}
|
||||
? 'bg-amber-100 text-amber-800'
|
||||
: 'bg-slate-100 text-slate-500'
|
||||
}`}
|
||||
>
|
||||
{count} {count === 1 ? 'order' : 'orders'}
|
||||
</span>
|
||||
@@ -4075,9 +4068,8 @@ const Dispatch = ({
|
||||
) : (
|
||||
<div
|
||||
id="body"
|
||||
className={`${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${compareOpen ? 'compare-mode' : ''} ${
|
||||
compareOpen && compareDataCollapsed ? 'compare-data-collapsed' : ''
|
||||
}`.trim()}
|
||||
className={`${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${compareOpen ? 'compare-mode' : ''} ${compareOpen && compareDataCollapsed ? 'compare-data-collapsed' : ''
|
||||
}`.trim()}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@@ -4247,10 +4239,10 @@ const Dispatch = ({
|
||||
// original sequence and confuse the operator.
|
||||
const displayOrders = isTimeMode
|
||||
? [...tOrders].sort((a, b) => {
|
||||
const diff = completionTs(a) - completionTs(b);
|
||||
if (diff !== 0) return diff;
|
||||
return (a.step || 0) - (b.step || 0);
|
||||
})
|
||||
const diff = completionTs(a) - completionTs(b);
|
||||
if (diff !== 0) return diff;
|
||||
return (a.step || 0) - (b.step || 0);
|
||||
})
|
||||
: tOrders;
|
||||
return (
|
||||
<div key={tNum} className="trip-block">
|
||||
@@ -4349,9 +4341,8 @@ const Dispatch = ({
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${
|
||||
isGoingOn ? 'going-on' : ''
|
||||
} ${isUndeliveredInTimeMode ? 'is-pending-time' : ''}`}
|
||||
className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${isGoingOn ? 'going-on' : ''
|
||||
} ${isUndeliveredInTimeMode ? 'is-pending-time' : ''}`}
|
||||
role={canFocus ? 'button' : undefined}
|
||||
tabIndex={canFocus ? 0 : undefined}
|
||||
onClick={
|
||||
@@ -4564,9 +4555,8 @@ const Dispatch = ({
|
||||
return (
|
||||
<div
|
||||
key={o.orderid}
|
||||
className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${
|
||||
isGoingOn ? 'going-on' : ''
|
||||
}`}
|
||||
className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${isGoingOn ? 'going-on' : ''
|
||||
}`}
|
||||
role={canFocus ? 'button' : undefined}
|
||||
tabIndex={canFocus ? 0 : undefined}
|
||||
onClick={
|
||||
@@ -4760,9 +4750,8 @@ const Dispatch = ({
|
||||
return (
|
||||
<div
|
||||
key={o.orderid}
|
||||
className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${
|
||||
isGoingOn ? 'going-on' : ''
|
||||
}`}
|
||||
className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${isGoingOn ? 'going-on' : ''
|
||||
}`}
|
||||
role={canFocus ? 'button' : undefined}
|
||||
tabIndex={canFocus ? 0 : undefined}
|
||||
onClick={
|
||||
@@ -4902,10 +4891,10 @@ const Dispatch = ({
|
||||
{viewMode === 'zones'
|
||||
? 'Zone dispatch'
|
||||
: viewMode === 'kitchens'
|
||||
? 'Kitchen dispatch'
|
||||
: isAllActiveView
|
||||
? 'Active rider dispatch'
|
||||
: 'Rider dispatch'}
|
||||
? 'Kitchen dispatch'
|
||||
: isAllActiveView
|
||||
? 'Active rider dispatch'
|
||||
: 'Rider dispatch'}
|
||||
</div>
|
||||
)}
|
||||
<div id="rider-cards">
|
||||
@@ -5232,28 +5221,28 @@ const Dispatch = ({
|
||||
if (!iconEntry || iconEntry.sig !== iconSig) {
|
||||
const icon = isAllActiveView
|
||||
? L.divIcon({
|
||||
className: '',
|
||||
iconSize: [160, 44],
|
||||
iconAnchor: [22, 22],
|
||||
popupAnchor: [0, -22],
|
||||
html: `<div class="live-rider-bike ${isActive ? 'is-active' : 'is-idle'}" style="--pin-color:${pinColor}">
|
||||
className: '',
|
||||
iconSize: [160, 44],
|
||||
iconAnchor: [22, 22],
|
||||
popupAnchor: [0, -22],
|
||||
html: `<div class="live-rider-bike ${isActive ? 'is-active' : 'is-idle'}" style="--pin-color:${pinColor}">
|
||||
<span class="live-rider-bike-pulse"></span>
|
||||
<span class="live-rider-bike-badge">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" fill="#fff" aria-hidden="true"><path d="M19.44 9.03 15.41 5H11v2h3.59l2 2H5c-2.8 0-5 2.2-5 5s2.2 5 5 5c2.46 0 4.45-1.69 4.9-4h1.65l2.77-2.77c-.21.54-.32 1.14-.32 1.77 0 2.76 2.24 5 5 5s5-2.24 5-5c0-2.65-2.06-4.77-4.66-4.97ZM7.82 15C7.4 16.15 6.28 17 5 17c-1.63 0-3-1.37-3-3s1.37-3 3-3c1.28 0 2.4.85 2.82 2H5v2h2.82ZM19 17c-1.63 0-3-1.37-3-3s1.37-3 3-3 3 1.37 3 3-1.37 3-3 3Z"/></svg>
|
||||
</span>
|
||||
<span class="live-rider-bike-label">${safeName}${safeOrder ? ` <span>#${safeOrder}</span>` : ''}</span>
|
||||
</div>`
|
||||
})
|
||||
})
|
||||
: L.divIcon({
|
||||
className: '',
|
||||
iconSize: [140, 56],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [58, -40],
|
||||
html: `<div class="live-rider-pin" style="--pin-color:${pinColor}">
|
||||
className: '',
|
||||
iconSize: [140, 56],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [58, -40],
|
||||
html: `<div class="live-rider-pin" style="--pin-color:${pinColor}">
|
||||
<div class="live-rider-pin-marker"></div>
|
||||
<div class="live-rider-pin-label">${safeName}${safeOrder ? ` <span>#${safeOrder}</span>` : ''}</div>
|
||||
</div>`
|
||||
});
|
||||
});
|
||||
iconEntry = { sig: iconSig, icon };
|
||||
liveIconCacheRef.current.set(r.id, iconEntry);
|
||||
}
|
||||
@@ -5443,8 +5432,8 @@ const Dispatch = ({
|
||||
`<span class="compare-step-pin-num">${t.sequenceStep}</span>` +
|
||||
(isDelivered
|
||||
? '<svg class="compare-step-pin-check" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
|
||||
'<path d="M2.5 6.5 L5 9 L9.5 3.5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>' +
|
||||
'</svg>'
|
||||
'<path d="M2.5 6.5 L5 9 L9.5 3.5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>' +
|
||||
'</svg>'
|
||||
: '') +
|
||||
'</div>';
|
||||
const sequenceIcon = L.divIcon({
|
||||
@@ -5462,15 +5451,15 @@ const Dispatch = ({
|
||||
const showStartMarker = t.sequenceStep === 1;
|
||||
const startIconEl = showStartMarker
|
||||
? L.divIcon({
|
||||
className: '',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20],
|
||||
html:
|
||||
`<div class="compare-start-pin" style="--pin-color:${color}">` +
|
||||
'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
|
||||
'<path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm0 10c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z" fill="currentColor"/>' +
|
||||
'</svg></div>'
|
||||
})
|
||||
className: '',
|
||||
iconSize: [40, 40],
|
||||
iconAnchor: [20, 20],
|
||||
html:
|
||||
`<div class="compare-start-pin" style="--pin-color:${color}">` +
|
||||
'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
|
||||
'<path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm0 10c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z" fill="currentColor"/>' +
|
||||
'</svg></div>'
|
||||
})
|
||||
: null;
|
||||
|
||||
const handleStepClick = (e) => {
|
||||
@@ -5565,33 +5554,33 @@ const Dispatch = ({
|
||||
eventHandlers={
|
||||
orderForTrack
|
||||
? {
|
||||
// Click-only: hovering the numbered pin does
|
||||
// nothing. Earlier the modal opened on mouseover,
|
||||
// which made the rich order card flash open while
|
||||
// panning the map and blocked the operator from
|
||||
// reading other steps in the trail. Click toggles
|
||||
// the modal — same `pinnedPopupsRef` pattern the
|
||||
// planned-route marker uses, so the modal stays
|
||||
// pinned (doesn't auto-close on mouse leave) until
|
||||
// the user clicks the pin again, the × button, or
|
||||
// the map background.
|
||||
click: (e) => {
|
||||
if (e.originalEvent) e.originalEvent.stopPropagation();
|
||||
setFocusedCompareStep((prev) => (prev === t.sequenceStep ? null : t.sequenceStep));
|
||||
if (popupHoverTimerRef.current) {
|
||||
clearTimeout(popupHoverTimerRef.current);
|
||||
popupHoverTimerRef.current = null;
|
||||
}
|
||||
const id = String(orderForTrack.orderid);
|
||||
if (pinnedPopupsRef.current.has(id)) {
|
||||
pinnedPopupsRef.current.delete(id);
|
||||
setCenterPopupOrder(null);
|
||||
} else {
|
||||
pinnedPopupsRef.current.add(id);
|
||||
setCenterPopupOrder(orderForTrack);
|
||||
}
|
||||
// Click-only: hovering the numbered pin does
|
||||
// nothing. Earlier the modal opened on mouseover,
|
||||
// which made the rich order card flash open while
|
||||
// panning the map and blocked the operator from
|
||||
// reading other steps in the trail. Click toggles
|
||||
// the modal — same `pinnedPopupsRef` pattern the
|
||||
// planned-route marker uses, so the modal stays
|
||||
// pinned (doesn't auto-close on mouse leave) until
|
||||
// the user clicks the pin again, the × button, or
|
||||
// the map background.
|
||||
click: (e) => {
|
||||
if (e.originalEvent) e.originalEvent.stopPropagation();
|
||||
setFocusedCompareStep((prev) => (prev === t.sequenceStep ? null : t.sequenceStep));
|
||||
if (popupHoverTimerRef.current) {
|
||||
clearTimeout(popupHoverTimerRef.current);
|
||||
popupHoverTimerRef.current = null;
|
||||
}
|
||||
const id = String(orderForTrack.orderid);
|
||||
if (pinnedPopupsRef.current.has(id)) {
|
||||
pinnedPopupsRef.current.delete(id);
|
||||
setCenterPopupOrder(null);
|
||||
} else {
|
||||
pinnedPopupsRef.current.add(id);
|
||||
setCenterPopupOrder(orderForTrack);
|
||||
}
|
||||
}
|
||||
}
|
||||
: { click: handleEndMarkerClick }
|
||||
}
|
||||
>
|
||||
@@ -6478,8 +6467,8 @@ const Dispatch = ({
|
||||
{severity === 'warn'
|
||||
? 'Fleet imbalance detected — no feasible substitution'
|
||||
: severity === 'success'
|
||||
? 'Fleet ran balanced — no reassignment needed'
|
||||
: 'No action recommended'}
|
||||
? 'Fleet ran balanced — no reassignment needed'
|
||||
: 'No action recommended'}
|
||||
</span>
|
||||
</div>
|
||||
{rec?.reason && <div className="da-rec-desc">{rec.reason}</div>}
|
||||
@@ -6633,8 +6622,8 @@ const Dispatch = ({
|
||||
r.free_window_minutes >= 30
|
||||
? { background: '#ecfdf5', color: '#065f46', borderColor: '#a7f3d0' }
|
||||
: r.free_window_minutes > 0
|
||||
? { background: '#fefce8', color: '#854d0e', borderColor: '#fde68a' }
|
||||
: { background: '#fef2f2', color: '#991b1b', borderColor: '#fecaca' }
|
||||
? { background: '#fefce8', color: '#854d0e', borderColor: '#fde68a' }
|
||||
: { background: '#fef2f2', color: '#991b1b', borderColor: '#fecaca' }
|
||||
}
|
||||
title="Free window before the next batch — capacity available for a follow-up run"
|
||||
>
|
||||
@@ -6718,8 +6707,8 @@ const Dispatch = ({
|
||||
imp > 0
|
||||
? { background: '#dcfce7', color: '#166534' }
|
||||
: imp < 0
|
||||
? { background: '#fee2e2', color: '#991b1b' }
|
||||
: { background: '#f1f5f9', color: '#475569' }
|
||||
? { background: '#fee2e2', color: '#991b1b' }
|
||||
: { background: '#f1f5f9', color: '#475569' }
|
||||
}
|
||||
>
|
||||
{imp > 0 ? '+' : ''}
|
||||
|
||||
Reference in New Issue
Block a user