restructured webui to single-page-app, removed jinja

5 files changed, 629 insertions, 0 deletions

diff --git a/module/web/app/scripts/views/dashboard/dashboardView.js b/module/web/app/scripts/views/dashboard/dashboardView.js
new file mode 100644
index 000000000..0ae9110d7
--- /dev/null
+++ b/module/web/app/scripts/views/dashboard/dashboardView.js
@@ -0,0 +1,167 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
+    './packageView', './fileView', 'hbs!tpl/dashboard/layout', 'select2'],
+    function($, Backbone, _, App, TreeCollection, packageView, fileView, template) {
+        // Renders whole dashboard
+        return Backbone.Marionette.ItemView.extend({
+
+            // TODO:  refactor
+            active: $('.breadcrumb .active'),
+
+            template: template,
+
+            events: {
+            },
+
+            ui: {
+                'packages': '.package-list',
+                'files': '.file-list'
+            },
+
+            // Package tree
+            tree: null,
+            // Current open files
+            files: null,
+            // True when loading animation is running
+            isLoading: false,
+
+            initialize: function() {
+                App.dashboard = this;
+                this.tree = new TreeCollection();
+
+                var self = this;
+                // When package is added we reload the data
+                App.vent.on('package:added', function() {
+                    console.log('Package tree caught, package:added event');
+                    self.tree.fetch();
+                });
+
+                App.vent.on('file:updated', _.bind(this.fileUpdated, this));
+
+                // TODO: merge?
+                this.init();
+                // TODO: file:added
+                // TODO: package:deleted
+                // TODO: package:updated
+            },
+
+            init: function() {
+                var self = this;
+                // TODO: put in separated function
+                // TODO: order of elements?
+                // Init the tree and callback for package added
+                this.tree.fetch({success: function() {
+                    self.update();
+                    self.tree.get('packages').on('add', function(pack) {
+                        console.log('Package ' + pack.get('pid') + ' added to tree');
+                        self.appendPackage(pack, 0, true);
+                        self.openPackage(pack);
+                    });
+                }});
+
+                this.$('.input').select2({tags: ["a", "b", "sdf"]});
+            },
+
+            update: function() {
+                console.log('Update package list');
+
+                // TODO: Both null
+                var packs = this.tree.get('packages');
+                this.files = this.tree.get('files');
+
+                if (packs)
+                    packs.each(_.bind(this.appendPackage, this));
+
+                if (!this.files || this.files.length === 0) {
+                    // no files are displayed
+                    this.files = null;
+                    // Open the first package
+                    if (packs && packs.length >= 1)
+                        this.openPackage(packs.at(0));
+                }
+                else
+                    this.files.each(_.bind(this.appendFile, this));
+
+                return this;
+            },
+
+            // TODO sorting ?!
+            // Append a package to the list, index, animate it
+            appendPackage: function(pack, i, animation) {
+                var el = new packageView({model: pack}).render().el;
+                $(this.ui.packages).appendWithAnimation(el, animation);
+            },
+
+            appendFile: function(file, i, animation) {
+                var el = new fileView({model: file}).render().el;
+                $(this.ui.files).appendWithAnimation(el, animation);
+            },
+
+            // Show content of the packages on main view
+            openPackage: function(pack) {
+                var self = this;
+
+                // load animation only when something is shown and its different from current package
+                if (this.files && this.files !== pack.get('files'))
+                    self.loading();
+
+                pack.fetch({silent: true, success: function() {
+                    console.log('Package ' + pack.get('pid') + ' loaded');
+                    self.active.text(pack.get('name'));
+                    self.contentReady(pack.get('files'));
+                }, failure: function() {
+                    self.failure();
+                }});
+
+            },
+
+            contentReady: function(files) {
+                var old_files = this.files;
+                this.files = files;
+                App.vent.trigger('dashboard:contentReady');
+
+                // show the files when no loading animation is running and not already open
+                if (!this.isLoading && old_files !== files)
+                    this.show();
+            },
+
+            // Do load animation, remove the old stuff
+            loading: function() {
+                this.isLoading = true;
+                this.files = null;
+                var self = this;
+                $(this.ui.files).fadeOut({complete: function() {
+                    // All file views should vanish
+                    App.vent.trigger('dashboard:destroyContent');
+
+                    // Loading was faster than animation
+                    if (self.files)
+                        self.show();
+
+                    self.isLoading = false;
+                }});
+            },
+
+            failure: function() {
+                // TODO
+            },
+
+            show: function() {
+                // fileUL has to be resetted before
+                this.files.each(_.bind(this.appendFile, this));
+                //TODO: show placeholder when nothing is displayed (filtered content empty)
+                $(this.ui.files).fadeIn();
+                App.vent.trigger('dashboard:updated');
+            },
+
+            // Refresh the file if it is currently shown
+            fileUpdated: function(data) {
+                // this works with ids and object
+                var file = this.files.get(data);
+                if (file)
+                    if (_.isObject(data)) // update directly
+                        file.set(data);
+                    else // fetch from server
+                        file.fetch();
+            }
+        });
+    });
\ No newline at end of file
diff --git a/module/web/app/scripts/views/dashboard/fileView.js b/module/web/app/scripts/views/dashboard/fileView.js
new file mode 100644
index 000000000..c0eec7adf
--- /dev/null
+++ b/module/web/app/scripts/views/dashboard/fileView.js
@@ -0,0 +1,101 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView', 'helpers/formatTime', 'hbs!tpl/dashboard/file'],
+    function($, Backbone, _, App, Api, ItemView, formatTime, template) {
+
+        // Renders single file item
+        return ItemView.extend({
+
+            tagName: 'li',
+            className: 'file-view row-fluid',
+            template: template,
+            events: {
+                'click .checkbox': 'select',
+                'click .btn-delete': 'deleteItem',
+                'click .btn-restart': 'restart'
+            },
+
+            initialize: function() {
+                this.listenTo(this.model, 'change', this.render);
+                // This will be triggered manually and changed before with silent=true
+                this.listenTo(this.model, 'change:visible', this.visibility_changed);
+                this.listenTo(this.model, 'change:progress', this.progress_changed);
+                this.listenTo(this.model, 'remove', this.unrender);
+                this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy);
+            },
+
+            onDestroy: function() {
+            },
+
+            render: function() {
+                var data = this.model.toJSON();
+                if (data.download) {
+                    var status = data.download.status;
+                    if (status === Api.DownloadStatus.Offline || status === Api.DownloadStatus.TempOffline)
+                        data.offline = true;
+                    else if (status === Api.DownloadStatus.Online)
+                        data.online = true;
+                    else if (status === Api.DownloadStatus.Waiting)
+                        data.waiting = true;
+                    else if (status === Api.DownloadStatus.Downloading)
+                        data.downloading = true;
+                    else if (this.model.isFailed())
+                        data.failed = true;
+                    else if (this.model.isFinished())
+                        data.finished = true;
+                }
+
+                this.$el.html(this.template(data));
+                if (this.model.get('selected'))
+                    this.$el.addClass('ui-selected');
+                else
+                    this.$el.removeClass('ui-selected');
+
+                if (this.model.get('visible'))
+                    this.$el.show();
+                else
+                    this.$el.hide();
+
+                return this;
+            },
+
+            select: function(e) {
+                e.preventDefault();
+                var checked = this.$el.hasClass('ui-selected');
+                // toggle class immediately, so no re-render needed
+                this.model.set('selected', !checked, {silent: true});
+                this.$el.toggleClass('ui-selected');
+                App.vent.trigger('file:selection');
+            },
+
+            visibility_changed: function(visible) {
+                // TODO: improve animation, height is not available when element was not visible
+                if (visible)
+                    this.$el.slideOut(true);
+                else {
+                    this.$el.calculateHeight(true);
+                    this.$el.slideIn(true);
+                }
+            },
+
+            progress_changed: function() {
+                if (!this.model.isDownload())
+                    return;
+
+                if (this.model.get('download').status === Api.DownloadStatus.Downloading) {
+                    var bar = this.$('.progress .bar');
+                    if (!bar) { // ensure that the dl bar is rendered
+                        this.render();
+                        bar = this.$('.progress .bar');
+                    }
+
+                    bar.width(this.model.get('progress') + '%');
+                    bar.html('  ' + formatTime(this.model.get('eta')));
+                } else if (this.model.get('download').status === Api.DownloadStatus.Waiting) {
+                    this.$('.second').html(
+                        "<i class='icon-time'></i>&nbsp;" + formatTime(this.model.get('eta')));
+
+                } else // Every else state can be renderred normally
+                    this.render();
+
+            }
+        });
+    });
\ No newline at end of file
diff --git a/module/web/app/scripts/views/dashboard/filterView.js b/module/web/app/scripts/views/dashboard/filterView.js
new file mode 100644
index 000000000..bcbda64c8
--- /dev/null
+++ b/module/web/app/scripts/views/dashboard/filterView.js
@@ -0,0 +1,132 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'models/Package', 'hbs!tpl/dashboard/actionbar'],
+    function($, Backbone, _, App, Api, Package, template) {
+        'use strict';
+
+        // Modified version of type ahead show, nearly the same without absolute positioning
+        function show() {
+            this.$menu
+                .insertAfter(this.$element)
+                .show();
+
+            this.shown = true;
+            return this;
+        }
+
+        // Renders the actionbar for the dashboard, handles everything related to filtering displayed files
+        return Backbone.Marionette.ItemView.extend({
+
+            events: {
+                'click .filter-type': 'filter_type',
+                'click .filter-state': 'switch_filter',
+                'submit .form-search': 'search'
+            },
+
+            ui: {
+                'search': '.search-query',
+                'stateMenu': '.dropdown-toggle .state'
+            },
+
+            template: template,
+            state: null,
+
+            initialize: function() {
+                this.state = Api.DownloadState.All;
+
+                // Apply the filter before the content is shown
+                App.vent.on('dashboard:contentReady', _.bind(this.apply_filter, this));
+            },
+
+            onRender: function() {
+                                // use our modified method
+                $.fn.typeahead.Constructor.prototype.show = show;
+                this.ui.search.typeahead({
+                    minLength: 2,
+                    source: this.getSuggestions
+                });
+
+            },
+
+            // TODO: app level api request
+            search: function(e) {
+                e.stopPropagation();
+                var query = this.ui.search.val();
+                this.ui.search.val('');
+
+                var pack = new Package();
+                // Overwrite fetch method to use a search
+                // TODO: quite hackish, could be improved to filter packages
+                //       or show performed search
+                pack.fetch = function(options) {
+                    pack.search(query, options);
+                };
+
+                App.dashboard.openPackage(pack);
+            },
+
+            getSuggestions: function(query, callback) {
+                $.ajax(App.apiRequest('searchSuggestions', {pattern: query}, {
+                    method: 'POST',
+                    success: function(data) {
+                        callback(data);
+                    }
+                }));
+            },
+
+            switch_filter: function(e) {
+                e.stopPropagation();
+                var element = $(e.target);
+                var state = parseInt(element.data('state'), 10);
+                var menu = this.ui.stateMenu.parent().parent();
+                menu.removeClass('open');
+
+                if (state === Api.DownloadState.Finished) {
+                    menu.removeClass().addClass('dropdown finished');
+                } else if (state === Api.DownloadState.Unfinished) {
+                    menu.removeClass().addClass('dropdown active');
+                } else if (state === Api.DownloadState.Failed) {
+                    menu.removeClass().addClass('dropdown failed');
+                } else {
+                    menu.removeClass().addClass('dropdown');
+                }
+
+                this.state = state;
+                this.ui.stateMenu.text(element.text());
+                this.apply_filter();
+            },
+
+            // Applies the filtering to current open files
+            apply_filter: function() {
+                if (!App.dashboard.files)
+                    return;
+
+                var self = this;
+                App.dashboard.files.map(function(file) {
+                    var visible = file.get('visible');
+                    if (visible !== self.is_visible(file)) {
+                        file.set('visible', !visible, {silent: true});
+                        file.trigger('change:visible', !visible);
+                    }
+                });
+
+                App.vent.trigger('dashboard:filtered');
+            },
+
+            // determine if a file should be visible
+            // TODO: non download files
+            is_visible: function(file) {
+                if (this.state === Api.DownloadState.Finished)
+                    return file.isFinished();
+                else if (this.state === Api.DownloadState.Unfinished)
+                    return file.isUnfinished();
+                else if (this.state === Api.DownloadState.Failed)
+                    return file.isFailed();
+
+                return true;
+            },
+
+            filter_type: function(e) {
+
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/module/web/app/scripts/views/dashboard/packageView.js b/module/web/app/scripts/views/dashboard/packageView.js
new file mode 100644
index 000000000..6e09cbb96
--- /dev/null
+++ b/module/web/app/scripts/views/dashboard/packageView.js
@@ -0,0 +1,74 @@
+define(['jquery', 'app', 'views/abstract/itemView', 'underscore', 'hbs!tpl/dashboard/package'],
+    function($, App, itemView, _, template) {
+
+        // Renders a single package item
+        return itemView.extend({
+
+            tagName: 'li',
+            className: 'package-view',
+            template: template,
+            events: {
+                'click .package-name, .btn-open': 'open',
+                'click .icon-refresh': 'restart',
+                'click .select': 'select',
+                'click .btn-delete': 'deleteItem'
+            },
+
+            // Ul for child packages (unused)
+            ul: null,
+            // Currently unused
+            expanded: false,
+
+            initialize: function() {
+                this.listenTo(this.model, 'filter:added', this.hide);
+                this.listenTo(this.model, 'filter:removed', this.show);
+                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'remove', this.unrender);
+
+                // Clear drop down menu
+                var self = this;
+                this.$el.on('mouseleave', function() {
+                    self.$('.dropdown-menu').parent().removeClass('open');
+                });
+            },
+
+            onDestroy: function() {
+            },
+
+            // Render everything, optional only the fileViews
+            render: function() {
+                this.$el.html(this.template(this.model.toJSON()));
+                this.$el.initTooltips();
+
+                return this;
+            },
+
+            unrender: function() {
+                itemView.prototype.unrender.apply(this);
+
+                // TODO: display other package
+                App.vent.trigger('dashboard:loading', null);
+            },
+
+
+            // TODO
+            // Toggle expanding of packages
+            expand: function(e) {
+                e.preventDefault();
+            },
+
+            open: function(e) {
+                e.preventDefault();
+                App.dashboard.openPackage(this.model);
+            },
+
+            select: function(e) {
+                e.preventDefault();
+                var checked = this.$('.select').hasClass('icon-check');
+                // toggle class immediately, so no re-render needed
+                this.model.set('selected', !checked, {silent: true});
+                this.$('.select').toggleClass('icon-check').toggleClass('icon-check-empty');
+                App.vent.trigger('package:selection');
+            }
+        });
+    });
\ No newline at end of file
diff --git a/module/web/app/scripts/views/dashboard/selectionView.js b/module/web/app/scripts/views/dashboard/selectionView.js
new file mode 100644
index 000000000..a070aa9a0
--- /dev/null
+++ b/module/web/app/scripts/views/dashboard/selectionView.js
@@ -0,0 +1,155 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'hbs!tpl/dashboard/select'],
+    function($, Backbone, _, App, template) {
+        'use strict';
+
+        // Renders context actions for selection packages and files
+        return Backbone.Marionette.ItemView.extend({
+
+            el: '#selection-area',
+            template: template,
+
+            events: {
+                'click .icon-check': 'deselect',
+                'click .icon-pause': 'pause',
+                'click .icon-trash': 'trash',
+                'click .icon-refresh': 'restart'
+            },
+
+            // Element of the action bar
+            actionBar: null,
+            // number of currently selected elements
+            current: 0,
+
+            initialize: function() {
+                this.$el.calculateHeight().height(0);
+                var render = _.bind(this.render, this);
+
+                App.vent.on('dashboard:updated', render);
+                App.vent.on('dashboard:filtered', render);
+                App.vent.on('package:selection', render);
+                App.vent.on('file:selection', render);
+
+                this.actionBar = $('.actionbar .btn-check');
+                this.actionBar.parent().click(_.bind(this.select_toggle, this));
+
+                // API events, maybe better to rely on internal ones?
+                App.vent.on('package:deleted', render);
+                App.vent.on('file:deleted', render);
+            },
+
+            get_files: function(all) {
+                var files = [];
+                if (App.dashboard.files)
+                    if (all)
+                        files = App.dashboard.files.where({visible: true});
+                    else
+                        files = App.dashboard.files.where({selected: true, visible: true});
+
+                return files;
+            },
+
+            get_packs: function() {
+                if (!App.dashboard.tree.get('packages'))
+                    return []; // TODO
+
+                return App.dashboard.tree.get('packages').where({selected: true});
+            },
+
+            render: function() {
+                var files = this.get_files().length;
+                var packs = this.get_packs().length;
+
+                if (files + packs > 0) {
+                    this.$el.html(this.template({files: files, packs: packs}));
+                    this.$el.initTooltips('bottom');
+                }
+
+                if (files + packs > 0 && this.current === 0)
+                    this.$el.slideOut();
+                else if (files + packs === 0 && this.current > 0)
+                    this.$el.slideIn();
+
+                // TODO: accessing ui directly, should be events
+                if (files > 0) {
+                    this.actionBar.addClass('icon-check').removeClass('icon-check-empty');
+                    App.dashboard.ui.packages.addClass('ui-files-selected');
+                }
+                else {
+                    this.actionBar.addClass('icon-check-empty').removeClass('icon-check');
+                    App.dashboard.ui.packages.removeClass('ui-files-selected');
+                }
+
+                this.current = files + packs;
+            },
+
+            // Deselects all items
+            deselect: function() {
+                this.get_files().map(function(file) {
+                    file.set('selected', false);
+                });
+
+                this.get_packs().map(function(pack) {
+                    pack.set('selected', false);
+                });
+
+                this.render();
+            },
+
+            pause: function() {
+                alert("Not implemented yet");
+                this.deselect();
+            },
+
+            trash: function() {
+                _.confirm('default/confirmDialog.html', function() {
+
+                    var pids = [];
+                    // TODO: delete many at once
+                    this.get_packs().map(function(pack) {
+                        pids.push(pack.get('pid'));
+                        pack.destroy();
+                    });
+
+                    // get only the fids of non deleted packages
+                    var fids = _.filter(this.get_files(),function(file) {
+                        return !_.contains(pids, file.get('package'));
+                    }).map(function(file) {
+                            file.destroyLocal();
+                            return file.get('fid');
+                        });
+
+                    if (fids.length > 0)
+                        $.ajax(App.apiRequest('deleteFiles', {fids: fids}));
+
+                    this.deselect();
+                }, this);
+            },
+
+            restart: function() {
+                this.get_files().map(function(file) {
+                    file.restart();
+                });
+                this.get_packs().map(function(pack) {
+                    pack.restart();
+                });
+
+                this.deselect();
+            },
+
+            // Select or deselect all visible files
+            select_toggle: function() {
+                var files = this.get_files();
+                if (files.length === 0) {
+                    this.get_files(true).map(function(file) {
+                        file.set('selected', true);
+                    });
+
+                } else
+                    files.map(function(file) {
+                        file.set('selected', false);
+                    });
+
+                this.render();
+            }
+        });
+    });
\ No newline at end of file