show banner when selling on ebay kleinanzeigen

js/customElements/ebkBanner.js

@@ -0,0 +1,21 @@
+class ebkBanner extends HTMLElement {
+    constructor(){
+        super();
+        let xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+            if(xhr.readyState === 4 && xhr.status === 200){
+                if(xhr.responseText > 0) {
+                    const h2 = document.createElement("h2");
+                    h2.classList.add("red");
+                    h2.innerHTML = "Ich biete aktuell wieder verschiedene Artikel zum verkauf an, eine genaue Übersucht ist <a class=\"red\" href=\"/selling.html\">hier</a> zu sehen."
+                    this.appendChild(h2);
+                }
+            }
+        }
+
+        xhr.open("GET", "/API/ebk.php?count");
+        xhr.send();
+    }
+}
+
+customElements.define("jl-ebk-banner", ebkBanner);

js/customElements/sellingTable.js

@@ -0,0 +1,94 @@
+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);

js/script.js

@@ -16,3 +16,5 @@ require("./customElements/contactMailButton");
 require("./customElements/header");
 require("./customElements/mainMenu");
 require("./customElements/footer");
+require("./customElements/ebkBanner");
+require("./customElements/sellingTable");

public/API/ebayimg.php

@@ -0,0 +1,12 @@
+<?php
+$curl = curl_init();
+curl_setopt($curl, CURLOPT_URL, "https://i.ebayimg.com/" . $_GET["url"]);
+curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
+curl_setopt ($curl, CURLOPT_CONNECTTIMEOUT, 20);
+curl_setopt ($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
+curl_setopt ($curl, CURLOPT_FOLLOWLOCATION, true);
+
+$content = curl_exec ($curl);
+$contentType = curl_getinfo($curl, CURLINFO_CONTENT_TYPE);
+header('Content-Type: ' . $contentType);
+echo($content);

public/API/ebk.php

@@ -0,0 +1,55 @@
+<?php
+require 'vendor/autoload.php';
+require "./lib/config.php";
+
+use GuzzleHttp\Client;
+
+$responseJSON = [];
+
+$client = new Client();
+$headers = [
+    'authorization' => 'Basic YW5kcm9pZDpUYVI2MHBFdHRZ',
+    'user-agent' => 'okhttp/4.9.1',
+    'x-ebayk-app' => '4e10d7fd-6fef-4f87-afb0-b8ede2f494071636475109828',
+    'Host' => 'api.ebay-kleinanzeigen.de',
+    'Accept' => '*/*',
+    'Accept-Encoding' => 'gzip, deflate, br'
+];
+$response = $client->request('GET', "https://api.ebay-kleinanzeigen.de/api/ads.json?_in=title,price,pictures,link,features-active,search-distance,negotiation-enabled,attributes,medias,medias.media,medias.media.title,medias.media.media-link,store-id,store-title&page=0&size=31&userIds=$ebayKleinanzeigenUserId&pictureRequired=false&includeTopAds=false&limitTotalResultCount=true", [
+    'headers' => $headers ]);
+
+$response = json_decode($response->getBody(), true);
+$ads = $response["{http://www.ebayclassifiedsgroup.com/schema/ad/v1}ads"]["value"]["ad"];
+
+foreach($ads as $ad) {
+    $element = [
+        "title" => $ad["title"]["value"],
+        "price" => $ad["price"]["amount"]["value"] . " €"
+    ];
+
+    foreach($ad["link"] as $link) {
+        if($link["rel"] == "self-public-website") {
+            $element["link"] = $link["href"];
+        }
+    }
+
+    if(sizeof($ad["pictures"]["picture"]) > 0) {
+        foreach($ad["pictures"]["picture"][0]["link"] as $picture) {
+            if($picture["rel"] == "teaser") {
+                $element["previewImage"] = str_replace("https://i.ebayimg.com", "/API/ebayimg.php?url=", $picture["href"]);
+            }
+            if($picture["rel"] == "XXL") {
+                
+                $element["image"] = str_replace("https://i.ebayimg.com", "/API/ebayimg.php?url=", $picture["href"]);
+            }
+        }
+    }
+
+    array_push($responseJSON, $element);
+}
+
+if(isset($_GET["count"])) {
+    echo sizeof($responseJSON);
+    die();
+}
+echo json_encode($responseJSON);

public/API/lib/config.example.php

@@ -16,4 +16,6 @@ $homeMaxPost = 3;
 $S3Server = "";
 $S3AccessKey = "";
 $S3SecretKey = "";
-$S3BucketName = "";
+$S3BucketName = "";
+
+$ebayKleinanzeigenUserId = "";

public/index.html

@@ -22,6 +22,7 @@
 
         <h2>Blog</h2>
         <jl-blog_index id="blog"></jl-blog_index>
+        <jl-ebk-banner></jl-ebk-banner>
         <div id="banner">
             <h2>Banner</h2>
             <a href="https://ipv6.he.net" target="_blank"><img class="no-corner"

public/selling.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html >
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <title></title>
+    <link href="/css/style.css" rel="stylesheet">
+</head>
+<body>
+<jl-header data-title="Artikel zum Verkauf"></jl-header>
+<div id="content">
+    <jl-selling-table></jl-selling-table>
+</div>
+<jl-footer></jl-footer>
+<script src="/js/script.js"></script>
+</body>
+</html>

scss/_sellingTable.scss

@@ -0,0 +1,15 @@
+jl-selling-table {
+    table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+      
+      td, th {
+        text-align: left;
+        padding: 8px;
+      }
+      
+      tr:nth-child(even) {
+        background-color: $back-color-2;
+      }
+}

scss/style.scss

@@ -14,5 +14,6 @@
 @import "mobileSmall";
 @import "home";
 @import "prism";
+@import "sellingTable";
 
 @import "../node_modules/basiclightbox/src/styles/main";