{% extends 'index.html' %}
{% block content %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class="card">
    <div id="main-div" class="card-body">
        <table id="eeg_test_table" class="table table-sm table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">Trial #</th>
                    <th scope="col">1</th>
                    <th scope="col">2</th>
                    <th scope="col">3</th>
                    <th scope="col">4</th>
                </tr>
            </thead>
            <tbody>
                <tr id="Q1">
                    <th scope="row">Q1</th>
                    <td class="T1">-</td>
                    <td class="T2">-</td>
                    <td class="T3">-</td>
                    <td class="T4">-</td>
                </tr>
                <tr id="Q2">
                    <th scope="row">Q2</th>
                    <td class="T1">-</td>
                    <td class="T2">-</td>
                    <td class="T3">-</td>
                    <td class="T4">-</td>
                </tr>
            </tbody>
        </table>
        <div class="d-flex justify-content-center mt-2" role="group">
            <button type="button" id="mat-save" class="btn btn-primary mx-3">Save and finish test</button>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
    // Initialise socketio with a namespace called "main"
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');

    $('#mat-save').click(function(event) {
        socket.emit("finalise_results")
    });
    socket.on('test_finished', function(msg) {
        window.location.href = '/home';
    });

    socket.on('eeg_test_fill_table', function(msg) {
        for(i = 0; i < msg['data'].length; i++) {
            for(j = 0; j < msg['data'][i].length; j++) {
                $(`#Q${j+1} > .T${i+1}`).text(String.fromCharCode(msg['data'][i][j]));
            }
        }
    });

});
</script>
{% endblock %}