From 2348128bb84aaa0c4e21bffe51d8ef6e346a5bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Dahlgren?= <bjorn@dahlgren.at>
Date: Sun, 23 Jun 2019 20:32:04 +0200
Subject: [PATCH] Add filter of mission and world name

---
 public/js/app/views/missions/index.js          | 18 +++++++++++++++++-
 public/js/app/views/missions/list.js           |  8 ++++++++
 .../views/servers/missions/available/list.js   |  8 ++++++++
 public/js/app/views/servers/missions/index.js  | 18 +++++++++++++++++-
 public/js/tpl/missions/index.html              | 11 ++++++++++-
 public/js/tpl/servers/missions/index.html      | 11 ++++++++++-
 6 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/public/js/app/views/missions/index.js b/public/js/app/views/missions/index.js
index 76061fd..534f884 100644
--- a/public/js/app/views/missions/index.js
+++ b/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) {
diff --git a/public/js/app/views/missions/list.js b/public/js/app/views/missions/list.js
index ed02862..037fd78 100644
--- a/public/js/app/views/missions/list.js
+++ b/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;
+    },
   });
 });
diff --git a/public/js/app/views/servers/missions/available/list.js b/public/js/app/views/servers/missions/available/list.js
index 78c8a9e..79abacc 100644
--- a/public/js/app/views/servers/missions/available/list.js
+++ b/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);
diff --git a/public/js/app/views/servers/missions/index.js b/public/js/app/views/servers/missions/index.js
index f38e97a..50ab5d1 100644
--- a/public/js/app/views/servers/missions/index.js
+++ b/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'));
     },
diff --git a/public/js/tpl/missions/index.html b/public/js/tpl/missions/index.html
index 949e126..697d29b 100644
--- a/public/js/tpl/missions/index.html
+++ b/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>
diff --git a/public/js/tpl/servers/missions/index.html b/public/js/tpl/servers/missions/index.html
index 0af5c0c..9ecf0f1 100644
--- a/public/js/tpl/servers/missions/index.html
+++ b/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>