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