website/js/customElements/sellingTable.js

import * as basicLightbox from 'basiclightbox'

class sellingTable extends HTMLElement {
    constructor(){
        const config = [
            {
                "title": "Bild",
                "fieldName": "previewImage",
                "displayType": "image",
                "fullImage": "image"
            },
            {
                "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"
            },
        ]

        super();
        const table = document.createElement("table");
        this.appendChild(table);

        const tr = document.createElement("tr");
        table.appendChild(tr);

        config.forEach(element => {
            const th = document.createElement("th");
            th.innerText = element["title"];
            tr.appendChild(th);
        });

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4 && xhr.status === 200){
                const response = JSON.parse(xhr.responseText);
                response.forEach( ad => {
                    const tr = document.createElement("tr");
                    table.appendChild(tr);
                    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[element["fieldName"]];
                                img.onclick = () => {
                                    const instance = basicLightbox.create(`
                                    <img src="${ad[element["fullImage"]]}">
                                    `);
                                    instance.show();
                                }
                                break;

                        }

                        tr.appendChild(th);
                    });
                    
                })
            }
        }

        xhr.open("GET", "/API/ebk.php");
        xhr.send();
    }
}

customElements.define("jl-selling-table", sellingTable);