{% extends 'qcg/base.html' %}
-{% load staticfiles %}
+{% load staticfiles bootstrap3 %}
{% block extra_css %}
<link href="{% static 'qcg/selectize/selectize.bootstrap3.css' %}" rel="stylesheet">
{% 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 || {};
+
+ $(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() {
+ var $errorModal = $('#error-modal');
+
+ $errorModal.find('#error-modal-label').text('Błąd serwera');
+ $errorModal.find('.modal-body').html($('<h4>', {text: msg}));
+
+ filex.idle();
+ $errorModal.modal();
+
+ console.error(arguments);
+ };
+ }
+
+ filex.files.on('change:checked reset', function() {
+ var selected = filex.selectedFiles().length;
+
+ $('#btn-rename').toggleClass('disabled', selected != 1);
+ $('#btn-delete').toggleClass('disabled', selected == 0);
+ $('#btn-compress').toggleClass('disabled', selected == 0);
+
+ if (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>
+ $('#btn-upload').on('click', function() {
+ var url = '{% url 'gridftp_upload' %}?' + $.param({host: filex.host, path: filex.path.full() + '/'});
- <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>
+ 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') }),
+ dirs = _.map(selected.directory || [], function (item) { return item.get('name') }),
+ files = _.map(selected.file || [], function (item) { return item.get('name') }),
+ data = {
+ host: filex.host,
+ path: filex.path.full() + '/',
+ 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) {
+ $('<dt>', {text: keys[i]}).appendTo($errorList);
+ $('<dd>', {text: response.fail[keys[i]]}).appendTo($errorList);
+ }
+
+ $errorModal.modal();
+ filex.idle();
+ }
+ else {
+ status('Usuwanie zakończone pomyślnie');
+ }
+
+ 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();
+ 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() {
+ var $this = $(this);
+
+ var file = filex.selectedFiles()[0];
+
+ $this.find('#id_host').val(filex.host);
+ $this.find('#id_path').val(filex.path.full());
+ $this.find('#id_src').val(file.get('name'));
+ $this.find('#id_dst').val(file.get('name'));
+ }).on('submit', function(e) {
+ var $this = $(this);
+
+ e.preventDefault();
+ filex.busy();
+ $this.modal('hide');
+
+ $.post($this.attr('action'), $this.serialize(), function() {
+ status('Nazwę zmieniono pomyślnie');
+ filex.reloadFiles();
+ }, 'json').fail(failModal('Nie udało się zmienić nazwy'));
+ });
- <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>
+ $('#compress-form').on('submit', function(e) {
+ e.preventDefault();
+
+ var $this = $(this),
+ name = $this.find('#id_name').val(),
+ type = $this.find('#id_type').val(),
+ archive = name + (name.endsWith(type) ? '' : type),
+ data = {
+ host: filex.host,
+ path: filex.path.full(),
+ files: _.map(filex.selectedFiles(), function (item) { return item.get('name') }),
+ archive: archive
+ };
+
+ // check if maybe file with given name exists
+ if (filex.files.some(function(item) { return item.get('name') == archive })) {
+ $this.find('.alert').remove();
+
+ $('<div>', {
+ 'class': 'alert alert-danger',
+ html: '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Plik o podanej już nazwie istnieje!'
+ }).prependTo($this.find('.modal-body'));
+
+ 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,
+ archive: 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">×</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">×</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">×</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">×</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">×</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" style="position:fixed">
+ <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 %}