Merge pull request #140 from Dahlgren/feature/missions

Improve missions listing

lib/missions.js

@@ -43,12 +43,19 @@ Missions.prototype.updateMissions = function (cb) {
           return cb(err)
         }
 
+        var filenameWithoutPbo = path.basename(filename, '.pbo')
+        var worldName = path.extname(filenameWithoutPbo)
+        var missionName = path.basename(filenameWithoutPbo, worldName)
+        worldName = worldName.replace('.', '')
+
         cb(null, {
           dateCreated: new Date(stat.ctime),
           dateModified: new Date(stat.mtime),
+          missionName: missionName,
           name: filename,
           size: stat.size,
-          sizeFormatted: filesize(stat.size)
+          sizeFormatted: filesize(stat.size),
+          worldName: worldName
         })
       })
     }, function (err, missions) {

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/missions/list.html

@@ -2,6 +2,7 @@
   <thead>
     <tr>
       <th>Mission</th>
+      <th>World</th>
       <th>Size</th>
       <th>Updated</th>
       <th></th>

public/js/tpl/missions/list_item.html

@@ -1,6 +1,7 @@
 <td style="width: 100%;">
-  <a href='/api/missions/<%-encodeURI(name)%>'><%-name%></a>
+  <a href='/api/missions/<%-encodeURI(name)%>'><%-missionName%></a>
 </td>
+<td><%-worldName%></td>
 <td class="text-nowrap"><%-sizeFormatted%></td>
 <td class="text-nowrap"><%-dateModified.substring(0, 10)%></td>
 <td>

public/js/tpl/servers/missions/available/list.html

@@ -3,6 +3,7 @@
     <thead>
       <tr>
         <th>Mission</th>
+        <th>World</th>
         <th>&nbsp;</th>
       </tr>
     </thead>

public/js/tpl/servers/missions/available/list_item.html

@@ -1,5 +1,8 @@
 <td>
-  <%-name%>
+  <%-missionName%>
+</td>
+<td>
+  <%-worldName%>
 </td>
 <td>
   <a class="btn btn-primary btn-xs add pull-right">

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>