beflask/beflask/interactive/templates/ranking.html

{% extends  "iobase.html" %}
{% block content %}
    <div class="alert alert-{{ alert_type }} col-md-4" role="alert">
        <h4 class="alert-heading">{{ title }}</h4>
        <button class="btn btn-primary"
                onclick="window.location.href='{{ url_for("main.index") }}'">Back</button>
        <div class="row">
            <div>
                <div class="mb-3">
                    <label class="form-label" for="score">Score</label>
                    <select class="form-select" id="score" name="score">
                        <option value="accuracy">accuracy</option>
                        <option value="f1-macro">f1-macro</option>
                        <option value="f1-micro">f1-micro</option>
                        <option value="f1-weighted">f1-weighted</option>
                        <option value="roc-auc-ovr">roc-auc-ovr</option>
                    </select>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="excel">
                        <label class="form-check-label" for="flexCheckDefault">Generate Excel</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="html">
                        <label class="form-check-label" for="flexCheckChecked">Generate HTML</label>
                    </div>
                </div>
                <button type="button"
                        class="btn btn-primary"
                        onclick="send()"
                        id="submit"
                        disabled>Generate</button>
                <div class="mb-3">
                    <div class="alert alert-success" role="alert" id="status-alert" hidden>
                        <input id="status"
                               name="status"
                               type="text"
                               readonly
                               class="bg-success text-white form-control"
                               hidden>
                    </div>
                    <div class="progress"
                         role="progressbar"
                         aria-label="Animated striped example"
                         aria-valuenow="0"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         hidden>
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             id="bar-value"></div>
                    </div>
                    <div class="alert alert-success" role="alert" id="button_container" hidden>
                        <button class="btn btn-primary btn-small"
                                id="excel_button"
                                onclick="{{ call }}"
                                hidden>
                            <i class="mdi mdi-file-excel"></i> Benchmark
                        </button>
                        <button class="btn btn-primary btn-small"
                                id="html_button"
                                onclick="{{ call }}"
                                hidden>
                            <i class="mdi mdi-language-html5"></i> Exreport
                        </button>
                        <button class="btn btn-primary btn-small"
                                id="go_back"
                                onclick="location.href='/index'"
                                hidden>
                            <i class="mdi mdi-home-circle"></i> Go Back
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block jscript %}
    {{ super() }}
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {

            $("#excel").change(function () {
                if (!$("#excel").is(":checked") && !$("#html").is(":checked")) {
                    $("#submit").attr("disabled", true);
                } else {
                    $("#submit").removeAttr("disabled");
                }
            });
            $("#html").change(function () {
                if (!$("#excel").is(":checked") && !$("#html").is(":checked")) {
                    $("#submit").attr("disabled", true);
                } else {
                    $("#submit").removeAttr("disabled");
                }
            });
        });
        var socket = io();
        var update_bar = false;
        socket.on('connect', function() {
            socket.emit('client', {data: 'Connected.'});
        });
        socket.on('server', function(msg) {
            var text = document.getElementById('status');
            text.value = msg.message;
            if (update_bar) {
                $(".progress-bar").attr("style", "width: "+msg.percentage+"%");
                $('.progress-bar').attr('aria-valuenow', msg.percentage).css('width',  msg.percentage+'%');
                $('#bar-value').html(msg.percentage+"%");
            }
            if (msg.message == "Start") {
                update_bar = true;
            }
            if (msg.message == "Done!") {
                if ($("#excel").is(":checked")) {
                    $("#excel_button").attr("onclick", "window.open('" + msg.payload.excel +"', '_blank')");
                    $("#excel_button").removeAttr("hidden");
                }
                if ($("#html").is(":checked")) {
                    $("#html_button").attr("onclick", "window.open('"+msg.payload.html +"', '_blank')");
                    $("#html_button").removeAttr("hidden");
                }
                $("#button_container").removeAttr("hidden");
                update_bar = false;
            }
            if (msg.status=="Error") {
                $('#status-alert').removeClass("alert-success").addClass("alert-danger").removeAttr("hidden");
                $('#status').addClass("bg-danger text-white").removeClass("bg-success");
                $("#status").text=msg.message;
            }
            $("#go_back").removeAttr("hidden");
            
        });
        function send() {
            var data= {
                action: "ReadyToRock!", 
                score: document.getElementById('score').value, 
                excel: document.getElementById('excel').checked, 
                html: document.getElementById('html').checked
            };
            $("#score").attr("disabled", true);
            $("#excel").attr("disabled", true);
            $("#html").attr("disabled", true);
            socket.emit('client', data);
            $("#status").removeAttr("hidden");
            $("#status-alert").removeAttr("hidden");
            $(".progress").removeAttr("hidden");
            $("#submit").attr("hidden", true);
        }
    </script>
{% endblock %}