<!DOCTYPE html>
<html lang="no">
<head>
    <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
    <style>
        .passed {
            background-color: #8ff0a4;
        }
    </style>
</head>
<body>

<input id="search" type="text" class="form-control"  onkeyup="filterTable()"  placeholder="Søk etter startnummer eller navn">
<br>

<table>
    <tbody id="runners">

    </tbody>
</table>
</body>
<?php
$action = isset($_SERVER['QUERY_STRING']) ? $_SERVER['QUERY_STRING'] : '';
switch($action) {
}
?>
<script>
// Hvilken matpost vi er på:
var control = 2;

function register_runner(id) {
    let formData = new FormData();
    formData.append(name= 'control', value=control);
    formData.append(name= 'id', value=id);
    time = new Date(Date.now()).toISOString().split('.')[0]+"Z"
    formData.append('time', time);
    fetch("upload.php", {
        method: "POST",
        body: formData,
    });
};
function update_runner_status(id, name) {
    update_row(id, name, true);
    register_runner(id);
}

function read_db() {
    let xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "db.csv", false);
    xmlHttp.send(null);
    return xmlHttp.responseText;
}

function create_row(id, name, passed) {
    if (!passed) {
        button = `<button onclick="update_runner_status(${id}, '${name}')">✓</button>`
        return `<tr id="${id}"><td>${id}</td><td>${name}</td><td>${button}</td></tr>`
    }
    else {
        button = `<button onclick="update_runner_status(${id}, '${name}')">Angre</button>`
        return `<tr id="${id}" class="passed"><td>${id}</td><td>${name}</td><td>${button}</td></tr>`
    }

}

function create_rows(csv) {
    csv = csv.split('\n')
    rows = ""
    for (i in csv) {
        data = csv[i].split(",")
        rows += create_row(data[0], data[1], false)
    }
    return rows
}
function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("runners");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
      txtValue = td[j].textContent || td[j].innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        break;
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
function update_row(id, name, passed) {
    row = document.getElementById(id)
    row.innerHTML = create_row(id, name, passed)
    row.classList.add("passed");
}
table = document.getElementById("runners")
table.innerHTML = create_rows(read_db())
</script>
<html>