<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Routing Rules</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>

    <style>
        .vertical-nav {
            min-width: 17rem;
            width: 20%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
            background-color: #f7f7f7;
        }

        .page-content {
            width: 80%;
            margin-left: 20%;
            padding: 30px 0;
        }

        .nav-item .nav-link {
            font-size: 1.5rem;
        }
    </style>
</head>

<body>

<div class="vertical-nav bg-white">
    <div class="py-4 px-3 mb-4 bg-light">
        <div class="media d-flex align-items-center">
            <div class="media-body">
                <h4 class="m-0"><a href="/" class="text-dark text-decoration-none">DVMFNE2 Monitor</a></h4>
            </div>
        </div>
    </div>
    <ul class="nav flex-column bg-white mb-0">
        <li class="nav-item">
            <a href="/peers" class="nav-link text-dark">
                Peers
            </a>
        </li>
        <li class="nav-item">
            <a href="/tg_table" class="nav-link text-dark">
                Routing Rules
            </a>
        </li>
        <li class="nav-item">
            <a href="/reports" class="nav-link text-dark">
                Reports
            </a>
        </li>
        <li class="nav-item">
            <a href="/affs" class="nav-link text-dark">
                Affiliations
            </a>
        </li>
    </ul>
</div>

<div class="page-content">
    <div class="container mt-5">
        <h1>Routing Rules</h1>
        <table class="table">
            <thead class="thead-dark">
            <tr>
                <th>Name</th>
                <th>Source TGid</th>
                <th>Source Slot</th>
                <th>Destination Network</th>
                <th>Destination TGid</th>
                <th>Destination Slot</th>
            </tr>
            </thead>
            <tbody id="activeTgidsTbody">
            <% console.log(reportData) %>
            <% var activeTGIDs = JSON.parse(reportData.ActiveTGIDs); %>
            <% activeTGIDs.forEach(tgid => { %>
                <tr>
                    <td><%= tgid.Name %></td>
                    <td><%= tgid.Source.Tgid %></td>
                    <td><%= tgid.Source.Slot %></td>
                    <td><%= tgid.Destination[0].Network %></td>
                    <td><%= tgid.Destination[0].Tgid %></td>
                    <td><%= tgid.Destination[0].Slot %></td>
                </tr>
            <% }); %>
            </tbody>
        </table>
    </div>
</div>

<script>
    const socket = io.connect();

    const getNestedValue = (obj, path) => {
        path = path.split('.');
        let tempObj = obj;
        for (let i = 0; i < path.length; i++) {
            if (tempObj === undefined || tempObj === null) return '-';

            if(path[i].includes('[')) {
                const match = path[i].match(/(\w+)(\[\d+\])/); // Thanks stackoverflow
                if (match) {
                    const propName = match[1];
                    const index = parseInt(match[2].replace('[', '').replace(']', ''));
                    tempObj = tempObj[propName];
                    if(Array.isArray(tempObj)) {
                        tempObj = tempObj[index];
                    } else {
                        return '-';
                    }
                } else {
                    return '-';
                }
            } else {
                tempObj = tempObj[path[i]];
            }
        }
        return tempObj !== undefined && tempObj !== null ? tempObj : '-';
    };
</script>
</body>

</html>