<?php

require('../header.php');

require('pdo.php');

​

// alle leerlingen inladen

if ($_SESSION["Rol"] == "leerling") {

    header("Location: ../index.php");

    exit;

}

​

$query = "SELECT * FROM `LLN` WHERE LLActief = 1 ORDER BY LLKlascode ASC, LLNaam ASC";

try {

    $res = $pdo->prepare($query);

    $res->execute();

} catch (PDOException $e) {

    echo 'Query error<br>' . $e;

    die();

}

​

$rows = [];

while ($row = $res->fetch(PDO::FETCH_ASSOC)) {

    $voornaam = $row["LLVoornaam"];

    $naam = $row["LLNaam"];

    $klas = $row["LLKlascode"];

    $id = $row["LLnr"];

    // button toevoegen aan elk record

    $button = '<button onclick="goToTimeline(\''.$id.'\',\''.$voornaam.'\',\''.$klas.'\',\''.$naam.'\')" 

    class="bg-success text-white border-0 rounded " name="path" value="tijdlijn">Tijdlijn</button> ';

​

​

    $array = [$voornaam, $naam, $klas, $button];

    $rows[] = $array;

}

​

// php rows omzetten naar json rows om te gebruiken in javascript

$rows_json = json_encode($rows);

?>

​

<?php

require('../startHTML.php');

?>

​

<style>

    /* Add any additional styling here */

</style>

​

<?php

require('../navbar.php');

?>

​

<div class="container-fluid mt-5" id="top">

    <div class="d-flex justify-content-center align-items-center">

        <div class="card mt-3" style="width: 80%">

            <div class="card-header text-center bg-danger text-white">

                <h2>Overzicht leerlingen</h2>

            </div>

            <div class="card-body">

                <div data-mdb-input-init class="form-outline mb-4">

                    <input type="text" class="form-control" id="datatable-search-input" />

                    <label class="form-label" for="datatable-search-input">Zoek een leerling</label>

                </div>

                <div data-mdb-datatable-init class="datatable" id="datatable"></div>

            </div>

        </div>

    </div>

</div>

​

<br>

​

<?php

require('../footer1.php');

?>

​

<!-- Custom scripts -->

<script type="text/javascript">

    const data = {

        columns: [

            {

                label: 'Voornaam',

                field: 'voornaam'

            },

            'Achternaam',

            'Klas',

            'Actie', // Changed column label to 'Actie' for the button

        ],

        // json rows terug omzetten naar php rows

        rows: <?php echo $rows_json; ?>,

    };

​

    const instance = new mdb.Datatable(document.getElementById('datatable'), data)

​

    document.getElementById('datatable-search-input').addEventListener('input', (e) => {

        instance.search(e.target.value);

    });

​

    function goToTimeline(id, voornaam, klas, naam){

        let ajx = new XMLHttpRequest();

        ajx.onreadystatechange = function() {

            if(ajx.readyState == 4 && ajx.status ==200){

                //console.log(ajx.responseText);

                //location.reload();

                window.location.href = "tijdlijn.php";

            }

        };

            ajx.open("POST", "tijdlijn.php", true);

            ajx.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

​

            // data voor de post in tijdlijn.php

            var postData = "leerlingID=" + encodeURIComponent(id) +

                        "&voornaam=" + encodeURIComponent(voornaam) +

                        "&klas=" + encodeURIComponent(klas) + 

                        "&naam=" + encodeURIComponent(naam);

​

            ajx.send(postData);

    }

</script>

​

<?php

require('../footer2.php');

?>

​