load blog on index and footer from graphQL
This commit is contained in:
Jonas Leder
parent
49fa8a89b8
commit
356f839f9a
5 changed files with 107 additions and 101 deletions
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
this.getBlogPosts();
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"]),
|
||||
]
|
||||
],
|
||||
]);
|
||||
|
|
|
|||
Loading…
Reference in a new issue