website/js/customElements/sellingTable.js

106 lines
3.4 KiB
JavaScript
Raw Normal View History

import * as basicLightbox from 'basiclightbox'
class sellingTable extends HTMLElement {
2022-03-08 13:42:03 +01:00
constructor() {
super();
this.config = [
{
"title": "Bild",
2022-03-08 13:42:03 +01:00
"fieldName": "preview",
"displayType": "image",
2022-03-08 13:42:03 +01:00
"fullImage": "image",
"index": 0
},
{
"title": "Titel",
"fieldName": "title",
"displayType": "text"
},
{
"title": "Preis",
"fieldName": "price",
"displayType": "text"
},
2022-02-03 10:17:39 +01:00
{
"title": "Versand",
"fieldName": "shipping",
"displayType": "text"
},
{
"title": "Link",
"fieldName": "link",
"displayType": "link",
"linkText": "Anzeige ansehen",
"target": "_blank"
},
2022-03-08 13:42:03 +01:00
];
2022-03-08 13:42:03 +01:00
this.generateTable();
}
async generateTable() {
const table = document.createElement("table");
this.appendChild(table);
const tr = document.createElement("tr");
table.appendChild(tr);
2022-03-08 13:42:03 +01:00
this.config.forEach(element => {
const th = document.createElement("th");
th.innerText = element["title"];
tr.appendChild(th);
});
2022-03-08 13:42:03 +01:00
var graphql = JSON.stringify({
query: 'query { ebayKleinanzeigen(imageCount: 1) { elements { images { preview image } title price shipping link }}}',
})
var requestOptions = {
method: 'POST',
body: graphql,
2022-04-07 09:24:06 +02:00
headers: { 'Content-Type': 'application/json' }
2022-03-08 13:42:03 +01:00
};
2022-03-15 08:49:36 +01:00
let elements = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.ebayKleinanzeigen.elements;
2022-03-08 13:42:03 +01:00
elements.forEach(ad => {
const tr = document.createElement("tr");
table.appendChild(tr);
this.config.forEach(element => {
const th = document.createElement("th");
2022-03-08 13:42:03 +01:00
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"];
2022-03-08 13:42:03 +01:00
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();
}
2022-03-08 13:42:03 +01:00
break;
2022-03-08 13:42:03 +01:00
}
2022-03-08 13:42:03 +01:00
tr.appendChild(th);
});
});
}
}
customElements.define("jl-selling-table", sellingTable);