From 33f9e7fb68d58e43e1188409b43e550c9ed4b54d Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 5 Mar 2013 19:05:23 +0100
Subject: cleaned dashboard event code, preserve filtering across packages

---
 module/web/static/js/utils/animations.js    |  2 +-
 module/web/static/js/views/dashboardView.js | 64 +++++++++++++++++++----------
 module/web/static/js/views/fileView.js      |  6 ++-
 module/web/static/js/views/filterView.js    |  5 +++
 module/web/static/js/views/packageView.js   |  8 +---
 module/web/static/js/views/selectionView.js | 16 ++++----
 module/web/templates/default/dashboard.html |  2 +-
 7 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js
index 3350dd6ae..5131d3b8a 100644
--- a/module/web/static/js/utils/animations.js
+++ b/module/web/static/js/utils/animations.js
@@ -43,7 +43,7 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) {
         return this;
     };
 
-    // calculate the height and write it to data, better used on invisible elements
+    // calculate the height and write it to data, should be used on invisible elements
     jQuery.fn.calculateHeight = function(setHeight) {
         var o = jQuery(this[0]);
         var height = o.height();
diff --git a/module/web/static/js/views/dashboardView.js b/module/web/static/js/views/dashboardView.js
index 58ca8faf0..d9ea8d444 100644
--- a/module/web/static/js/views/dashboardView.js
+++ b/module/web/static/js/views/dashboardView.js
@@ -6,6 +6,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
         return Backbone.View.extend({
 
             el: '#content',
+            active: $('.breadcrumb .active'),
 
             events: {
             },
@@ -14,6 +15,8 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
             packageUL: null,
             // <ul> displaying the files
             fileUL: null,
+            // Package tree
+            tree: null,
             // Current open files
             files: null,
             // True when loading animation is running
@@ -23,7 +26,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
                 var self = this;
                 this.tree = new TreeCollection();
 
-                var view = new selectionView(this.tree);
+                var view = new selectionView();
                 view = new filterView();
 
                 // When package is added we reload the data
@@ -33,14 +36,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
                 });
 
                 // TODO file:added
-
-                App.vent.on('dashboard:loading', _.bind(this.loading, this));
-                App.vent.on('dashboard:contentReady', _.bind(this.contentReady, this));
             },
 
             init: function() {
                 var self = this;
-
                 // TODO: put in separated function
                 // TODO: order of elements?
                 // Init the tree and callback for package added
@@ -63,8 +62,13 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
                 packs.each(_.bind(this.appendPackage, this));
 
                 this.fileUL = this.$('.file-list');
-                if (this.files.length === 0)
-                    this.fileUL.append($('<li>No package selected</li>'));
+                if (this.files.length === 0) {
+                    // no files are displayed
+                    this.files = null;
+                    // Open the first package
+                    if (packs.length >= 1)
+                        this.openPackage(packs.at(0));
+                }
                 else
                     this.files.each(_.bind(this.appendFile, this));
 
@@ -83,27 +87,44 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
                 this.fileUL.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 && this.files !== files) {
-                    this.files = files;
+                if (!this.isLoading && old_files !== files)
                     this.show();
-                } else
-                    this.files = files;
             },
 
-            // TODO: better state control of dashboard
-            // TODO: elaborate events and reaction
-            loading: function(model) {
-                // nothing to load when it is already open, or nothing is shown
-                if (!this.files || (model && this.files === model.get('files')))
-                    return;
-
+            // Do load animation, remove the old stuff
+            loading: function() {
                 this.isLoading = true;
                 this.files = null;
                 var self = this;
-                // Render when the files are already set
                 this.fileUL.fadeOut({complete: function() {
+                    // All file views should vanish
+                    App.vent.trigger('dashboard:destroyContent');
+
+                    // Loading was faster than animation
                     if (self.files)
                         self.show();
 
@@ -116,10 +137,11 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
             },
 
             show: function() {
-                this.fileUL.empty();
+                // fileUL has to be resetted before
                 this.files.each(_.bind(this.appendFile, this));
+                //TODO: show placeholder when nothing is displayed (filtered content empty)
                 this.fileUL.fadeIn();
-                App.vent.trigger('dashboard:show', this.files);
+                App.vent.trigger('dashboard:updated');
             }
         });
     });
\ No newline at end of file
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 59a26d7c9..17da74de3 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -17,6 +17,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
                 // This will be triggered manually and changed before with silent=true
                 this.listenTo(this.model, 'change:visible', this.visibility_changed);
                 this.listenTo(this.model, 'remove', this.destroy);
+                this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy);
             },
 
             onDestroy: function() {
@@ -48,8 +49,9 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
 
                 if (this.model.get('visible'))
                     this.$el.show();
-                else
+                else {
                     this.$el.hide();
+                }
 
                 return this;
             },
@@ -64,7 +66,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
             },
 
             visibility_changed: function(visible) {
-                // TODO: improve animation
+                // TODO: improve animation, height is not available when element was not visible
                 if (visible)
                     this.$el.slideOut(true);
                 else {
diff --git a/module/web/static/js/views/filterView.js b/module/web/static/js/views/filterView.js
index a085fdad5..792edfee2 100644
--- a/module/web/static/js/views/filterView.js
+++ b/module/web/static/js/views/filterView.js
@@ -21,6 +21,10 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'],
 
                 this.stateMenu = this.$('.dropdown-toggle .state');
                 this.state = Api.DownloadState.All;
+
+                // Apply the filter before the content is shown
+                App.vent.on('dashboard:contentReady', _.bind(this.apply_filter, this));
+
             },
 
             render: function() {
@@ -68,6 +72,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes'],
                     }
                 });
 
+                App.vent.trigger('dashboard:filtered');
             },
 
             // determine if a file should be visible
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index 9eb1ecf5f..cfd671611 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -61,13 +61,7 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
 
             open: function(e) {
                 e.preventDefault();
-                var self = this;
-                // TODO: error case
-                App.vent.trigger('dashboard:loading', this.model);
-                this.model.fetch({silent: true, success: function() {
-                    console.log('Package ' + self.model.get('pid') + ' loaded');
-                    App.vent.trigger('dashboard:contentReady', self.model.get('files'));
-                }});
+                App.dashboard.openPackage(this.model);
             },
 
             select: function(e) {
diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js
index eaed33d59..2237c5f92 100644
--- a/module/web/static/js/views/selectionView.js
+++ b/module/web/static/js/views/selectionView.js
@@ -13,23 +13,21 @@ define(['jquery', 'backbone', 'underscore', 'app'],
                 'click .iconf-refresh': 'restart'
             },
 
-            // available packages
-            tree: null,
             // Element of the action bar
             actionBar: null,
             // number of currently selected elements
             current: 0,
 
-            initialize: function(tree) {
-                this.tree = tree;
+            initialize: function() {
+                var render = _.bind(this.render, this);
 
-                App.vent.on('dashboard:show', _.bind(this.render, this));
-                App.vent.on('package:selection', _.bind(this.render, this));
-                App.vent.on('file:selection', _.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));
-
                 // TODO when something gets deleted
 //                this.tree.get('packages').on('delete', _.bind(this.render, this));
             },
@@ -46,7 +44,7 @@ define(['jquery', 'backbone', 'underscore', 'app'],
             },
 
             get_packs: function() {
-                return this.tree.get('packages').where({selected: true});
+                return App.dashboard.tree.get('packages').where({selected: true});
             },
 
             render: function() {
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index 2bfd3d796..cfd5a2716 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -120,7 +120,7 @@
         <li>
             <ul class="breadcrumb">
                 <li><a href="#">{{ _("Local") }}</a> <span class="divider">/</span></li>
-                <li class="active">Data</li>
+                <li class="active"></li>
             </ul>
         </li>
 
-- 
cgit v1.2.3