Merge pull request #148 from Dahlgren/feature/dashboard-start-stop

add start/stop button & player counts to dashboard

public/js/app/models/server.js

@@ -1,3 +1,4 @@
+var $ = require('jquery')
 var Backbone = require('backbone')
 
 module.exports = Backbone.Model.extend({
@@ -22,5 +23,44 @@ module.exports = Backbone.Model.extend({
     von: false,
     verify_signatures: false
   },
-  urlRoot: '/api/servers/'
+  urlRoot: '/api/servers/',
+  start: function (cb) {
+    var self = this
+    $.ajax({
+      url: '/api/servers/' + self.get('id') + '/start',
+      type: 'POST',
+      success: function (resp) {
+        self.set('pid', resp.pid)
+
+        if (cb) {
+          cb()
+        }
+      },
+      error: function (err) {
+        if (cb) {
+          cb(err)
+        }
+      }
+    })
+  },
+
+  stop: function (cb) {
+    var self = this
+    $.ajax({
+      url: '/api/servers/' + self.get('id') + '/stop',
+      type: 'POST',
+      success: function (resp) {
+        self.set('pid', resp.pid)
+
+        if (cb) {
+          cb()
+        }
+      },
+      error: function (err) {
+        if (cb) {
+          cb(err)
+        }
+      }
+    })
+  }
 })

public/js/app/views/servers/info.js

@@ -1,4 +1,3 @@
-var $ = require('jquery')
 var _ = require('underscore')
 var Marionette = require('marionette')
 var sweetAlert = require('sweet-alert')
@@ -16,14 +15,18 @@ module.exports = Marionette.LayoutView.extend({
   start: function (event) {
     var self = this
     event.preventDefault()
-    $.ajax({
-      url: '/api/servers/' + this.model.get('id') + '/start',
-      type: 'POST',
-      success: function (resp) {
-        self.model.set('pid', resp.pid)
-        self.render()
-      },
-      error: $.noop
+
+    this.model.start(function (err) {
+      if (err) {
+        sweetAlert({
+          title: 'Error',
+          text: err.responseText,
+          type: 'error'
+        })
+        return
+      }
+
+      self.render()
     })
   },
 
@@ -39,14 +42,19 @@ module.exports = Marionette.LayoutView.extend({
       confirmButtonText: 'Yes, stop it!'
     },
     function () {
-      $.ajax({
-        url: '/api/servers/' + self.model.get('id') + '/stop',
-        type: 'POST',
-        success: function (resp) {
-          self.model.set('pid', resp.pid)
-          self.render()
-        },
-        error: $.noop
+      event.preventDefault()
+
+      self.model.stop(function (err) {
+        if (err) {
+          sweetAlert({
+            title: 'Error',
+            text: err.responseText,
+            type: 'error'
+          })
+          return
+        }
+
+        self.render()
       })
     })
   }

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

@@ -12,7 +12,9 @@ module.exports = Marionette.ItemView.extend({
 
   events: {
     'click .clone': 'clone',
-    'click .delete': 'delete'
+    'click .delete': 'delete',
+    'click .start': 'start',
+    'click .stop': 'stop'
   },
 
   modelEvents: {
@@ -41,6 +43,50 @@ module.exports = Marionette.ItemView.extend({
     })
   },
 
+  start: function (event) {
+    var self = this
+    event.preventDefault()
+    this.model.start(function (err) {
+      if (err) {
+        sweetAlert({
+          title: 'Error',
+          text: err.responseText,
+          type: 'error'
+        })
+        return
+      }
+
+      self.render()
+    })
+  },
+
+  stop: function (event) {
+    var self = this
+    event.preventDefault()
+    sweetAlert({
+      title: 'Are you sure?',
+      text: 'The server will stopped.',
+      type: 'warning',
+      showCancelButton: true,
+      confirmButtonClass: 'btn-warning',
+      confirmButtonText: 'Yes, stop it!'
+    },
+    function () {
+      self.model.stop(function (err) {
+        if (err) {
+          sweetAlert({
+            title: 'Error',
+            text: err.responseText,
+            type: 'error'
+          })
+          return
+        }
+
+        self.render()
+      })
+    })
+  },
+
   serverUpdated: function (event) {
     this.render()
   }

public/js/tpl/servers/list.html

@@ -1,7 +1,7 @@
 <table class="table table-striped">
   <thead>
     <tr>
-      <th>Status</th>
+      <th colspan="2">Status</th>
       <th>Port</th>
       <th>Title</th>
       <th></th>

public/js/tpl/servers/list_item.html

@@ -1,13 +1,28 @@
 <td>
   <% if (typeof(pid) != "undefined" && pid) { %>
     <% if (state) { %>
-      <span class="label label-success">Online</span>
+      <span class="label label-success">Online
+      (<%- (state.players) ? state.players.length : '?' %>/<%- state.maxplayers %>)
+      </span>
     <% } else { %>
       <span class="label label-info">Launching</span>
     <% } %>
   <% } else { %>
     <span class="label label-default">Offline</span>
   <% } %>
+</td>
+<td>
+  <% if (typeof(pid) != "undefined" && pid) { %>
+  <button type="button" class="btn btn-primary btn-xs stop pull-right">
+    <span class="glyphicon glyphicon-stop"></span> Stop
+  </button>
+  <% } else { %>
+  <button type="button" class="btn btn-primary btn-xs start pull-right">
+    <span class="glyphicon glyphicon-play"></span> Start
+  </button>
+  <% } %>
+
+
 </td>
 <td><%-port%></td>
 <td style="width: 100%;">