diff options
Diffstat (limited to 'interface/views/lpg.ejs')
| -rw-r--r-- | interface/views/lpg.ejs | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/interface/views/lpg.ejs b/interface/views/lpg.ejs new file mode 100644 index 0000000..b91954f --- /dev/null +++ b/interface/views/lpg.ejs @@ -0,0 +1,198 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <%- include('partials/head') %> + <style> + .ui.menu { + margin-top: 0; + } + .scrollY { + max-height: calc(100vh - 8rem); + margin-top: 1rem; + overflow-y: scroll; + } + .ui.table thead tr:first-child > th { + position: sticky !important; + top: 0; + z-index: 2; + } + .ui.table tfoot tr:first-child > th { + position: sticky !important; + bottom: 0; + z-index: 2; + } + </style> + </head> + + <body> + <%- include('partials/navbar') %> + + <!-- Drop down for selecting limit --> + + <div class="ui container"> + <div class="ui floating labeled icon dropdown button"> + <i class="list icon"></i> + <span class="text">Items</span> + <div class="menu"> + <div class="item" onclick="redirectToLimit(100)">100</div> + <div class="item" onclick="redirectToLimit(250)">250</div> + <div class="item" onclick="redirectToLimit(500)">500</div> + <div class="item" onclick="redirectToLimit(1000)">1000</div> + </div> + </div> + </div> + + <div class="scrollY"> + <table class="ui selectable table"> + <thead> + <tr> + <th>First Name</th> + <th>Last Name</th> + <th>Booking Date</th> + <th>Amount Paid</th> + <th>Amount Remitted</th> + </tr> + </thead> + <tbody> + <% for(var i=0; i < transactions.length; i++) { %> + <tr> + <td><%= transactions[i].first_name %></td> + <td><%= transactions[i].last_name %></td> + <td><%= transactions[i].booking_date %></td> + <td><%= transactions[i].amount_paid %></td> + <td><%= transactions[i].amount_remitted %></td> + <% } %> + </tr> + </tbody> + + <!-- Display a pagination --> + <tfoot> + <tr> + <th colspan="9"> + <div class="ui right floated pagination menu"> + <a class="icon item" id="pageLeft"> + <i class="left chevron disabled icon"></i> + </a> + + <a class="icon item" id="pageRight"> + <i class="right chevron disabled icon"></i> + </a> + </div> + </th> + </tr> + </tfoot> + </table> + </div> + </body> + <%- include('partials/scripts') %> + <script> + const count = "<%= count %>"; + </script> + <script> + // Get current page and limit query parameter + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const page = urlParams.get("page") || 1; + const limit = urlParams.get("limit") || 100; + const numberOfPages = Math.ceil(count / limit); + const pagination = $(".pagination"); + const pageLeft = $("#pageLeft"); + const pageRight = $("#pageRight"); + if (page > 1) { + pageLeft.removeClass("disabled"); + pageLeft.attr( + "href", + `/transactions/lpg?page=${parseInt(page) - 1}&limit=${limit}` + ); + } else { + pageLeft.addClass("disabled"); + } + if (page < numberOfPages) { + pageRight.removeClass("disabled"); + pageRight.attr( + "href", + `/transactions/lpg?page=${parseInt(page) + 1}&limit=${limit}` + ); + } else { + pageRight.addClass("disabled"); + } + + function redirectToLimit(limit) { + window.location.href = `/transactions/lpg?page=1&limit=${limit}`; + } + + addPageNumbers(numberOfPages); + + function addPageNumbers(numberOfPages) { + // Add page numbers from current page to 2 pages before and 2 pages after, if there are more than 5 pages + if (numberOfPages > 5) { + let startingPoint = page - 2; + if (page < 3) { + startingPoint = 1; + } else if (page > numberOfPages - 2) { + startingPoint = numberOfPages - 4; + } else { + startingPoint = page - 2; + } + for (let i = startingPoint; i < startingPoint + 5; i++) { + const linkElement = document.createElement("a"); + linkElement.innerHTML = i; + linkElement.setAttribute( + "href", + `/transactions/lpg?page=${i}&limit=${limit}` + ); + linkElement.setAttribute("id", `page${i}`); + linkElement.classList.add("item"); + pageRight.before(linkElement); + } + // add dots + const dots = document.createElement("a"); + dots.innerHTML = "..."; + dots.classList.add("item"); + pageRight.before(dots); + + // add first page if page > 3 + if (page > 3) { + const firstPage = document.createElement("a"); + firstPage.innerHTML = 1; + firstPage.setAttribute( + "href", + `/transactions/lpg?page=1&limit=${limit}` + ); + firstPage.setAttribute("id", `page1`); + firstPage.classList.add("item"); + pageLeft.after(dots); + pageLeft.after(firstPage); + } + + // add last page + if (page != numberOfPages) { + const lastPage = document.createElement("a"); + lastPage.innerHTML = numberOfPages; + lastPage.setAttribute( + "href", + `/transactions/lpg?page=${numberOfPages}&limit=${limit}` + ); + lastPage.classList.add("item"); + pageRight.before(lastPage); + } + } else { + // add page numbers + for (let i = 1; i <= numberOfPages; i++) { + // Insert before pageRight + const linkElement = document.createElement("a"); + linkElement.innerHTML = i; + linkElement.setAttribute( + "href", + `/transactions/lpg?page=${i}&limit=${limit}` + ); + linkElement.setAttribute("id", `page${i}`); + linkElement.classList.add("item"); + pageRight.before(linkElement); + } + } + const currentPageElement = document.getElementById(`page${page}`); + currentPageElement.classList.add("active"); + } + </script> +</html> |