mirror of
https://github.com/tabler/tabler.git
synced 2026-10-13 21:57:00 +04:00
codecalm
927991d5cb
- ready() and onStyle() hooks, as the map is now created after the library loads - popup fade-in and .map-marker-pulse
64 lines
2.4 KiB
Plaintext
64 lines
2.4 KiB
Plaintext
---
|
|
// A delivery on a map: the route, the courier position and the order status.
|
|
import Map from '../demo/Map.astro'
|
|
import Avatar from '@ui/Avatar.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardHeader from '@ui/CardHeader.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import Progress from '@ui/Progress.astro'
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import { staticPath } from '@shared/lib/assets'
|
|
|
|
// The courier is at the sixth point of the route: the part behind them is done
|
|
const route = [
|
|
[13.3695, 52.5251],
|
|
[13.3777, 52.5208],
|
|
[13.388, 52.5186],
|
|
[13.3989, 52.5176],
|
|
[13.405, 52.5192],
|
|
[13.4132, 52.5219],
|
|
[13.4215, 52.5165],
|
|
[13.43, 52.5105],
|
|
[13.4397, 52.505],
|
|
]
|
|
const courierAt = 5
|
|
---
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Delivery tracker</CardTitle>
|
|
</CardHeader>
|
|
<Map mapId="delivery" title="Delivery tracker" center={[52.5215, 13.4046]} zoom={11.6} height="20rem" rounded={false} route={route} routeProgress={courierAt}>
|
|
<div slot="overlay" class="card card-sm position-absolute top-0 start-0 m-3 shadow" style="width: 15rem">
|
|
<div class="card-body">
|
|
<Subheader>Order #4821</Subheader>
|
|
<div class="h3 mb-2">Arriving in 12 min</div>
|
|
<Progress value={62} size="sm" color="green" />
|
|
</div>
|
|
</div>
|
|
<span class="map-marker map-marker-dot" data-bs-lng={route[0]?.[0]} data-bs-lat={route[0]?.[1]}></span>
|
|
<span class="map-marker map-marker-green map-marker-pulse" data-bs-lng={route[courierAt]?.[0]} data-bs-lat={route[courierAt]?.[1]}><Icon name="truck-delivery" /></span>
|
|
<span class="map-marker map-marker-pin" data-bs-lng={route.at(-1)?.[0]} data-bs-lat={route.at(-1)?.[1]} data-bs-anchor="bottom"><Icon name="home" /></span>
|
|
</Map>
|
|
<CardBody>
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<Avatar src={staticPath('avatars/002m.jpg')} />
|
|
</div>
|
|
<div class="col">
|
|
<div class="fw-medium">Mateusz Nowak</div>
|
|
<div class="text-secondary">Your courier</div>
|
|
</div>
|
|
<div class="col-auto text-end">
|
|
<div class="fw-medium">3.4 km</div>
|
|
<div class="text-secondary">left to go</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="#" class="btn btn-icon" aria-label="Call the courier"><Icon name="phone" /></a>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|