lol
62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import { getNextPassage, getVelovBikeState } from "../tcl.js";
|
|
|
|
const TEMPLATE = document.createElement("template");
|
|
TEMPLATE.innerHTML = `
|
|
<img class="velov-picto" src="/api/valkyrie/assets/sprites/bike-stations.svg?type=image%2Fsvg%2Bxml" />
|
|
<h1 class="station-name"></h1>
|
|
<p><span class="bike-available"></span> vélo<span class="plurial">s</span> disponible<span class="plurial">s</span></p>
|
|
`
|
|
|
|
class VelovStationElement extends HTMLElement {
|
|
#station
|
|
#autoupdateTimeout
|
|
|
|
get stationId(){
|
|
return this.#station
|
|
}
|
|
|
|
set stationId(value){
|
|
this.#station = value
|
|
}
|
|
|
|
handleAutoUpdate(){
|
|
clearTimeout(this.#autoupdateTimeout)
|
|
this.updateContent()
|
|
this.#autoupdateTimeout = setTimeout(this.handleAutoUpdate.bind(this), 60000 + ((Math.random() * 10000) - 5000))
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.replaceChildren(TEMPLATE.content.cloneNode(true))
|
|
this.handleAutoUpdate()
|
|
}
|
|
|
|
async updateContent(){
|
|
try {
|
|
if(!this.stationId)
|
|
throw new Error("Missing station id")
|
|
|
|
let station_data = await getVelovBikeState(this.stationId)
|
|
|
|
this.querySelector(".station-name").textContent = station_data.name
|
|
this.querySelector(".bike-available").textContent = station_data.properties.available_bikes
|
|
this.querySelector(".bike-available").parentElement.classList.toggle("plurial-content", station_data.properties.available_bikes > 1);
|
|
|
|
this.style.display = ""
|
|
} catch(e){
|
|
this.style.display = "none"
|
|
throw e
|
|
}
|
|
}
|
|
|
|
static observedAttributes = ["station-id"]
|
|
|
|
attributeChangedCallback(name, oldVal, newVal){
|
|
switch(name){
|
|
case "station-id":
|
|
this.stationId = newVal
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("gavle-velov-station", VelovStationElement); |