diff --git a/js/customElements/blogFooter.js b/js/customElements/blogFooter.js
index 526894c49adc635fba4004b83412b78faaf0de59..a0bf9b57b962387c09bdf5935bea798549004ed0 100644
--- a/js/customElements/blogFooter.js
+++ b/js/customElements/blogFooter.js
@@ -1,31 +1,31 @@
class blogFooter extends HTMLElement {
constructor(){
super();
- let xhr = new XMLHttpRequest();
- let ul = document.createElement("ul");
- xhr.onreadystatechange = () => {
- if(xhr.readyState === 4) {
- if (xhr.status === 200) {
- let blog = JSON.parse(xhr.responseText);
- blog.forEach((element) => {
- let li = document.createElement("li");
- let a = document.createElement("a");
- a.href = "/post.html?id=" + element["id"];
- a.innerText = element["title"];
- li.appendChild(a);
- ul.appendChild(li);
- });
- this.appendChild(ul);
- } else {
- let p = document.createElement("p");
- p.innerText = "Leider konnte dieser Inhalt nicht geladen werden, bitte versuche die Seite neu zu laden oder komme später wieder zurück";
- this.appendChild(p);
+ this.getBlogEntries();
+ }
- }
+ async getBlogEntries() {
+ let ul = document.createElement("ul");
+ this.appendChild(ul);
+ var graphql = JSON.stringify({
+ query: 'query($count: Int!) { blogPosts(count: $count) { title id }}',
+ variables: {
+ "count": 5
}
- }
- xhr.open("GET", "/API/getBlogElements.php?position=footer");
- xhr.send();
+ })
+ var requestOptions = {
+ method: 'POST',
+ body: graphql,
+ };
+ let posts = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.blogPosts;
+ posts.forEach((element) => {
+ let li = document.createElement("li");
+ let a = document.createElement("a");
+ a.href = "/post.html?id=" + element["id"];
+ a.innerText = element["title"];
+ li.appendChild(a);
+ ul.appendChild(li);
+ });
}
}
diff --git a/js/customElements/blogIndex.js b/js/customElements/blogIndex.js
index b356df7970ef4d14c85ed600928ae8cdac868df2..b3091b00495caed466437c481f72e87a4938e360 100644
--- a/js/customElements/blogIndex.js
+++ b/js/customElements/blogIndex.js
@@ -1,48 +1,48 @@
class BlogIndex extends HTMLElement {
constructor() {
super();
- let xhr = new XMLHttpRequest();
- xhr.onreadystatechange = () => {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- let blog = JSON.parse(xhr.responseText);
- blog.forEach((element) => {
- const article = document.createElement("article");
- article.classList.add("breakWord");
- this.appendChild(article);
-
- const h2 = document.createElement("h2");
- h2.innerText = element["title"];
- article.appendChild(h2);
-
- const content = document.createElement("p");
- content.classList.add("breakWord");
- content.innerHTML = element["content"];
- article.appendChild(content);
-
- const moreP = document.createElement("p");
- moreP.classList.add("center");
- article.appendChild(moreP);
-
- const moreLink = document.createElement("a");
- moreLink.href = "/post.html?id=" + element["id"];
- moreP.appendChild(moreLink);
-
- const moreButton = document.createElement("button");
- moreButton.innerText = "Mehr lesen";
- moreLink.appendChild(moreButton);
- });
-
- } else {
- let p = document.createElement("p");
- p.innerText = "Leider konnte dieser Inhalt nicht geladen werden, bitte versuche die Seite neu zu laden oder komme später wieder zurück";
- this.appendChild(p);
+ this.getBlogPosts();
+ }
- }
- }
+ async getBlogPosts() {
+ var graphql = JSON.stringify({
+ query: 'query($count: Int! $contentLength: Int!) { blogPosts(count: $count contentLength: $contentLength) { content title id }}',
+ variables: {
+ "count": 3,
+ "contentLength": 300
}
- xhr.open("GET", "/API/getBlogElements.php?position=index");
- xhr.send();
+ })
+ var requestOptions = {
+ method: 'POST',
+ body: graphql,
+ };
+ let posts = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.blogPosts;
+ posts.forEach((element) => {
+ const article = document.createElement("article");
+ article.classList.add("breakWord");
+ this.appendChild(article);
+
+ const h2 = document.createElement("h2");
+ h2.innerText = element["title"];
+ article.appendChild(h2);
+
+ const content = document.createElement("p");
+ content.classList.add("breakWord");
+ content.innerHTML = element["content"];
+ article.appendChild(content);
+
+ const moreP = document.createElement("p");
+ moreP.classList.add("center");
+ article.appendChild(moreP);
+
+ const moreLink = document.createElement("a");
+ moreLink.href = "/post.html?id=" + element["id"];
+ moreP.appendChild(moreLink);
+
+ const moreButton = document.createElement("button");
+ moreButton.innerText = "Mehr lesen";
+ moreLink.appendChild(moreButton);
+ });
}
}
diff --git a/public/API/getBlogElements.php b/public/API/getBlogElements.php
deleted file mode 100644
index 8271e20e55a8135c3570d2c82ad006d22d0567ca..0000000000000000000000000000000000000000
--- a/public/API/getBlogElements.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php
-include "./lib/config.php";
-include "./lib/mysql.php";
-
-$position = $_GET['position'];
-
-if($position == "index"){
- $limit = $homeMaxPost;
-} else if($position == "footer"){
- $limit = $footerMaxPost;
-} else {
- die("wrong parameter");
-}
-$responseJSON = [];
-
-$result = $conn->query("SELECT * FROM posts order by id desc limit $limit");
-if ($result->num_rows > 0) {
- while ($row = $result->fetch_assoc()) {
- $blogElement = [
- "title" => $row["title"],
- "id" => $row["id"],
- "content" => $row["content"]
- ];
-
- array_push($responseJSON, $blogElement);
- }
-}
-header('Content-Type: application/json');
-echo json_encode($responseJSON);
\ No newline at end of file
diff --git a/public/API/queries/blogPost.php b/public/API/queries/blogPost.php
index 10939b92aee368a289102ef9e86b81c059bf937d..6f3d732706defa0f7675c2050c76e4c97e0145e5 100644
--- a/public/API/queries/blogPost.php
+++ b/public/API/queries/blogPost.php
@@ -28,15 +28,38 @@ function blogPost($id, $conn)
];
}
- $title = $row["title"];
- $content = $row["content"];
- $date = $row["date"];
- $id = $row["id"];
-
return [
- "title" => $title,
- "content" => $content,
- "date" => $date,
- "id" => $id
+ "title" => $row["title"],
+ "content" => $row["content"],
+ "date" => $row["date"],
+ "id" => $row["id"],
];
}
+
+function blogPosts($count, $contentLength, $conn)
+{
+ $response = [];
+ $result = $conn->query("SELECT * FROM posts order by id desc limit $count");
+ if ($result->num_rows > 0) {
+ while ($row = $result->fetch_assoc()) {
+ $content = $row["content"];
+ if($contentLength != null && strlen($content) > $contentLength) {
+ $contentNew = substr($content, 0, $contentLength);
+ $contentRest = substr($content, $contentLength);
+
+ $content = $contentNew . explode(" ", $contentRest)[0] . " ...";
+
+ }
+ $blogElement = [
+ "title" => $row["title"],
+ "content" => $content,
+ "date" => $row["date"],
+ "id" => $row["id"],
+ ];
+
+ array_push($response, $blogElement);
+ }
+ }
+
+ return $response;
+}
\ No newline at end of file
diff --git a/public/API/queries/queries.php b/public/API/queries/queries.php
index 5dd8d8c39ccabdd8024f78f3d3bf4e74ebb9a5ba..cdff9c395819165635f99571fd780dc4e18224d5 100644
--- a/public/API/queries/queries.php
+++ b/public/API/queries/queries.php
@@ -23,5 +23,17 @@ $queryType = new ObjectType([
],
'resolve' => fn ($rootValue, $args) => blogPost($args["id"], $rootValue["db"]),
],
+ 'blogPosts' => [
+ "type" => Type::listOf($blogPostFields),
+ "args" => [
+ "count" => Type::nonNull(Type::int()),
+ "contentLength" => [
+ "type" => Type::int(),
+ "defaultValue" => null
+ ]
+
+ ],
+ 'resolve' => fn ($rootValue, $args) => blogPosts($args["count"], $args["contentLength"], $rootValue["db"]),
+ ]
],
]);