Akif9748/akf-forum
Akif9748/akf-forum
1
1
Fork 0
mirror of https://github.com/Akif9748/akf-forum.git synced 2024-11-26 13:20:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

thread rendering is updated, guest can view msg

Browse source
This commit is contained in:
Akif9748 2022-08-28 18:19:03 +03:00
parent c5e62a300c
commit d6f301da72
4 changed files with 55 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
public/css/user.css
View file

@ -3,25 +3,26 @@
font-weight: 700; font-weight: 700;
} }
.content{ .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 0 5px 0 #bebebe; box-shadow: 0 0 5px 0 #bebebe;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding:10px; padding: 10px;
} }
.box{ .box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0 auto; margin: 0 auto;
max-width: 800px; max-width: 800px;
width:100%; width: 100%;
} }
.box-title, .box-value{ .box-title,
color: #606060; .box-value {
font-weight: 300; color: #606060;
font-weight: 300;
} }

12
public/js/thread.js
View file

@ -1,12 +1,8 @@
import request from "./request.js"; import request from "./request.js";
const message_div = document.getElementById("messages"); const message_div = document.getElementById("messages");
const messages_raw = await fetch(`/api/threads/${message_div.getAttribute("value")}/messages/`).then(res => res.json());
for (const message of messages_raw)
renderMessage(message);
function renderMessage(message) { function render_message(message) {
const messageElement = document.createElement("div"); const messageElement = document.createElement("div");
messageElement.classList.add("message"); messageElement.classList.add("message");
messageElement.setAttribute("id", "message-" + message.id); messageElement.setAttribute("id", "message-" + message.id);
@ -16,7 +12,7 @@ function renderMessage(message) {
<h3 style="float:right;">${new Date(message.time).toLocaleString()}</h3> <h3 style="float:right;">${new Date(message.time).toLocaleString()}</h3>
<h2> <h2>
<img class="circle" src="${message.author.avatar}" alt="${message.author.name}"> <img class="circle" src="${message.author.avatar}">
<a href="/users/${message.author.id}"> ${message.author.name}</a>: <a href="/users/${message.author.id}"> ${message.author.name}</a>:
</h2> </h2>
@ -34,7 +30,7 @@ function renderMessage(message) {
} }
</div> </div>
<div style="float: right;"> <div style="float: right;">
<h3 id="count${message.id}" style="display:inline;">0</h3> <h3 id="count${message.id}" style="display:inline;">${message.reactCount}</h3>
<a onclick="react('${message.id}', 'like');">+🔼</a> <a onclick="react('${message.id}', 'like');">+🔼</a>
<a onclick="react('${message.id}', 'dislike');">-🔽</a> <a onclick="react('${message.id}', 'dislike');">-🔽</a>
</div> </div>
@ -59,7 +55,7 @@ document.getElementById("send").addEventListener("submit", async e => {
if (!res) return; if (!res) return;
form.reset(); form.reset();
res.reactCount = 0; res.reactCount = 0;
renderMessage(res); render_message(res);
}); });
}); });

14
routes/threads.js
View file

@ -1,7 +1,7 @@
const { Router } = require("express"); const { Router } = require("express");
const app = Router(); const app = Router();
const { ThreadModel } = require("../models") const { ThreadModel,MessageModel } = require("../models")
app.get("/", async (req, res) => { app.get("/", async (req, res) => {
@ -21,9 +21,15 @@ app.get("/:id", async (req, res) => {
const thread = await ThreadModel.get(id); const thread = await ThreadModel.get(id);
thread.views++; thread.views++;
if (thread && (req.user?.admin || !thread.deleted)) if (thread && (req.user?.admin || !thread.deleted)) {
res.reply("thread", { thread, scroll: req.query.scroll || false }); const messages = await Promise.all(thread.messages.map(async id => {
else const message = await MessageModel.get(id)
message.content = message.content.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;").replaceAll("\n", "<br>")
return req.user?.admin || !message?.deleted ? message.toObject({ virtuals: true }) : null;
}));
res.reply("thread", { thread, messages, scroll: req.query.scroll || false });
} else
res.error(404, "We have not got this thread."); res.error(404, "We have not got this thread.");
thread.save(); thread.save();
}); });

37
views/thread.ejs
View file

@ -35,33 +35,38 @@
<div id="messages" value="<%= thread.id %>"> <div id="messages" value="<%= thread.id %>">
<% if (!user){ %>
<h1>Guests cant view messages!</h1>
<% }%>
<!--EXAMPLE MESSAGE--> <% messages.filter(Boolean).forEach(message=>{ %>
<div class="message" id="message-3">
<h3 style="float:right;">26.08.2022 15:37:42</h3> <div class="message" id="message-<%= message.id %>">
<h3 style="float:right;"><%= new Date(message.time).toLocaleString() %> </h3>
<h2> <h2>
<img class="circle" src="https://cdn.discordapp.com/avatars/539506680140922890/abd74d10aac094fc8a5ad5c86f29fdb9.png?size=1024"> <img class="circle" src="<%= message.author.avatar %>">
<a href="/users/0"> Akif9748</a>: <a href="/users/<%=message.author.id %>"><%=message.author.name %></a>:
</h2> </h2>
<p>Example message for development</p><br> <p><%= message.content%></p><br>
<div id="message-delete-3"> <div id="message-delete-<%=message.id %>">
<a onclick="delete_message('3');">DELETE</a>
<a onclick="edit_message('3');">EDIT</a> <% if (!message.deleted){ %>
<a onclick="delete_message('<%=message.id %>');">DELETE</a>
<a onclick="edit_message('<%=message.id %>');">EDIT</a>
<% }else{ %>
<h3 style="display:inline;">This message has been deleted</h3>
<a onclick="undelete_message('<%=message.id %>');">UNDELETE</a>
<% } %>
</div> </div>
<div style="float: right;"> <div style="float: right;">
<h3 id="count3" style="display:inline;">0</h3> <h3 id="count<%=message.id %>" style="display:inline;"><%=message.reactCount %></h3>
<a onclick="react('3', 'like');">+🔼</a> <a onclick="react('<%=message.id %>', 'like');">+🔼</a>
<a onclick="react('3', 'dislike');">-🔽</a> <a onclick="react('<%=message.id %>', 'dislike');">-🔽</a>
</div> </div>
</div> </div>
<!--EXAMPLE MESSAGE END--> <% }); %>
</div> </div>