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             function status(msg) {
  18                 clearTimeout(statusTimeout);
  19                 statusTimeout = setTimeout(function() {
  20                     $('#status').text('');
  21                 }, 3000);
  22
  23                 $('#status').text(msg);
  24             }
  25
  26             filex.files.on('change:checked', function() {
  27                 var selected = filex.selectedFiles().length;
  28
  29                 $('#btn-rename').toggleClass('disabled', selected != 1);
  30                 $('#btn-delete').toggleClass('disabled', selected == 0);
  31             });
  32
  33             $('#btn-upload').on('click', function() {
  34                 var url = '{% url 'gridftp_upload' %}?' + $.param({host: filex.host, path: filex.path.full() + '/'});
  35
  36                 var win = window.open(url, url, 'height=500,width=800');
  37                 win.focus();
  38             });
  39
  40             $('#btn-delete').on('click', function() {
  41                 var selected = _.groupBy(filex.selectedFiles(), function(item) { return item.get('type') }),
  42                     dirs = _.map(selected.directory || [], function (item) { return item.get('name') }),
  43                     files = _.map(selected.file || [], function (item) { return item.get('name') }),
  44                     data = {
  45                         host: filex.host,
  46                         path: filex.path.full() + '/',
  47                         dirs: dirs,
  48                         files: files
  49                     },
  50                     $confirmModal = $('#confirm-modal'),
  51                     $confirmList = $confirmModal.find('ul').html('');
  52
  53                 _.each(filex.selectedFiles(), function(item) {
  54                     $('<li>', {text: item.get('name')}).appendTo($confirmList);
  55                 });
  56
  57                 $('#btn-confirm').off().on('click', function() {
  58                     filex.busy();
  59
  60                     $.post('{% url 'filex:delete' %}', data, function(response) {
  61                         var keys = Object.keys(response.fail);
  62
  63                         if (keys.length) {
  64                             var $errorModal = $('#error-modal'),
  65                                 $errorList = $errorModal.find('dl').html('');
  66
  67                             for (var i in keys) {
  68                                 $('<dt>', {text: keys[i]}).appendTo($errorList);
  69                                 $('<dd>', {text: response.fail[keys[i]]}).appendTo($errorList);
  70                             }
  71
  72                             $errorModal.modal();
  73                             filex.idle();
  74                         }
  75                         else {
  76                             status('Usuwanie zakończone pomyślnie');
  77                         }
  78
  79                         if (response.done.length)
  80                             filex.reloadFiles();
  81
  82                     }, 'json');
  83
  84                     $confirmModal.modal('hide');
  85                 });
  86
  87                 $confirmModal.modal();
  88             });
  89
  90             $('#mkdir-form').submit(function(e) {
  91                 var $this = $(this);
  92
  93                 e.preventDefault();
  94                 filex.busy();
  95                 $this.modal('hide');
  96
  97                 $this.find('#id_host').val(filex.host);
  98                 $this.find('#id_path').val(filex.path.full());
  99
 100                 $.post($this.attr('action'), $this.serialize(), function(response) {
 101                     status('Katalog utworzono pomyślnie');
 102                     filex.reloadFiles();
 103                 }, 'json')
 104             });
 105         })
 106     </script>
 107 {% endblock extra_js %}
 108
 109 {% block title %}Zarządzanie plikami GridFTP{% endblock %}
 110
 111 {% block container %}
 112     {% include 'filex/source.html' %}
 113
 114     <div id="confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal-label" aria-hidden="true">
 115         <div class="modal-dialog">
 116             <div class="modal-content">
 117                 <div class="modal-header">
 118                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 119                         <span aria-hidden="true">&times;</span>
 120                     </button>
 121                     <h4 class="modal-title" id="confirm-modal-label">Usuwanie plików</h4>
 122                 </div>
 123                 <div class="modal-body">
 124                     <h4>Czy na pewno usunąć następujące elementy?</h4>
 125                     <ul></ul>
 126                 </div>
 127                 <div class="modal-footer">
 128                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 129                     <button id="btn-confirm" type="button" class="btn btn-primary">OK</button>
 130                 </div>
 131             </div>
 132         </div>
 133     </div>
 134
 135     <div id="error-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="error-modal-label" aria-hidden="true">
 136         <div class="modal-dialog">
 137             <div class="modal-content">
 138                 <div class="modal-header">
 139                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 140                         <span aria-hidden="true">&times;</span>
 141                     </button>
 142                     <h4 class="modal-title" id="error-modal-label">Błąd</h4>
 143                 </div>
 144                 <div class="modal-body">
 145                     <h4>Wystąpiły problemy podczas usuwania:</h4>
 146                     <dl class="dl-horizontal"></dl>
 147                 </div>
 148                 <div class="modal-footer">
 149                     <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
 150                 </div>
 151             </div>
 152         </div>
 153     </div>
 154
 155     <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">
 156         <div class="modal-dialog">
 157             <div class="modal-content">
 158                 <div class="modal-header">
 159                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 160                         <span aria-hidden="true">&times;</span>
 161                     </button>
 162                     <h4 class="modal-title" id="mkdir-modal-label">Nowy katalog</h4>
 163                 </div>
 164                 <div class="modal-body">
 165                     {% csrf_token %}
 166                     {% bootstrap_form new_dir_form layout='horizontal' %}
 167                 </div>
 168                 <div class="modal-footer">
 169                     <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
 170                     <button type="submit" class="btn btn-primary">OK</button>
 171                 </div>
 172             </div>
 173         </div>
 174     </form>
 175 {% endblock container %}
 176
 177 {% block footer %}
 178     <footer class="navbar navbar-default navbar-fixed-bottom" style="position:fixed">
 179         <div class="container">
 180             <div class="btn-toolbar" role="toolbar" style="float: left">
 181                 <div class="btn-group" role="group">
 182                     <button id="btn-upload" class="btn btn-default navbar-btn">Wgraj plik</button>
 183                     <button class="btn btn-default navbar-btn" data-toggle="modal" data-target="#mkdir-form">Utwórz katalog</button>
 184                 </div>
 185                 <div class="btn-group" role="group">
 186                     <button id="btn-rename" class="btn btn-default navbar-btn disabled">Zmień nazwę</button>
 187                     <button id="btn-delete" class="btn btn-default navbar-btn disabled">Usuń</button>
 188                 </div>
 189             </div>
 190             <p id="status" class="navbar-text"></p>
 191         </div>
 192     </footer>
 193 {% endblock footer %}