v1

lol/components/clock.js

@@ -0,0 +1,26 @@
+const TEMPLATE = document.createElement("template");
+TEMPLATE.innerHTML = `<span class="hours">--</span><span class="deux-points">:</span><span class="minutes">--</span>`
+
+class ClockElement extends HTMLElement {
+    constructor(){
+        super()
+        setInterval(this.updateContent.bind(this), 1000);
+    }
+    
+    connectedCallback(){
+        this.replaceChildren(TEMPLATE.content.cloneNode(true))
+        this.updateContent()
+    }
+
+    updateContent(){
+        if(!this.querySelector(".hours"))
+            return
+
+        let now = new Date();
+        this.querySelector(".hours").textContent = now.getHours().toString().padStart(2, "0")
+        this.querySelector(".minutes").textContent = now.getMinutes().toString().padStart(2, "0")
+        this.setAttribute("datetime", now.toISOString())
+    }
+}
+
+customElements.define("gavle-clock", ClockElement)

lol/components/next-bus.js

@@ -0,0 +1,34 @@
+const TEMPLATE = document.createElement("template");
+
+class NextBusElement extends HTMLElement {
+    #stop
+
+    get stopId(){
+        return this.#stop
+    }
+
+    set stopId(value){
+        this.#stop = value
+        this.updateContent()
+    }
+
+    connectedCallback(){
+        this.replaceChildren(TEMPLATE.content.cloneNode(true))
+    }
+
+    updateContent(){
+
+    }
+
+    static observedAttributes = ["stop-id"]
+
+    attributeChangedCallback(name, oldVal, newVal){
+        switch(name){
+            case "stop-id":
+                this.stopId = newVal
+                break;
+        }
+    }
+}
+
+customElements.define("camp-next-bus", NextBusElement);