Better mission handling

public/js/app/router.js

@@ -7,7 +7,7 @@ define(function (require) {
       LayoutView      = require('app/views/layout'),
       NavigationView  = require('app/views/navigation'),
       ServersView     = require('app/views/servers/list'),
-      MissionsListView= require('app/views/missions/list'),
+      MissionsView    = require('app/views/missions/index'),
       ModsListView    = require('app/views/mods/list'),
       ServerView      = require('app/views/servers/view'),
       Missions        = require('app/collections/missions'),
@@ -21,7 +21,7 @@ define(function (require) {
       layoutView = new LayoutView({el: $body}).render(),
       navigationView = new NavigationView({servers: servers}),
       serversView = new ServersView({collection: servers}),
-      missionsListView = new MissionsListView({collection: missions}),
+      missionsView = new MissionsView({missions: missions}),
       modsListView = new ModsListView({collection: mods});
 
   return Backbone.Router.extend({
@@ -50,8 +50,8 @@ define(function (require) {
     },
 
     missions: function () {
-      layoutView.content.show(missionsListView);
-      missionsListView.delegateEvents();
+      layoutView.content.show(missionsView);
+      missionsView.delegateEvents();
     },
 
     mods: function () {

public/js/app/views/missions/form.js

@@ -15,31 +15,27 @@ define(function (require) {
   return Marionette.ItemView.extend({
     template: _.template(tpl),
 
+    events: {
+      'click form button': 'submit',
+    },
+
     initialize: function (options) {
       this.missions = options.missions;
       this.model = new Mission();
-      this.bind("ok", this.submit);
-      this.bind('shown', this.shown);
     },
 
-    shown: function (modal) {
-      var $okBtn = modal.$el.find('.btn.ok');
+    onShow: function () {
+      var $okBtn = this.$el.find('form button[type=submit]');
       $okBtn.addClass('ladda-button').attr('data-style', 'expand-left');
 
       this.laddaBtn = Ladda.create($okBtn.get(0));
     },
 
-    submit: function (modal) {
+    submit: function () {
       var self = this;
       var $form = $('form');
 
-      modal.preventClose();
-
-      $form.find('.form-group').removeClass('has-error');
-      $form.find('.help-block').text('');
-
       this.laddaBtn.start();
-      modal.$el.find('.btn.cancel').addClass('disabled');
 
       $.ajax("/api/missions", {
         files: $form.find(":file"),
@@ -47,8 +43,10 @@ define(function (require) {
       }).complete(function(data) {
         self.missions.fetch({success : function () {
           self.laddaBtn.stop();
-          modal.close();
+          self.render();
         }});
+      }).error(function() {
+        self.laddaBtn.stop();
       });
     },
   });

public/js/app/views/missions/index.js

@@ -0,0 +1,27 @@
+define(function (require) {
+
+  "use strict";
+
+  var $                   = require('jquery'),
+      _                   = require('underscore'),
+      Backbone            = require('backbone'),
+      Marionette          = require('marionette'),
+      FormView            = require('app/views/missions/form'),
+      ListView            = require('app/views/missions/list'),
+      tpl                 = require('text!tpl/missions/index.html');
+
+  return Marionette.Layout.extend({
+    template: _.template(tpl),
+
+    regions: {
+      formView: "#form",
+      listView: "#list",
+    },
+
+    onRender: function() {
+      this.formView.show(new FormView({missions: this.options.missions}));
+      this.listView.show(new ListView({collection: this.options.missions}));
+    },
+  });
+
+});

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

@@ -7,7 +7,6 @@ define(function (require) {
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
       ListItemView        = require('app/views/missions/list_item'),
-      FormView            = require('app/views/missions/form'),
       tpl                 = require('text!tpl/missions/list.html'),
 
       template = _.template(tpl);
@@ -16,15 +15,5 @@ define(function (require) {
     itemView: ListItemView,
     itemViewContainer: "tbody",
     template: template,
-
-    events: {
-      "click #upload": "upload"
-    },
-
-    upload: function (event) {
-      event.preventDefault();
-      var view = new FormView({missions: this.collection});
-      new Backbone.BootstrapModal({ content: view, animate: true }).open()
-    },
   });
 });

public/js/tpl/missions/form.html

@@ -4,4 +4,5 @@
     <input type="file" class="form-control path" name="mission" id="mission" data-field="mission">
     <span class="help-block">Only supports missions packed as a PBO</span>
   </div>
+  <button type="submit" class="btn btn-primary">Upload</button>
 </form>

public/js/tpl/missions/index.html

@@ -0,0 +1,4 @@
+<div class="row">
+  <div class="col-md-4 col-md-push-8" id="form"></div>
+  <div class="col-md-8 col-md-pull-4" id="list"></div>
+</div>

public/js/tpl/missions/list.html

@@ -9,5 +9,3 @@
   <!-- want to insert collection items, here -->
   <tbody></tbody>
 </table>
-
-<a class="btn btn-primary" id="upload" href="#">Upload new mission</a>