2022-03-13 16:16:46 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<%- include("extra/meta", {title: thread.title }) %>
|
2022-03-26 23:28:10 +03:00
|
|
|
|
2022-08-11 17:55:48 +03:00
|
|
|
|
2022-08-28 20:36:39 +03:00
|
|
|
<body>
|
2022-08-26 22:09:02 +03:00
|
|
|
<%- include("extra/navbar") %>
|
2022-08-29 00:58:34 +03:00
|
|
|
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
|
|
|
|
|
|
2022-08-26 22:09:02 +03:00
|
|
|
<link rel="stylesheet" href="/css/thread.css" />
|
2022-08-27 14:08:28 +03:00
|
|
|
<% if (user){ %>
|
2022-08-29 00:58:34 +03:00
|
|
|
<script type="module" src="/js/thread.js"></script>
|
|
|
|
|
<% }; %>
|
|
|
|
|
<div style="text-align:center;padding:8px">
|
|
|
|
|
<div class="title"><%= thread.title %></div>
|
|
|
|
|
<div class="date">
|
|
|
|
|
<%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="messages" value="<%= thread.id %>">
|
2022-03-13 16:16:46 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<% messages.filter(Boolean).forEach(message=>{ %>
|
|
|
|
|
|
|
|
|
|
<div class="message" id="message-<%= message.id %>">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<img src="<%= message.author.avatar || '/images/guest.png' %>"/>
|
|
|
|
|
<div class="username"><a href="/users/<%=message.author.id %>"><%=message.author.name %></a></div>
|
2022-08-28 20:36:39 +03:00
|
|
|
<div class="date">
|
2022-08-29 00:58:34 +03:00
|
|
|
<%= new Date(message.time).toLocaleDateString() %>
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="date">
|
|
|
|
|
<%= new Date(message.time).toLocaleTimeString() %>
|
2022-08-28 21:09:15 +03:00
|
|
|
</div>
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
|
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="content"><%- message.content %></div>
|
|
|
|
|
<% if(user){ %>
|
|
|
|
|
<% if(user.id === message.author.id || user.admin){ %>
|
|
|
|
|
|
|
|
|
|
<div class="dots" onclick="dots('<%=message.id %>')">
|
|
|
|
|
<i class='bx bx-dots-horizontal-rounded' ></i>
|
2022-08-28 21:09:15 +03:00
|
|
|
</div>
|
|
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<% if (!message.deleted){ %>
|
|
|
|
|
|
|
|
|
|
<div class="dots-menu" id="dot-<%=message.id %>">
|
|
|
|
|
<a onclick="delete_message('<%=message.id %>');">Delete</a>
|
|
|
|
|
<a onclick="edit_message('<%=message.id %>');">Edit</a>
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
2022-08-29 00:58:34 +03:00
|
|
|
<% }else if (user.admin){ %>
|
|
|
|
|
<div class="dots-menu" id="dot-<%=message.id %>">
|
|
|
|
|
<a onclick="undelete_message('<%=message.id %>');">UNDELETE</a>
|
|
|
|
|
</div>
|
|
|
|
|
<% } %>
|
|
|
|
|
|
|
|
|
|
<% } %>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="reactions">
|
|
|
|
|
<div>
|
|
|
|
|
<i class='bx bx-like'></i> <%=message.react.like.length %>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<i class='bx bx-dislike'></i> <%=message.react.dislike.length %>
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-08-29 00:58:34 +03:00
|
|
|
<% }; %>
|
2022-08-28 20:36:39 +03:00
|
|
|
|
|
|
|
|
</div>
|
2022-03-13 16:16:46 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<% }); %>
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="pagination">
|
|
|
|
|
<div class="back">
|
|
|
|
|
<% if (page > 0){ %>
|
|
|
|
|
<a href="<%= thread.getLink() %>?page=<%= page-1 %>" class='bx bxs-chevron-left'></a>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
2022-08-28 20:36:39 +03:00
|
|
|
|
2022-08-26 22:09:02 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="numbers">
|
|
|
|
|
<% for(let i=0;i< Math.ceil(messages.length/10);i++){ %>
|
|
|
|
|
<a class="number <%= i==page?'active':'' %>" href="<%= thread.getLink() %>?page=<%= i %>"><%= i %></a>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
2022-08-26 22:09:02 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="after">
|
|
|
|
|
<% if (Math.ceil(messages.length/10)-1 > page){ %>
|
|
|
|
|
<a href="<%= thread.getLink() %>?page=<%= page +1 %>" class='bx bxs-chevron-right'></a>
|
|
|
|
|
<% } %>
|
|
|
|
|
</div>
|
2022-08-27 14:08:28 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById("message-<%= scroll %>").scrollIntoView();
|
|
|
|
|
function dots(id) {
|
|
|
|
|
document.getElementById('dot-'+id).classList.toggle('active')
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2022-08-26 22:09:02 +03:00
|
|
|
|
|
|
|
|
</body>
|
2022-03-13 16:16:46 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
</html>
|
