{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container">
        <h1 class="title">Étalonnage</h1>
        <div class="mb-2">
            <p>Placez la mire devant le scanner puis appuyez sur le bouton pour prévisualiser ou étalonner le scanner.</p>
        </div>
        <div class="field is-grouped is-grouped-multiline">
            <div class="control">
                <button id="preview-button" class="button is-link">Prévisualiser</button>
            </div>
            <div class="control">
                <button id="calibrate-button" class="button is-link">Étalonner</button>
            </div>
        </div>
        <article id="error-container" class="message is-danger" style="display: none;">
            <div id="error-content" class="message-body">
            </div>
        </article>
        <div>
            <img id="preview-image" style="display: none;">
        </div>
        <div class="fixed-grid has-8-cols">
            <div id="grid" class="grid">

            </div>
        </div>
        <progress id="progress-bar" class="progress is-link" style="display: none;" value="0" max="100"></progress>
    </div>
</section>
{% endblock content %}

{% block extrajs %}
<script>
    let scanIndex = 0;
    let previewButton = document.getElementById('preview-button');
    let calibrateButton = document.getElementById('calibrate-button');
    let progressBar = document.getElementById('progress-bar');
    let previewImage = document.getElementById('preview-image');
    let grid = document.getElementById('grid');
    let buttons = [previewButton, calibrateButton];
    let errorContainer = document.getElementById('error-container');
    let errorContent = document.getElementById('error-content');

    previewButton.addEventListener('click', async () => {
        buttons.forEach(x => x.setAttribute('disabled', 'disabled'));
        previewButton.classList.add('is-loading');
        let response = await fetch('/api/preview/{{ object.id }}');
        let uuid = await response.text();

        if (response.status >= 200 && response.status < 400) {
            previewImage.src = "/data/{{ object.id }}/previews/" + uuid + ".jpg";
            previewImage.style.display = "block";
            errorContainer.style.display = "none";
        } else {
            errorContainer.style.display = "block";
            errorContent.innerHTML = uuid;
        }

        previewButton.classList.remove('is-loading');
        buttons.forEach(x => x.removeAttribute('disabled'));
    });

    calibrateButton.addEventListener('click', async () => {
        previewImage.style.display = "none";
        buttons.forEach(x => x.setAttribute('disabled', 'disabled'));
        calibrateButton.classList.add('is-loading');
        progressBar.style.display = "block";

        let xhr = new XMLHttpRequest();
        grid.innerHTML = '';
        xhr.open('GET', '/api/scan-for-calibration/{{ object.id }}');
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 3 || xhr.readyState === 4) {
                let uuids = xhr.responseText.split('\n');
                let split = uuids[uuids.length - 2].split(',');
                let uuid = split[0];
                let ratio = parseFloat(split[1]);
                progressBar.value = 100 * ratio;
                let cell = document.createElement('div');
                cell.classList.add('cell');
                cell.classList.add('is-col-min-4');
                let img = document.createElement('img');
                img.src = '/data/{{ object.id }}/calibration/' + uuid + '.jpg?v=' + scanIndex;
                cell.appendChild(img);
                grid.appendChild(cell);

                if (xhr.readyState === 4) {
                    buttons.forEach(x => x.removeAttribute('disabled'));
                    calibrateButton.classList.remove('is-loading');
                }
            }
        };

        xhr.send();
    });
</script>
{% endblock extrajs %}