diff --git a/js/src/import.js b/js/src/import.js index f4d58c7aa6..e8f97de4d5 100644 --- a/js/src/import.js +++ b/js/src/import.js @@ -1,6 +1,10 @@ import $ from 'jquery'; import { AJAX } from './ajax.js'; import { Functions } from './functions.js'; +import { Navigation } from './navigation.js'; +import { CommonParams } from './common.js'; + +/* global themeImagePath */ // templates/javascript/variables.twig /** * Functions used in the import tab @@ -58,6 +62,7 @@ AJAX.registerTeardown('import.js', function () { $('#input_import_file').off('change').off('focus'); $('#select_local_import_file').off('focus'); $('#text_csv_enclosed').add('#text_csv_escaped').off('keyup'); + $('#importmain #buttonGo').off('click'); }); AJAX.registerOnload('import.js', function () { @@ -155,4 +160,133 @@ AJAX.registerOnload('import.js', function () { } return true; }); + + $('#importmain #buttonGo').on('click', function () { + const uploadProgressInfo = document.getElementById('upload_progress_info'); + const uploadId = uploadProgressInfo.dataset.uploadId; + const handler = uploadProgressInfo.dataset.handler; + + $('#upload_form_form').css('display', 'none'); + + const clockImage = 'ajax clock'; + + if (handler !== 'PhpMyAdmin\\Plugins\\Import\\Upload\\UploadNoplugin') { + var finished = false; + var percent = 0.0; + var total = 0; + var complete = 0; + var originalTitle = parent && parent.document ? parent.document.title : false; + var importStart; + + var performUpload = function () { + $.getJSON( + 'index.php?route=/import-status', + { 'id': uploadId, 'import_status': 1, 'server': CommonParams.get('server') }, + function (response) { + finished = response.finished; + percent = response.percent; + total = response.total; + complete = response.complete; + + if (total === 0 && complete === 0 && percent === 0) { + $('#upload_form_status_info').html(clockImage + ' ' + window.Messages.uploadProgressMaximumAllowedSize); + $('#upload_form_status').css('display', 'none'); + } else { + var now = new Date(); + now = Date.UTC( + now.getFullYear(), + now.getMonth(), + now.getDate(), + now.getHours(), + now.getMinutes(), + now.getSeconds() + ) + now.getMilliseconds() - 1000; + var statusText = Functions.sprintf( + window.Messages.uploadProgressStatusText, + Functions.formatBytes( + complete, 1, window.Messages.strDecimalSeparator + ), + Functions.formatBytes( + total, 1, window.Messages.strDecimalSeparator + ) + ); + + if ($('#importmain').is(':visible')) { + // Show progress UI + $('#importmain').hide(); + const uploadProgressDiv = '
' + + '
' + + '
' + + '
' + + '
' + + '
' + clockImage + ' ' + window.Messages.uploadProgressUploading + '
' + + '
'; + $('#import_form_status').html(uploadProgressDiv).show(); + importStart = now; + } else if (percent > 9 || complete > 2000000) { + // Calculate estimated time + var usedTime = now - importStart; + var seconds = parseInt(((total - complete) / complete) * usedTime / 1000); + var speed = Functions.sprintf( + window.Messages.uploadProgressPerSecond, + Functions.formatBytes(complete / usedTime * 1000, 1, window.Messages.strDecimalSeparator) + ); + + var minutes = parseInt(seconds / 60); + seconds %= 60; + var estimatedTime; + if (minutes > 0) { + estimatedTime = window.Messages.uploadProgressRemainingMin + .replace('%MIN', minutes) + .replace('%SEC', seconds); + } else { + estimatedTime = window.Messages.uploadProgressRemainingSec + .replace('%SEC', seconds); + } + + statusText += '
' + speed + '

' + estimatedTime; + } + + var percentString = Math.round(percent) + '%'; + $('#status').animate({ width: percentString }, 150); + $('.percentage').text(percentString); + + // Show percent in window title + if (originalTitle !== false) { + parent.document.title + = percentString + ' - ' + originalTitle; + } else { + document.title + = percentString + ' - ' + originalTitle; + } + $('#statustext').html(statusText); + } + + if (finished) { + if (originalTitle !== false) { + parent.document.title = originalTitle; + } else { + document.title = originalTitle; + } + $('#importmain').hide(); + // Loads the message, either success or mysql error + $('#import_form_status') + .html(clockImage + ' ' + window.Messages.uploadProgressBeingProcessed) + .show(); + $('#import_form_status').load( + 'index.php?route=/import-status&message=1&import_status=1&server=' + CommonParams.get('server') + ); + Navigation.reload(); + } else { + setTimeout(performUpload, 1000); + } + }); + }; + setTimeout(performUpload, 1000); + } else { + // No plugin available + $('#upload_form_status_info').html(clockImage + ' ' + window.Messages.uploadProgressNoDetails); + $('#upload_form_status').css('display', 'none'); + } + }); }); diff --git a/libraries/classes/Controllers/JavaScriptMessagesController.php b/libraries/classes/Controllers/JavaScriptMessagesController.php index 8f72c29e89..f73581d1d7 100644 --- a/libraries/classes/Controllers/JavaScriptMessagesController.php +++ b/libraries/classes/Controllers/JavaScriptMessagesController.php @@ -853,6 +853,19 @@ final class JavaScriptMessagesController 'These functions are meant to return a binary result; to avoid inconsistent results you should store' . ' it in a BINARY, VARBINARY, or BLOB column.' ), + + 'uploadProgressMaximumAllowedSize' => __( + 'The file being uploaded is probably larger than the maximum allowed size.' + ), + 'uploadProgressStatusText' => __('%s of %s'), + 'uploadProgressPerSecond' => __('%s/sec.'), + 'uploadProgressRemainingMin' => __('About %MIN min. %SEC sec. remaining.'), + 'uploadProgressRemainingSec' => __('About %SEC sec. remaining.'), + 'uploadProgressBeingProcessed' => __('The file is being processed, please be patient.'), + 'uploadProgressUploading' => __('Uploading your import file…'), + 'uploadProgressNoDetails' => __( + 'Please be patient, the file is being uploaded. Details about the upload are not available.' + ), ]; } } diff --git a/templates/import.twig b/templates/import.twig index 4ae8b98cb9..dc63c91c06 100644 --- a/templates/import.twig +++ b/templates/import.twig @@ -9,15 +9,12 @@
+ +
+
ajax clock - -
{{ get_hidden_inputs(hidden_inputs) }} diff --git a/templates/import/javascript.twig b/templates/import/javascript.twig deleted file mode 100644 index 165e0c8a4f..0000000000 --- a/templates/import/javascript.twig +++ /dev/null @@ -1,159 +0,0 @@ -$( function() { - {# Add event when user click on "Go" button #} - $("#buttonGo").on("click", function() { - {# Hide form #} - $("#upload_form_form").css("display", "none"); - - {% if handler != 'PhpMyAdmin\\Plugins\\Import\\Upload\\UploadNoplugin' %} - {# Some variable for javascript #} - {% set ajax_url = 'index.php?route=/import-status&id=' ~ upload_id ~ get_common_raw({ - 'import_status': 1 - }, '&') %} - {% set promot_str = 'The file being uploaded is probably larger than the maximum allowed size or this is a known bug in webkit based (Safari, Google Chrome, Arora etc.) browsers.'|trans %} - {% set statustext_str = '%s of %s'|trans %} - {% set second_str = '%s/sec.'|trans %} - {% set remaining_min = 'About %MIN min. %SEC sec. remaining.'|trans %} - {% set remaining_second = 'About %SEC sec. remaining.'|trans %} - {% set processed_str = 'The file is being processed, please be patient.'|trans %} - {% set import_url = get_common_raw({'import_status': 1}, '&') %} - - {% set upload_html %} -
-
-
-
-
-
-
-
- ajax clock {{ 'Uploading your import file…'|trans|escape('js') -}} -
-
-
- {% endset %} - - {# Start output #} - var finished = false; - var percent = 0.0; - var total = 0; - var complete = 0; - var original_title = parent && parent.document ? parent.document.title : false; - var import_start; - - var perform_upload = function () { - new $.getJSON( - "{{ ajax_url|raw }}", - {}, - function(response) { - finished = response.finished; - percent = response.percent; - total = response.total; - complete = response.complete; - - if (total==0 && complete==0 && percent==0) { - $("#upload_form_status_info").html('ajax clock {{ promot_str|escape('js') }}'); - $("#upload_form_status").css("display", "none"); - } else { - var now = new Date(); - now = Date.UTC( - now.getFullYear(), - now.getMonth(), - now.getDate(), - now.getHours(), - now.getMinutes(), - now.getSeconds()) - + now.getMilliseconds() - 1000; - var statustext = Functions.sprintf( - "{{ statustext_str|escape('js') }}", - Functions.formatBytes( - complete, 1, window.Messages.strDecimalSeparator - ), - Functions.formatBytes( - total, 1, window.Messages.strDecimalSeparator - ) - ); - - if ($("#importmain").is(":visible")) { - {# Show progress UI #} - $("#importmain").hide(); - $("#import_form_status") - .html('{{ upload_html|spaceless|raw }}') - .show(); - import_start = now; - } - else if (percent > 9 || complete > 2000000) { - {# Calculate estimated time #} - var used_time = now - import_start; - var seconds = parseInt(((total - complete) / complete) * used_time / 1000); - var speed = Functions.sprintf( - "{{ second_str|escape('js') }}", - Functions.formatBytes(complete / used_time * 1000, 1, window.Messages.strDecimalSeparator) - ); - - var minutes = parseInt(seconds / 60); - seconds %= 60; - var estimated_time; - if (minutes > 0) { - estimated_time = "{{ remaining_min|escape('js') }}" - .replace("%MIN", minutes) - .replace("%SEC", seconds); - } - else { - estimated_time = "{{ remaining_second|escape('js') }}" - .replace("%SEC", seconds); - } - - statustext += "
" + speed + "

" + estimated_time; - } - - var percent_str = Math.round(percent) + "%"; - $("#status").animate({width: percent_str}, 150); - $(".percentage").text(percent_str); - - {# Show percent in window title #} - if (original_title !== false) { - parent.document.title - = percent_str + " - " + original_title; - } - else { - document.title - = percent_str + " - " + original_title; - } - $("#statustext").html(statustext); - } - - if (finished == true) { - if (original_title !== false) { - parent.document.title = original_title; - } - else { - document.title = original_title; - } - $("#importmain").hide(); - {# Loads the message, either success or mysql error #} - $("#import_form_status") - .html('ajax clock {{ processed_str|raw }}') - .show(); - $("#import_form_status").load("index.php?route=/import-status&message=true&{{ import_url|raw }}"); - Navigation.reload(); - - {# If finished #} - } - else { - setTimeout(perform_upload, 1000); - } - }); - }; - setTimeout(perform_upload, 1000); - {% else %} - {# No plugin available #} - {% set image_tag -%} - ajax clock - {{- 'Please be patient, the file is being uploaded. Details about the upload are not available.'|trans|escape('js') -}} - {{- show_docu('faq', 'faq2-9') -}} - {%- endset %} - $('#upload_form_status_info').html('{{ image_tag|raw }}'); - $("#upload_form_status").css("display", "none"); - {% endif %} - }); -});