Add filter of mission and world name

public/js/app/views/missions/index.js

@@ -13,6 +13,11 @@ define(function (require) {
 
   return Marionette.LayoutView.extend({
     template: _.template(tpl),
+    templateHelpers: function() {
+      return {
+        filterValue: this.filterValue
+      }
+    },
 
     regions: {
       uploadView: "#upload",
@@ -22,12 +27,23 @@ define(function (require) {
 
     events: {
       "click #refresh": "refresh",
+      "keyup #filterMissions": "updateFilter",
+    },
+
+    initialize: function () {
+      this.filterValue = ''
+    },
+
+    updateFilter: function (event) {
+      this.filterValue = event.target.value;
+      this.listView.currentView.filterValue = this.filterValue;
+      this.listView.currentView.render();
     },
 
     onRender: function() {
       this.uploadView.show(new UploadView());
       this.workshopView.show(new WorkshopView());
-      this.listView.show(new ListView({collection: this.options.missions}));
+      this.listView.show(new ListView({collection: this.options.missions, filterValue: this.filterValue}));
     },
 
     refresh: function (event) {

public/js/app/views/missions/list.js

@@ -15,5 +15,13 @@ define(function (require) {
     childView: ListItemView,
     childViewContainer: "tbody",
     template: template,
+
+    initialize: function (options) {
+      this.filterValue = options.filterValue;
+    },
+
+    filter: function (child, index, collection) {
+      return child.get('name').toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0;
+    },
   });
 });

public/js/app/views/servers/missions/available/list.js

@@ -14,6 +14,14 @@ define(function (require) {
     childViewContainer: "tbody",
     template: _.template(tpl),
 
+    initialize: function (options) {
+      this.filterValue = options.filterValue;
+    },
+
+    filter: function (child, index, collection) {
+      return child.get('name').toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0;
+    },
+
     buildChildView: function(item, ChildViewType, childViewOptions){
       var self = this;
       var options = _.extend({model: item}, childViewOptions);

public/js/app/views/servers/missions/index.js

@@ -13,24 +13,34 @@ define(function (require) {
 
   return Marionette.LayoutView.extend({
     template: _.template(tpl),
+    templateHelpers: function() {
+      return {
+        filterValue: this.filterValue
+      }
+    },
 
     regions: {
       availableView: "#available",
       rotationView: "#rotation",
     },
 
+    events: {
+      "keyup #filterMissions": "updateFilter",
+    },
+
     modelEvents: {
       "change": "serverUpdated",
     },
 
     initialize: function (options) {
       this.missions = options.missions;
+      this.filterValue = ''
 
       this.rotationCollection = new MissionRotations(this.model.get('missions'));
 
       var self = this;
 
-      this.availableListView = new AvailableListView({collection: this.missions});
+      this.availableListView = new AvailableListView({collection: this.missions, filterValue: this.filterValue});
       this.availableListView.on('add', function (model) {
         self.rotationCollection.add([{
           name: model.get('name').replace('.pbo', ''),
@@ -44,6 +54,12 @@ define(function (require) {
       this.rotationView.show(this.rotationListView);
     },
 
+    updateFilter: function (event) {
+      this.filterValue = event.target.value;
+      this.availableView.currentView.filterValue = this.filterValue;
+      this.availableView.currentView.render();
+    },
+
     serverUpdated: function() {
       this.rotationCollection.set(this.model.get('missions'));
     },

public/js/tpl/missions/index.html

@@ -31,5 +31,14 @@
       </div>
     </div>
   </div>
-  <div class="col-sm-8 col-sm-pull-4" id="list"></div>
+  <div class="col-sm-8 col-sm-pull-4">
+    <form>
+      <div class="form-group">
+        <label for="filterMissions">Filter</label>
+        <input type="text" class="form-control" id="filterMissions" placeholder="Filter missions..." value="<%-filterValue%>">
+      </div>
+    </form>
+
+    <div id="list"></div>
+  </div>
 </div>

public/js/tpl/servers/missions/index.html

@@ -1,4 +1,13 @@
 <div class="row">
   <div class="col-md-6 col-md-push-6" id="rotation"></div>
-  <div class="col-md-6 col-md-pull-6" id="available"></div>
+  <div class="col-md-6 col-md-pull-6">
+    <form>
+      <div class="form-group">
+        <label for="filterMissions">Filter</label>
+        <input type="text" class="form-control" id="filterMissions" placeholder="Filter missions..." value="<%-filterValue%>">
+      </div>
+    </form>
+
+    <div id="available"></div>
+  </div>
 </div>