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