Merge pull request #152 from Dahlgren/feature/mission-parameters

Mission parameters

package.json

@@ -17,7 +17,7 @@
     ]
   },
   "dependencies": {
-    "arma-server": "0.0.9",
+    "arma-server": "0.0.10",
     "async": "^0.9.0",
     "backbone": "1.3.3",
     "backbone.bootstrap-modal": "https://github.com/powmedia/backbone.bootstrap-modal/archive/632210077c2424be2ee6ea2aafe0d3fe016ae524.tar.gz",

public/js/app/collections/mission_parameters.js

@@ -0,0 +1,7 @@
+var Backbone = require('backbone')
+
+var MissionParameter = require('app/models/mission_parameter')
+
+module.exports = Backbone.Collection.extend({
+  model: MissionParameter
+})

public/js/app/models/mission_parameter.js

@@ -0,0 +1,8 @@
+var Backbone = require('backbone')
+
+module.exports = Backbone.Model.extend({
+  defaults: {
+    name: '',
+    value: ''
+  }
+})

public/js/app/models/mission_rotation.js

@@ -3,6 +3,7 @@ var Backbone = require('backbone')
 module.exports = Backbone.Model.extend({
   defaults: {
     name: '',
-    difficulty: 'recruit'
+    difficulty: 'recruit',
+    params: []
   }
 })

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

@@ -0,0 +1,27 @@
+var _ = require('underscore')
+var Marionette = require('marionette')
+
+var MissionParameter = require('app/models/mission_parameter')
+var ListItemView = require('app/views/servers/missions/parameters/list_item')
+var tpl = require('tpl/servers/missions/parameters/list.html')
+
+module.exports = Marionette.CompositeView.extend({
+  childView: ListItemView,
+  childViewContainer: 'tbody',
+  template: _.template(tpl),
+
+  events: {
+    'click .add-parameter': 'addParameter'
+  },
+
+  childViewOptions: function (model, index) {
+    return {
+      index: index
+    }
+  },
+
+  addParameter: function (e) {
+    e.preventDefault()
+    this.collection.add(new MissionParameter())
+  }
+})

public/js/app/views/servers/missions/parameters/list_item.js

@@ -0,0 +1,33 @@
+var $ = require('jquery')
+var _ = require('underscore')
+var Marionette = require('marionette')
+
+var tpl = require('tpl/servers/missions/parameters/list_item.html')
+
+var template = _.template(tpl)
+
+module.exports = Marionette.ItemView.extend({
+  tagName: 'tr',
+  template: template,
+
+  events: {
+    'click button.parameter-delete': 'delete',
+    'change input': 'changed'
+  },
+
+  changed: function (e) {
+    var val = $(e.target).val()
+    this.model.set(e.target.dataset.attr, val)
+  },
+
+  delete: function (e) {
+    e.preventDefault()
+    this.model.destroy()
+  },
+
+  templateHelpers: function () {
+    return {
+      index: this.options.index
+    }
+  }
+})

public/js/app/views/servers/missions/rotation/list_item.js

@@ -2,11 +2,13 @@ var $ = require('jquery')
 var _ = require('underscore')
 var Marionette = require('marionette')
 
+var MissionParameters = require('app/collections/mission_parameters')
+var ParametersListView = require('app/views/servers/missions/parameters/list')
 var tpl = require('tpl/servers/missions/rotation/list_item.html')
 
 var template = _.template(tpl)
 
-module.exports = Marionette.ItemView.extend({
+module.exports = Marionette.LayoutView.extend({
   tagName: 'tr',
   template: template,
 
@@ -16,6 +18,20 @@ module.exports = Marionette.ItemView.extend({
     'change input#name': 'changed'
   },
 
+  regions: {
+    parametersView: '.parameters'
+  },
+
+  initialize: function (options) {
+    this.parametersCollection = new MissionParameters(this.model.get('params'))
+    this.parametersCollection.on('all', this.updateMissionParameters, this)
+    this.parametersListView = new ParametersListView({ collection: this.parametersCollection })
+  },
+
+  updateMissionParameters: function () {
+    this.model.set('params', this.parametersCollection.toJSON())
+  },
+
   changed: function (e) {
     var val = $(e.target).val()
     this.model.set(e.target.id, val)
@@ -27,6 +43,7 @@ module.exports = Marionette.ItemView.extend({
   },
 
   onRender: function () {
+    this.parametersView.show(this.parametersListView)
     var difficulty = this.model.get('difficulty')
     var $option = this.$el.find("#difficulty option[value='" + difficulty + "']")
     $option.attr('selected', 'selected')

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

@@ -0,0 +1,11 @@
+<form>
+  <table class="table table-striped">
+    <!-- want to insert collection items, here -->
+    <tbody></tbody>
+  </table>
+</form>
+
+<a class="btn btn-primary btn-xs add-parameter" href="#">
+  <span class="glyphicon glyphicon-plus"></span>
+  Add parameter
+</a>

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

@@ -0,0 +1,32 @@
+<td>
+  <form role="form">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-xs-5">
+          <label for="parameter-name-<%- index %>" class="control-label">Name</label>
+        </div>
+
+        <div class="col-xs-3">
+          <label for="parameter-value-<%- index %>" class="control-label">Value</label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-xs-5">
+          <input type="text" class="form-control" id="parameter-name-<%- index %>" placeholder="Name" value="<%- name %>" data-attr="name" />
+        </div>
+
+        <div class="col-xs-3">
+          <input type="number" class="form-control" id="parameter-value-<%- index %>" placeholder="Value" value="<%- value %>" data-attr="value" />
+        </div>
+
+        <div class="col-xs-4">
+          <button class="btn btn-xs btn-danger parameter-delete">
+            <span class="glyphicon glyphicon-minus"></span>
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</td>

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

@@ -20,11 +20,18 @@
       </div>
     </div>
 
+    <div class="form-group">
+      <label for="parameters" class="col-sm-2 control-label">Parameters</label>
+      <div class="col-sm-10">
+        <div class="parameters"></div>
+      </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
+          Remove mission
         </button>
       </div>
     </div>