2022-03-13 16:16:46 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
2023-05-25 17:23:31 +03:00
|
|
|
<%- include(dataset.getFile(dataset.theme.codename +"/views/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>
|
2023-05-25 17:23:31 +03:00
|
|
|
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/navbar")) %>
|
|
|
|
|
|
2023-05-24 15:40:09 +03:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
|
|
|
|
|
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
|
|
|
|
|
<link rel="stylesheet" href="/libs/simplemde/simplemde.min.css">
|
|
|
|
|
<script src="/libs/simplemde/simplemde.min.js"></script>
|
2022-08-29 16:16:44 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<div style="text-align:center;padding:8px">
|
2022-09-17 00:51:52 +03:00
|
|
|
<a href="/categories/<%= thread.categoryID %>" class="title" id="title"><%= thread.title %></a>
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="date">
|
2022-09-16 23:51:16 +03:00
|
|
|
<%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %>
|
2022-09-01 14:02:47 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="date">
|
2022-09-09 17:38:13 +03:00
|
|
|
<a style="color: var(--anti);" href="/users/<%= thread.author.id %>"><%= thread.author.name %></a> <%= "• "+(thread.edited ? "Edited" : "Not edited")%>
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
2022-09-27 21:34:13 +03:00
|
|
|
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
2022-09-27 21:34:13 +03:00
|
|
|
|
2022-08-29 16:16:44 +03:00
|
|
|
<div style="text-align:center;padding:8px">
|
2022-10-09 20:10:19 +03:00
|
|
|
<% if (user && (user.id === thread.authorID || user.admin ) && !thread.deleted){ %>
|
2022-09-01 14:02:47 +03:00
|
|
|
<a onclick="delete_thread('<%= thread.id %>')" class="btn-outline-primary">DELETE</a>
|
|
|
|
|
<a onclick="edit_thread('<%= thread.id %>')" class="btn-outline-primary">EDIT</a>
|
2022-10-09 20:10:19 +03:00
|
|
|
<% } else if (thread.deleted) { %>
|
2022-09-27 21:34:13 +03:00
|
|
|
<h4 class="title" style="display:inline; font-size: 20px;">This thread has been deleted</h3>
|
2023-05-24 15:40:09 +03:00
|
|
|
<a onclick="undelete_thread('<%= thread.id %>')" class="btn-primary">UNDELETE</a>
|
|
|
|
|
<% }; %>
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
2022-08-29 16:16:44 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
<div id="messages">
|
2022-03-13 16:16:46 +03:00
|
|
|
|
2022-08-29 16:16:44 +03:00
|
|
|
<% messages.filter(Boolean).forEach(message=>{ %>
|
2022-08-29 00:58:34 +03:00
|
|
|
|
2022-08-29 16:16:44 +03:00
|
|
|
<div class="message" id="message-<%= message.id %>">
|
|
|
|
|
<div class="left">
|
2022-09-09 16:29:36 +03:00
|
|
|
<img src="<%= message.author.avatar %>" />
|
2022-09-27 21:34:13 +03:00
|
|
|
<div class="username"><a href="/users/<%=message.author.id %>"><%=message.author.name %></a></div>
|
2022-08-29 16:16:44 +03:00
|
|
|
<div class="date">
|
2022-09-01 14:02:47 +03:00
|
|
|
<%= new Date(message.time).toLocaleDateString() %>
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
|
|
|
|
<div class="date">
|
2022-09-01 14:02:47 +03:00
|
|
|
<%= new Date(message.time).toLocaleTimeString() %>
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
2022-09-01 14:02:47 +03:00
|
|
|
</div>
|
2022-08-28 20:36:39 +03:00
|
|
|
|
2022-09-16 21:57:27 +03:00
|
|
|
<div class="content"><%= message.content %></div>
|
2022-08-29 16:16:44 +03:00
|
|
|
<% if(user){ %>
|
2022-08-31 16:25:35 +03:00
|
|
|
<% if(user.id === message.authorID || user.admin){ %>
|
2022-08-29 00:58:34 +03:00
|
|
|
|
2022-09-27 21:34:13 +03:00
|
|
|
<div class="dots" modal="#modal-<%=message.id %>">
|
2022-08-29 16:16:44 +03:00
|
|
|
<% if (message.deleted){ %>
|
2022-09-01 14:02:47 +03:00
|
|
|
<i class='bx bx-trash bx-sm' id="deleted" style="color: var(--important);"></i>
|
2022-08-29 16:16:44 +03:00
|
|
|
<% } %>
|
2022-08-29 19:31:59 +03:00
|
|
|
<% if (message.edited){ %>
|
2022-09-01 14:02:47 +03:00
|
|
|
<i class='bx bx-pencil bx-sm' id="edited" style="color: GREEN;"></i>
|
2022-08-29 19:31:59 +03:00
|
|
|
<% } %>
|
2022-09-01 14:02:47 +03:00
|
|
|
<i class='bx bx-dots-horizontal-rounded'></i>
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
2022-08-28 21:09:15 +03:00
|
|
|
|
2022-09-27 21:34:13 +03:00
|
|
|
<div class="dots-menu" id="modal-<%=message.id %>">
|
2022-09-01 14:02:47 +03:00
|
|
|
<% if (!message.deleted){ %>
|
2022-08-29 00:58:34 +03:00
|
|
|
<a onclick="delete_message('<%=message.id %>');">Delete</a>
|
|
|
|
|
<a onclick="edit_message('<%=message.id %>');">Edit</a>
|
2022-09-01 14:02:47 +03:00
|
|
|
<% }else { %>
|
2022-08-29 16:16:44 +03:00
|
|
|
<a onclick="undelete_message('<%=message.id %>');">Undelete</a>
|
2022-09-01 14:02:47 +03:00
|
|
|
<% } %>
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
|
|
|
|
<% } %>
|
2022-08-29 00:58:34 +03:00
|
|
|
|
2022-08-29 16:16:44 +03:00
|
|
|
<div class="reactions">
|
2022-09-27 21:34:13 +03:00
|
|
|
<div <% if (message.react.like.includes(user?.id)) { %> style="color: var(--main)" <% } %>>
|
2022-09-01 14:02:47 +03:00
|
|
|
<i onclick='react("<%= message.id %>","like");' class='bx bx-like'></i>
|
|
|
|
|
<div id="like"><%=message.react.like.length %></div>
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
2022-09-27 21:34:13 +03:00
|
|
|
<div <% if (message.react.dislike.includes(user?.id)) { %> style="color: var(--main)" <% } %>>
|
2022-09-01 14:02:47 +03:00
|
|
|
<i onclick='react("<%= message.id %>","dislike");' class='bx bx-dislike'></i>
|
|
|
|
|
<div id="dislike"><%=message.react.dislike.length %></div>
|
2022-08-29 16:16:44 +03:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<% }; %>
|
|
|
|
|
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
|
|
|
|
|
2022-08-29 16:16:44 +03:00
|
|
|
<% }); %>
|
2022-08-28 20:36:39 +03:00
|
|
|
</div>
|
2022-09-16 21:57:27 +03:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const converter = new showdown.Converter();
|
|
|
|
|
for (const message of document.querySelectorAll(".message")) {
|
|
|
|
|
const content = message.querySelector(".content");
|
|
|
|
|
content.innerHTML = converter.makeHtml(content.rawText = content.innerHTML);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2022-09-27 21:34:13 +03:00
|
|
|
<script src="/js/modal.js"></script>
|
2022-08-29 19:31:59 +03:00
|
|
|
<% if (user){ %>
|
2022-09-16 21:57:27 +03:00
|
|
|
<script type="module" src="/js/thread.js"></script>
|
2022-08-29 19:31:59 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
<div class="message" id="send-div">
|
2022-09-17 21:36:33 +03:00
|
|
|
|
2022-09-27 21:34:13 +03:00
|
|
|
<form id="send" style="width:100%">
|
2022-09-17 21:36:33 +03:00
|
|
|
<textarea rows="4" id="textarea"></textarea>
|
2022-08-29 19:31:59 +03:00
|
|
|
<input name="page" type="hidden" value="<%= page %>"></input>
|
2022-09-01 14:02:47 +03:00
|
|
|
<button class="btn-primary">Send!</button>
|
|
|
|
|
</form>
|
2022-08-29 19:31:59 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
</div>
|
2023-05-24 15:40:09 +03:00
|
|
|
|
|
|
|
|
<script src="/js/editor.js"></script>
|
|
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
<script type="module">
|
2023-05-24 15:40:09 +03:00
|
|
|
const simplemde = editor("thread-<%= thread.id %>");
|
2022-09-17 21:36:33 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
import request from "../../js/request.js";
|
2022-08-29 19:31:59 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
document.getElementById("send").addEventListener("submit", async e => {
|
2022-08-29 19:31:59 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
e.preventDefault();
|
|
|
|
|
const res = await request("/api/messages", "POST", {
|
|
|
|
|
threadID: "<%= thread.id %>",
|
2022-09-17 21:36:33 +03:00
|
|
|
content: simplemde.value()
|
2022-09-01 14:02:47 +03:00
|
|
|
})
|
2022-09-27 21:34:13 +03:00
|
|
|
simplemde.clearAutosavedValue();
|
2022-09-01 14:02:47 +03:00
|
|
|
let tp = Number("<%= thread.pages %>")
|
|
|
|
|
let tm = Number("<%= thread.count %>")
|
|
|
|
|
if (tp * 10 === tm) tp++;
|
2022-09-16 21:57:27 +03:00
|
|
|
if (res) location.href = `/threads/<%= thread.id %>?page=${tp-1}`;
|
2022-09-01 14:02:47 +03:00
|
|
|
});
|
|
|
|
|
</script>
|
2023-05-24 15:40:09 +03:00
|
|
|
<style>
|
|
|
|
|
.fa {
|
|
|
|
|
color: var(--main);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2023-05-09 13:28:45 +03:00
|
|
|
|
|
|
|
|
|
2022-08-29 19:31:59 +03:00
|
|
|
<% }%>
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="pagination">
|
|
|
|
|
<div class="back">
|
2022-08-29 19:31:59 +03:00
|
|
|
<% if (page > 0){ %>
|
2022-08-29 00:58:34 +03:00
|
|
|
<a href="<%= thread.getLink() %>?page=<%= page-1 %>" class='bx bxs-chevron-left'></a>
|
2022-09-01 14:02:47 +03:00
|
|
|
<% } %>
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
2022-09-01 14:02:47 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="numbers">
|
2022-08-29 19:31:59 +03:00
|
|
|
<% for(let i=0; i < thread.pages; i++){ %>
|
|
|
|
|
<a class="number <%= i==page?'active':'' %>" href="<%= thread.getLink() %>?page=<%= i %>"><%= i+1 %></a>
|
|
|
|
|
<% } %>
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
2022-08-26 22:09:02 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
<div class="after">
|
2022-08-29 19:31:59 +03:00
|
|
|
<% if (thread.pages-1 > page) { %>
|
2022-08-29 00:58:34 +03:00
|
|
|
<a href="<%= thread.getLink() %>?page=<%= page +1 %>" class='bx bxs-chevron-right'></a>
|
2022-08-29 16:16:44 +03:00
|
|
|
<% } %>
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
2022-09-01 14:02:47 +03:00
|
|
|
|
2022-08-29 00:58:34 +03:00
|
|
|
</div>
|
2023-05-25 17:23:31 +03:00
|
|
|
<%- include(dataset.getFile(dataset.theme.codename +"/views/extra/footer")) %>
|
2022-08-29 00:58:34 +03:00
|
|
|
|
2022-08-26 22:09:02 +03:00
|
|
|
</body>
|
2022-03-13 16:16:46 +03:00
|
|
|
|
2022-09-01 14:02:47 +03:00
|
|
|
</html>
|
