From 2d8207ece4e3e0a43790100f197dfd1388115165 Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Wed, 8 Jan 2014 15:01:59 +0000
Subject: [PATCH] Refactor server into construct.

---
 assets/js/components/queue.js     |  9 ++++++++-
 assets/js/components/transport.js |  9 +--------
 assets/js/constructs/server.js    | 31 +++++++++++++++++++++++++++++++
 assets/js/helpers/server.js       |  5 -----
 assets/js/models/queueSong.js     |  9 +++++----
 assets/js/models/status.js        | 21 ++++++++++-----------
 6 files changed, 55 insertions(+), 29 deletions(-)
 create mode 100644 assets/js/constructs/server.js
 delete mode 100644 assets/js/helpers/server.js

diff --git a/assets/js/components/queue.js b/assets/js/components/queue.js
index 42d8661..8f76fbf 100644
--- a/assets/js/components/queue.js
+++ b/assets/js/components/queue.js
@@ -2,6 +2,13 @@ can.Component.extend({
 
   tag: 'mpd-queue',
 
-  template: can.view('views/queue.mustache')
+  template: can.view('views/queue.mustache'),
+
+  events: {
+    'li click': function(element, event) {
+      var pos = $(element).data('pos');
+      server.playSong(pos);
+    }
+  }
 
 });
diff --git a/assets/js/components/transport.js b/assets/js/components/transport.js
index ced3354..e6da1fa 100644
--- a/assets/js/components/transport.js
+++ b/assets/js/components/transport.js
@@ -5,16 +5,9 @@ can.Component.extend({
   template: can.view('views/transport.mustache'),
 
   events: {
-    sendCommand: function(command) {
-      can.ajax({
-        url: '/api/control/' + command,
-        type: 'PUT'
-      });
-    },
-
     'button click': function(element, event) {
       var command = $(element).data('command');
-      this.sendCommand(command);
+      server.sendCommand(command);
       $(element).blur();
     }
   }
diff --git a/assets/js/constructs/server.js b/assets/js/constructs/server.js
new file mode 100644
index 0000000..f3354a5
--- /dev/null
+++ b/assets/js/constructs/server.js
@@ -0,0 +1,31 @@
+var Server = can.Construct.extend({
+
+  init: function() {
+    this.eventSource = new EventSource('/api/stream')
+  },
+
+  onMessage: function(callback) {
+    this.eventSource.addEventListener('message', function(event) {
+      var response = JSON.parse(event.data);
+      callback(response);
+    });
+  },
+
+  sendCommand: function(command) {
+    can.ajax({
+      url: '/api/control/' + command,
+      type: 'PUT'
+    });
+  },
+
+  playSong: function(pos) {
+    can.ajax({
+      url: '/api/control/play',
+      data: { pos: pos },
+      type: 'PUT'
+    });
+  }
+
+});
+
+window.server = new Server();
diff --git a/assets/js/helpers/server.js b/assets/js/helpers/server.js
deleted file mode 100644
index aa5f739..0000000
--- a/assets/js/helpers/server.js
+++ /dev/null
@@ -1,5 +0,0 @@
-window.server = {
-
-  eventSource: new EventSource('/api/stream'),
-
-}
diff --git a/assets/js/models/queueSong.js b/assets/js/models/queueSong.js
index 24ddf1d..3ac2057 100644
--- a/assets/js/models/queueSong.js
+++ b/assets/js/models/queueSong.js
@@ -13,11 +13,10 @@ var QueueSong = can.Model.extend({
 QueueSong.List = can.List.extend({
 
   init: function() {
-    server.eventSource.addEventListener('message', this.updateQueue.bind(this));
+    server.onMessage(this.updateQueue.bind(this));
   },
 
-  updateQueue: function(event) {
-    var response = JSON.parse(event.data);
+  updateQueue: function(response) {
     if (response.type === 'queue') {
       this.attr(response.data, true);
     }
@@ -27,7 +26,9 @@ QueueSong.List = can.List.extend({
     this.each(function(item) {
       item.attr('playing', false);
     });
-    this.attr(newSong).attr('playing', true);
+    if (this.attr(newSong) !== undefined) {
+      this.attr(newSong).attr('playing', true);
+    }
   }
 
 });
diff --git a/assets/js/models/status.js b/assets/js/models/status.js
index 981882e..daf0cad 100644
--- a/assets/js/models/status.js
+++ b/assets/js/models/status.js
@@ -5,19 +5,18 @@ var Status = can.Model.extend({
 }, {
 
   init: function() {
-    server.eventSource.addEventListener('message', this.updateStatus.bind(this));
+    server.onMessage(this.updateStatus.bind(this));
   },
 
-  updateStatus: function(event) {
-    var response = JSON.parse(event.data);
-      switch (response.type) {
-        case 'status':
-          this.attr(response.data);
-          break;
-        case 'time':
-          this.attr('time', response.data);
-          break;
-      }
+  updateStatus: function(response) {
+    switch (response.type) {
+      case 'status':
+        this.attr(response.data);
+        break;
+      case 'time':
+        this.attr('time', response.data);
+        break;
+    }
   },
 
   playing: function() {