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