Shegsdev/Banka

View on GitHub
client/views/staff/account-single.html

Summary

Maintainability
Test Coverage
<!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>
    <div class="ad-modal">
        <button onclick="modalOpen(false)" class="modal-close">&times;</button>
        <div class="modal-content center"></div>
    </div>
    <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" 
            />
            <!-- 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</a>
                    <i class="fa fa-caret-down right" style="margin-top:1em"></i>
                </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-chart-line"></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="ad-main-content">
                <span class="back" onclick="window.history.back()">
                    <i class="fas fa-arrow-left fa-2x"></i>
                </span>
                <section class="single">
                    <header><h2>Account info</h2></header>
                </section>
                <hr/>
            </div>
        </section>
    </div>

    <script src="../../assets/js/middleware.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            withAuth();
            const accountNumber = sessionStorage.getItem('id');
            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 account details
            (function() {
                fetch(`${url.href}/accounts/${accountNumber}`, 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 { data } = json;
                            const section = document.querySelector('.single');
                            const content = document.createElement('div');
                            content.innerHTML = `
                                <p>Holder's Name: ${data.owner}</p>
                                <p>Account Number: <strong>${data.account_number}</strong></p>
                                <p>Account Type: ${data.type.toUpperCase()}</p>
                                <p>Balance: ₦${formatCurrency(data.balance)}</p>
                                <p>Status: ${data.status.toUpperCase()}</p>
                            `;
                            section.appendChild(content);
                            return handleLoadingComplete(false, 1, '#fff');
                        } else {
                            showToast(false, 'Unable to fetch data');
                            return handleLoadingComplete(true, 1)
                        }
                    })
                    .catch(error => {
                        showToast(false, `${error}: Try again`);
                        return handleLoadingComplete(true, 1);
                    }).
                    catch(error => {
                        showToast(false, `${error}: 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>