website/js/customElements/sellingTable.js
2022-03-15 08:49:36 +01:00

105 lines
No EOL
3.3 KiB
JavaScript

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(`
<img src="${ad["images"][element["index"]][element["fullImage"]]}">
`);
instance.show();
}
break;
}
tr.appendChild(th);
});
});
}
}
customElements.define("jl-selling-table", sellingTable);