Split server mods list into two pane layout

public/js/app/collections/server_mods.js

@@ -0,0 +1,10 @@
+var Backbone = require('backbone')
+
+var ServerMod = require('app/models/server_mod')
+
+module.exports = Backbone.Collection.extend({
+  comparator: function (a, b) {
+    return a.get('name').toLowerCase().localeCompare(b.get('name').toLowerCase())
+  },
+  model: ServerMod
+})

public/js/app/models/server_mod.js

@@ -0,0 +1,11 @@
+var Backbone = require('backbone')
+
+module.exports = Backbone.Model.extend({
+  defaults: {
+    name: ''
+  },
+  idAttribute: 'name',
+  isNew: function () {
+    return true
+  }
+})

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

@@ -0,0 +1,16 @@
+var _ = require('underscore')
+
+var ModsListView = require('app/views/mods/list')
+var ListItemView = require('app/views/servers/mods/available/list_item')
+var tpl = require('tpl/servers/mods/available/list.html')
+
+module.exports = ModsListView.extend({
+  childView: ListItemView,
+  template: _.template(tpl),
+
+  buildChildView: function (item, ChildViewType, childViewOptions) {
+    var options = _.extend({ model: item, selectedModsCollection: this.options.selectedModsCollection }, childViewOptions)
+    var view = new ChildViewType(options)
+    return view
+  }
+})

public/js/app/views/servers/mods/available/list_item.js

@@ -0,0 +1,33 @@
+var _ = require('underscore')
+
+var ServerMod = require('app/models/server_mod')
+var ModListItemView = require('app/views/mods/list_item')
+var tpl = require('tpl/servers/mods/available/list_item.html')
+
+var template = _.template(tpl)
+
+module.exports = ModListItemView.extend({
+  template: template,
+  templateHelpers: function () {
+    var superTemplateHelpers = ModListItemView.prototype.templateHelpers.call(this)
+    var name = this.model.get('name')
+    var modSelected = this.options.selectedModsCollection.get(name)
+
+    return Object.assign({}, superTemplateHelpers, {
+      isDisabledButton: function () {
+        return modSelected ? 'disabled' : ''
+      }
+    })
+  },
+
+  events: {
+    'click .add-mod': 'addMod'
+  },
+
+  addMod: function (e) {
+    e.preventDefault()
+    this.options.selectedModsCollection.add(new ServerMod({
+      name: this.model.get('name')
+    }))
+  }
+})

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

@@ -1,7 +1,9 @@
 var _ = require('underscore')
 
+var ServerMods = require('app/collections/server_mods')
 var ModsView = require('app/views/mods/index')
-var ListView = require('app/views/servers/mods/list')
+var AvailableModsListView = require('app/views/servers/mods/available/list')
+var SelectedModsListView = require('app/views/servers/mods/selected/list')
 var tpl = require('tpl/servers/mods/index.html')
 
 var template = _.template(tpl)
@@ -9,24 +11,66 @@ var template = _.template(tpl)
 module.exports = ModsView.extend({
   template: template,
 
+  regions: {
+    availableView: '#available',
+    selectedView: '#selected'
+  },
+
   modelEvents: {
     change: 'serverUpdated'
   },
 
   initialize: function (options) {
     ModsView.prototype.initialize.call(this, options)
-    this.modsListView = new ListView({
+
+    this.selectedModsCollection = new ServerMods(this.serverMods())
+
+    this.availableModsListView = new AvailableModsListView({
       collection: this.options.mods,
-      server: this.options.server,
+      selectedModsCollection: this.selectedModsCollection,
       filterValue: this.filterValue
     })
+    this.selectedModsListView = new SelectedModsListView({
+      collection: this.selectedModsCollection
+    })
+
+    this.listenTo(this.selectedModsCollection, 'update', this.availableModsListView.render)
+  },
+
+  updateFilter: function (event) {
+    this.filterValue = event.target.value
+
+    this.availableModsListView.filterValue = this.filterValue
+    this.availableModsListView.render()
+    this.selectedModsListView.filterValue = this.filterValue
+    this.selectedModsListView.render()
+  },
+
+  onRender: function () {
+    this.availableView.show(this.availableModsListView)
+    this.selectedView.show(this.selectedModsListView)
+  },
+
+  serverMods: function () {
+    return this.model.get('mods')
+      .map(function (mod) {
+        return {
+          name: mod
+        }
+      })
   },
 
   serverUpdated: function () {
-    this.modsListView.render()
+    this.selectedModsCollection.set(this.serverMods())
   },
 
   serialize: function () {
-    return this.modsListView.serialize()
+    this.selectedModsCollection.sort()
+    return {
+      mods: this.selectedModsCollection.toJSON()
+        .map(function (mod) {
+          return mod.name
+        })
+    }
   }
 })

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

@@ -1,46 +0,0 @@
-var $ = require('jquery')
-var _ = require('underscore')
-
-var ModsListView = require('app/views/mods/list')
-var ListItemView = require('app/views/servers/mods/list_item')
-var tpl = require('tpl/servers/mods/list.html')
-
-module.exports = ModsListView.extend({
-  childView: ListItemView,
-  template: _.template(tpl),
-
-  events: {
-    'click .check-all': 'checkAll',
-    'click .uncheck-all': 'uncheckAll'
-  },
-
-  buildChildView: function (item, ChildViewType, childViewOptions) {
-    var options = _.extend({ model: item, server: this.options.server }, childViewOptions)
-    var view = new ChildViewType(options)
-    return view
-  },
-
-  changeAllCheckbox: function (checked) {
-    this.$('input:checkbox').map(function (idx, el) {
-      return $(el).prop('checked', checked)
-    })
-  },
-
-  checkAll: function (e) {
-    e.preventDefault()
-    this.changeAllCheckbox(true)
-  },
-
-  uncheckAll: function (e) {
-    e.preventDefault()
-    this.changeAllCheckbox(false)
-  },
-
-  serialize: function () {
-    return {
-      mods: this.$('input:checkbox:checked').map(function (idx, el) {
-        return $(el).val()
-      }).get()
-    }
-  }
-})

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

@@ -1,41 +0,0 @@
-var _ = require('underscore')
-
-var ModListItemView = require('app/views/mods/list_item')
-var tpl = require('tpl/servers/mods/list_item.html')
-
-var template = _.template(tpl)
-
-module.exports = ModListItemView.extend({
-  tagName: 'tr',
-  template: template,
-
-  templateHelpers: function () {
-    var modFile = this.model.get('modFile')
-    var name = this.model.get('name')
-    var steamMeta = this.model.get('steamMeta')
-
-    var enabled = this.options.server.get('mods').indexOf(name) > -1
-    var link = null
-    var title = null
-
-    if (steamMeta && steamMeta.id) {
-      if (steamMeta.id) {
-        link = 'https://steamcommunity.com/sharedfiles/filedetails/?id=' + steamMeta.id
-      }
-
-      if (steamMeta.name) {
-        title = steamMeta.name
-      }
-    }
-
-    if (modFile && modFile.name) {
-      title = modFile.name
-    }
-
-    return {
-      enabled: enabled,
-      link: link,
-      title: title
-    }
-  }
-})

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

@@ -0,0 +1,21 @@
+var _ = require('underscore')
+var Marionette = require('marionette')
+
+var ServerMod = require('app/models/server_mod')
+var ListItemView = require('app/views/servers/mods/selected/list_item')
+var tpl = require('tpl/servers/mods/selected/list.html')
+
+module.exports = Marionette.CompositeView.extend({
+  childView: ListItemView,
+  childViewContainer: 'tbody',
+  template: _.template(tpl),
+
+  events: {
+    'click .add-mod': 'addMod'
+  },
+
+  addMod: function (e) {
+    e.preventDefault()
+    this.collection.add(new ServerMod({ name: 'Unlisted' }))
+  }
+})

public/js/app/views/servers/mods/selected/list_item.js

@@ -0,0 +1,27 @@
+var $ = require('jquery')
+var _ = require('underscore')
+
+var ModListItemView = require('app/views/mods/list_item')
+var tpl = require('tpl/servers/mods/selected/list_item.html')
+
+var template = _.template(tpl)
+
+module.exports = ModListItemView.extend({
+  template: template,
+
+  events: {
+    'click button.delete': 'delete',
+    'change select#difficulty': 'changed',
+    'change input#name': 'changed'
+  },
+
+  changed: function (e) {
+    var val = $(e.target).val()
+    this.model.set(e.target.id, val)
+  },
+
+  delete: function (e) {
+    e.preventDefault()
+    this.model.destroy()
+  }
+})

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

@@ -1,10 +1,9 @@
 <form>
-  <button class="btn btn-xs btn-primary check-all">Check All</button>
-  <button class="btn btn-xs btn-primary uncheck-all">Uncheck All</button>
   <table class="table table-striped">
     <thead>
       <tr>
         <th>Mod</th>
+        <th></th>
       </tr>
     </thead>
 

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

@@ -0,0 +1,18 @@
+<td>
+  <%-name%>
+  <% if (link) { %>
+    <a href='<%-link%>' target=_blank rel='noopener noreferrer'>
+      <%-title%>
+    </a>
+  <% } else if (title) { %>
+    <%-title%>
+  <% } %>
+</td>
+<td>
+  <a class="btn btn-primary btn-xs pull-right add-mod" <%- isDisabledButton() %>>
+    <span class="glyphicon glyphicon-plus"></span>
+    Add
+  </a>
+
+  <div class="clearfix"></div>
+</td>

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

@@ -1,8 +1,14 @@
-<form>
+<div class="row">
+  <div class="col-sm-6">
+    <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>
+    </form>
 
-<div id="list"></div>
+    <div id="available"></div>
+  </div>
+  <div class="col-sm-6">
+    <div id="selected"></div>
+</div>

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

@@ -1,15 +0,0 @@
-<td>
-  <div class="checkbox">
-    <label>
-      <input type="checkbox" value="<%-name%>" <% if (enabled) { %>checked<% } %> >
-      <%-name%>
-      <% if (link) { %>
-        <a href='<%-link%>' target=_blank rel='noopener noreferrer'>
-          <%-title%>
-        </a>
-      <% } else if (title) { %>
-        <%-title%>
-      <% } %>
-    </label>
-  </div>
-</td>

public/js/tpl/servers/mods/selected/list.html

@@ -0,0 +1,18 @@
+<form>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Selected Mods</th>
+        <th></th>
+      </tr>
+    </thead>
+
+    <!-- want to insert collection items, here -->
+    <tbody></tbody>
+  </table>
+</form>
+
+<a class="btn btn-primary add-mod" href="#">
+  <span class="glyphicon glyphicon-plus"></span>
+  Add unlisted mod
+</a>

public/js/tpl/servers/mods/selected/list_item.html

@@ -0,0 +1,19 @@
+<td>
+  <form class="form-horizontal" role="form">
+    <div class="form-group">
+      <label for="name" class="col-sm-2 control-label">Name</label>
+      <div class="col-sm-10">
+        <input type="text" class="form-control" id="name" placeholder="Name" value="<%- name %>">
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
+        <button class="btn btn-xs btn-danger delete">
+          <span class="glyphicon glyphicon-minus"></span>
+          Remove mod
+        </button>
+      </div>
+    </div>
+  </form>
+</td>