Last active
July 27, 2024 22:47
-
-
Save meduzen/b9908a5d3a68737c881fc85f25b5ed4b to your computer and use it in GitHub Desktop.
Run this in the browser console on https://track.bpost.cloud ; don’t forget to update the first 3 lines.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const trackingCode = '324567890' | |
const postCode = 1000 | |
const language = 'EN' // 'FR', 'NL', 'EN' | |
let intervalId = null | |
let status = null | |
let deliveryWindow = null | |
const deliveredPicApi = 'https://track.bpost.cloud/track/asset' | |
intervalId = setInterval(() => { | |
fetch('https://track.bpost.cloud/track/items?itemIdentifier=' + trackingCode + '&postalCode=' + postCode) | |
.then(res => { | |
res.json().then(async data => { | |
const item = data.items[0] | |
status = item.events | |
// Stop polling when the item is delivered | |
if(item.activeStep?.name == 'delivered') { | |
clearInterval(intervalId) | |
intervalId = null | |
} | |
let innerHtml = '' | |
const deliveredPicId = item?.actualDeliveryInformation?.safeplacePicture?.refId | |
// Sender | |
const sender = item.senderCommercialName ?? item.sender?.name | |
innerHtml += `<small>📦 ${sender}</small>` | |
// Status time | |
innerHtml += `<span id="last-status">${status[0].time}` | |
// Status message | |
if (!deliveredPicId) { | |
innerHtml += `<br>${status[0].key[language].description}` | |
} | |
// Stops left | |
if (!deliveredPicId && 'expectedDeliveryTimeRange' in item) { | |
const res = await fetch(`https://track.bpost.cloud/track/itemonroundstatus?itemIdentifier=${trackingCode}&postalCode=${postCode}`) | |
const data = await res.json() | |
if ('itemOnRoundStatus' in data) { | |
const stopsLeft = data.itemOnRoundStatus.nrOfStopsUntilTarget[0] | |
innerHtml += `<strong> – ${stopsLeft} stops left</strong>` | |
} | |
} | |
innerHtml += `</span>` | |
if(deliveredPicId) { | |
innerHtml += `<div id="delivered-pic"></div>` | |
} | |
// Delivery window | |
if (!deliveredPicId && 'expectedDeliveryTimeRange' in item) { | |
const deliveryWindow = item.expectedDeliveryTimeRange | |
innerHtml += ` | |
<div id="time"> | |
<div> | |
Now<br> | |
<span>${(new Date()).toTimeString().substring(0,5)}</span> | |
</div> | |
<span id="delivery-window"> | |
Delivery range<br> | |
<span class="time">${deliveryWindow.time1} - ${deliveryWindow.time2}</span> | |
</span> | |
</div> | |
` | |
} | |
// Update HTML | |
DOM.innerHTML = innerHtml | |
// Delievered pic | |
if (deliveredPicId) { | |
const res = await fetch(`${deliveredPicApi}?refId=${deliveredPicId}`) | |
const base64Img = await res.text() | |
const img = new Image() | |
img.setAttribute('src', `data:image/jpeg;base64,${base64Img}`) | |
const deliveredPicEl = document.getElementById('delivered-pic') | |
deliveredPicEl?.append(img) | |
} | |
}) | |
}) | |
}, 3000) | |
document.body.innerHTML = ` | |
<style> | |
#app { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
padding: 0.5em; | |
text-align: center; | |
font-size: 7vmin; | |
height: 100vh; | |
background-color: #232323; | |
color: #c1c1c1 | |
} | |
#output { | |
margin: 0.5em 0; | |
min-height: 100%; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-evenly; | |
align-items: center; | |
} | |
#time { | |
display: flex; | |
justify-content; space-evenly; | |
} | |
#delivery-window { | |
margin-left: 1em; | |
border: 1vmin solid orange; | |
border-radius: 0.25em; | |
} | |
img { | |
max-width: 100%; | |
height: auto; | |
max-height: 70vh; | |
} | |
.time { | |
margin: 0 .5em; | |
padding-bottom: 5vmin; | |
font-size: 9vmin; | |
} | |
</style> | |
<div id="app"> | |
<p id="output"></p> | |
</div> | |
` | |
const DOM = document.getElementById('output') |
Update:
- stop polling once the item is delivered
- delivered items may now have a pic attached when the parcel has been left in a “safe place”: in that case, the scripts shows the picture using the
https://track.bpost.cloud/track/asset
endpoint (returns a base64 picture)
Layout with the “left in a safe place” picture:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Update: can now show basic data when the number of stops left is not know, yet. Before, it was showing an empty screen until the stops left appears.