filex/templates/filex/upload.js.html

   1 {% load staticfiles %}
   2
   3 <script src="{% static 'filex/fileupload/jquery.ui.widget.js' %}"></script>
   4 <script src="{% static 'filex/fileupload/jquery.iframe-transport.js' %}"></script>
   5 <script src="{% static 'filex/fileupload/jquery.fileupload.js' %}"></script>
   6 <script src="{% static 'filex/underscore/underscore-min.js' %}"></script>
   7 <script src="{% static 'filex/humanize/humanize-duration.js' %}"></script>
   8 <script src="{% static 'qcg/moment/moment.min.js' %}"></script>
   9 <script src="{% static 'qcg/moment/pl.js' %}"></script>
  10
  11 <script>
  12     $(function () {
  13         'use strict';
  14
  15         var host = '{{ host }}',
  16             path = '{{ path }}',
  17             template = _.template($('#template').html()),
  18             conflictTemplate = _.template($('#conflict-template').html()),
  19             $conflictStack = $.when(),
  20             $conflict = $('#conflict').modal({
  21                 show: false,
  22                 keyboard: false,
  23                 backdrop: 'static'
  24             }),
  25             applyToAll;
  26
  27         function humanBytes(bytes, no_unit) {
  28             function format(val, unit) {
  29                 if(no_unit)
  30                     return val;
  31
  32                 return val + ' ' + unit;
  33             }
  34
  35             if(bytes == 0)
  36                 return format('0', 'B');
  37
  38             var k = 1024,
  39                 sizes = ['B', 'KB', 'MB', 'GB', 'TB'],
  40                 i = Math.floor(Math.log(bytes) / Math.log(k));
  41
  42             return format((bytes / Math.pow(k, i)).toFixed(1), sizes[i]);
  43         }
  44
  45         $('#files').fileupload({
  46             sequentialUploads: true,
  47             add: function (e, data) {
  48                 var file = data.files[0];
  49
  50                 data.context = $(template(file));
  51                 $('#elements').append(data.context);
  52
  53                 data.submit();
  54             },
  55             submit: function (e, data) {
  56                 var file = data.files[0],
  57                     $this = $(this);
  58
  59                 data.context.find('.progress-info').text('Przetwarzanie');
  60
  61                 function finish(action) {
  62                     if (action == 'replace')
  63                         data.jqXHR = $this.fileupload('send', data);
  64                     else
  65                         data.context.find('.progress-info').text('Pominięto');
  66                 }
  67
  68                 $.getJSON('{% url 'filex:info' %}', {host: host, path: path + '/' + file.name}, function(response) {
  69                     if (applyToAll != undefined) {
  70                         finish(applyToAll);
  71                         return;
  72                     }
  73
  74                     $conflictStack = $conflictStack.then(function() {
  75                         if (applyToAll != undefined) {
  76                             finish(applyToAll);
  77                             return;
  78                         }
  79
  80                         var deferred = $.Deferred();
  81
  82                         $conflict.one('hidden.bs.modal', function() {
  83                             deferred.resolve();
  84                         });
  85
  86                         $('#btn-skip').off().on('click', function() {
  87                             if ($('#apply-to-all').prop('checked')) {
  88                                 applyToAll = 'skip';
  89                             }
  90
  91                             $conflict.modal('hide');
  92                             finish('skip');
  93                         });
  94                         $('#btn-replace').off().on('click', function() {
  95                             if ($('#apply-to-all').prop('checked')) {
  96                                 applyToAll = 'replace';
  97                             }
  98
  99                             $conflict.modal('hide');
 100                             finish('replace');
 101                         });
 102
 103                         $conflict.find('.modal-body').html(conflictTemplate({
 104                             name: file.name,
 105                             srcDate: moment(file.lastModified),
 106                             srcSize: humanBytes(file.size),
 107                             dstDate: moment(response.date),
 108                             dstSize: humanBytes(response.size)
 109                         }));
 110                         $conflict.modal('show');
 111
 112                         return deferred.promise();
 113                     });
 114
 115                 }).fail(function(xhr, textStatus) {
 116                     // if file does not exist we are good to go
 117                     if (xhr.status == 404)
 118                         finish('replace');
 119                     else {
 120                         data.context.find('.progress-info').text('Błąd');
 121                         console.error("Info query failed: " + textStatus);
 122                     }
 123                 });
 124
 125                 return false;
 126             },
 127             progress: function (e, data) {
 128                 var progress = parseInt(data.loaded / data.total * 100, 10);
 129
 130                 data.context.find('.progress-bar').css('width', progress+'%').attr('aria-valuenow', data.loaded);
 131                 data.context.find('.progress-bar span').text(progress+'%');
 132
 133                 if (data.loaded < data.total) {
 134                     data.context.find('.bit-rate').text(humanBytes(data.bitrate / 8) + '/s');
 135                     data.context.find('.progress-info').text(humanBytes(data.loaded, true) + ' / ' + humanBytes(data.total));
 136                 }
 137             },
 138             progressall: function (e, data) {
 139                 var remaining = (data.total - data.loaded) / (data.bitrate / 8);
 140
 141                 if (remaining) {
 142                     $('#btn-close').hide();
 143                     $('#status').text('Pozostało ' + (humanizeDuration(remaining * 1000, {language: 'pl', round: true}) || 'kilka sekund'));
 144                 }
 145                 else {
 146                     $('#btn-close').show();
 147                     $('#status').text('');
 148                 }
 149             },
 150             done: function (e, data) {
 151                 data.context.find('.bit-rate').text('');
 152                 data.context.find('.progress-info').text('Zakończono');
 153             },
 154             fail: function (e, data) {
 155                 data.context.find('.progress-info').text((data.jqXHR.responseJSON || {}).error || 'Błąd');
 156                 console.error(data);
 157             }
 158         });
 159
 160         $(window).on('beforeunload', function() {
 161             var $files = $('#files');
 162             if ($files.length && $files.fileupload('active'))
 163                 return 'Nie zakończono przesyłania wszystkich plików, czy chcesz kontynuować?';
 164         });
 165
 166         $(window).on('dragenter dragleave drop', function() {
 167             $('#drop-overlay').toggleClass('in');
 168         })
 169
 170     });
 171 </script>
 172
 173 <script type="text/template" id="template">
 174     <div class="item">
 175         <div class="text clearfix">
 176             <span class="name"><%= name %></span>
 177             <span class="status pull-right">
 178                 <em class="small bit-rate" style="margin-right: 15px"></em>
 179                 <span class="text-muted progress-info">Oczekiwanie</span>
 180             </span>
 181         </div>
 182
 183         <div class="progress">
 184             <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="<%= size %>" style="width: 0;">
 185                 <span class="sr-only">0%</span>
 186             </div>
 187         </div>
 188     </div>
 189 </script>
 190
 191 <script type="text/template" id="conflict-template">
 192     <h4>W wybranej lokalizacji plik o nazwie <em><%= name %></em> już istnieje!</h4>
 193
 194     <table class="table">
 195         <thead>
 196             <tr>
 197                 <th></th>
 198                 <th>Lokalny</th>
 199                 <th>Zdalny</th>
 200             </tr>
 201         </thead>
 202         <tbody>
 203             <tr>
 204                 <th scope="row">Data modyfikacji</th>
 205                 <td><%= srcDate.format('D MMM YYYY, h:mm') %></td>
 206                 <td><%= dstDate.format('D MMM YYYY, h:mm') %></td>
 207             </tr>
 208             <tr>
 209                 <th scope="row">Rozmiar</th>
 210                 <td><%= srcSize %></td>
 211                 <td><%= dstSize %></td>
 212             </tr>
 213         </tbody>
 214     </table>
 215 </script>