94 lines
No EOL
3.2 KiB
JavaScript
94 lines
No EOL
3.2 KiB
JavaScript
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": "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); |