From 9ad7c031620f55f540881858697adc322e3a6de9 Mon Sep 17 00:00:00 2001 From: Akif9748 Date: Mon, 29 Aug 2022 00:58:34 +0300 Subject: [PATCH] thread converted to new theme, page support --- README.md | 10 ++- public/css/thread.css | 172 +++++++++++++++++++++--------------------- public/js/thread.js | 2 +- routes/threads.js | 11 ++- views/extra/ot.ejs | 97 ++++++++++++++++++++++++ views/thread.ejs | 149 ++++++++++++++++++------------------ 6 files changed, 274 insertions(+), 167 deletions(-) create mode 100644 views/extra/ot.ejs diff --git a/README.md b/README.md index bf89403..b259af2 100644 --- a/README.md +++ b/README.md @@ -30,12 +30,14 @@ Akf-forum has got an API for AJAX, other clients etc. And, you can learn about A ## Roadmap ### TO-DO: - If thread deleted, not show its messages in API. -- Thread.ejs fix with new theme - Profile photos will store in database - regex for pfp for now and -- admin perm for undelete, thread+message +- admin perm for undelete, thread + message - page support for threads - +- message "" +- author name of thread +- page for threads - users +- edit & delete button for thread ### Frontend ### User | To do | Is done? | Priority | @@ -58,7 +60,7 @@ Akf-forum has got an API for AJAX, other clients etc. And, you can learn about A | Ratelimit | 🟢 | HIGH | | Send | 🟢 | HIGH | | Delete | 🟢 | HIGH | -| Regex for scripts | 🔴 | HIGH | +| Regex for scripts | 🟢 | HIGH | | Undelete | 🟢 | MEDIUM | | React | 🟢 | MEDIUM | | Edit | 🔴 | MEDIUM | diff --git a/public/css/thread.css b/public/css/thread.css index c1fec3b..b67a5d7 100644 --- a/public/css/thread.css +++ b/public/css/thread.css @@ -1,136 +1,140 @@ .title { - color: #414141; -font-weight: 700; -font-size: 36px; + color: #414141; + font-weight: 700; + font-size: 36px; } -.date{ + +.date { color: gray; } -.thread{ +.message { max-width: 800px; box-shadow: 0 0 5px 0 #c3c3c3; margin: 10px auto; padding: 20px; - display:flex; - gap:10px; - position:relative; + display: flex; + gap: 10px; + position: relative; } -.thread .left{ +.message .left { text-align: center; -border-right: 2px solid #d9d9d9; + border-right: 2px solid #d9d9d9; } -.thread .left img{ +.message .left img { width: 100px; -height: 100px; -border-radius: 50%; -margin-right: 5px; + height: 100px; + border-radius: 50%; + margin-right: 5px; } -.thread .left .username{ -color: #555; +.message .left .username { + color: #555; } -.content{ +.content { width: 70%; } -.likes{ - position:absolute; - right:20px; - bottom:20px; - display:flex; - align-items:center; - gap:10px; +.reactions { + position: absolute; + right: 20px; + bottom: 20px; + display: flex; + align-items: center; + gap: 10px; } -.likes div{ - display:flex; - align-items:center; - gap:5px; - padding:4px; + +.reactions div { + display: flex; + align-items: center; + gap: 5px; + padding: 4px; color: #747474; - cursor:pointer; - transition:color 0.3s ease; + cursor: pointer; + transition: color 0.3s ease; } -.likes div:hover{ - color: #151515; + +.reactions div:hover { + color: #151515; } -.likes div i{ - font-size:22px; +.reactions div i { + font-size: 22px; } -.pagination{ +.pagination { box-shadow: 0 0 5px 0 #c3c3c3; margin: 10px auto; padding: 8px; - display:flex; - justify-content:space-between; - align-items:center; - max-width:400px; - gap:10px; - position:relative; + display: flex; + justify-content: space-between; + align-items: center; + max-width: 400px; + gap: 10px; + position: relative; } -.pagination .back , +.pagination .back, .pagination .after { - color:#747474; - font-size:26px; - cursor:pointer; + color: #747474; + font-size: 26px; + cursor: pointer; } -.pagination .numbers{ - display:flex; - align-items:center; - gap:5px; +.pagination .numbers { + display: flex; + align-items: center; + gap: 5px; } + .pagination .number { - color: #747474; - font-size: 22px; - border: 0 0 5px #747474; - padding: 8px; - border-radius: 2px; - font-weight: 600; - cursor: pointer; - margin: 8px; + color: #747474; + font-size: 22px; + border: 0 0 5px #747474; + padding: 8px; + border-radius: 2px; + font-weight: 600; + cursor: pointer; + margin: 8px; } -.pagination .number.active{ -color: #4d18e6; -font-weight: 700; + +.pagination .number.active { + color: #4d18e6; + font-weight: 700; } -.dots{ -position: absolute; -right: 20px; -font-size: 22px; -top: 10px; -color: #747474; - cursor:pointer; +.dots { + position: absolute; + right: 20px; + font-size: 22px; + top: 10px; + color: #747474; + cursor: pointer; } -.dots-menu{ - position: absolute; -top: 50px; -right: 0; -background-color: #e6e6e6; -padding: ; -width: 100px; -text-align: center; - display:none; +.dots-menu { + position: absolute; + top: 50px; + right: 0; + background-color: #e6e6e6; + width: 100px; + text-align: center; + display: none; } -.dots-menu.active{ - display:block; +.dots-menu.active { + display: block; } -.dots-menu a{ - display:block; - margin:8px; - cursor:pointer; -} +.dots-menu a { + display: block; + margin: 8px; + cursor: pointer; +} \ No newline at end of file diff --git a/public/js/thread.js b/public/js/thread.js index 97c0c51..0f14e00 100644 --- a/public/js/thread.js +++ b/public/js/thread.js @@ -45,7 +45,7 @@ window.scrollTo(0, document.body.scrollHeight); /** * Message Sender */ -document.getElementById("send").addEventListener("submit", async e => { +document.getElementById("send")?.addEventListener("submit", async e => { e.preventDefault(); const form = e.target; diff --git a/routes/threads.js b/routes/threads.js index c46c982..6d01ae3 100644 --- a/routes/threads.js +++ b/routes/threads.js @@ -17,18 +17,21 @@ app.get("/create*", (req, res) => res.reply("create_thread")); app.get("/:id", async (req, res) => { const { id } = req.params; - - const thread = await ThreadModel.get(id); + const page = req.query.page || 0; + const thread = await ThreadModel.get(id).skip(page * 10).limit(page * 10 + 10); thread.views++; if (thread && (req.user?.admin || !thread.deleted)) { const messages = await Promise.all(thread.messages.map(async id => { const message = await MessageModel.get(id) - message.content = message.content.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll("\"", """).replaceAll("'", "'").replaceAll("\n", "
") + message.content = message.content.replaceAll("&", "&") + .replaceAll("<", "<").replaceAll(">", ">") + .replaceAll("\"", """).replaceAll("'", "'") + .replaceAll("\n", "
"); return req.user?.admin || !message?.deleted ? message.toObject({ virtuals: true }) : null; })); - res.reply("thread", { thread, messages, scroll: req.query.scroll || false }); + res.reply("thread", { page,thread, messages, scroll: req.query.scroll || thread.messages[0]}); } else res.error(404, "We have not got this thread."); thread.save(); diff --git a/views/extra/ot.ejs b/views/extra/ot.ejs new file mode 100644 index 0000000..7c59c47 --- /dev/null +++ b/views/extra/ot.ejs @@ -0,0 +1,97 @@ + + + +<%- include("extra/meta", {title: "Thread list!" }) %> + + + + <%- include("extra/navbar") %> + + + <% if (user){ %> + + <% }%> + + +

<%= thread.title %>

+

View count: <%= thread.views %>

+ +

By <%= thread.author.name %> + +

+ + <% if (user && !thread.deleted){ %> + + DELETE + EDIT + <% } else if (thread.deleted) { %> +

This thread has been deleted

+ UNDELETE + + <% }; %> + + +
+ + +
+ + <% messages.filter(Boolean).forEach(message=>{ %> + +
+ +

<%= new Date(message.time).toLocaleString() %>

+ +

+ + <%=message.author.name %>: +

+ +

<%= message.content%>


+
+ + <% if (!message.deleted){ %> + + DELETE + EDIT + <% }else{ %> +

This message has been deleted

+ UNDELETE + <% } %> + +
+
+

<%=message.reactCount %>

+ +🔼 + -🔽 +
+
+ <% }); %> + +
+ +
+ + +
+ + + +
+ <% if (user){ %> + + <%} else {%> + + <% }%> + +
+ + + + + + + + \ No newline at end of file diff --git a/views/thread.ejs b/views/thread.ejs index 94aa2df..7c4bb62 100644 --- a/views/thread.ejs +++ b/views/thread.ejs @@ -1,104 +1,105 @@ -<%- include("extra/meta", {title: "Thread list!" }) %> +<%- include("extra/meta", {title: thread.title }) %> <%- include("extra/navbar") %> - - + + <% if (user){ %> - - <% }%> + + <% }; %> +
+
<%= thread.title %>
+
+ <%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %> +
+
+
-
-
Ä°lk Forum
-
- 20/04/2000 -
-
-
+ <% messages.filter(Boolean).forEach(message=>{ %> + +
- -
Tokmak
-
- 20/04/2000 + +
<%=message.author.name %>
+
+ <%= new Date(message.time).toLocaleDateString() %> +
+
+ <%= new Date(message.time).toLocaleTimeString() %>
-
- Merhaba ! Bu benim ilk yazım Merhaba ! Bu benim ilk yazım - Merhaba ! Bu benim ilk yazım - Merhaba ! Bu benim ilk yazım - Merhaba ! Bu benim ilk yazım - Merhaba ! Bu benim ilk yazım - Merhaba ! Bu benim ilk yazım - Merhaba ! Bu benim ilk yazım - -
-
- -
-
- Delete - Edit - +
<%- message.content %>
+<% if(user){ %> + <% if(user.id === message.author.id || user.admin){ %> + +
+
- -