<!--# 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"> </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"> </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'> </i> Cancel</button> <button class="btn btn-success" id="messageImport_submit" title="Import"><i class='fa fa-level-down'> </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>