{% extends 'index.html' %}
{% block content %}
<div class="card">
    <div id="main-div" class="card-body">
        <div class="d-flex justify-content-center mt-2" role="group">
            <p>Use the controls below to play the calibration signal. The signal should be calibrated to 60dBa.</p>
        </div>
        <div class="d-flex justify-content-center mt-2" role="group">
            <button type="button" id="play_calibrate" class="btn btn-primary mx-3">Play calibration signal</button>
            <button type="button" id="stop_calibrate" class="btn btn-primary mx-3">Stop calibration signal</button>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');
        $('#play_calibrate').click(function(event) {
            socket.emit("play_calibrate");
        });

        $('#stop_calibrate').click(function(event) {
            socket.emit("stop_calibrate");
        });
    });
</script>
{% endblock %}