<%-- 
    Document   : validator
    Created on : 18.11.2017, 16:33:31
    Author     : themi
--%>
<%@ page import="cz.csu.sdmx.constants.URL"%>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix = "fn" uri = "http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<jsp:include page="reusable/header.jsp">
    <jsp:param name="title" value="SDMX Validator" />
</jsp:include>
    <h1>SDMX Validator</h1>
    <c:url var="post_url"  value="<%= URL.VALIDATOR_VALIDATE%>" />
    <form:form modelAttribute="validatorForm" action="${post_url}" method="POST" enctype="multipart/form-data">
            <div class="input-group">
                <label class="input-group-btn">
                    <span class="btn btn-primary">
                        Select SDMX data&hellip; <form:input path="SDMXDataFile" type="file" style="display:none"/>
                    </span>
                </label>
                <input id="SDMXDataFileCopy" type="text" class="form-control" readonly/>
                <script>
                $("#SDMXDataFile").change(e => {
                    $("#SDMXDataFileCopy").val(e.target.files[0].name);
                });
                </script>
            </div>
            <div class="input-group">
            <label class="input-group-btn">
                <span class="btn btn-primary">
                    Select DSD&hellip; <form:input path="dsdFiles" type="file" style="display:none" multiple="true" />
                </span>
            </label>
            <input id="dsdFileCopy" type="text" class="form-control" readonly />
            <script>
            $("#dsdFiles").change(e => {
                var filesCount = e.target.files.length;
                var width = $(this).innerWidth();
                var maxFileDisplay = width / 280;
                if(filesCount > maxFileDisplay){
                    $("#dsdFileCopy").val(filesCount + " files");
                }else{
                    var fileArray = Array.from(e.target.files);
                    var names = fileArray.map(f => f.name);
                    $("#dsdFileCopy").val(names.toString());
                }
            });
            </script>
        </div>
                <input class="btn btn-primary form-control" type="submit" value="Validate"/>
            <div id='errors'>
                <form:errors path="*" cssClass="error" htmlEscape="false" />
            </div>
    </form:form>      
    <div id="validatorLoading"><div id="loading"></div><div id="loadingText"></div></div>
    <hr class="hr-primary">
    <div id="validationResult"></div>
   
    <script>
        jQuery(document).ready(function($) {
            startIfNeeded();
            $("#validatorForm").submit(function(e) {
                e.preventDefault();
                if(!$("input[type=submit]").hasClass("disabled")){
                    submitAjax(this);
                    startValidationVisualRefresh();
                }
            });
        });   
        
        function submitAjax(form){
            var validatorForm = new FormData(form);
            $.ajax({
                type:"post",
                data:validatorForm,
                url:"<c:url value="<%= URL.VALIDATOR_VALIDATE%>" />",
                cache:false,
                contentType: false,
                processData: false,
                
                success: function(response){
                    console.log("SUCCESS ", response); 
                    var type = typeof response;
                    
                    if(type === "string"){
                        $("#validationResult").html(response);
                    }
                    
                    endValidationVisualRefresh();
                },
                error : function(e) {
                    endValidationVisualRefresh();
                    console.log("ERROR: ", e);
                }
            });
        }
        
        function startValidationVisualRefresh(){
            $("input[type=submit]").addClass("disabled");
            $("#validationResult").empty();
            $("#validatorLoading").show();
            updateResult();
        }
        
        function endValidationVisualRefresh(){
            $("input[type=submit]").removeClass("disabled");
            $("#validatorLoading").hide();
        }
        
        function startIfNeeded(){
            getAjaxInfo(function(response){   
                if(!jQuery.isEmptyObject(response)){
                    startValidationVisualRefresh();
                    $("#validatorLoading").data("async", true);
                }
            });
        }
        
        function isAsync(){
            return $("#validatorLoading").data("async") === true;
        }
        
        function updateResult(){
            getAjaxInfo(function(response){
                if($("#validatorLoading").is(":visible")){
                    setTimeout(updateResult,100);
                    if(!jQuery.isEmptyObject(response)){
                        $("#validationResult").html(response);
                    }
                }
                if(isAsync() && jQuery.isEmptyObject(response)){
                    $("#validatorLoading").data("async", false);
                    endValidationVisualRefresh();
                }
            });           
        }
        
        function getAjaxInfo(handleResponse) {
                jQuery.ajax({
                        type : "POST",
                        url : "<c:url value="<%=URL.VALIDATION_INFO%>"/>",
                        timeout : 2000,
                        success : function(response) { 
                            console.log("SUCCESSinfo: ", response);    
                            handleResponse(response);
                        },
                        error : function(e) {
                            console.log("ERRORinfo: ", e);
                            endValidationVisualRefresh();
                        }
                });
        }
    </script>
    
<jsp:include page="reusable/footer.jsp" />
