{% extends 'base.html' %}

{% block title %}Feature Extraction{% endblock %}
{% block content %}
<h3>To extract the features from the signals of the MIT-BIH Arrhythmia Database you have to define the extraction parameters</h3>
<br>
<form method="post" id="extractionParamsForm">
    {# Extracted signals #}
    <div class="form-group">
        <label for="extractedSignalsFile">Mat file with extracted signals</label>
        <input class="form-control" id="extractedSignalsFile"
               placeholder="Enter the file with the extracted signals"
               type="text" name="extractedSignalsFile" required>
        <small class="form-text text-muted">Here goes the location of the
            file with the ECG signals in your file system.</small>
    </div>

    {# Arrhythmia types #}
    <label>Arrhythmia Types</label>
    <div class="row mb-2">
        <div class="col">
            <div class="form-check">
                <input class="form-check-input" id="arrNormalBeat"
                       type="checkbox"
                       value="" name="arrNormalBeat">
                <label class="form-check-label" for="arrNormalBeat">
                    Normal beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrLeftBundleBranchBlockBeat" type="checkbox"
                       value="" name="arrLeftBundleBranchBlockBeat">
                <label class="form-check-label"
                       for="arrLeftBundleBranchBlockBeat">
                    Left bundle branch block beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrRightBundleBranchBlockBeat" type="checkbox"
                       value="" name="arrRightBundleBranchBlockBeat">
                <label class="form-check-label"
                       for="arrRightBundleBranchBlockBeat">
                    Right bundle branch block beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrAtrialPrematureBeat"
                       type="checkbox" name="arrAtrialPrematureBeat"
                       value="">
                <label class="form-check-label" for="arrAtrialPrematureBeat">
                    Atrial premature beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrAberratedAtrialPrematureBeat" type="checkbox"
                       value="" name="arrAberratedAtrialPrematureBeat">
                <label class="form-check-label"
                       for="arrAberratedAtrialPrematureBeat">
                    Aberrated atrial premature beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrNodalJunctionalPrematureBeat" type="checkbox"
                       value="" name="arrNodalJunctionalPrematureBeat">
                <label class="form-check-label"
                       for="arrNodalJunctionalPrematureBeat">
                    Nodal (junctional) premature beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrSupraventricularPrematureBeat" type="checkbox"
                       value="" name="arrSupraventricularPrematureBeat">
                <label class="form-check-label"
                       for="arrSupraventricularPrematureBeat">
                    Supraventricular premature beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrPrematureVentricularContraction" type="checkbox"
                       value="" name="arrPrematureVentricularContraction">
                <label class="form-check-label"
                       for="arrPrematureVentricularContraction">
                    Premature ventricular contraction
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrFusionOfVentricularAndNormalBeat" type="checkbox"
                       value="" name="arrFusionOfVentricularAndNormalBeat">
                <label class="form-check-label"
                       for="arrFusionOfVentricularAndNormalBeat">
                    Fusion of ventricular and normal beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrStartOfVentricularFlutterFibrillation"
                       type="checkbox"
                       value="" name="arrStartOfVentricularFlutterFibrillation">
                <label class="form-check-label"
                       for="arrStartOfVentricularFlutterFibrillation">
                    Start of ventricular flutter/fibrillation
                </label>
            </div>
        </div>
        <div class="col">
            <div class="form-check">
                <input class="form-check-input" id="arrVentricularFlutterWave"
                       type="checkbox"
                       value="" name="arrVentricularFlutterWave">
                <label class="form-check-label"
                       for="arrVentricularFlutterWave">
                    Ventricular flutter wave
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrEndOfVentricularFlutterFibrillation"
                       type="checkbox"
                       value="" name="arrEndOfVentricularFlutterFibrillation">
                <label class="form-check-label"
                       for="arrEndOfVentricularFlutterFibrillation">
                    End of ventricular flutter/fibrillation
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrAtrialEscapeBeat"
                       type="checkbox"
                       value="" name="arrAtrialEscapeBeat">
                <label class="form-check-label" for="arrAtrialEscapeBeat">
                    Atrial escape beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrNodalJunctionalEscapeBeat" type="checkbox"
                       value="" name="arrNodalJunctionalEscapeBeat">
                <label class="form-check-label"
                       for="arrNodalJunctionalEscapeBeat">
                    Nodal (junctional) escape beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrVentricularEscapeBeat"
                       type="checkbox"
                       value="" name="arrVentricularEscapeBeat">
                <label class="form-check-label" for="arrVentricularEscapeBeat">
                    Ventricular escape beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrPacedBeat"
                       type="checkbox"
                       value="" name="arrPacedBeat">
                <label class="form-check-label" for="arrPacedBeat">
                    Paced beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input"
                       id="arrFusionOfPacedAndNormalBeat" type="checkbox"
                       value="" name="arrFusionOfPacedAndNormalBeat">
                <label class="form-check-label"
                       for="arrFusionOfPacedAndNormalBeat">
                    Fusion of paced and normal beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrNonConductedPWave"
                       type="checkbox"
                       value="" name="arrNonConductedPWave">
                <label class="form-check-label" for="arrNonConductedPWave">
                    Non-conducted P-wave (blocked APB)
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrUnclassifiableBeat"
                       type="checkbox"
                       value="" name="arrUnclassifiableBeat">
                <label class="form-check-label" for="arrUnclassifiableBeat">
                    Unclassifiable beat
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" id="arrIsolatedQRSLikeArtifact"
                       type="checkbox"
                       value="" name="arrIsolatedQRSLikeArtifact">
                <label class="form-check-label"
                       for="arrIsolatedQRSLikeArtifact">
                    Isolated QRS-like artifact
                </label>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-secondary btn-sm" id="checkArrhythmiasBtn">Check all</button>
    <small class="form-text text-muted">Select the arrhythmia types you
        want to extract features from.</small>

    {# Wavelet Family #}
    <div class="form-group">
        <label for="wavelet">Wavelet Family</label>
        <select class="form-control" name="wavelet" id="wavelet">
            {% for w in wavelets %}
                <option>{{ w }}</option>
            {% endfor %}
        </select>
        <small class="form-text text-muted">The wavelet to transform the signals.</small>
    </div>

    {# Available Signals per Arrhythmia #}
    <div class="form-group">
        <label for="signalsPerArr">
            Available signals per arrhythmia</label>
        <input class="form-control" id="signalsPerArr" name="signalsPerArr" min="1"
               placeholder="" type="number" value="1" required>
        <small class="form-text text-muted">The number of available signals per arrhythmia.</small>
    </div>

    {# Decomposition Level #}
    <div class="form-group">
        <label for="decompositionLevel">
            Decomposition level</label>
        <input class="form-control" id="decompositionLevel" name="decompositionLevel" min="1"
               placeholder="" type="number" value="1" required>
        <small class="form-text text-muted">The number of decomposition level for wavelet transform.</small>
    </div>

    {# Filename to save the features #}
    <div class="form-group">
        <label for="extractedFeaturesFilename">
            File to save the extracted features</label>
        <input class="form-control" id="extractedFeaturesFilename" name="extractedFeaturesFilename"
               placeholder="Enter the filename to save the extracted features" type="text" value="" required>
        <small class="form-text text-muted">The filename to save the extracted features.</small>
    </div>

    <button class="btn btn-primary" id="extractFeaturesBtn" type="submit">Extract features</button>
</form>
<br>
{% endblock %}

{% block custom_scripts %}
    <script src="{{ url_for('static', filename='js/feature_extraction.js') }}"></script>
{% endblock %}

