templates/import/javascript.twig

   1 $( function() {
   2     {# Add event when user click on "Go" button #}
   3     $("#buttonGo").on("click", function() {
   4         {# Hide form #}
   5         $("#upload_form_form").css("display", "none");
   6
   7         {% if handler != 'PhpMyAdmin\\Plugins\\Import\\Upload\\UploadNoplugin' %}
   8             {# Some variable for javascript #}
   9             {% set ajax_url = 'index.php?route=/import-status&id=' ~ upload_id ~ get_common_raw({
  10                 'import_status': 1
  11             }, '&') %}
  12             {% 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|js_format(false) %}
  13             {% set statustext_str = '%s of %s'|trans|escape_js_string %}
  14             {% set second_str = '%s/sec.'|trans|js_format(false) %}
  15             {% set remaining_min = 'About %MIN min. %SEC sec. remaining.'|trans|js_format(false) %}
  16             {% set remaining_second = 'About %SEC sec. remaining.'|trans|js_format(false) %}
  17             {% set processed_str = 'The file is being processed, please be patient.'|trans|js_format(false) %}
  18             {% set import_url = get_common_raw({'import_status': 1}, '&') %}
  19
  20             {% set upload_html %}
  21                     <div class="upload_progress">
  22                         <div class="upload_progress_bar_outer">
  23                             <div class="percentage"></div>
  24                             <div id="status" class="upload_progress_bar_inner">
  25                                 <div class="percentage"></div>
  26                             </div>
  27                         </div>
  28                         <div>
  29                             <img src="{{ theme_image_path }}ajax_clock_small.gif" width="16" height="16" alt="ajax clock"> {{ 'Uploading your import file…'|trans|js_format(false) -}}
  30                         </div>
  31                         <div id="statustext"></div>
  32                     </div>
  33             {% endset %}
  34
  35             {# Start output #}
  36             var finished = false;
  37             var percent  = 0.0;
  38             var total    = 0;
  39             var complete = 0;
  40             var original_title = parent && parent.document ? parent.document.title : false;
  41             var import_start;
  42
  43             var perform_upload = function () {
  44             new $.getJSON(
  45                 "{{ ajax_url|raw }}",
  46                 {},
  47                 function(response) {
  48                     finished = response.finished;
  49                     percent = response.percent;
  50                     total = response.total;
  51                     complete = response.complete;
  52
  53                     if (total==0 && complete==0 && percent==0) {
  54                         $("#upload_form_status_info").html('<img src="{{ theme_image_path }}ajax_clock_small.gif" width="16" height="16" alt="ajax clock"> {{ promot_str|raw }}');
  55                         $("#upload_form_status").css("display", "none");
  56                     } else {
  57                         var now = new Date();
  58                         now = Date.UTC(
  59                             now.getFullYear(),
  60                             now.getMonth(),
  61                             now.getDate(),
  62                             now.getHours(),
  63                             now.getMinutes(),
  64                             now.getSeconds())
  65                             + now.getMilliseconds() - 1000;
  66                         var statustext = Functions.sprintf(
  67                             "{{ statustext_str|raw }}",
  68                             Functions.formatBytes(
  69                                 complete, 1, Messages.strDecimalSeparator
  70                             ),
  71                             Functions.formatBytes(
  72                                 total, 1, Messages.strDecimalSeparator
  73                             )
  74                         );
  75
  76                         if ($("#importmain").is(":visible")) {
  77                             {# Show progress UI #}
  78                             $("#importmain").hide();
  79                             $("#import_form_status")
  80                             .html('{{ upload_html|spaceless|raw }}')
  81                             .show();
  82                             import_start = now;
  83                         }
  84                         else if (percent > 9 || complete > 2000000) {
  85                             {# Calculate estimated time #}
  86                             var used_time = now - import_start;
  87                             var seconds = parseInt(((total - complete) / complete) * used_time / 1000);
  88                             var speed = Functions.sprintf(
  89                                 "{{ second_str|raw }}",
  90                                 Functions.formatBytes(complete / used_time * 1000, 1, Messages.strDecimalSeparator)
  91                             );
  92
  93                             var minutes = parseInt(seconds / 60);
  94                             seconds %= 60;
  95                             var estimated_time;
  96                             if (minutes > 0) {
  97                                 estimated_time = "{{ remaining_min|raw }}"
  98                                     .replace("%MIN", minutes)
  99                                     .replace("%SEC", seconds);
 100                             }
 101                             else {
 102                                 estimated_time = "{{ remaining_second|raw }}"
 103                                 .replace("%SEC", seconds);
 104                             }
 105
 106                             statustext += "<br>" + speed + "<br><br>" + estimated_time;
 107                         }
 108
 109                         var percent_str = Math.round(percent) + "%";
 110                         $("#status").animate({width: percent_str}, 150);
 111                         $(".percentage").text(percent_str);
 112
 113                         {# Show percent in window title #}
 114                         if (original_title !== false) {
 115                             parent.document.title
 116                                 = percent_str + " - " + original_title;
 117                         }
 118                         else {
 119                             document.title
 120                                 = percent_str + " - " + original_title;
 121                         }
 122                         $("#statustext").html(statustext);
 123                     }
 124
 125                     if (finished == true) {
 126                         if (original_title !== false) {
 127                             parent.document.title = original_title;
 128                         }
 129                         else {
 130                             document.title = original_title;
 131                         }
 132                         $("#importmain").hide();
 133                         {# Loads the message, either success or mysql error #}
 134                         $("#import_form_status")
 135                         .html('<img src="{{ theme_image_path }}ajax_clock_small.gif" width="16" height="16" alt="ajax clock"> {{ processed_str|raw }}')
 136                         .show();
 137                         $("#import_form_status").load("index.php?route=/import-status&message=true&{{ import_url|raw }}");
 138                         Navigation.reload();
 139
 140                         {# If finished #}
 141                     }
 142                     else {
 143                         setTimeout(perform_upload, 1000);
 144                     }
 145                 });
 146             };
 147             setTimeout(perform_upload, 1000);
 148         {% else %}
 149             {# No plugin available #}
 150             {% set image_tag -%}
 151                 <img src="{{ theme_image_path -}}
 152                     ajax_clock_small.gif" width="16" height="16" alt="ajax clock">
 153                 {{- 'Please be patient, the file is being uploaded. Details about the upload are not available.'|trans|js_format(false) -}}
 154                 {{- show_docu('faq', 'faq2-9') -}}
 155             {%- endset %}
 156             $('#upload_form_status_info').html('{{ image_tag|raw }}');
 157             $("#upload_form_status").css("display", "none");
 158         {% endif %}
 159     });
 160 });