updates on the active page section regarding the kms and the eta
This commit is contained in:
@@ -3,8 +3,8 @@ import {
|
|||||||
MdTwoWheeler,
|
MdTwoWheeler,
|
||||||
MdLocationOn,
|
MdLocationOn,
|
||||||
MdRestaurant,
|
MdRestaurant,
|
||||||
MdStraighten,
|
|
||||||
MdMyLocation,
|
MdMyLocation,
|
||||||
|
MdAccessTime,
|
||||||
MdInventory2
|
MdInventory2
|
||||||
} from 'react-icons/md';
|
} from 'react-icons/md';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
@@ -117,15 +117,20 @@ const ActiveSection = ({
|
|||||||
<span />
|
<span />
|
||||||
)}
|
)}
|
||||||
<span className="adcard-metrics">
|
<span className="adcard-metrics">
|
||||||
<span className="adcard-m adcard-m-km" title="Trip distance">
|
|
||||||
<span className="adcard-ic"><MdStraighten /></span>
|
|
||||||
{parseFloat(o.actualkms || o.kms || 0).toFixed(1)} km
|
|
||||||
</span>
|
|
||||||
{estMeters !== null && (
|
{estMeters !== null && (
|
||||||
<span className="adcard-m adcard-m-eta" title="Estimated distance to drop location">
|
<>
|
||||||
<span className="adcard-ic"><MdMyLocation /></span>
|
<span className="adcard-m adcard-m-eta" title="Distance to drop">
|
||||||
{formatMeters(estMeters)}
|
<span className="adcard-ic"><MdMyLocation /></span>
|
||||||
</span>
|
{formatMeters(estMeters)}
|
||||||
|
</span>
|
||||||
|
<span className="adcard-m adcard-m-time" title="Estimated time to drop">
|
||||||
|
<span className="adcard-ic"><MdAccessTime /></span>
|
||||||
|
{(() => {
|
||||||
|
const etaMin = estMeters / 1000 / 20 * 60;
|
||||||
|
return etaMin < 1 ? '< 1 min' : `${Math.ceil(etaMin)} min`;
|
||||||
|
})()}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10909,6 +10909,14 @@
|
|||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dispatch-container .adcard-m-eta {
|
||||||
|
color: var(--ad-accent, var(--accent));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dispatch-container .adcard-m-time {
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
/* =========================================================================
|
/* =========================================================================
|
||||||
Mobile / app-like layout (≤ 768px). Purely a LAYOUT pass — no behaviour
|
Mobile / app-like layout (≤ 768px). Purely a LAYOUT pass — no behaviour
|
||||||
changes. On phones the side-by-side map + sidebar collapses into a single
|
changes. On phones the side-by-side map + sidebar collapses into a single
|
||||||
|
|||||||
Reference in New Issue
Block a user