qcg/templates/qcg/gridftp.html

   1 {% extends 'qcg/base.html' %}
   2 {% load staticfiles bootstrap3 %}
   3
   4 {% block extra_css %}
   5     <link href="{% static 'qcg/selectize/selectize.bootstrap3.css' %}" rel="stylesheet">
   6 {% endblock %}
   7
   8 {% block extra_js %}
   9     <script src="{% static 'qcg/cookie/jquery.cookie.min.js' %}"></script>
  10     <script src="{% static 'qcg/globals.js' %}"></script>
  11     {% include 'filex/source.js.html' %}
  12
  13     <script>
  14         var filex = filex || {};
  15
  16         $(function () {
  17             'use strict';
  18
  19             filex.initialLoad();
  20
  21             var statusTimeout;
  22
  23             String.prototype.endsWith = function(suffix) {
  24                 return this.indexOf(suffix, this.length - suffix.length) !== -1;
  25             };
  26
  27             function status(msg) {
  28                 clearTimeout(statusTimeout);
  29                 statusTimeout = setTimeout(function() {
  30                     $('#status').text('');
  31                 }, 3000);
  32
  33                 $('#status').text(msg);
  34             }
  35
  36             function failModal(msg) {
  37                 return function() {
  38                     var $errorModal = $('#error-modal');
  39
  40                     $errorModal.find('#error-modal-label').text('Błąd serwera');
  41                     $errorModal.find('.modal-body').html($('<h4>', {text: msg}));
  42
  43                     filex.idle();
  44                     $errorModal.modal();
  45
  46                     console.error(arguments);
  47                 };
  48             }
  49
  50             filex.files.on('change:checked reset', function() {
  51                 var selected = filex.selectedFiles().length;
  52
  53                 $('#btn-rename').toggleClass('disabled', selected != 1);
  54                 $('#btn-delete').toggleClass('disabled', selected == 0);
  55                 $('#btn-compress').toggleClass('disabled', selected == 0);
  56
  57                 if (selected == 1) {
  58                     var filename = filex.selectedFiles()[0].get('name'),
  59                         is_archive = _.some(['.zip', '.tar.gz', '.tgz', '.tar.bz2', 'tbz'], function(ext) {
  60                             return filename.endsWith(ext);
  61                         });
  62
  63                     $('#btn-extract').toggleClass('disabled', !is_archive);
  64                 }
  65                 else {
  66                     $('#btn-extract').addClass('disabled');
  67                 }
  68             });
  69
  70             $('#btn-upload').on('click', function() {
  71                 var url = '{% url 'gridftp_upload' %}?' + $.param({host: filex.host, path: filex.path.full() + '/'});
  72
  73                 var win = window.open(url, url, 'height=500,width=800');
  74                 win.focus();
  75             });
  76
  77             $('#btn-delete').on('click', function() {
  78                 var selected = _.groupBy(filex.selectedFiles(), function(item) { return item.get('type') }),
  79                     dirs = _.map(selected.directory || [], function (item) { return item.get('name') }),
  80                     files = _.map(selected.file || [], function (item) { return item.get('name') }),
  81                     data = {
  82                         host: filex.host,
  83                         path: filex.path.full() + '/',
  84                         dirs: dirs,
  85                         files: files
  86                     },
  87                     $confirmModal = $('#confirm-modal'),
  88                     $confirmList = $confirmModal.find('ul').html('');
  89
  90                 _.each(filex.selectedFiles(), function(item) {
  91                     $('<li>', {text: item.get('name')}).appendTo($confirmList);
  92                 });
  93
  94                 $('#btn-confirm').off().on('click', function() {
  95                     filex.busy();
  96
  97                     $.post('{% url 'filex:delete' %}', data, function(response) {
  98                         var keys = Object.keys(response.fail);
  99
 100                         if (keys.length) {
 101                             var $errorModal = $('#error-modal'),
 102                                 $errorBody = $errorModal.find('.modal-body')
 103                                                         .html($('<h4>', {text: 'Wystąpiły problemy podczas usuwania:'})),
 104                                 $errorList = $('<dl>', {'class': 'dl-horizontal'}).appendTo($errorBody);
 105
 106                             $errorModal.find('#error-modal-label').text('Błąd');
 107
 108                             for (var i in keys) {
 109                                 $('<dt>', {text: keys[i]}).appendTo($errorList);
 110                                 $('<dd>', {text: response.fail[keys[i]]}).appendTo($errorList);
 111                             }
 112
 113                             $errorModal.modal();
 114                             filex.idle();
 115                         }
 116                         else {
 117                             status('Usuwanie zakończone pomyślnie');
 118                         }
 119
 120                         if (response.done.length)
 121                             filex.reloadFiles();
 122
 123                     }, 'json').fail(failModal('Nie udało się usunąć plików'));
 124
 125                     $confirmModal.modal('hide');
 126                 });
 127
 128                 $confirmModal.modal();
 129             });
 130
 131             $('#mkdir-form').on('submit', function(e) {
 132                 var $this = $(this);
 133
 134                 e.preventDefault();
 135                 filex.busy();
 136                 $this.modal('hide');
 137
 138                 $this.find('#id_host').val(filex.host);
 139                 $this.find('#id_path').val(filex.path.full());
 140
 141                 $.post($this.attr('action'), $this.serialize(), function() {
 142                     status('Katalog utworzono pomyślnie');
 143                     filex.reloadFiles();
 144                 }, 'json').fail(failModal('Nie udało się utworzyć katalogu'));
 145             });
 146
 147             $('#rename-form').on('show.bs.modal', function() {
 148                 var $this = $(this);
 149
 150                 var file = filex.selectedFiles()[0];
 151
 152                 $this.find('#id_host').val(filex.host);
 153                 $this.find('#id_path').val(filex.path.full());
 154                 $this.find('#id_src').val(file.get('name'));
 155                 $this.find('#id_dst').val(file.get('name'));
 156             }).on('submit', function(e) {
 157                 var $this = $(this);
 158
 159                 e.preventDefault();
 160                 filex.busy();
 161                 $this.modal('hide');
 162
 163                 $.post($this.attr('action'), $this.serialize(), function() {
 164                     status('Nazwę zmieniono pomyślnie');
 165                     filex.reloadFiles();
 166                 }, 'json').fail(failModal('Nie udało się zmienić nazwy'));
 167             });
 168
 169             $('#compress-form').on('submit', function(e) {
 170                 e.preventDefault();
 171
 172                 var $this = $(this),
 173                     name = $this.find('#id_name').val(),
 174                     type = $this.find('#id_type').val(),
 175                     archive = name + (name.endsWith(type) ? '' : type),
 176                     data = {
 177                         host: filex.host,
 178                         path: filex.path.full(),
 179                         files: _.map(filex.selectedFiles(), function (item) { return item.get('name') }),
 180                         archive: archive
 181                     };
 182
 183                 // check if maybe file with given name exists
 184                 if (filex.files.some(function(item) { return item.get('name') == archive })) {
 185                     $this.find('.alert').remove();
 186
 187                     $('<div>', {
 188                         'class': 'alert alert-danger',
 189                         html: '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Plik o podanej już nazwie istnieje!'
 190                     }).prependTo($this.find('.modal-body'));
 191
 192                     return;
 193                 }
 194
 195                 filex.busy();
 196                 $this.modal('hide');
 197
 198                 $.post($this.attr('action'), data, function() {
 199                     status('Archiwum utworzono pomyślnie');
 200                     filex.reloadFiles();
 201                 }, 'json').fail(failModal('Nie udało się utworzyć archiwum'));
 202             });
 203
 204             $('#btn-extract').on('click', function() {
 205                 filex.busy();
 206
 207                 var data = {
 208                     host: filex.host,
 209                     archive: filex.path.full() + '/' + filex.selectedFiles()[0].get('name'),
 210                     dst: filex.path.full()
 211                 };
 212
 213                 $.post('{% url 'filex:extract' %}', data, function() {
 214                     status('Archiwum rozpakowano pomyślnie');
 215                     filex.reloadFiles();
 216                 }, 'json').fail(failModal('Nie udało się rozpakować archiwum'));
 217             });
 218         })
 219     </script>
 220 {% endblock extra_js %}
 221
 222 {% block title %}Zarządzanie plikami GridFTP{% endblock %}
 223
 224 {% block container %}
 225     {% include 'filex/source.html' %}
 226
 227     <div id="confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal-label" aria-hidden="true">
 228         <div class="modal-dialog">
 229             <div class="modal-content">
 230                 <div class="modal-header">
 231                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 232                         <span aria-hidden="true">&times;</span>
 233                     </button>
 234                     <h4 class="modal-title" id="confirm-modal-label">Usuwanie plików</h4>
 235                 </div>
 236                 <div class="modal-body">
 237                     <h4>Czy na pewno usunąć następujące elementy?</h4>
 238                     <ul></ul>
 239                 </div>
 240                 <div class="modal-footer">
 241                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 242                     <button id="btn-confirm" type="button" class="btn btn-primary">OK</button>
 243                 </div>
 244             </div>
 245         </div>
 246     </div>
 247
 248     <div id="error-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="error-modal-label" aria-hidden="true">
 249         <div class="modal-dialog">
 250             <div class="modal-content">
 251                 <div class="modal-header">
 252                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 253                         <span aria-hidden="true">&times;</span>
 254                     </button>
 255                     <h4 class="modal-title" id="error-modal-label"></h4>
 256                 </div>
 257                 <div class="modal-body">
 258                 </div>
 259                 <div class="modal-footer">
 260                     <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
 261                 </div>
 262             </div>
 263         </div>
 264     </div>
 265
 266     <form id="mkdir-form" action="{% url 'filex:mkdir' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="mkdir-modal-label" aria-hidden="true">
 267         <div class="modal-dialog">
 268             <div class="modal-content">
 269                 <div class="modal-header">
 270                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 271                         <span aria-hidden="true">&times;</span>
 272                     </button>
 273                     <h4 class="modal-title" id="mkdir-modal-label">Nowy katalog</h4>
 274                 </div>
 275                 <div class="modal-body">
 276                     {% csrf_token %}
 277                     {% bootstrap_form new_dir_form layout='horizontal' %}
 278                 </div>
 279                 <div class="modal-footer">
 280                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 281                     <button type="submit" class="btn btn-primary">OK</button>
 282                 </div>
 283             </div>
 284         </div>
 285     </form>
 286
 287     <form id="rename-form" action="{% url 'filex:move' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="rename-modal-label" aria-hidden="true">
 288         <div class="modal-dialog">
 289             <div class="modal-content">
 290                 <div class="modal-header">
 291                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 292                         <span aria-hidden="true">&times;</span>
 293                     </button>
 294                     <h4 class="modal-title" id="rename-modal-label">Zmień nazwę</h4>
 295                 </div>
 296                 <div class="modal-body">
 297                     {% csrf_token %}
 298                     {% bootstrap_form rename_form layout='horizontal' %}
 299                 </div>
 300                 <div class="modal-footer">
 301                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 302                     <button type="submit" class="btn btn-primary">OK</button>
 303                 </div>
 304             </div>
 305         </div>
 306     </form>
 307
 308     <form id="compress-form" action="{% url 'filex:compress' %}" class="modal fade form-horizontal" tabindex="-1" role="dialog" aria-labelledby="compress-modal-label" aria-hidden="true">
 309         <div class="modal-dialog">
 310             <div class="modal-content">
 311                 <div class="modal-header">
 312                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 313                         <span aria-hidden="true">&times;</span>
 314                     </button>
 315                     <h4 class="modal-title" id="compress-modal-label">Podaj nazwę archiwum</h4>
 316                 </div>
 317                 <div class="modal-body">
 318                     {% csrf_token %}
 319                     {% bootstrap_form archive_form layout='horizontal' %}
 320                 </div>
 321                 <div class="modal-footer">
 322                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 323                     <button type="submit" class="btn btn-primary">OK</button>
 324                 </div>
 325             </div>
 326         </div>
 327     </form>
 328 {% endblock container %}
 329
 330 {% block footer %}
 331     <footer class="navbar navbar-default navbar-fixed-bottom" style="position:fixed">
 332         <div class="container">
 333             <div class="btn-toolbar" role="toolbar" style="float: left">
 334                 <div class="btn-group" role="group">
 335                     <button id="btn-upload" class="btn btn-default navbar-btn">Wgraj plik</button>
 336                     <button class="btn btn-default navbar-btn" data-toggle="modal" data-target="#mkdir-form">Utwórz katalog</button>
 337                 </div>
 338                 <div class="btn-group" role="group">
 339                     <button id="btn-rename" class="btn btn-default navbar-btn disabled" data-toggle="modal" data-target="#rename-form">Zmień nazwę</button>
 340                     <button id="btn-delete" class="btn btn-default navbar-btn disabled">Usuń</button>
 341                 </div>
 342                 <div class="btn-group" role="group">
 343                     <button id="btn-compress" class="btn btn-default navbar-btn disabled" data-toggle="modal" data-target="#compress-form">Spakuj</button>
 344                     <button id="btn-extract" class="btn btn-default navbar-btn disabled">Rozpakuj</button>
 345                 </div>
 346             </div>
 347             <p id="status" class="navbar-text"></p>
 348         </div>
 349     </footer>
 350 {% endblock footer %}