messageImport.html

<!--#
    This file is part of the registeredMail package.
    (c) Maarch Alexis Ragot <alexis.ragot@maarch.org>

    For the full copyright and license information, please view the LICENSE
    file that was distributed with this source code.
#-->
<div id="contain" >
    <div class="container-fluid" lang="en" data-translate-catalog="medona/messages">
        <div class="page-header">
            <h1>
                <i class="fa fa-download"></i>
                Message import
            </h1>
        </div>
        <div id="messageImortView" lang="en" data-translate-catalog="medona/messages">
            <input type="file" id="messageImport_filesBrowser" class="hide">
            <br/>
            <div class="col-md-8">
                <div id="messageImport_XMLDropZone">
                    <i class="fa fa-file-text fileIcon">&nbsp;</i>
                    <h4>Click or drop a message file<h4>
                </div>

                <div id="messageImport_FileInfo" class="hide col-md-8 col-md-offset-2">
                    <br/>
                    <table>
                        <tr>
                            <td><i class="fa fa-file-text fileIcon">&nbsp;</i></td>
                            <td>
                                <dl class="dl-horizontal">
                                    <dt>File name</dt>
                                    <dd id="messageImport_fileName"></dd>

                                    <dt>Size</dt>
                                    <dd id="messageImport_fileSize"></dd>

                                    <dt>Type</dt>
                                    <dd id="messageImport_fileType"></dd>
                                </dl>
                            </td>
                        </tr>
                    </table>
                    <div id="attachementImport_XMLDropZone" >
                        <h4>Click or drop documents<h4>
                    </div>
                    <input type="file" id="messageImport_attachementsBrowser" class="hide" multiple>
                    <br/>

                    <div id="messageImport_attachments" class="form-group">
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Schema</label>
                        <div class="form-group col-sm-7">
                            <select class="form-control" id="messageImport_schema" name="messageImport_schema">
                                <?merge packageSchemas ?>
                                <option value="[?merge packageSchemas.key() ?]"><?merge .['label'] ?></option>
                            </select>
                        </div>
                    </div>
                    <br/>
                    <br/>
                    <div class="row">
                        <div class="pull-right ">
                            <!-- input type="checkbox" name="messageImport_schema" id="messageImport_schema" data-on="Seda 1 " data-off="Seda 2" data-toggle="toggle" data-onstyle="success" data-offstyle="primary"-->
                            <button class="btn btn-warning" id="messageImport_cancel" title="Cancel"><i class='fa fa-times'>&nbsp;</i> Cancel</button>
                            <button class="btn btn-success" id="messageImport_submit" title="Import"><i class='fa fa-level-down'>&nbsp;</i> Import</button>
                        </div>
                    </div>
                </div>
                <br>
                <div id="messageImport_erreur" class="row hide well text-danger">
                    <strong id="messageImport_errorTitle"></strong>
                    <button class="btn btn-default pull-right" type="button" data-toggle="collapse" data-target="#messageImport_errorDetail" aria-expanded="false" aria-controls="messageImport_errorDetail">
                      ?
                    </button>
                    <div class="collapse " id="messageImport_errorDetail">
                    </div>
                </div>

            </div>
            <div class="col-md-6">
            </div>

            <span class="hide" id="byte_text">byte</span>
            <span class="hide" id="import_text">Import</span>
            <span class="hide" id="validation_text">Validation</span>
            <span class="hide" id="remove_text">Remove</span>
        </div>
    </div>
</div>

<script src="/public/js/bootstrap-toggle/bootstrap-toggle.js"></script>

<style>
    #messageImport_XMLDropZone {
        border: 2px dashed grey;
        cursor: pointer;
        padding: 100px;
        text-align: center;
        color: grey;
        opacity: 0.5;
    }
    .fileIcon {
        font-size: 400%;
    }

    #attachementImport_XMLDropZone {
        border: 2px dashed grey;
        cursor: pointer;
        padding: 70px 10px 70px 10px;
        text-align: center;
        color: grey;
        opacity: 0.5;
    }
</style>

<script>

/* ------ MESSAGE FILE ------ */
var zipContent = "";
    // Drag & drop
    $("#messageImport_XMLDropZone, #attachementImport_XMLDropZone").on('dragenter', function(e) {
        e.preventDefault();
        e.stopPropagation();
    })

    $("#messageImport_XMLDropZone, #attachementImport_XMLDropZone").on('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).css('opacity', '1');
    })

    $("#messageImport_XMLDropZone, #attachementImport_XMLDropZone").on('dragleave', function(e) {
        $(this).css('opacity', '0.5');
    })

    $('#messageImport_XMLDropZone').on('drop', function(e) {
            $('#messageImport_erreur').addClass('hide');
            if(e.originalEvent.dataTransfer){
                if(e.originalEvent.dataTransfer.files.length) {
                    e.preventDefault();
                    e.stopPropagation();
                    $('#messageImport_XMLDropZone').css('opacity', '0.5');
                    uploadMessage(e.originalEvent.dataTransfer.files[0]);
                }
            }
        }
    );

    $('#attachementImport_XMLDropZone').on('drop', function(e) {
        if(!e.originalEvent.dataTransfer || !e.originalEvent.dataTransfer.files.length){
            return;
        }

        e.preventDefault();
        e.stopPropagation();
        $('#attachementImport_XMLDropZone').css('opacity', '0.5');
        var files = e.originalEvent.dataTransfer.files;

        $.each(files, function(key, file) {
            oFileReader = new FileReader();
            if ( file.type == "application/x-zip-compressed") {
                oFileReader.readAsDataURL(file);
            } else {
                oFileReader.readAsText(file);
            }
            oFileReader.onload = function() {

                uploadAttachement(file, function(e){
                    newAttachement(file.name, e.target.result);
                })
            }
        })
    })

    // Files browser
    $('#attachementImport_XMLDropZone').on('click', function() {
        $('#messageImport_attachementsBrowser').click();
    })

    $('#messageImport_XMLDropZone').on('click', function() {
        $('#messageImport_erreur').addClass('hide');
        $('#messageImport_filesBrowser').click();
    })


    $('#messageImport_filesBrowser').on('change', function() {
        uploadMessage($(this).context.files[0]);
    })

    // Cancel
    $('#messageImport_cancel').on('click', function() {
        $('#messageImport_XMLDropZone').removeClass('hide');
        $('#messageImport_FileInfo').addClass('hide');
        $('#messageImport_filesBrowser').val('');
        $('#messageImport_attachementsBrowser').val('');
        $('#messageImport_attachments').empty("");
    })

    // Submit
    $('#messageImport_submit').on('click', function() {
        if ( zipContent != "") {
            var url = '/message/receiveZip';
            var data = zipContent;
            var contentType = 'application/zip';
        } else {
            var url = '/Transfer';
            var data = JSON.stringify(serialize());
            var contentType = 'application/json';
        }

        $(this).attr('disabled',true);
        $('#messageImport_cancel').attr('disabled', true);

        ajax($('#messageImport_submit'), {
            type        : 'POST',
            url         : url,
            data        : data,
            contentType : contentType,
            dataType    : 'json',
            success     : function (response) {
                if (response.status != false) {
                    gritter.show(response.message, response.status, response.errors);
                    validateMessage(response.messageId);
                } else {
                    gritter.show(response.message, response.status);
                    var arg = "";
                    $.each(response.errors,function (key,error) {
                        arg += "<br/>";
                        if (error.variables != null && error.variables.property != null) {
                            arg += error.variables.property + ': ';
                        }
                        arg += error.message;
                    });

                    $('#messageImport_errorTitle').html(response.message);
                    $('#messageImport_errorDetail').html(arg);
                    $('#messageImport_erreur').removeClass('hide');
                    $('#messageImport_submit').attr('disabled',false);
                    $('#messageImport_cancel').attr('disabled',false);
                }


            },
            error       : function (response) {
                gritter.show(response.responseJSON.message, response.responseJSON.status);

                var arg = "";
                $.each(response.responseJSON.errors,function (key,error) {
                    arg += "<br/>";
                    if (error.variables != null && error.variables.property != null) {
                        arg += error.variables.property + ': ';
                    }
                    arg += error.message;
                });
                $('#messageImport_errorTitle').text(response.responseJSON.message);
                $('#messageImport_errorDetail').html(arg);
                $('#messageImport_erreur').removeClass('hide');
                $('#messageImport_cancel').click();
                $('#messageImport_submit').attr('disabled',false);
                $('#messageImport_cancel').attr('disabled',false);


            }
        });
    })

/* ------ ATTACHEMENT ------ */
    $('#messageImport_addAttachement').on('click', function() {
        $('#messageImport_attachementsBrowser').click();
    })

    $('#messageImport_attachementsBrowser').on('change', function() {

        for (var i = 0; i < $(this).context.files.length; i++)
        {
            var fileName = this.files[i].name;

            uploadAttachement(this.files[i], function(e){
                newAttachement(fileName, e.target.result);
            })
        }
    })

    $('#messageImport_attachments').on('click', '.removeAttachement', function() {
        $(this).closest('.input-group').remove();
    })

/* ------ FUNCTION ------ */

    function uploadMessage(file) {
        oFileReader = new FileReader();
        if ( file.type == "application/x-zip-compressed" || file.type == "application/zip") {
            oFileReader.readAsDataURL(file);
        } else {
            oFileReader.readAsText(file);
        }
        oFileReader.onload = function() {
            if ( file.type == "application/x-zip-compressed" || file.type == "application/zip") {
                $('#messageImport_filesBrowser').data('base64', oFileReader.result.replace(/^data:.*?;base64,/, ""));
                $('#messageImport_filesBrowser').data('filename', file.name);
                $('#messageImport_addAttachement').addClass('hide');
                $('#attachementImport_XMLDropZone').addClass('hide');
                
            } else {
                $('#messageImport_filesBrowser').data('base64', btoa(unescape(encodeURIComponent(oFileReader.result))));
                $('#messageImport_addAttachement').removeClass('hide');
                $('#attachementImport_XMLDropZone').removeClass('hide');
            }

            $('#messageImport_fileName').html(file.name);
            $('#messageImport_fileSize').html(file.size + ' ' + $('#byte_text').html());
            $('#messageImport_fileType').html(file.type);
            $('#messageImport_XMLDropZone').addClass('hide');
            $('#messageImport_FileInfo').removeClass('hide');
        };
    }

    function uploadAttachement(file) {
        var oFileReader = new FileReader();
        oFileReader.readAsDataURL(file);
        oFileReader.onload = function() {
            newAttachement(file.name, oFileReader.result.replace(/^data:.*?;base64,/, ""));
        }
    }

    function newAttachement(fileName, base64) {
        var inputGroup = $('<div/>')
                            .addClass('input-group')
                            .appendTo($('#messageImport_attachments'));

        var input = $('<input/>')
                        .attr('type', 'text')
                        .addClass('form-control')
                        .prop('readonly', true)
                        .data('base64', base64)
                        .val(fileName)
                        .appendTo(inputGroup);

        var span = $('<span/>')
                        .addClass('input-group-btn')
                        .appendTo(inputGroup);

        var button = $('<button/>')
                        .attr('title', $('#remove_text').html())
                        .addClass('btn btn-danger removeAttachement')
                        .attr('type', 'button')
                        .appendTo(span);

        var icon = $('<i/>')
                        .addClass('fa fa-trash-o')
                        .appendTo(button);
    }

    function validateMessage(messageId) {
        var submitButton = $('#messageImport_submit');
        submitButton.find("i:first").prop("class", "fa fa-level-down");

        ajax($('#messageImport_submit'), {
            type        : 'PUT',
            url         : '/transferValidate/' + messageId,
            //data        : JSON.stringify({message : messageId}),
            contentType : 'application/json',
            dataType    : 'json',
            success     : function (response) {
                if (response.status == true) {
                    gritter.show(response.message, response.status, response.errors);
                    $('#messageImport_erreur').addClass('hide');
                    $('#messageImport_cancel').click();
                } else {
                    gritter.show(response.message, response.status);
                    var arg = "";
                    $.each(response.errors,function (key,error) {
                        arg += "<br/>";
                        if (error.variables != null && error.variables.property != null) {
                            arg += error.variables.property + ': ';
                        }
                        arg += error.message;
                    });

                    $('#messageImport_errorTitle').text(response.message);
                    $('#messageImport_errorDetail').html(arg);
                    $('#messageImport_erreur').removeClass('hide');
                    $('#messageImport_cancel').click();

                }
                $('#messageImport_submit').attr('disabled',false);
                $('#messageImport_cancel').attr('disabled',false);
            },
            error       : function (response) {
                gritter.show(response.responseJSON.message, response.responseJSON.status);

                var arg = "";
                $.each(response.responseJSON.errors,function (key,error) {
                    arg += "<br/>";
                    if (error.variables != null && error.variables.property != null) {
                        arg += error.variables.property + ': ';
                    }
                    arg += error.message;
                });
                $('#messageImport_errorTitle').text(response.responseJSON.message);
                $('#messageImport_errorDetail').html(arg);
                $('#messageImport_erreur').removeClass('hide');
                $('#messageImport_cancel').click();
                $('#messageImport_submit').attr('disabled',false);
                $('#messageImport_cancel').attr('disabled',false);
            }
        });
    }

    function serialize() {
        var jsonObject = {
            messageFile : $('#messageImport_filesBrowser').data('base64'),
            attachments : [],
            schema : $('#messageImport_schema option:selected').val(),
            filename : $('#messageImport_filesBrowser').data('filename')
        };

        var attachments = $('#messageImport_attachments').find('input');

        $.each(attachments, function() {
            var attachement = {
                filename : $(this).val(),
                data     : $(this).data('base64')
            };
            jsonObject.attachments.push(attachement);
        })

        return jsonObject;
    }

</script>