index.html

<html>
<head>
    <title>NLNOGbook</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="List of participants of NLNOG">
    <meta name="author" content="Cas de Reuver">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css@3.4.5/css/flag-icon.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@3.13.1/dist/js-yaml.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
</head>
<body>
<div class="container">
    <h1 class="page-header">NLNOGbook</h1>
    <p>This page was created to keep track of the members in the <a href="https://nlnog.net/" target="_blank">NLNOG</a>
        community.</p>
    <p>You can add yourself to the list by creating a Pull Request on <a href="https://github.com/nlnog/nlnogbook"
                                                                         target="_blank">GitHub</a></p>
    <table class="table table-sm table-striped" id="nlnogbook">
        <thead>
        <tr>
            <th>Nick</th>
            <th>Full name</th>
            <th>Organisation</th>
            <th>ASN</th>
            <th>RIR Handle</th>
            <th>Country</th>
        </tr>
        </thead>
        <tbody id="list"></tbody>
    </table>
    <hr/>
    <p>Created by <a href="http://reuver.co" target="_blank">Cas de Reuver</a> and improved by <a href="https://martijn.gr/" target="_blank">Martijn Groenleer</a>.
    </p>
</div>
<script>
    var timer;
    function getUrlVars()
    {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }
    function fnSearchChange()
    {
        clearTimeout(timer);  //clear any running timeout on key up
        timer = setTimeout(function() { //then give it a second to see if the user is finished
            var searchterm = $("#nlnogbook_filter :input").val();
            document.title = "NLNOGbook - Searching for: " + searchterm;
            history.pushState({
                id: 'homepage'
            }, 'NLNOGbook - Searching for: ' +  searchterm, '?q=' +  searchterm);
        }, 1000);
    }

    var defaults = {full_name: '', companies: [], country: '', rir_handle: []};
    $(document).ready(function () {
        var t = $('#nlnogbook').DataTable( {
            "paging": false, 
            "autoWidth": false,
            "language": {
                "emptyTable": "<img src='ajax-loader-small.gif'>&nbsp; &nbsp; <i>One moment please while we are loading the NLNOGbook dataset..."
            }
        } );
        $.get('data/companies.yml?' + (new Date()).getTime(), function (companies_yml) {
            var companies = jsyaml.load(companies_yml);
            $.get('data/users.yml?' + (new Date()).getTime(), function (users_yml) {
                var users = jsyaml.load(users_yml);

                Object.keys(users).sort(function (a, b) {
                    return a.toLowerCase().localeCompare(b.toLowerCase());
                }).forEach(function (name) {
                    var newUser = $('<tr />');
                    var user = users[name];
                    for (var key in defaults) {
                        if (!user.hasOwnProperty(key)) {
                            user[key] = defaults[key];
                        }
                    }

                    newUser.append('<td>' + name + '</td>');
                    newUser.append('<td>' + user.full_name + '</td>');

                    var companyStr = $('<td />');
                    var asnStr = $('<td />');
                    for (var comp in user.companies) {
                        var company = companies[user.companies[comp]];
                        if (company) {
                            var tmpStr = '';
                            if (company.site) {
                                tmpStr = '<a href="' + company.site + '" target="_blank">';
                            }
                            tmpStr += company.name;
                            if (company.site) {
                                tmpStr += '</a>';
                            }
                            companyStr.append(tmpStr + '<br />');

                            if (company.asn) {
                                if (!Array.isArray(company.asn)) {
                                    company.asn = [company.asn];
                                }
                                companyCounter = 0;
                                for (var asn in company.asn) {
                                    var asn = company.asn[asn];
                                    asnStr.append('<a href="https://apps.db.ripe.net/db-web-ui/lookup?source=ripe&key=AS' + asn + '&type=aut-num" target="_blank">AS' + asn + '</a><br />');
                                    if (companyCounter > 0) {
                                        companyStr.append('<br />');
                                    }
                                    companyCounter++;
                                }
                            } else {
                                asnStr.append('<br />');
                            }
                        } else {
                            companyStr.append(user.companies[comp] + '<br />');
                        }
                    }
                    newUser.append(companyStr);
                    newUser.append(asnStr);

                    var handleStr = $('<td />');
                    if (!Array.isArray(user.rir_handle)) {
                        user.rir_handle = [user.rir_handle];
                    }

                    for (var handle in user.rir_handle) {
                        handleStr.append('<a href="https://apps.db.ripe.net/db-web-ui/#/lookup?source=ripe&key=' + user.rir_handle[handle] + '&type=person" target="_blank">' + user.rir_handle[handle] + '</a><br />');
                    }

                    newUser.append(handleStr);

                    var flag = $('<td />');
                    if (user.country) {
                        flag.append('<span class="flag-icon flag-icon-' + user.country + '" title="' + user.country + '"></span>');
                    }
                    newUser.append(flag);

                    //$('#list').append(newUser);
                    t.row.add( newUser ).draw( false );
                });
            });
        })
        var query = getUrlVars()['q'];
        t.search( query );
        $("#nlnogbook_filter :input").keyup(fnSearchChange);
    });
</script>
</body>
</html>