From 57798af4a27be8f1c05968892e96d475e53fa8c9 Mon Sep 17 00:00:00 2001
From: Jonas Leder <git@jonasled.de>
Date: Mon, 12 Apr 2021 19:45:30 +0200
Subject: [PATCH] get blog on index page from API
---
js/customElements/blogIndex.js | 26 ++++++++++++++++++++++++++
js/script.js | 3 ++-
public/index.php | 28 +---------------------------
3 files changed, 29 insertions(+), 28 deletions(-)
create mode 100644 js/customElements/blogIndex.js
diff --git a/js/customElements/blogIndex.js b/js/customElements/blogIndex.js
new file mode 100644
index 0000000..3d46573
--- /dev/null
+++ b/js/customElements/blogIndex.js
@@ -0,0 +1,26 @@
+class BlogIndex extends HTMLElement {
+ constructor() {
+ super();
+ let xhr = new XMLHttpRequest();
+ let ul = document.createElement("ul");
+ xhr.onreadystatechange = () => {
+ if(xhr.readyState === 4 && xhr.status === 200){
+ let blog = JSON.parse(xhr.responseText);
+ blog.forEach((element) => {
+ this.innerHTML += `
+ <article class="breakWord">
+ <h2>${element["title"]}</h2>
+ <p breakWord>${element["content"]}</p>
+ <p class="center"><a href="/post.php?id=${element["id"]}"><button>Mehr lesen</button></a></p>
+ </article>
+ `;
+ });
+ this.appendChild(ul);
+ }
+ }
+ xhr.open("GET", "/API/getBlogElements.php?position=index");
+ xhr.send();
+ }
+}
+
+customElements.define("jl-blog_index", BlogIndex);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 5946440..a10a207 100644
--- a/js/script.js
+++ b/js/script.js
@@ -7,4 +7,5 @@ require("./ntpMenu");
require("./customElements/cookie");
require("./customElements/svgLoader");
-require("./customElements/blogFooter");
\ No newline at end of file
+require("./customElements/blogFooter");
+require("./customElements/blogIndex");
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 9a06a50..2cc6ab0 100644
--- a/public/index.php
+++ b/public/index.php
@@ -21,33 +21,7 @@ getHeader("Jonas Leder", "home");
<div class="spacer"></div>
<h2>Blog</h2>
- <div id="blog">
- <?php
- $result = $conn->query("SELECT * FROM posts order by id desc limit $homeMaxPost");
- if ($result->num_rows > 0) {
- while($row = $result->fetch_assoc()) {
- $title = $row["title"];
- $id = $row["id"];
- $content = explode(" ", $row["content"]);
- $contentNew = "";
- if(count($content) > 800){
- $temp = str_split($content, 800);
- $contentNew = $temp[0];
- $contentNew = $content . explode(" ", $temp[1])[0] . " ...";
- } else {
- $contentNew = $row["content"];
- }
- echo(<<<EOF
- <article class="breakWord">
- <h2>$title</h2>
- <p breakWord>$contentNew</p>
- <p class="center"><a href="/post.php?id=$id"><button>Mehr lesen</button></a></p>
- </article>
- EOF);
- }
- }
- ?>
- </div>
+ <jl-blog_index id="blog"></jl-blog_index>
<div id="banner">
<h2>Banner</h2>
<a target="_blank" href="https://ipv6.he.net"><img src="<?php echo($heIMG); ?>" data-noPreview="true"></a>
--
GitLab