index.ejs 2.88 KB
<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
   
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">
      <div>
        <h2 class="mb-3" style="font-weight: bold; font-style:italic; float:left;">Memory</h2>

        <div style="float:right">
          <% if(isAuthenticated){ %>
            <a class="btn btn-outline-primary" href="/posts/new">Write Memory</a>
          <% } %>
        </div>
  
        <!-- <table class="board-table table table-sm border-bottom"> -->
        <table class="table table-hover table-light">
          <thead>
            <tr class="table-dark">
              <th scope="col">Title</th>
              <th scope="col" class="author">Author</th>
              <th scope="col" class="date">Date</th>
            </tr>
          </thead>
  
          <tbody>
            <% if(posts == null || posts.length == 0){ %>
              <tr>
                <td colspan=2> EMPTY </td>
              </tr>
            <% } %>
            <% posts.forEach(function(post) { %>
              <tr>
                <td>
                  <a href="/posts/<%= post._id %>" style="color:black; font-weight: bold;"><div class="ellipsis"><%= post.title %></div></a>
                </td>
                <td class="author">
                  <div class="ellipsis"><%= post.author ? post.author.username : "" %></div>
                </td>
                <td class="date">
                  <span data-date="<%= post.createdAt %>"><%= post.createdAt %></span>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>

        <nav class="nav justify-content-center bg-light">
          <% 
            var offset = 2;
            var previousBtnEnabled = currentPage>1;
            var nextBtnEnabled = currentPage<maxPage;
          %>
          <ul class="pagination pagination-sm justify-content-center align-items-center h-100 mb-0">            
            <li class="page-item <%= previousBtnEnabled?'':'disabled' %>">
              <a class="page-link" href="/posts?page=<%= currentPage-1 %>&limit=<%= limit %>"<%= previousBtnEnabled?'':'tabindex=-1' %></a>
            </li>
            <% for(i=1;i<=maxPage;i++){ %>
              <% if(i==1 || i==maxPage || (i>=currentPage-offset && i<=currentPage+offset)){ %>
                <li class="page-item <%= currentPage==i?'active':'' %>"><a class="page-link" href="/posts?page=<%= i %>&limit=<%= limit %>"><%= i %></a></li>
              <% } else if(i==2 || i==maxPage-1){ %>
                <li><a class="page-link">...</a></li>
              <% } %>
            <% } %>
            <li class="page-item <%= nextBtnEnabled?'':'disabled' %>">
              <a class="page-link" href="/posts?page=<%= currentPage+1 %>&limit=<%= limit %>"<%= nextBtnEnabled?'':'tabindex=-1' %></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </body>
</html>