X-Git-Url: http://mmka.chem.univ.gda.pl/gitweb/?a=blobdiff_plain;f=qcg%2Ftemplates%2Fqcg%2Fgridftp.html;h=e75e621d4c856cb0034d8d9fa5446df7b6f6e32c;hb=7e5bf1ffbcf2dd1d728102f531520258958602d2;hp=7b2cd6513913aabf56774360f8badf3c104d27fd;hpb=0898eeafb0687d5cfb97f1b5038e665a7d01ec60;p=qcg-portal.git

diff --git a/qcg/templates/qcg/gridftp.html b/qcg/templates/qcg/gridftp.html
index 7b2cd65..e75e621 100644
--- a/qcg/templates/qcg/gridftp.html
+++ b/qcg/templates/qcg/gridftp.html
@@ -1,107 +1,395 @@
 {% extends 'qcg/base.html' %}
-{% load staticfiles %}
+{% load staticfiles bootstrap3 %}
 
 {% block extra_css %}
     <link href="{% static 'qcg/selectize/selectize.bootstrap3.css' %}" rel="stylesheet">
+
+    <style>
+        html {
+            height: 100%;
+        }
+
+        body {
+            height: 100%;
+            margin-bottom: 0;
+        }
+
+        body > .container {
+            height: calc(100% - 122px);
+            overflow-y: hidden;
+        }
+    </style>
 {% endblock %}
 
 {% block extra_js %}
-    <script src="{% static 'qcg/selectize/selectize.min.js' %}"></script>
-    <script src="{% static 'filex/underscore/underscore.js' %}"></script>
-    <script src="{% static 'filex/backbone/backbone.js' %}"></script>
-    <script src="{% static 'filex/filex.js' %}"></script>
+    <script src="{% static 'qcg/cookie/jquery.cookie.min.js' %}"></script>
+    <script src="{% static 'qcg/globals.js' %}"></script>
+    {% include 'filex/source.js.html' %}
 
     <script>
-        var app;
-        $(function() {
-            app = new Filex.FilexView({
-                host: 'qcg.man.poznan.pl',
-                hostOptions: [
-                    {host: 'qcg.man.poznan.pl', path: '/home/plgrid/{{ request.user.username }}/reef'},
-                    {host: 'ui.grid.icm.edu.pl', path: '/icm/hydra/home/grid/{{ request.user.username }}'},
-                    {host: 'ui.plgrid.wcss.wroc.pl', path: '/home/grid/users/{{ request.user.username }}'},
-                    {host: 'ui.grid.task.gda.pl', path: '/home/plgrid/{{ request.user.username }}'},
-                    {host: 'zeus.cyfronet.pl', path: '/people/{{ request.user.username }}'}
-                ]
+        var filex = filex || {},
+            hostArchiveSupport = ['moss.man.poznan.pl', 'ui.plgrid.wcss.wroc.pl'];
+
+        $(function () {
+            'use strict';
+
+            filex.initialLoad();
+
+            var statusTimeout;
+
+            String.prototype.endsWith = function(suffix) {
+                return this.indexOf(suffix, this.length - suffix.length) !== -1;
+            };
+
+            function status(msg) {
+                clearTimeout(statusTimeout);
+                statusTimeout = setTimeout(function() {
+                    $('#status').text('');
+                }, 3000);
+
+                $('#status').text(msg);
+            }
+
+            function failModal(msg) {
+                return function(xhr) {
+                    var $errorModal = $('#error-modal');
+
+                    $errorModal.find('#error-modal-label').text('Błąd serwera');
+                    $errorModal.find('.modal-body').html($('<h4>', {text: msg}));
+
+                    var error = (xhr.responseJSON || {}).error || undefined;
+
+                    if (typeof error === 'string')
+                        $errorModal.find('.modal-body').append($('<pre>', {text: error}));
+
+                    filex.idle();
+                    $errorModal.modal();
+
+                    console.error(arguments);
+                };
+            }
+
+            function conflictingName(name, modal) {
+                if (filex.files.some(function(item) { return item.get('name') == name })) {
+                    $('<div>', {
+                        'class': 'alert alert-danger',
+                        html: '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Plik o podanej nazwie już istnieje!'
+                    }).prependTo(modal.find('.modal-body'));
+
+                    return true;
+                }
+
+                return false;
+            }
+
+            filex.files.on('change:checked reset', function() {
+                var selected = filex.selectedFiles().length,
+                    supportsArchive = hostArchiveSupport.indexOf(filex.host) != -1;
+
+                $('#btn-rename').toggleClass('disabled', selected != 1);
+                $('#btn-delete').toggleClass('disabled', selected == 0);
+                $('#btn-compress').toggleClass('disabled', !supportsArchive || selected == 0);
+
+                if (supportsArchive && selected == 1) {
+                    var filename = filex.selectedFiles()[0].get('name'),
+                        is_archive = _.some(['.zip', '.tar.gz', '.tgz', '.tar.bz2', 'tbz'], function(ext) {
+                            return filename.endsWith(ext);
+                        });
+
+                    $('#btn-extract').toggleClass('disabled', !is_archive);
+                }
+                else {
+                    $('#btn-extract').addClass('disabled');
+                }
             });
-        });
-    </script>
 
-    <script type="text/template" id="path-bit-template">
-        <a href="#"><%= name %></a>
-    </script>
+            $('form').on('show.bs.modal', function() {
+                $(this).find('.alert').remove();
+                this.reset();
+            }).on('shown.bs.modal', function() {
+                $(this).find('input[type="text"]')[0].focus();
+            });
 
-    <script type="text/template" id="dir-template">
-        <td class="text-center"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></td>
-        <td><a class="link" href="#"><%= name %></a></td>
-        <td class="text-right"><%= size %></td>
-        <td><%= date %></td>
-    </script>
+            $('#btn-upload').on('click', function() {
+                var url = '{% url 'gridftp_upload' %}?' + $.param({host: filex.host, path: filex.path.full()});
+
+                var win = window.open(url, url, 'height=500,width=800');
+                win.focus();
+            });
+
+            $('#btn-delete').on('click', function() {
+                var selected = _.groupBy(filex.selectedFiles(), function(item) { return item.get('type') }),
+                    path = filex.path.full() + '/',
+                    dirs = _.map(selected.directory || [], function (item) { return path + item.get('name') }),
+                    files = _.map(selected.file || [], function (item) { return path + item.get('name') }),
+                    data = {
+                        host: filex.host,
+                        dirs: dirs,
+                        files: files
+                    },
+                    $confirmModal = $('#confirm-modal'),
+                    $confirmList = $confirmModal.find('ul').html('');
+
+                _.each(filex.selectedFiles(), function(item) {
+                    $('<li>', {text: item.get('name')}).appendTo($confirmList);
+                });
+
+                $('#btn-confirm').off().on('click', function() {
+                    filex.busy();
+
+                    $.post('{% url 'filex:delete' %}', data, function(response) {
+                        var keys = Object.keys(response.fail);
+
+                        if (keys.length) {
+                            var $errorModal = $('#error-modal'),
+                                $errorBody = $errorModal.find('.modal-body')
+                                                        .html($('<h4>', {text: 'Wystąpiły problemy podczas usuwania:'})),
+                                $errorList = $('<dl>', {'class': 'dl-horizontal'}).appendTo($errorBody);
+
+                            $errorModal.find('#error-modal-label').text('Błąd');
+
+                            for (var i in keys) {
+                                if(keys.hasOwnProperty(i)) {
+                                    $('<dt>', {text: keys[i].replace(path, '')}).appendTo($errorList);
+                                    $('<dd>', {text: response.fail[keys[i]]}).appendTo($errorList);
+                                }
+                            }
+
+                            $errorModal.modal();
+                            filex.idle();
+                        }
+                        else {
+                            status('Usuwanie zakończone pomyślnie');
+                        }
 
-    <script type="text/template" id="file-template">
-        <td class="text-center"><span class="glyphicon glyphicon-file" aria-hidden="true"></span></td>
-        <td>
-            <a href="{% url 'filex:download' %}?<%= url_params %>" class="btn btn-default btn-xs pull-right link" title="Pobierz plik">
-                <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>
-            </a>
-            <%= name %>
-        </td>
-        <td class="text-right"><%= size %></td>
-        <td><%= date %></td>
+                        if (response.done.length)
+                            filex.reloadFiles();
+
+                    }, 'json').fail(failModal('Nie udało się usunąć plików'));
+
+                    $confirmModal.modal('hide');
+                });
+
+                $confirmModal.modal();
+            });
+
+            $('#mkdir-form').on('submit', function(e) {
+                var $this = $(this);
+
+                e.preventDefault();
+
+                if (conflictingName($this.find('#id_name').val(), $this))
+                    return;
+
+                filex.busy();
+                $this.modal('hide');
+
+                $this.find('#id_host').val(filex.host);
+                $this.find('#id_path').val(filex.path.full());
+
+                $.post($this.attr('action'), $this.serialize(), function() {
+                    status('Katalog utworzono pomyślnie');
+                    filex.reloadFiles();
+                }, 'json').fail(failModal('Nie udało się utworzyć katalogu'));
+            });
+
+            $('#rename-form').on('show.bs.modal', function() {
+                $(this).find('#id_dst').val(filex.selectedFiles()[0].get('name'));
+            }).on('submit', function(e) {
+                e.preventDefault();
+
+                var $this = $(this),
+                    path = filex.path.full() + '/',
+                    newName = $this.find('#id_dst').val(),
+                    data = {
+                        host: filex.host,
+                        src: path + filex.selectedFiles()[0].get('name'),
+                        dst: path + newName
+                    };
+
+                if (conflictingName(newName, $this))
+                    return;
+
+                filex.busy();
+                $this.modal('hide');
+
+                $.post($this.attr('action'), data, function() {
+                    status('Nazwę zmieniono pomyślnie');
+                    filex.reloadFiles();
+                }, 'json').fail(failModal('Nie udało się zmienić nazwy'));
+            });
+
+            $('#compress-form').on('submit', function(e) {
+                e.preventDefault();
+
+                var $this = $(this),
+                    name = $this.find('#id_archive').val(),
+                    type = $this.find('#id_type').val(),
+                    path = filex.path.full(),
+                    archive = name + (name.endsWith(type) ? '' : type),
+                    data = {
+                        host: filex.host,
+                        path: path,
+                        files: _.map(filex.selectedFiles(), function (item) { return item.get('name') }),
+                        archive: path  + '/' + archive
+                    };
+
+                if (conflictingName(archive, $this))
+                    return;
+
+                filex.busy();
+                $this.modal('hide');
+
+                $.post($this.attr('action'), data, function() {
+                    status('Archiwum utworzono pomyślnie');
+                    filex.reloadFiles();
+                }, 'json').fail(failModal('Nie udało się utworzyć archiwum'));
+            });
+
+            $('#btn-extract').on('click', function() {
+                filex.busy();
+
+                var data = {
+                    host: filex.host,
+                    path: filex.path.full() + '/' + filex.selectedFiles()[0].get('name'),
+                    dst: filex.path.full()
+                };
+
+                $.post('{% url 'filex:extract' %}', data, function() {
+                    status('Archiwum rozpakowano pomyślnie');
+                    filex.reloadFiles();
+                }, 'json').fail(failModal('Nie udało się rozpakować archiwum'));
+            });
+        })
     </script>
 {% endblock extra_js %}
 
+{% block title %}Zarządzanie plikami GridFTP{% endblock %}
+
 {% block container %}
-    <h1 class="page-header">{% block title %}Zarządzanie plikami GridFTP{% endblock %}</h1>
-
-    <div id="filex">
-        <div class="row">
-            <div class="col-sm-3">
-                <div id="host-controls" style="margin-top: 1px">
-                    <div class="change">
-                        <label for="host-selector" class="sr-only">Wybierz host</label>
-                        <select id="host-selector"></select>
-                    </div>
-                    <button class="btn btn-default view"></button>
+    {% include 'filex/source.html' %}
+
+    <div id="confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-modal-label" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="confirm-modal-label">Usuwanie plików</h4>
+                </div>
+                <div class="modal-body">
+                    <h4>Czy na pewno usunąć następujące elementy?</h4>
+                    <ul></ul>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
+                    <button id="btn-confirm" type="button" class="btn btn-primary">OK</button>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <div class="col-sm-7">
-                <ol class="breadcrumb path"></ol>
+    <div id="error-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="error-modal-label" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="error-modal-label"></h4>
+                </div>
+                <div class="modal-body">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
+                </div>
             </div>
+        </div>
+    </div>
 
-            <div class="col-sm-2 text-right">
-                <div class="btn-group" data-toggle="buttons" style="margin-top: 1px">
-                    <label class="btn btn-default">
-                        <input id="show-hidden" type="checkbox" autocomplete="off"> Pokaż ukryte
-                    </label>
+    <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">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="mkdir-modal-label">Nowy katalog</h4>
+                </div>
+                <div class="modal-body">
+                    {% csrf_token %}
+                    {% bootstrap_form new_dir_form layout='horizontal' %}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-primary">OK</button>
                 </div>
             </div>
         </div>
+    </form>
 
-        <table class="table table-hover">
-            <thead>
-                <tr>
-                    <th style="width: 40px"></th>
-                    <th>Nazwa</th>
-                    <th style="width: 120px">Rozmiar</th>
-                    <th style="width: 200px">Data</th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-        </table>
-
-        <div id="no-items" class="alert alert-info" hidden>
-            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
-            Brak elementów
+    <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">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="rename-modal-label">Zmień nazwę</h4>
+                </div>
+                <div class="modal-body">
+                    {% csrf_token %}
+                    {% bootstrap_form rename_form layout='horizontal' %}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-primary">OK</button>
+                </div>
+            </div>
         </div>
+    </form>
 
-        <div id="error" class="alert alert-danger" hidden>
-            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-            <span class="msg"></span>
+    <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">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="compress-modal-label">Podaj nazwę archiwum</h4>
+                </div>
+                <div class="modal-body">
+                    {% csrf_token %}
+                    {% bootstrap_form archive_form layout='horizontal' %}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
+                    <button type="submit" class="btn btn-primary">OK</button>
+                </div>
+            </div>
         </div>
-
-        <div id="spinner-overlay"></div>
-    </div>
-
+    </form>
 {% endblock container %}
+
+{% block footer %}
+    <footer class="navbar navbar-default navbar-fixed-bottom">
+        <div class="container">
+            <div class="btn-toolbar" role="toolbar" style="float: left">
+                <div class="btn-group" role="group">
+                    <button id="btn-upload" class="btn btn-default navbar-btn">Wgraj plik</button>
+                    <button class="btn btn-default navbar-btn" data-toggle="modal" data-target="#mkdir-form">Utwórz katalog</button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button id="btn-rename" class="btn btn-default navbar-btn disabled" data-toggle="modal" data-target="#rename-form">Zmień nazwę</button>
+                    <button id="btn-delete" class="btn btn-default navbar-btn disabled">Usuń</button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button id="btn-compress" class="btn btn-default navbar-btn disabled" data-toggle="modal" data-target="#compress-form">Spakuj</button>
+                    <button id="btn-extract" class="btn btn-default navbar-btn disabled">Rozpakuj</button>
+                </div>
+            </div>
+            <p id="status" class="navbar-text"></p>
+        </div>
+    </footer>
+{% endblock footer %}