import * as basicLightbox from 'basiclightbox' class sellingTable extends HTMLElement { constructor() { super(); this.config = [ { "title": "Bild", "fieldName": "preview", "displayType": "image", "fullImage": "image", "index": 0 }, { "title": "Titel", "fieldName": "title", "displayType": "text" }, { "title": "Preis", "fieldName": "price", "displayType": "text" }, { "title": "Versand", "fieldName": "shipping", "displayType": "text" }, { "title": "Link", "fieldName": "link", "displayType": "link", "linkText": "Anzeige ansehen", "target": "_blank" }, ]; this.generateTable(); } async generateTable() { const table = document.createElement("table"); this.appendChild(table); const tr = document.createElement("tr"); table.appendChild(tr); this.config.forEach(element => { const th = document.createElement("th"); th.innerText = element["title"]; tr.appendChild(th); }); var graphql = JSON.stringify({ query: 'query { ebayKleinanzeigen(imageCount: 1) { elements { images { preview image } title price shipping link }}}', }) var requestOptions = { method: 'POST', body: graphql, }; let elements = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.ebayKleinanzeigen.elements; elements.forEach(ad => { const tr = document.createElement("tr"); table.appendChild(tr); this.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["images"][element["index"]][element["fieldName"]]; img.onclick = () => { const instance = basicLightbox.create(` `); instance.show(); } break; } tr.appendChild(th); }); }); } } customElements.define("jl-selling-table", sellingTable);