Ajout des velov et des derniers passages

2026-06-13 23:32:19 +02:00
parent 58720611f7
commit 6885bba1e8
5 changed files with 644 additions and 147 deletions
@@ -0,0 +1,62 @@
+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);