import * as basicLightbox from 'basiclightbox' class sellingTable extends HTMLElement { constructor(){ const config = [ { "title": "Bild", "fieldName": "previewImage", "displayType": "image", "fullImage": "image" }, { "title": "Titel", "fieldName": "title", "displayType": "text" }, { "title": "Preis", "fieldName": "price", "displayType": "text" }, { "title": "Link", "fieldName": "link", "displayType": "link", "linkText": "Anzeige ansehen", "target": "_blank" }, ] super(); const table = document.createElement("table"); this.appendChild(table); const tr = document.createElement("tr"); table.appendChild(tr); config.forEach(element => { const th = document.createElement("th"); th.innerText = element["title"]; tr.appendChild(th); }); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if(xhr.readyState === 4 && xhr.status === 200){ const response = JSON.parse(xhr.responseText); response.forEach( ad => { const tr = document.createElement("tr"); table.appendChild(tr); config.forEach(element => { const th = document.createElement("th"); switch(element["displayType"]) { case "text": th.innerText = ad[element["fieldName"]]; break; case "link": const link = document.createElement("a"); th.appendChild(link); link.href = ad[element["fieldName"]]; link.innerText = element["linkText"]; if("target" in element) { link.target = element["target"]; } break; case "image": const img = document.createElement("img"); th.appendChild(img); img.src = ad[element["fieldName"]]; img.onclick = () => { const instance = basicLightbox.create(` `); instance.show(); } break; } tr.appendChild(th); }); }) } } xhr.open("GET", "/API/ebk.php"); xhr.send(); } } customElements.define("jl-selling-table", sellingTable);