<!DOCTYPE html>
<meta charset=utf-8>
<title>Medlemsreg søk</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style type=text/css>
    body { font: normal 0.8em sans-serif;}
    thead { background-color: #333; color: #eee; }
    th, td { padding: 4px; }
    tr:nth-child(even) { background-color: #eee; }
    table { width: 100%; }
</style>

<div class="ui-widget">
  <form>
  <label for="members">Søk etter medlem: </label>
  <input id="members">
  </form>
</div>

<table>
<thead>
  <tr><th>Namn</th> <th>Betaling</th> <th>Lag</th></tr>
</thead>
<tbody>
  <tr><td>gjer eit søk</td> <td></td><td></td></tr>
</tbody>
</table>

<script>
var member_input = document.querySelector("#members");
var table = document.querySelector("table");
var xhr = new XMLHttpRequest();
var info = {};
var change_grace;

member_input.addEventListener('input', change)
//member_input.addEventListener('blur', change)
//member_input.addEventListener('change', change)

function change(e) {
    clearTimeout(change_grace);
    if (member_input.value.length < 3)
        return;

    change_grace = setTimeout(do_xhr, 500);
}

function do_xhr() {
    console.log("Doing XHR for " + member_input.value);
    xhr.open('GET', '/api/get_members.json?term=' + encodeURIComponent(member_input.value));
    xhr.onload = function(e) {
        console.log("Got resp: " + xhr.responseText);
        info = JSON.parse(xhr.responseText);
        build_table(info);
    }
    xhr.send();
}

function build_table(members) {
    var tableinfo = "";
    members.forEach(function(l) {
        tableinfo += "<tr>"
                 + "<td><a href='/admin/medlem/medlem/" + l.id + "/'>"
                 + l.namn + "</a> (" + l.alder + ")</td>"
                 + "<td>" + (''+l.bet).replace(/,/g, ', ') + "</td>"
                 + "<td>" + l.lokallag + "</td></tr>";
    });
    table.tBodies[0].innerHTML = tableinfo;
}
</script>
<div id=log></div>
{#% endblock content %#}
