Add status and refactor JS.

assets/js/application.js

@@ -2,13 +2,30 @@ var QueueSong = can.Model({
   findAll: 'GET /api/queue'
 }, {});
 
-QueueSong.findAll({}, function(songs) {
-  $('#queue').html(can.view('queueTemplate',
-                            { songs: songs }));
-}, function(xhr) {
+var queueSongs = new can.List();
 
+// Update the queue display when the queueSongs list changes
+queueSongs.bind('change', function(event) {
+  $('#queue').html(can.view('queueTemplate',
+                            { songs: this }));
 });
 
+// Get the songs currently in the queue
+QueueSong.findAll({}, function(songs) {
+  queueSongs.replace(songs);
+}, function(xhr) {
+  console.log("An error occured with the request.");
+});
+
+var updatePlaying = function(queue, index) {
+  queue.forEach(function(element) {
+    element.attr('playing', false);
+  });
+  item = queue.attr(index);
+  item.attr('playing', true);
+}
+
+// Set up necessary events and startup stuff
 $(document).ready(function() {
   // Bind transport click events.
   $('#transport').on('click', '#controls button', function(e) {

models/mpd_connection.rb

@@ -4,4 +4,8 @@ class MPDConnection
     @@mpd.connect unless @@mpd.connected?
     @@mpd
   end
+
+  def self.status
+    self.mpd.status
+  end
 end

mpd_client.rb

@@ -7,6 +7,7 @@ require 'sinatra/asset_pipeline'
 require 'json'
 require 'cgi'
 
+require './models/mpd_connection'
 require './models/control'
 require './models/album'
 require './models/artist'
@@ -26,6 +27,10 @@ class MPDClient < Sinatra::Base
 
   namespace '/api' do
 
+    get '/status' do
+      JSON MPDConnection.status
+    end
+
     get '/albums' do
       JSON Album.all.map(&:to_h)
     end
@@ -53,6 +58,7 @@ class MPDClient < Sinatra::Base
     put '/control/:action' do
       if Control.controls.include?(params[:action].to_sym)
         Control.send(params[:action])
+        JSON MPDConnection.status
       else
         not_found
       end

views/index.erb

@@ -17,7 +17,7 @@
       <h2>Queue</h2>
       <ul id="queue">
       {{#songs}}
-        <li{{#playing}} class="playing"{{/playing}}>{{ artist }} - {{ title }}</li>
+      <li id="{{ id }}"{{#playing}} class="playing"{{/playing}}>{{ artist }} - {{ title }}</li>
       {{/songs}} {{^songs}}
         <li>Play queue empty</li>
       {{/songs}}