From 31fca729f03bd63db0da1bb0c96d405862e94c54 Mon Sep 17 00:00:00 2001
From: Michael Hackstein <michael@arangodb.com>
Date: Wed, 26 Jun 2013 16:19:12 +0200
Subject: [PATCH] WebInterface: Apps can now be filtered by
 active/inactive/devel, also develapps now tell you that they are

---
 html/admin/js/templates/applicationsView.ejs | 22 +++++++++++-
 html/admin/js/templates/foxxActiveView.ejs   |  8 ++++-
 html/admin/js/views/applicationsView.js      | 35 +++++++++++++++++++-
 html/admin/js/views/foxxActiveView.js        | 27 ++++++++++++++-
 4 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/html/admin/js/templates/applicationsView.ejs b/html/admin/js/templates/applicationsView.ejs
index 51961b8ccb..e8215b2237 100644
--- a/html/admin/js/templates/applicationsView.ejs
+++ b/html/admin/js/templates/applicationsView.ejs
@@ -6,8 +6,28 @@
     <div class="btn-group pull-right">
       <button class="btn btn-inverse btn-small disabledHover">Filter:</button>
       <button data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle"><span class="caret"></span></button>
+      <ul class="dropdown-menu">
+        <li class="nav-header">Type</li>
+        <li><a href="#">
+            <label class="checkbox checkboxLabel">
+              <input class="css-checkbox" type="checkbox" id="checkActive">
+            <label class="css-label"></label>Active
+          </label>
+        </a></li>
 
-      <ul class="dropdown-menu dashboard-dropdown" id="menuGroups">
+        <li><a href="#">
+          <label class="checkbox checkboxLabel">
+            <input class="css-checkbox" type="checkbox" id="checkDevel">
+            <label class="css-label"></label>Development
+          </label>
+        </a></li>
+
+        <li><a href="#">
+          <label class="checkbox checkboxLabel">
+            <input class="css-checkbox" type="checkbox" id="checkInactive">
+            <label class="css-label"></label>Inactive
+          </label>
+        </a></li>
       </ul>
     </div>
   </div>
diff --git a/html/admin/js/templates/foxxActiveView.ejs b/html/admin/js/templates/foxxActiveView.ejs
index 97ba9ad5e3..7b8dc7a4cb 100644
--- a/html/admin/js/templates/foxxActiveView.ejs
+++ b/html/admin/js/templates/foxxActiveView.ejs
@@ -14,7 +14,13 @@
       
       <!--Git: <a href=<%=attributes.git %>>Repository</a>-->
     </p>
-    <%if (attributes.active) {%>
+    <%if (attributes.development) {%>
+      <span class="badge badge-success loaded badge-foxx">
+        <div class="cornered">
+          development
+        </div>
+      </span>
+    <%} else if (attributes.active) {%>
       <span class="badge badge-success loaded badge-foxx">
         <div class="cornered">
           active
diff --git a/html/admin/js/views/applicationsView.js b/html/admin/js/views/applicationsView.js
index 0cd02fa4e8..8d1bddef3d 100644
--- a/html/admin/js/views/applicationsView.js
+++ b/html/admin/js/views/applicationsView.js
@@ -7,7 +7,34 @@ var ApplicationsView = Backbone.View.extend({
   template: new EJS({url: 'js/templates/applicationsView.ejs'}),
   
   events: {
-    "click .toggle-icon": "toggleView"
+    "click .toggle-icon": "toggleView",
+    "click #checkDevel": "toggleDevel",
+    "click #checkActive": "toggleActive",
+    "click #checkInactive": "toggleInactive"
+  },
+  
+  toggleDevel: function() {
+    var self = this;
+    this._showDevel = !this._showDevel;
+    _.each(this._installedSubViews, function(v) {
+      v.toggle("devel", self._showDevel)
+    });
+  },
+  
+  toggleActive: function() {
+    var self = this;
+    this._showActive = !this._showActive;
+    _.each(this._installedSubViews, function(v) {
+      v.toggle("active", self._showActive)
+    });
+  },
+  
+  toggleInactive: function() {
+    var self = this;
+    this._showInactive = !this._showInactive;
+    _.each(this._installedSubViews, function(v) {
+      v.toggle("inactive", self._showInactive)
+    });
   },
   
   toggleView: function(event) {
@@ -52,6 +79,9 @@ var ApplicationsView = Backbone.View.extend({
   initialize: function() {    
     this._installedSubViews = {};
     this._availableSubViews = {};
+    this._showDevel = true;
+    this._showActive = true;
+    this._showInactive = true;
     this.reload();
   },
   
@@ -65,6 +95,9 @@ var ApplicationsView = Backbone.View.extend({
       $("#availableList").append(v.render());
     });
     this.delegateEvents();
+    $('#checkActive').attr('checked', this._showActive);
+    $('#checkInactive').attr('checked', this._showInactive);
+    $('#checkDevel').attr('checked', this._showDevel);
     return this;
   }
 });
diff --git a/html/admin/js/views/foxxActiveView.js b/html/admin/js/views/foxxActiveView.js
index 0b2fbd348a..424a0aec1f 100644
--- a/html/admin/js/views/foxxActiveView.js
+++ b/html/admin/js/views/foxxActiveView.js
@@ -12,9 +12,32 @@ window.FoxxActiveView = Backbone.View.extend({
   },
 
   initialize: function(){
+    this._show = true;
     _.bindAll(this, 'render');
   },
 
+  toggle: function(type, shouldShow) {
+    if (this.model.get("development")) {
+      if ("devel" === type) {
+        this._show = shouldShow;
+      }
+    } else {
+      if ("active" === type && true === this.model.get("active")) {
+        this._show = shouldShow;
+      }
+      if ("inactive" === type && false === this.model.get("active")) {
+        this._show = shouldShow;
+      }
+    }
+    console.log(shouldShow);
+    console.log(this._show);
+    if (this._show) {
+      $(this.el).show();
+    } else {
+      $(this.el).hide();
+    }
+  },
+
   editFoxx: function(event) {
     event.stopPropagation();
     window.App.navigate(
@@ -36,7 +59,9 @@ window.FoxxActiveView = Backbone.View.extend({
   },
 
   render: function(){
-    $(this.el).html(this.template.render(this.model));
+    if (this._show) {
+      $(this.el).html(this.template.render(this.model));
+    }
     return $(this.el);
   }
 });