From 2f096d1432261e315e9fef5e956127f0e6eac215 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Wed, 10 Nov 2021 08:02:56 +0100
Subject: [PATCH] show banner when selling on ebay kleinanzeigen
---
js/customElements/ebkBanner.js | 21 +++++++
js/customElements/sellingTable.js | 94 +++++++++++++++++++++++++++++++
js/script.js | 2 +
public/API/ebayimg.php | 12 ++++
public/API/ebk.php | 55 ++++++++++++++++++
public/API/lib/config.example.php | 4 +-
public/index.html | 1 +
public/selling.html | 17 ++++++
scss/_sellingTable.scss | 15 +++++
scss/style.scss | 1 +
10 files changed, 221 insertions(+), 1 deletion(-)
create mode 100644 js/customElements/ebkBanner.js
create mode 100644 js/customElements/sellingTable.js
create mode 100644 public/API/ebayimg.php
create mode 100644 public/API/ebk.php
create mode 100644 public/selling.html
create mode 100644 scss/_sellingTable.scss
diff --git a/js/customElements/ebkBanner.js b/js/customElements/ebkBanner.js
new file mode 100644
index 0000000..8f5cba7
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/js/customElements/sellingTable.js b/js/customElements/sellingTable.js
new file mode 100644
index 0000000..645687b
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index e186020..0514b87 100644
--- a/js/script.js
+++ b/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");
diff --git a/public/API/ebayimg.php b/public/API/ebayimg.php
new file mode 100644
index 0000000..7623edc
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/public/API/ebk.php b/public/API/ebk.php
new file mode 100644
index 0000000..c2c3ba8
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/public/API/lib/config.example.php b/public/API/lib/config.example.php
index 95c3123..f0c3b8e 100644
--- a/public/API/lib/config.example.php
+++ b/public/API/lib/config.example.php
@@ -16,4 +16,6 @@ $homeMaxPost = 3;
$S3Server = "";
$S3AccessKey = "";
$S3SecretKey = "";
-$S3BucketName = "";
\ No newline at end of file
+$S3BucketName = "";
+
+$ebayKleinanzeigenUserId = "";
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index f66f61a..af38efd 100644
--- a/public/index.html
+++ b/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"
diff --git a/public/selling.html b/public/selling.html
new file mode 100644
index 0000000..ba6ea6e
--- /dev/null
+++ b/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>
diff --git a/scss/_sellingTable.scss b/scss/_sellingTable.scss
new file mode 100644
index 0000000..867ffab
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index b9bf0cf..1432519 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -14,5 +14,6 @@
@import "mobileSmall";
@import "home";
@import "prism";
+@import "sellingTable";
@import "../node_modules/basiclightbox/src/styles/main";
--
GitLab