Filter mods

public/js/app/router.js

@@ -6,7 +6,7 @@ var NavigationView = require('app/views/navigation')
 var ServersView = require('app/views/servers/list')
 var LogsListView = require('app/views/logs/list')
 var MissionsView = require('app/views/missions/index')
-var ModsListView = require('app/views/mods/list')
+var ModsView = require('app/views/mods/index')
 var ServerView = require('app/views/servers/view')
 var Logs = require('app/collections/logs')
 var Missions = require('app/collections/missions')
@@ -72,7 +72,7 @@ module.exports = Backbone.Router.extend({
   },
 
   mods: function () {
-    layoutView.content.show(new ModsListView({ collection: mods }))
+    layoutView.content.show(new ModsView({ mods: mods }))
   },
 
   server: function (id) {

public/js/app/views/mods/index.js

@@ -0,0 +1,54 @@
+var $ = require('jquery')
+var _ = require('underscore')
+var Marionette = require('marionette')
+
+var ListView = require('app/views/mods/list')
+var tpl = require('tpl/mods/index.html')
+
+var template = _.template(tpl)
+
+module.exports = Marionette.LayoutView.extend({
+  template: template,
+  templateHelpers: function () {
+    return {
+      filterValue: this.filterValue
+    }
+  },
+
+  regions: {
+    listView: '#list'
+  },
+
+  events: {
+    'click #refresh': 'refresh',
+    'keyup #filterMods': '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.listView.show(new ListView({ collection: this.options.mods, filterValue: this.filterValue }))
+  },
+
+  refresh: function (event) {
+    event.preventDefault()
+    $.ajax({
+      url: '/api/mods/refresh',
+      type: 'POST',
+      success: function (resp) {
+
+      },
+      error: function (resp) {
+
+      }
+    })
+  }
+})

public/js/app/views/mods/list.js

@@ -1,4 +1,3 @@
-var $ = require('jquery')
 var _ = require('underscore')
 var Marionette = require('marionette')
 
@@ -12,21 +11,27 @@ module.exports = Marionette.CompositeView.extend({
   childViewContainer: 'tbody',
   template: template,
 
-  events: {
-    'click #refresh': 'refresh'
+  initialize: function (options) {
+    this.filterValue = options.filterValue
   },
 
-  refresh: function (event) {
-    event.preventDefault()
-    $.ajax({
-      url: '/api/mods/refresh',
-      type: 'POST',
-      success: function (resp) {
+  filter: function (child, index, collection) {
+    var name = child.get('name').toLowerCase()
 
-      },
-      error: function (resp) {
+    if (name.indexOf(this.filterValue.toLowerCase()) >= 0) {
+      return true
+    }
 
-      }
-    })
+    var modFile = child.get('modFile')
+    if (modFile && modFile.name && modFile.name.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0) {
+      return true
+    }
+
+    var steamMeta = child.get('steamMeta')
+    if (steamMeta && steamMeta.name && steamMeta.name.toLowerCase().indexOf(this.filterValue.toLowerCase()) >= 0) {
+      return true
+    }
+
+    return false
   }
 })

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

@@ -0,0 +1,19 @@
+var _ = require('underscore')
+
+var ModsView = require('app/views/mods/index')
+var ListView = require('app/views/servers/mods/list')
+var tpl = require('tpl/servers/mods/index.html')
+
+var template = _.template(tpl)
+
+module.exports = ModsView.extend({
+  template: template,
+
+  onRender: function () {
+    this.listView.show(new ListView({
+      collection: this.options.mods,
+      server: this.options.server,
+      filterValue: this.filterValue
+    }))
+  }
+})

public/js/app/views/servers/view.js

@@ -7,7 +7,7 @@ var sweetAlert = require('sweet-alert')
 var FormView = require('app/views/servers/form')
 var InfoView = require('app/views/servers/info')
 var MissionsView = require('app/views/servers/missions/index')
-var ModsListView = require('app/views/servers/mods/list')
+var ModsView = require('app/views/servers/mods/index')
 var ParametersListView = require('app/views/servers/parameters/list')
 var PlayersView = require('app/views/servers/players')
 var tpl = require('tpl/servers/view.html')
@@ -41,7 +41,7 @@ module.exports = Marionette.LayoutView.extend({
   onRender: function () {
     this.infoView.show(new InfoView({ model: this.model }))
     this.missionsView.show(new MissionsView({ missions: this.missions, model: this.model }))
-    this.modsView.show(new ModsListView({ collection: this.mods, server: this.model }))
+    this.modsView.show(new ModsView({ mods: this.mods, server: this.model }))
     this.parametersView.show(new ParametersListView({ model: this.model }))
     this.playersView.show(new PlayersView({ model: this.model }))
     this.settingsView.show(new FormView({ model: this.model }))

public/js/tpl/mods/index.html

@@ -0,0 +1,13 @@
+<a class="btn btn-primary" id="refresh" href="#">
+  <span class="glyphicon glyphicon-refresh"></span>
+  Refresh
+</a>
+
+<form>
+  <div class="form-group">
+    <label for="filterMods">Filter</label>
+    <input type="text" class="form-control" id="filterMods" placeholder="Filter mods..." value="<%-filterValue%>">
+  </div>
+</form>
+
+<div id="list"></div>

public/js/tpl/mods/list.html

@@ -1,8 +1,3 @@
-<a class="btn btn-primary" id="refresh" href="#">
-  <span class="glyphicon glyphicon-refresh"></span>
-  Refresh
-</a>
-
 <table class="table table-striped">
   <thead>
     <tr>

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

@@ -0,0 +1,8 @@
+<form>
+  <div class="form-group">
+    <label for="filterMods">Filter</label>
+    <input type="text" class="form-control" id="filterMods" placeholder="Filter mods..." value="<%-filterValue%>">
+  </div>
+</form>
+
+<div id="list"></div>