From eb12dd7700dfceff88d8d68acc720d86cdf90e05 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Tue, 9 Nov 2021 16:35:49 +0100
Subject: Add forum.

---
 views/forum_edit.ejs   | 10 ++++++++++
 views/forum_post.ejs   | 20 ++++++++++++++++++++
 views/forum_reply.ejs  | 25 +++++++++++++++++++++++++
 views/forum_thread.ejs | 32 ++++++++++++++++++++++++++++++++
 views/forum_view.ejs   | 42 ++++++++++++++++++++++++++++++++++++++++++
 views/header.ejs       |  1 +
 6 files changed, 130 insertions(+)
 create mode 100644 views/forum_edit.ejs
 create mode 100644 views/forum_post.ejs
 create mode 100644 views/forum_reply.ejs
 create mode 100644 views/forum_thread.ejs
 create mode 100644 views/forum_view.ejs

(limited to 'views')

diff --git a/views/forum_edit.ejs b/views/forum_edit.ejs
new file mode 100644
index 0000000..2f3c3ff
--- /dev/null
+++ b/views/forum_edit.ejs
@@ -0,0 +1,10 @@
+<%- include('header', { title: "Edit Post" }) %>
+<style>
+input, textarea { width: 100%; max-width: 45em; }
+</style>
+<form action="/forum/edit/<%- post.post_id %>" method="post">
+<p>
+<textarea name="body" rows="20" cols="80" maxlength="32000" required autofocus><%= post.body %></textarea>
+<p>
+<button type="submit">Submit</button>
+</form>
diff --git a/views/forum_post.ejs b/views/forum_post.ejs
new file mode 100644
index 0000000..aa24455
--- /dev/null
+++ b/views/forum_post.ejs
@@ -0,0 +1,20 @@
+<%- include('header', { title: "New Thread" }) %>
+<style>
+input, textarea { width: 100%; max-width: 45em; }
+</style>
+<form action="/forum/post" method="post">
+<p>
+Subject:
+<br>
+<input type="text" name="subject" size="80" maxlength="80"
+	onkeypress="if(event.keyCode===13){document.querySelector('textarea').focus();return false;}"
+	autofocus
+	pattern=".*\S+.*"
+	required>
+<p>
+Body:
+<br>
+<textarea name="body" rows="20" cols="80" maxlength="32000" required></textarea>
+<p>
+<button type="submit">Submit</button>
+</form>
diff --git a/views/forum_reply.ejs b/views/forum_reply.ejs
new file mode 100644
index 0000000..bf27492
--- /dev/null
+++ b/views/forum_reply.ejs
@@ -0,0 +1,25 @@
+<%- include('header', { title: thread.subject }) %>
+<style>
+input, textarea { width: 100%; max-width: 45em; }
+table { width: 100%; max-width: 50em; }
+td.body { white-space: pre-wrap; padding: 10px 10px; }
+th.author { border-right: none; }
+th.time { text-align: right; border-left: none; font-weight: normal; }
+</style>
+<table>
+<tr>
+<th class="nowrap author"><%= post.author_name %>
+<th class="nowrap time"><%= post.ctime %>
+<%= post.edited ? "(edited " + post.mtime + ")" : "" %>
+<tr>
+<td class="body" colspan="2"><%- post.body %></td>
+</table>
+<form action="/forum/reply/<%- thread.thread_id %>" method="post">
+<p>
+Reply:
+<br>
+<textarea name="body" rows="15" cols="80" maxlength="32000" required autofocus
+	placeholder="Say something nice."></textarea>
+<p>
+<button type="submit">Submit</button>
+</form>
diff --git a/views/forum_thread.ejs b/views/forum_thread.ejs
new file mode 100644
index 0000000..fad8829
--- /dev/null
+++ b/views/forum_thread.ejs
@@ -0,0 +1,32 @@
+<%- include('header', { title: thread.subject }) %>
+<style>
+table { width: 100%; max-width: 50em; }
+td.body { white-space: pre-wrap; padding: 10px 10px; }
+th.author { border-right: none; }
+th.time { text-align: right; border-left: none; font-weight: normal; }
+td.edit { text-align: right; border: none; }
+</style>
+<% posts.forEach((row) => { %>
+<p>
+<table>
+<tr>
+<th class="nowrap author"><%= row.author_name %>
+<th class="nowrap time"><%= row.ctime %>
+<%= row.edited ? "(edited " + row.mtime + ")" : "" %>
+<tr>
+<td class="body" colspan="2"><%- row.body %></td>
+<% if (user) { %>
+<tr>
+<td class="edit" colspan=2>
+<% if (row.author_id === user.user_id) { %>
+<a href="/forum/edit/<%- row.post_id %>">Edit</a>
+<% } %>
+<a href="/forum/reply/<%- row.post_id %>">Reply</a>
+<% } %>
+</table>
+<% }); %>
+<%
+if (user) {
+	%><p><a href="/forum/reply/<%- posts[0].post_id %>">Reply</a><%
+}
+%>
diff --git a/views/forum_view.ejs b/views/forum_view.ejs
new file mode 100644
index 0000000..7c3de75
--- /dev/null
+++ b/views/forum_view.ejs
@@ -0,0 +1,42 @@
+<%- include('header', { title: "Forum", refresh: 900 }) %>
+<style>
+table { width: 100%; max-width: 60em; }
+td a { color: black; text-decoration: none; }
+tfoot td { background-color: gainsboro; }
+</style>
+<table>
+<thead>
+<tr><th>Subject<th>Author
+<th>Replies<th>Time
+</thead>
+<% threads.forEach((row) => { %>
+<tr>
+<td class="ellipsis"><a href="/forum/thread/<%- row.thread_id %>"><%= row.subject %></a>
+<td class="nowrap"><%= row.author_name %>
+<td><%= row.reply_count %>
+<td class="nowrap"><%= row.mtime %>
+<% }); %>
+<tfoot>
+<tr>
+<td colspan="4">
+<%
+if (current_page > 1) {
+	%><a href="/forum/page/<%= current_page-1 %>">&#x2190;</a> <%
+}
+for (let p = 1; p <= page_count && p <= 30; ++p) {
+	if (p === current_page) {
+		%>(<%= p %>) <%
+	} else {
+		%><a href="/forum/page/<%= p %>"><%= p %></a> <%
+	}
+}
+if (current_page < page_count) {
+	%><a href="/forum/page/<%= current_page+1 %>">&#x2192;</a> <%
+}
+%>
+</table>
+<%
+if (user) {
+	%><p><a href="/forum/post">New thread</a><%
+}
+%>
diff --git a/views/header.ejs b/views/header.ejs
index b430c25..9c8ee0d 100644
--- a/views/header.ejs
+++ b/views/header.ejs
@@ -13,6 +13,7 @@
 <div><a href="/"><img src="/images/rally-the-troops.svg" width="48" height="48"></a></div>
 <div>
 <span><a href="/about">About</a></span>
+<span><a href="/forum">Forum</a></span>
 <%
 	if (user) {
 		%><span><a href="/profile">Profile (<%= user.name %>)</a></span><%
-- 
cgit v1.2.3