website/js/customElements/sellingTable.js

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);