106 lines
3.4 KiB
JavaScript
106 lines
3.4 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,
|
|
headers: { 'Content-Type': 'application/json' }
|
|
};
|
|
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); |