client/views/staff/accounts.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Banka | Admin</title>
<link rel="icon" type="image/x-icon" href="../../assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../../assets/css/main.css">
<link rel="stylesheet" type="text/css" href="../../assets/css/responsive.css">
</head>
<body>
<!-- Progress Bar -->
<span class="progress-bar"></span>
<!-- Reveal -->
<div class="ad-modal">
<span onclick="modalOpen(false)" class="modal-close">
<i class="fas fa-times fa-2x"></i>
</span>
<div class="modal-content center"></div>
</div>
<!-- End Reveal -->
<nav id="ad-nav">
<div id="logo">
<a href="../../../index.html">
<img src="../../assets/img/logo.png" alt="logo">
</a>
</div>
<div class="ad-nav-right">
<img id="avatar"
onclick="openDropDown(true)"
class="dropbtn"
src="../../assets/img/avatar.png"
alt="profile pic"
/>
<!-- Dropdown content -->
<div class="dropdown-content" id="dropdown">
<a href="#" onclick="event.preventDefault();return logout();">
<i class="fas fa-info-circle"></i>
Logout
</a>
</div>
<!-- Hamburger links -->
<a href="#" onclick="event.preventDefault();openSlideMenu(this)">
<span class="open-slide">
<i class="fas fa-align-right fa-2x"></i>
</span>
</a>
<!-- Toast -->
<div class="toast success">
<img src="../../assets/img/check-mark.gif" alt="check-mark">
</div>
<div class="toast error">
<img src="../../assets/img/cross-mark.jpg" alt="cross-mark">
</div>
<!-- Side nav -->
<div id="side-menu" class="side-nav">
<li><a href="home.html">Dashboard</a></li>
<li><a href="users.html">Users</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li class="accordion">
<a href="#">
New transaction
<i class="fa fa-caret-down right"></i>
</a>
</li>
<!-- Accordion content -->
<div class="panel">
<a href="credit.html">Credit</a>
<a href="debit.html">Debit</a>
</div>
<li onclick="event.preventDefault();return logout();"><a href="#">Logout</a></li>
</div>
</div>
</nav>
<div class="ad-main">
<section>
<aside>
<ul>
<a href="home.html">
<li>
<i class="fas fa-chart-line"></i>
Dashboard
</li>
</a>
<a href="users.html">
<li>
<i class="fas fa-users"></i>
Users
</li>
</a>
<a href="accounts.html">
<li style="background: #076969">
<i class="fas fa-folder"></i>
Accounts
</li>
</a>
<li class="accordion">
<i class="fas fa-book-open"></i>
<a href="#">New transaction</a>
<i class="fa fa-caret-down right"></i>
</li>
<!-- Accordion content -->
<div class="panel">
<a href="credit.html">Credit</a>
<a href="debit.html">Debit</a>
</div>
<a href="#">
<li onclick="event.preventDefault();return logout();">
<i class="fas fa-info-circle"></i>
Logout
</li>
</a>
</ul>
</aside>
</section>
<section class="ad-main-showcase">
<div class="toast">
<img src="../../assets/img/check-mark.gif" alt="check-mark">
<figcaption>Success!</figcaption>
</div>
<header><h3 class="header">Accounts</h3></header>
<div class="ad-main-content">
<table>
<tr>
<th>Data created</th>
<th>Owner ID</th>
<th>Account type</th>
<th>Status</th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
<hr />
<br />
<div style="text-align:center">
<button class="button btn-transparent btn-wide">Load more</button>
</div>
</div>
</section>
</div>
<script src="../../assets/js/middleware.js"></script>
<script>
const handleSelectedAccount = (id) => {
sessionStorage.setItem('id', id);
location.assign(`${ghPagesUrlRedirect(location.origin)}/client/views/staff/account-single.html`);
}
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
withAuth();
const token = getAuthToken();
const url = new URL(env.url());
const config = {
headers: {
'Content-Type': 'application/json',
'x-access-token': token
}
};
// Get user type
fetch(`${url.href}/user/type/`, config)
.then(response => response.json())
.then(json => {
if (!json.error) {
// Remove side nav links based on user
const accordion = document.querySelectorAll('.accordion');
const panel = document.querySelectorAll('.panel');
if (json.data.type == 'admin') {
accordion.forEach((acc) => acc.style.display = 'none');
panel.forEach((pnl) => pnl.style.display = 'none');
}
}
return null;
})
.catch(error => showToast(false, 'Please log in again.'));
// Get all accounts
(function() {
fetch(`${url.href}/accounts/`, config)
.then(response => response.json())
.then(json => {
if (json.status === 401) {
localStorage.clear();
showToast(false, errorResponse(json.error))
handleLoadingComplete(true, 1);
return redirect.home();
}
if (json.status < 300) {
const table = document.querySelector('table');
json.data.map((account) => {
const tableRow = document.createElement('tr');
tableRow.innerHTML = `
<tr key=${account.id}>
<td>${formatDate(account.created_at)}</td>
<td>${account.owner}</td>
<td>${account.type}</td>
<td>${account.status}</td>
<td>
<a href="#"
onclick="handleSelectedAccount(${account.account_number})"
>
View
</a>
</td>
<!-- Ellipsis for mobile view -->
<td class="ellipsis">
<i class="fa fa-ellipsis-v" aria-hidden="true"></i>
<!-- Ellipsis content -->
<div class="more-options">
<button onclick="modalOpen(true, 'deactivate')" class="gold"
>
Deactivate
</button>
<button onclick="modalOpen(true, 'delete')" class="red"
>
Delete
</button>
</div>
</td> <!-- end ellipsis -->
<td class="actions">
<a href="#"
class="gold"
onclick="modalOpen(true, 'deactivate')"
>
Deactivate
</a>
</td>
<td class="actions">
<a
href="#"
class="red"
onclick="modalOpen(true, 'delete')"
>
Delete
</button>
</td>
</tr>`;
table.appendChild(tableRow);
});
return handleLoadingComplete(false, 1, '#fff');
} else {
showToast(false, 'Unable to fetch data');
return handleLoadingComplete(true, 1)
}
})
.catch(error => {
showToast(false, 'Try again');
return handleLoadingComplete(true, 1);
}).
catch(error => {
showToast(false, 'Try again');
return handleLoadingComplete(true, 1);
});
return null;
})();
});
</script>
<script src="../../assets/js/utils.js"></script>
<script src="../../assets/js/main.js"></script>
<script src="../../assets/js/dashboard.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
</body>
</html>