akf-forum/views/thread.ejs

136 lines
No EOL
4.2 KiB
Text

<!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"><%= thread.title %></div>
<div class="date">
<%= new Date(thread.time).toLocaleString() %> • Views: <%= thread.views %>
</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_thread('<%= 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>
<% } %>
<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 if (user.admin){ %>
<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>
<div class="message">
<form id="send">
<textarea rows="4" cols="100" name="content"></textarea>
<input name="threadID" type="hidden" value="<%= thread.id %>"></input>
<% if (user){ %>
<button class="btn-primary">Send!</button>
<%} else {%>
<a class="btn-outline-primary" href="/login?redirect=<%= thread.getLink() %>">Login for send</a>
<% }%>
</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 <= Math.ceil(messages.length/10) ;i++){ %>
<a class="number <%= i==page?'active':'' %>" href="<%= thread.getLink() %>?page=<%= i %>"><%= i+1 %></a>
<% } %>
</div>
<div class="after">
<% if (Math.ceil(messages.length/10) > 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>