WebInterface: Apps can now be filtered by active/inactive/devel, also develapps now tell you that they are

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>

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

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;
   }
 });

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);
   }
 });