<!DOCTYPE html> <html lang="en"> <%- include("extra/meta", {title: thread.title }) %> <body> <%- include("extra/navbar") %> <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'> <link rel="stylesheet" href="/css/thread.css" /> <% if (user){ %> <script type="module" src="/js/thread.js"></script> <% }; %> <div style="text-align:center;padding:8px"> <div class="title" id="title"><%= thread.title %></div> <div class="date"> <%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %> <%= "• "+(thread.edited ? "Edited" : "Not edited")%> </div> </div> <div style="text-align:center;padding:8px"> <!-- THREAD AUTHOR AND PROFILE PHOTO --> <% if (user && !thread.deleted){ %> <a onclick="delete_thread('<%= thread.id %>')" class="btn-outline-primary" >DELETE</a> <a onclick="edit_t('<%= thread.id %>')" class="btn-outline-primary" >EDIT</a> <% } else if (thread.deleted) { %> <h3 style="display:inline;">This thread has been deleted</h3> <a onclick="undelete_thread('<%= thread.id %>')" class="btn-primary" >UNDELETE</a> <% }; %> </div> <div id="messages" value="<%= thread.id %>"> <% 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> <div class="date"> <%= new Date(message.time).toLocaleDateString() %> </div> <div class="date"> <%= new Date(message.time).toLocaleTimeString() %> </div> </div> <div class="content"><%- message.content %></div> <% if(user){ %> <% if(user.id === message.author.id || user.admin){ %> <div class="dots" id="dots-<%=message.id %>" onclick="dots('<%=message.id %>')"> <% if (message.deleted){ %> <i class='bx bx-trash bx-sm' id="deleted-<%=message.id %>" style="color: RED;"></i> <% } %> <% if (message.edited){ %> <i class='bx bx-pencil bx-sm' id="edited-<%=message.id %>" style="color: GREEN;"></i> <% } %> <i class='bx bx-dots-horizontal-rounded' ></i> </div> <div class="dots-menu" id="dot-<%=message.id %>"> <% if (!message.deleted){ %> <a onclick="delete_message('<%=message.id %>');">Delete</a> <a onclick="edit_message('<%=message.id %>');">Edit</a> <% }else { %> <a onclick="undelete_message('<%=message.id %>');">Undelete</a> <% } %> </div> <% } %> <div class="reactions"> <div> <i onclick='react("<%= message.id %>","like");' class='bx bx-like'></i> <div id="like-<%= message.id %>"><%=message.react.like.length %></div> </div> <div> <i onclick='react("<%= message.id %>","dislike");' class='bx bx-dislike'></i> <div id="dislike-<%= message.id %>"><%=message.react.dislike.length %></div> </div> </div> <% }; %> </div> <% }); %> </div> <% if (user){ %> <div class="message"> <form id="send"> <textarea rows="4" cols="100" name="content"></textarea> <input name="threadID" type="hidden" value="<%= thread.id %>"></input> <input name="page" type="hidden" value="<%= page %>"></input> <script type="module"> import request from "../../js/request.js"; document.getElementById("send").addEventListener("submit", async e => { e.preventDefault(); const data = new FormData(e.target); request("/api/messages", "POST", { threadID: "<%= thread.id %>", content: data.get("content") }) .then(res => { let tp = Number("<%= thread.pages %>") let tm = Number("<%= thread.count %>") if (tp*10===tm) tp++; if (res) location.href = `/threads/${data.get("threadID")}?page=${tp-1}`; }); }); </script> <button class="btn-primary">Send!</button> </form> </div> <% }%> <div class="pagination"> <div class="back"> <% if (page > 0){ %> <a href="<%= thread.getLink() %>?page=<%= page-1 %>" class='bx bxs-chevron-left'></a> <% } %> </div> <div class="numbers"> <% for(let i=0; i < thread.pages; i++){ %> <a class="number <%= i==page?'active':'' %>" href="<%= thread.getLink() %>?page=<%= i %>"><%= i+1 %></a> <% } %> </div> <div class="after"> <% if (thread.pages-1 > page) { %> <a href="<%= thread.getLink() %>?page=<%= page +1 %>" class='bx bxs-chevron-right'></a> <% } %> </div> </div> <script> document.getElementById("message-<%= scroll %>").scrollIntoView(); function dots(id) { document.getElementById('dot-'+id).classList.toggle('active') } </script> </body> </html>