| Server IP : 162.213.251.212 / Your IP : 18.223.170.69 [ Web Server : LiteSpeed System : Linux business55.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : allssztx ( 535) PHP Version : 8.1.31 Disable Function : NONE Domains : 1 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/allssztx/needapair.com/public/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./parcials/cssLinks') %>
<link href="<%= baseUrl %>css/dashboard.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="loader">
<div class="loader-content">
<span class="loader-text">Generating Certificate...</span>
<div class="loader-spinner"></div>
</div>
</div>
<%- include('./parcials/dashboard-header') %>
<main>
<section class="dashboard-wrapper">
<div class="container">
<%- include('./parcials/dashboard-topsec') %>
<div class="certificate-track-card">
<div class="card-head">
<h4 class="theme-h4">Recent Items
<!-- <a href="javascript:;" data-bs-toggle="modal"
data-bs-target="#sendCertificate">Generate New <i class="fa-solid fa-plus"></i></a> -->
</h4>
<ul class="tab-btn nav nav-underline nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="certificate-tab" data-bs-toggle="tab" data-bs-target="#certificate" type="button" role="tab" aria-controls="certificate" aria-selected="true">certificate</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="card-tab" data-bs-toggle="tab" data-bs-target="#card" type="button" role="tab" aria-controls="card" aria-selected="false">card</button>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="certificate" role="tabpanel" aria-labelledby="certificate-tab">
<ul class="certificate-filters">
<li>
<input type="radio" class="selected" name="certificate-filter" value="all" id="all-certificate" checked>
<label for="all-certificate">all</label>
</li>
<li>
<input type="radio" name="certificate-filter" value="sent" id="sent-certificate">
<label for="sent-certificate">sent</label>
</li>
<li>
<input type="radio" name="certificate-filter" value="received" id="received-certificate">
<label for="received-certificate">received</label>
</li>
<li>
<input type="radio" name="certificate-filter" value="unread" id="unread-certificate">
<label for="unread-certificate">unread</label>
</li>
<li>
<input type="radio" name="certificate-filter" value="draft" id="not-send-certificate">
<label for="not-send-certificate">draft</label>
</li>
</ul>
<div class="certificates-listing">
<% const
months=['January','February','March','April','May','June','July','August','September','October','November','December'];%>
<% if(certificates.length> 0){ %>
<table class="table" id="certificate-table">
<thead>
<tr>
<th>Date</th>
<th>Sent to</th>
<th>Receiver email</th>
<th>From</th>
<th></th>
</tr>
</thead>
<tbody>
<% certificates.forEach((certificate,ind)=> { %>
<% if(certificate.sender?.email==user.email){ %>
<% if(!certificate.paid){%>
<tr class="certificate-item draft <%= (ind + 1) % 2 == 0 ? 'even': '' %>" href="/certificate/<%= certificate._id %>">
<% } else { let received = certificate.recipentemail==user.email ? "received" : "" %>
<tr class="certificate-item sent <%= received %> <%= (ind + 1) % 2 == 0 ? 'even': '' %>" href="/certificate/<%= certificate._id %>">
<% } %>
<td class="info">
<span class="date-time">
<%
const hours = certificate.createdAt.getHours()
const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
const suffix = hours >= 12 ? 'PM' : 'AM';
%>
<%= formattedHours %>:<%= certificate.createdAt.getMinutes() %> <%= suffix %>
<%= months[certificate.createdAt.getMonth()] %>
<%= certificate.createdAt.getDate() %>
<%= certificate.createdAt.getFullYear() %>
</span>
</td>
<td class="account-title">
<%= certificate.name %>
</td>
<td>
<a href="mailto:<%= certificate.recipentemail %>">
<%= certificate.recipentemail %>
</a>
</td>
<td>
<%= certificate.senderName %>
</td>
<td class="to-whome text-center">
<a href="/certificate/<%= certificate._id %>">
<% if(!certificate.paid){%>
<i class="fa-solid fa-file-pen"></i>
<% } else { %>
<i class="fa-regular fa-arrow-right-long"></i>
<% } %>
</a>
<% if(!certificate.paid){%>
<form action="/api/certificate/delete" method="POST">
<input name="id" type="hidden" value="<%= certificate._id %>" />
<button class="delete-item" type="submit"><i class="fa-solid fa-trash"></i></button>
</form>
<% }%>
</td>
</tr>
<% } else if(certificate.read) { %>
<tr class="certificate-item received <%= (ind + 1) % 2 == 0 ? 'even': '' %>">
<td class="info">
<span class="date-time">
<%
const hours = certificate.createdAt.getHours()
const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
const suffix = hours >= 12 ? 'PM' : 'AM';
%>
<%= formattedHours %>:<%= certificate.createdAt.getMinutes() %> <%= suffix %>
<%= months[certificate.createdAt.getMonth()] %>
<%= certificate.createdAt.getDate() %>
<%= certificate.createdAt.getFullYear() %>
</span>
</td>
<td class="account-title">
<%= certificate.name %>
</td>
<td>
<a href="mailto:<%= certificate.recipentemail %>">
<%= certificate.recipentemail %>
</a>
</td>
<td>
<%= certificate.senderName %>
</td>
<td class="to-whome text-center">
<a href="/received-certificate/<%= certificate._id %>">
<i class="fa-regular fa-arrow-left-long"></i>
</a>
</td>
</tr>
<% } else { %>
<tr class="certificate-item received unread <%= (ind + 1) % 2 == 0 ? 'even': '' %>">
<td class="info">
<span class="date-time">
<%
const hours = certificate.createdAt.getHours()
const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
const suffix = hours >= 12 ? 'PM' : 'AM';
%>
<%= formattedHours %>:<%= certificate.createdAt.getMinutes() %> <%= suffix %>
<%= months[certificate.createdAt.getMonth()] %>
<%= certificate.createdAt.getDate() %>
<%= certificate.createdAt.getFullYear() %>
</span>
</td>
<td class="account-title">
<%= certificate.name %>
</td>
<td>
<a href="mailto:<%= certificate.recipentemail %>">
<%= certificate.recipentemail %>
</a>
</td>
<td>
<%= certificate.senderName %>
</td>
<td class="to-whome">
<a href="/received-certificate/<%= certificate._id %>">
<i class="fa-regular fa-arrow-left-long"></i>
</a>
</td>
</tr>
<% } %>
<% }) %>
</tbody>
</table>
<ul id="cert-pagination" class="pagination"></ul>
<% } else { %>
<h4 class="theme-h4">No Certificates Founds</h4>
<% } %>
</div>
</div>
<div class="tab-pane" id="card" role="tabpanel" aria-labelledby="card-tab">
<ul class="card-filters">
<li>
<input class="selected" type="radio" name="card-filter" value="all" id="all-card" checked>
<label for="all-card">all</label>
</li>
<li>
<input type="radio" name="card-filter" value="sent" id="sent-card">
<label for="sent-card">sent</label>
</li>
<li>
<input type="radio" name="card-filter" value="received" id="received-card">
<label for="received-card">received</label>
</li>
<li>
<input type="radio" name="card-filter" value="unread" id="unread-card">
<label for="unread-card">unread</label>
</li>
<li>
<input type="radio" name="card-filter" value="draft" id="not-send-card">
<label for="not-send-card">draft</label>
</li>
</ul>
<div class="certificate-listing">
<% if(cards.length> 0){ %>
<table class="table" id="card-table">
<thead>
<tr>
<th>Date</th>
<th>Sent to</th>
<th>Receiver email</th>
<th>From</th>
<th></th>
</tr>
</thead>
<tbody>
<% cards.forEach((card, ind)=> { %>
<%
let cardClass = ''
if(card.recipentemail == user.email && card.recipentemail == card.receiver?.email && !card.read){
cardClass = 'received sent unread'
} else if(card.recipentemail == user.email && card.recipentemail == card.receiver?.email && card.read){
cardClass = 'received sent'
} else if(card.recipentemail == user.email && card.read){
cardClass = 'received'
} else if(card.recipentemail == user.email) {
cardClass = 'received unread'
} else if(!card.scheduled){
cardClass = 'draft'
} else {
cardClass = 'sent'
}
%>
<tr class="card-item <%= cardClass %> <%= (ind + 1) % 2 == 0 ? 'even': '' %>" href="/certificate/<%= card._id %>">
<td class="info">
<span class="date-time">
<%
const hours = card.createdAt.getHours()
const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
const suffix = hours >= 12 ? 'PM' : 'AM';
%>
<%= formattedHours %>:<%= card.createdAt.getMinutes() %> <%= suffix %>
<%= months[card.createdAt.getMonth()] %>
<%= card.createdAt.getDate() %>
<%= card.createdAt.getFullYear() %>
</span>
</td>
<td class="account-title">
<%= card.recipentName %>
</td>
<td>
<a href="mailto:<%= card.recipentemail %>">
<%= card.recipentemail %>
</a>
</td>
<td>
<%= card.sender.firstName %>
</td>
<td class="to-whome">
<% if(card.recipentemail == user.email){ %>
<a href="/e-card-preview/<%= card._id %>">
<i class="fa-regular fa-arrow-left-long"></i>
<% } else if(!card.scheduled){ %>
<a href="/e-card-design?id=<%= card._id %>">
<i class="fa-solid fa-file-pen"></i>
<% } else { %>
<a href="/e-card-preview/<%= card._id %>">
<i class="fa-regular fa-arrow-right-long"></i>
<% } %>
</a>
<% if(!card.scheduled){ %>
<form action="/api/e-card/delete" method="POST">
<input name="id" type="hidden" value="<%= card._id %>" />
<button class="delete-item" type="submit"><i class="fa-solid fa-trash"></i></button>
</form>
<% } %>
</td>
</tr>
<% }) %>
</tbody>
</table>
<ul id="card-pagination" class="pagination"></ul>
<% } %>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<%- include('./parcials/dashboard-footer') %>
<%- include('./parcials/scriptLinks') %>
<script>
$("#loader").css("display", "none")
$("#Generate-certificate-form").submit(function () {
$("#loader").css("display", "block")
})
window.addEventListener('beforeunload', function () {
$("#loader").css("display", "none")
});
</script>
<script>
const itemPerPage = 10
const cardPagination = () => {
const filter = $('input[name="card-filter"].selected').val()
let cardCount;
if(filter == 'all'){
$(`#card-table tbody tr:not(:nth-of-type(-n+${itemPerPage}))`).hide()
cardCount = $("#card-table tbody tr").length
} else {
$(`#card-table tbody tr.${filter}:not(:nth-of-type(-n+${itemPerPage}))`).hide()
cardCount = $(`#card-table tbody tr.${filter}`).length
}
const noOfPages = Math.ceil(cardCount / itemPerPage)
$("#card-pagination").html("")
for (let page = 1; page <= noOfPages; page++) {
$("#card-pagination").append(`<li><button onclick='cardPage(${page},this)' ${page == 1 ? 'class="active"' : ''}>${page}</button></li>`)
}
}
const cardPage = (page,btn) => {
const filter = $('input[name="card-filter"].selected').val()
debugger
$("#card-pagination li button").removeClass("active")
$(btn).addClass("active")
if(filter == 'all'){
$(`#card-table tbody tr`).show()
$(`#card-table tbody tr:nth-child(${((page - 1) * itemPerPage) + 1 })`).prevAll().hide()
$(`#card-table tbody tr:nth-child(${page * itemPerPage})`).nextAll().hide()
} else {
$(`#card-table tbody tr.${filter}`).show()
debugger
$(`#card-table tbody tr.${filter}:nth-child(${((page - 1) * itemPerPage) + 1 })`).prevAll().hide()
$(`#card-table tbody tr.${filter}:nth-child(${page * itemPerPage})`).nextAll().hide()
}
}
const certificatePagination = () => {
const filter = $('input[name="certificate-filter"].selected').val()
// const certificateCount = $("#certificate-table tbody tr").length
if(filter == 'all'){
certificateCount = $("#certificate-table tbody tr").length
} else {
certificateCount = $(`#certificate-table tbody tr.${filter}`).length
}
const noOfPages = certificateCount / itemPerPage
$("#cert-pagination").html("")
for (let page = 1; page <= noOfPages; page++) {
$("#cert-pagination").append(`<li><button onclick='certPage(${page})' ${page == 1 ? 'class="active"' : ''}>${page}</button></li>`)
}
}
const certPage = (page,btn) => {
const filter = $('input[name="certificate-filter"].selected').val()
$("#cert-pagination li button").removeClass("active")
$(btn).addClass("active")
if(certPage == 'all'){
$(`#certificate-table tbody tr`).show()
$(`#certificate-table tbody tr:nth-child(${((page - 1) * itemPerPage) + 1 })`).prevAll().hide()
$(`#certificate-table tbody tr:nth-child(${page * itemPerPage})`).nextAll().hide()
}else{
$(`#certificate-table tbody tr.${filter}`).show()
$(`#certificate-table tbody tr.${filter}:nth-child(${((page - 1) * itemPerPage) + 1 })`).prevAll().hide()
$(`#certificate-table tbody tr.${filter}:nth-child(${page * itemPerPage})`).nextAll().hide()
}
}
$(document).ready(function(){
certificatePagination()
cardPagination()
})
</script>
<script>
$(".certificate-filters li input").change(function () {
$(".certificate-filters li input").removeClass("selected")
$(this).addClass("selected")
const currentFilterValue = $(this).val()
certificatePagination()
if (currentFilterValue == "all") {
$(`.dashboard-wrapper .certificate-track-card .certificate-item`).show()
$(`.dashboard-wrapper .certificate-track-card .certificate-item`).removeClass('even')
$(`.dashboard-wrapper .certificate-track-card .certificate-item`).even().addClass('even')
} else {
$(`.dashboard-wrapper .certificate-track-card .certificate-item:not(.${currentFilterValue})`).hide()
$(`.dashboard-wrapper .certificate-track-card .certificate-item.${currentFilterValue}`).show()
$(`.dashboard-wrapper .certificate-track-card .certificate-item`).removeClass('even')
$(`.dashboard-wrapper .certificate-track-card .certificate-item.${currentFilterValue}`).even().addClass('even')
}
})
</script>
<script>
$(".card-filters li input").change(function () {
$(".card-filters li input").removeClass("selected")
$(this).addClass("selected")
const currentFilterValue = $(this).val()
cardPagination()
if (currentFilterValue == "all") {
$(`.dashboard-wrapper .certificate-track-card .card-item`).show()
$(`.dashboard-wrapper .certificate-track-card .card-item`).removeClass('even')
$(`.dashboard-wrapper .certificate-track-card .card-item`).even().addClass('even')
} else {
$(`.dashboard-wrapper .certificate-track-card .card-item:not(.${currentFilterValue})`).hide()
$(`.dashboard-wrapper .certificate-track-card .card-item.${currentFilterValue}`).show()
$(`.dashboard-wrapper .certificate-track-card .card-item`).removeClass('even')
$(`.dashboard-wrapper .certificate-track-card .card-item.${currentFilterValue}`).even().addClass('even')
}
})
</script>
</body>
</html>