Ajout de l'appel a l'API pretalx

js/components/talk.js

@@ -0,0 +1,64 @@
+const TEMPLATE = document.createElement("template")
+TEMPLATE.innerHTML = `
+<div class="talk-calendar">
+    <span class="talk-start-date"></span>
+    <time class="talk-start-time"></time>
+    &rarr;
+    <time class="talk-end-time"></time>
+</div>
+<h3 class="talk-title"></h3>
+<p class="talk-abstract"></p>
+<p><small class="track-name"></small></p>
+`
+
+class TalkElement extends HTMLElement {
+
+    #activeChackInterval
+    
+    srcObject
+
+    connectedCallback(){
+        this.updateContent()
+        this.#activeChackInterval = setInterval(this.updateActiveState.bind(this), 1000)
+    }
+
+    disconnectedCallback(){
+        clearInterval(this.#activeChackInterval)
+    }
+
+    updateActiveState(){
+        this.classList.toggle("active", this.srcObject?.isActive)
+    }
+
+    updateContent(){
+        if(!this.srcObject){
+            this.replaceChildren()
+        }
+
+        this.dataset.trackId = this.srcObject.track_id
+
+        this.replaceChildren(TEMPLATE.content.cloneNode(true))
+        this.querySelector(".talk-title").textContent = this.srcObject.title
+        this.querySelector(".talk-abstract").textContent = this.srcObject.abstract
+        this.querySelector(".track-name").textContent = this.srcObject.track.fr
+
+        let timeFormatter = new Intl.DateTimeFormat("fr-FR", {
+            timeStyle: "short"
+        })
+
+        let dateFormatter = new Intl.DateTimeFormat("fr-FR", {
+            dateStyle: "short"
+        })
+
+        this.querySelector(".talk-start-date").textContent = dateFormatter.format(this.srcObject.startTime)
+        this.querySelector(".talk-start-time").textContent = timeFormatter.format(this.srcObject.startTime)
+        this.querySelector(".talk-start-time").datetime = this.srcObject.startTime.toJSON()
+        this.querySelector(".talk-end-time").textContent = timeFormatter.format(this.srcObject.endTime)
+        this.querySelector(".talk-end-time").datetime = this.srcObject.endTime.toJSON()
+
+        this.updateActiveState()
+    }
+
+}
+
+customElements.define("camp-talk", TalkElement)