transfer.html

{% extends "admin/base.html" %}

{% block content %}
<div class="jumbotron">
	<div class="container">
		<h1>Challenge Transfer</h1>
	</div>
</div>
<div class="container">
	<div class="row">
        <div class="col-md-4 form-group">
            {% with form = Forms.setup.SetupForm() %}
            <form id="import-form" action="{{ request.script_root }}/admin/yaml" method="POST" enctype="multipart/form-data">
                <input style="margin: auto;" type="file" name="file" value="file" id="tarfile">
                {{ form.nonce() }}
            </form>
            {% endwith %}
        </div>
        <div class="col-md-3">
            <button class="btn-sm btn-warning" id="import-challenges">Import</button>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 form-group">
            {% with form = Forms.setup.SetupForm() %}
                <form id="export-form" action="{{ request.script_root }}/admin/yaml" method="GET">
                    <div class="form-check">
                        <input type="checkbox" name="removeFlags" id="removeFlags">
                        <label for="removeFlags">Remove Flags</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" name="visibleOnly" id="visibleOnly">
                        <label for="visibleOnly">Visible Only</label>
                    </div>
                    {{ form.nonce() }}
                    <button class="btn btn-primary" id="export-challenges">Export</button>
                </form>
            {% endwith %}
        </div>
    </div>
    

    <div class="form-group">
        <div id="import-loading" class="alert alert-info" role="alert"><strong>Uploading:</strong> File upload in progress</div>
        <div id="import-success" class="alert alert-success" role="alert"><strong>Success:</strong> Your challenges have been imported</div>
        <div id="user-import-error" class="alert alert-danger" role="alert"><strong>Error:</strong> Challenge archive improperly formatted</div>
        <div id="unknown-import-error" class="alert alert-danger" role="alert"><strong>Error:</strong> Upload failed for unknown reason</div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        $("#import-loading").hide()
        $("#import-success").hide()
        $("#user-import-error").hide()
        $("#unknown-import-error").hide()

        $("#import-challenges").click( function(e) {
            $("#import-loading").show();
            $("#import-success").hide();
            $("#user-import-error").hide();
            $("#unknown-import-error").hide();
            $("#import-challenges").addClass("disabled");
            $("#import-challenges").css("point-events", "none");

            var form = $("#import-form")[0];
            var formData = new FormData(form);
            $.ajax({
                url: init.urlRoot + '/admin/yaml',
                data: formData,
                type: 'POST',
                cache: false,
                contentType: false,
                processData: false,
                success: function(data){
                    form.reset();
                    $("#import-loading").hide();
                    $("#import-success").show();
                    $("#import-challenges").removeClass("disabled");
                    $("#import-challenges").css("point-events", "auto");
                },
                error: function(resp){
                    $("#import-loading").hide();
                    if(resp.status == 400){
                        $("#user-import-error").show();
                    }
                    else{
                        $("#unknown-import-error").show();
                    }
                    $("#import-challenges").removeClass("disabled");
                    $("#import-challenges").css("point-events", "auto");
                }
            });
        });
    });
    </script>
{% endblock %}