{% 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>
                    <th scope="col">5</th>
                    <th scope="col">6</th>
                    <th scope="col">7</th>
                    <th scope="col">8</th>
                    <th scope="col">9</th>
                    <th scope="col">10</th>
                    <th scope="col">11</th>
                    <th scope="col">12</th>
                    <th scope="col">13</th>
                    <th scope="col">14</th>
                    <th scope="col">15</th>
                    <th scope="col">16</th>
                    <th scope="col">17</th>
                    <th scope="col">18</th>
                    <th scope="col">19</th>
                    <th scope="col">20</th>
                    <th scope="col">21</th>
                    <th scope="col">22</th>
                    <th scope="col">23</th>
                    <th scope="col">24</th>
                    <th scope="col">25</th>
                    <th scope="col">26</th>
                    <th scope="col">27</th>
                    <th scope="col">28</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>
                    <td class="T5">-</td>
                    <td class="T6">-</td>
                    <td class="T7">-</td>
                    <td class="T8">-</td>
                    <td class="T9">-</td>
                    <td class="T10">-</td>
                    <td class="T11">-</td>
                    <td class="T12">-</td>
                    <td class="T13">-</td>
                    <td class="T14">-</td>
                    <td class="T15">-</td>
                    <td class="T16">-</td>
                    <td class="T17">-</td>
                    <td class="T18">-</td>
                    <td class="T19">-</td>
                    <td class="T20">-</td>
                    <td class="T21">-</td>
                    <td class="T22">-</td>
                    <td class="T23">-</td>
                    <td class="T24">-</td>
                    <td class="T25">-</td>
                    <td class="T26">-</td>
                    <td class="T27">-</td>
                    <td class="T28">-</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>
                    <td class="T5">-</td>
                    <td class="T6">-</td>
                    <td class="T7">-</td>
                    <td class="T8">-</td>
                    <td class="T9">-</td>
                    <td class="T10">-</td>
                    <td class="T11">-</td>
                    <td class="T12">-</td>
                    <td class="T13">-</td>
                    <td class="T14">-</td>
                    <td class="T15">-</td>
                    <td class="T16">-</td>
                    <td class="T17">-</td>
                    <td class="T18">-</td>
                    <td class="T19">-</td>
                    <td class="T20">-</td>
                    <td class="T21">-</td>
                    <td class="T22">-</td>
                    <td class="T23">-</td>
                    <td class="T24">-</td>
                    <td class="T25">-</td>
                    <td class="T26">-</td>
                    <td class="T27">-</td>
                    <td class="T28">-</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 %}