Kommentarfunktion für Nutzer einschränken
This commit is contained in:
+13
-41
@@ -14,28 +14,17 @@ if (isset($_GET["id"])) {
|
|||||||
foreach ($comments as $comment) {
|
foreach ($comments as $comment) {
|
||||||
if ($comment->isReply()) {
|
if ($comment->isReply()) {
|
||||||
$parentId = $comment->getParentCommentId();
|
$parentId = $comment->getParentCommentId();
|
||||||
|
|
||||||
if (!isset($repliesByParent[$parentId])) {
|
|
||||||
$repliesByParent[$parentId] = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
$repliesByParent[$parentId][] = $comment;
|
$repliesByParent[$parentId][] = $comment;
|
||||||
} else {
|
} else {
|
||||||
$mainComments[] = $comment;
|
$mainComments[] = $comment;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (Exception $e) {
|
} catch (Exception $e) {
|
||||||
$_SESSION["message"] = "internal_error";
|
$_SESSION["message"] = "internal_error";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!--
|
|
||||||
Seite: Anzeige für Beiträge
|
|
||||||
Funktion: Stellt einen übergebenen Beitrag dar.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<main class="article-view-container">
|
<main class="article-view-container">
|
||||||
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "internal_error"): ?>
|
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "internal_error"): ?>
|
||||||
<p class="alert-message is-error">
|
<p class="alert-message is-error">
|
||||||
@@ -43,28 +32,9 @@ if (isset($_GET["id"])) {
|
|||||||
</p>
|
</p>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "missing_id"): ?>
|
|
||||||
<p class="alert-message is-error">
|
|
||||||
Es ist ein Fehler aufgetreten. Die ID konnte nicht ausgelesen werden. Bitte versuche es erneut.
|
|
||||||
</p>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "missing_parameters"): ?>
|
|
||||||
<p class="alert-message is-error">
|
|
||||||
Jeder Beitrag muss einen Titel, Kategorie und Inhalt besitzen.
|
|
||||||
</p>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "article_updated"): ?>
|
|
||||||
<p class="alert-message is-success">
|
|
||||||
Dein Beitrag wurde erfolgreich bearbeitet!
|
|
||||||
</p>
|
|
||||||
<?php endif; ?>
|
|
||||||
|
|
||||||
<?php unset($_SESSION["message"]); ?>
|
<?php unset($_SESSION["message"]); ?>
|
||||||
|
|
||||||
<div class="article-view-top-section">
|
<div class="article-view-top-section">
|
||||||
|
|
||||||
<?php if (isset($category) && !empty($category)): ?>
|
<?php if (isset($category) && !empty($category)): ?>
|
||||||
<span class="article-view-category"><?php echo htmlspecialchars($category); ?></span>
|
<span class="article-view-category"><?php echo htmlspecialchars($category); ?></span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
@@ -80,7 +50,6 @@ if (isset($_GET["id"])) {
|
|||||||
</span>
|
</span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="article-view-content">
|
<div class="article-view-content">
|
||||||
@@ -107,8 +76,7 @@ if (isset($_GET["id"])) {
|
|||||||
<span class="article-view-tag-item">
|
<span class="article-view-tag-item">
|
||||||
<?php echo htmlspecialchars($trimmedTag); ?>
|
<?php echo htmlspecialchars($trimmedTag); ?>
|
||||||
</span>
|
</span>
|
||||||
<?php
|
<?php endif;
|
||||||
endif;
|
|
||||||
endforeach;
|
endforeach;
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
@@ -129,12 +97,14 @@ if (isset($_GET["id"])) {
|
|||||||
|
|
||||||
<p><?php echo nl2br(htmlspecialchars($comment->getContent())); ?></p>
|
<p><?php echo nl2br(htmlspecialchars($comment->getContent())); ?></p>
|
||||||
|
|
||||||
<button type="button"
|
<?php if (isset($_SESSION["user_email"])): ?>
|
||||||
class="reply-button"
|
<button type="button"
|
||||||
data-comment-id="<?php echo htmlspecialchars($comment->getId()); ?>"
|
class="reply-button"
|
||||||
data-author="<?php echo htmlspecialchars($comment->getAuthor()); ?>">
|
data-comment-id="<?php echo htmlspecialchars($comment->getId()); ?>"
|
||||||
Antworten
|
data-author="<?php echo htmlspecialchars($comment->getAuthor()); ?>">
|
||||||
</button>
|
Antworten
|
||||||
|
</button>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="comment-replies">
|
<div class="comment-replies">
|
||||||
<?php if (isset($repliesByParent[$comment->getId()])): ?>
|
<?php if (isset($repliesByParent[$comment->getId()])): ?>
|
||||||
@@ -182,8 +152,10 @@ if (isset($_GET["id"])) {
|
|||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<p>Du musst angemeldet sein, um einen Kommentar zu schreiben.</p>
|
<div class="comment-login-hint">
|
||||||
|
<p>Melde dich an, um einen Kommentar zu schreiben.</p>
|
||||||
|
<a href="index.php?pfad=login" class="button">Jetzt anmelden</a>
|
||||||
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
@@ -196,4 +196,16 @@
|
|||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
color: #475569;
|
color: #475569;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.comment-login-hint {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-login-hint p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
+13
-60
@@ -1,13 +1,10 @@
|
|||||||
/**
|
/**
|
||||||
* Initialisiert die Kommentarfunktion.
|
* Initialisiert die Kommentarfunktion.
|
||||||
*
|
*
|
||||||
* Ermöglicht:
|
* Kommentare werden per AJAX gespeichert,
|
||||||
* - Erstellen neuer Kommentare
|
* ohne dass die Seite neu geladen werden muss.
|
||||||
* - Antworten auf bestehende Kommentare
|
|
||||||
* - AJAX-Kommunikation ohne Seitenneuladen
|
|
||||||
*/
|
*/
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
||||||
const form = document.getElementById("comment-form");
|
const form = document.getElementById("comment-form");
|
||||||
const commentsList = document.getElementById("comments-list");
|
const commentsList = document.getElementById("comments-list");
|
||||||
const commentContent = document.getElementById("comment-content");
|
const commentContent = document.getElementById("comment-content");
|
||||||
@@ -19,65 +16,44 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Registriert die Antwort-Buttons.
|
* Registriert alle Antwort-Buttons.
|
||||||
*
|
|
||||||
* Beim Klick wird die ID des Eltern-Kommentars gespeichert,
|
|
||||||
* damit die neue Nachricht als Antwort angelegt werden kann.
|
|
||||||
*/
|
*/
|
||||||
document.querySelectorAll(".reply-button").forEach(function (button) {
|
document.querySelectorAll(".reply-button").forEach(function (button) {
|
||||||
|
|
||||||
button.addEventListener("click", function () {
|
button.addEventListener("click", function () {
|
||||||
|
|
||||||
parentCommentInput.value = button.dataset.commentId;
|
parentCommentInput.value = button.dataset.commentId;
|
||||||
|
replyInfo.textContent = "Antwort auf " + button.dataset.author;
|
||||||
replyInfo.textContent =
|
|
||||||
"Antwort auf " + button.dataset.author;
|
|
||||||
|
|
||||||
replyInfo.style.display = "block";
|
replyInfo.style.display = "block";
|
||||||
|
|
||||||
commentContent.focus();
|
commentContent.focus();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Verarbeitet das Absenden eines Kommentars.
|
* Sendet Kommentare per AJAX an den Server.
|
||||||
*
|
|
||||||
* Die Daten werden per AJAX an den Server gesendet,
|
|
||||||
* sodass die Seite nicht neu geladen werden muss.
|
|
||||||
*/
|
*/
|
||||||
form.addEventListener("submit", function (event) {
|
form.addEventListener("submit", function (event) {
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
const formData = new FormData(form);
|
const formData = new FormData(form);
|
||||||
const parentCommentId = parentCommentInput.value;
|
const parentCommentId = parentCommentInput.value;
|
||||||
|
|
||||||
/*
|
|
||||||
* Sendet den Kommentar an den Server
|
|
||||||
* und speichert ihn in der Datenbank.
|
|
||||||
*/
|
|
||||||
fetch("php/ajax/add-comment.php", {
|
fetch("php/ajax/add-comment.php", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: formData
|
body: formData
|
||||||
})
|
})
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
|
|
||||||
if (!data.success) {
|
if (!data.success) {
|
||||||
alert(data.message);
|
alert(data.message);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const emptyMessage =
|
const emptyMessage = commentsList.querySelector(".no-comments-message");
|
||||||
commentsList.querySelector(".no-comments-message");
|
|
||||||
|
|
||||||
if (emptyMessage) {
|
if (emptyMessage) {
|
||||||
emptyMessage.remove();
|
emptyMessage.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
const commentElement =
|
const commentElement = document.createElement("div");
|
||||||
document.createElement("div");
|
|
||||||
|
|
||||||
commentElement.classList.add("comment-item");
|
commentElement.classList.add("comment-item");
|
||||||
|
|
||||||
if (parentCommentId) {
|
if (parentCommentId) {
|
||||||
@@ -92,60 +68,37 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
|
<p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/*
|
|
||||||
* Antworten werden unter dem
|
|
||||||
* zugehörigen Kommentar angezeigt.
|
|
||||||
*/
|
|
||||||
if (parentCommentId) {
|
if (parentCommentId) {
|
||||||
|
const parentReplies = document.querySelector(
|
||||||
const parentComment = document.querySelector(
|
|
||||||
`.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
|
`.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
|
||||||
);
|
);
|
||||||
|
|
||||||
if (parentComment) {
|
if (parentReplies) {
|
||||||
parentComment.appendChild(commentElement);
|
parentReplies.appendChild(commentElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
/*
|
|
||||||
* Normale Kommentare werden
|
|
||||||
* oben in die Liste eingefügt.
|
|
||||||
*/
|
|
||||||
commentElement.dataset.commentId = "";
|
|
||||||
|
|
||||||
commentsList.prepend(commentElement);
|
commentsList.prepend(commentElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Formular zurücksetzen.
|
|
||||||
*/
|
|
||||||
commentContent.value = "";
|
commentContent.value = "";
|
||||||
parentCommentInput.value = "";
|
parentCommentInput.value = "";
|
||||||
replyInfo.textContent = "";
|
replyInfo.textContent = "";
|
||||||
replyInfo.style.display = "none";
|
replyInfo.style.display = "none";
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
alert("Kommentar konnte nicht gesendet werden.");
|
||||||
alert(
|
|
||||||
"Kommentar konnte nicht gesendet werden."
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Escaped HTML-Sonderzeichen zur Vermeidung
|
* Entfernt HTML-Sonderzeichen aus Nutzereingaben.
|
||||||
* von XSS-Angriffen.
|
|
||||||
*
|
*
|
||||||
* @param {string} text Zu bereinigender Text
|
* @param {string} text Zu bereinigender Text
|
||||||
* @returns {string} HTML-sicherer Text
|
* @returns {string} Sicherer Text
|
||||||
*/
|
*/
|
||||||
function escapeHtml(text) {
|
function escapeHtml(text) {
|
||||||
|
|
||||||
const div = document.createElement("div");
|
const div = document.createElement("div");
|
||||||
|
|
||||||
div.textContent = text;
|
div.textContent = text;
|
||||||
|
|
||||||
return div.innerHTML;
|
return div.innerHTML;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -8,7 +8,7 @@ require_once "../model/CommentManager.php";
|
|||||||
if (!isset($_SESSION["user_email"])) {
|
if (!isset($_SESSION["user_email"])) {
|
||||||
echo json_encode([
|
echo json_encode([
|
||||||
"success" => false,
|
"success" => false,
|
||||||
"message" => "Du musst angemeldet sein."
|
"message" => "Du musst angemeldet sein, um zu kommentieren."
|
||||||
]);
|
]);
|
||||||
exit();
|
exit();
|
||||||
}
|
}
|
||||||
@@ -17,7 +17,7 @@ $articleId = $_POST["article_id"] ?? null;
|
|||||||
$content = trim($_POST["content"] ?? "");
|
$content = trim($_POST["content"] ?? "");
|
||||||
$parentCommentId = $_POST["parent_comment_id"] ?? null;
|
$parentCommentId = $_POST["parent_comment_id"] ?? null;
|
||||||
|
|
||||||
if ($parentCommentId === "") {
|
if ($parentCommentId === "" || $parentCommentId === "0") {
|
||||||
$parentCommentId = null;
|
$parentCommentId = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user