From f153625d1a585c2c3ed6f0e2fb0fc94bad2ee933 Mon Sep 17 00:00:00 2001
From: ElnuDev <elnu@elnu.com>
Date: Sat, 9 Jul 2022 13:58:43 -0700
Subject: [PATCH] Add demo

---
 demo/index.html | 14 ++++++++++++++
 demo/soudan.js  | 41 +++++++++++++++++++++++++++++++++++++++++
 demo/style.css  | 10 ++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 demo/index.html
 create mode 100644 demo/soudan.js
 create mode 100644 demo/style.css

diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..3a3aae8
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura-dark.css" type="text/css">
+<link rel="stylesheet" href="style.css">
+<h3>Make a comment</h3>
+<form id="commentForm">
+	<label for="author">Name:</label> <input type="text" id="author" name="author" placeholder="Anonymous">
+	<label for="email">Email:</label> <input type="email" id="email" name="email">
+	<label for="text">Comment:</label>
+	<textarea id="text" name="text" required></textarea>
+	<input type="submit">
+</form>
+<h3 id="commentsHeader">Comments</h3>
+<div id="comments"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="soudan.js"></script>
diff --git a/demo/soudan.js b/demo/soudan.js
new file mode 100644
index 0000000..d7bf2cc
--- /dev/null
+++ b/demo/soudan.js
@@ -0,0 +1,41 @@
+const form = document.getElementById("commentForm");
+const commentContainer = document.getElementById("comments");
+const commentContainerHeader = document.getElementById("commentsHeader");
+form.addEventListener("submit", e => {
+	let data = {};
+	new FormData(form).forEach((value, key) => {
+		data[key] = value === "" ? null : value;
+	});
+	var request = new XMLHttpRequest();
+	request.open("POST", "http:/127.0.0.1:8080");
+	request.send(JSON.stringify(data));
+	request.addEventListener("load", () => {
+		form.querySelector("textarea").value = "";
+		reloadComments()
+	});
+	request.addEventListener("error", () => alert("Comment posting failed!"));
+	e.preventDefault();
+});
+
+function reloadComments() {
+	fetch("http://127.0.0.1:8080")
+		.then(response => {
+			return response.json().then(json => {
+				return response.ok ? json : Promise.reject(json);
+			});
+		})
+		.then(comments => {
+			commentContainerHeader.innerHTML = `${comments.length} Comment${comments.length == 1 ? "" : "s"}`;
+			let html = "";
+			if (comments.length == 0) {
+				html = "<p>No comments yet! Be the first to make one.</p>";
+			} else {
+				comments.forEach(comment => {
+					html += `<div><img class="avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${comment.text}</div></div></div>`;
+				});
+			}
+			commentContainer.innerHTML = html;
+		});
+}
+
+reloadComments();
diff --git a/demo/style.css b/demo/style.css
new file mode 100644
index 0000000..c248493
--- /dev/null
+++ b/demo/style.css
@@ -0,0 +1,10 @@
+#comments > div {
+	display: flex;
+	gap: 0.5em;
+}
+#comments .avatar {
+	border-radius: 100%;
+	width: 80px;
+	height: 80px;
+	background-color: gray;
+}