From 587a42fd4d6a654f84fb6bfc1b3fbcc67fbbd660 Mon Sep 17 00:00:00 2001
From: David Norman <davidjpnorman@googlemail.com>
Date: Sun, 8 Nov 2015 14:42:21 +0000
Subject: [PATCH] Added '+' add functionality to browse tracks/albums/artists

added stage 1 playlist functionality
---
 web/src/css/piradio.css         |  4 ++++
 web/src/html/browse_album.html  |  8 ++++++--
 web/src/html/browse_artist.html |  7 +++++--
 web/src/html/browse_track.html  |  1 +
 web/src/html/playlist.html      | 27 ++++++++++++++++++++++++++-
 web/src/index.html              | 12 ++++++------
 web/src/js/app.js               |  2 ++
 web/src/js/browse_album.js      |  4 ++++
 web/src/js/browse_artist.js     |  4 ++++
 web/src/js/browse_track.js      |  4 ++++
 web/src/js/playlist.js          |  9 ++++++++-
 web/src/js/slim-client.js       |  9 ++++++++-
 12 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/web/src/css/piradio.css b/web/src/css/piradio.css
index e69de29..727ce0b 100644
--- a/web/src/css/piradio.css
+++ b/web/src/css/piradio.css
@@ -0,0 +1,4 @@
+span.bigicon {
+  padding: 2px;
+  font-size: 4em;
+}
diff --git a/web/src/html/browse_album.html b/web/src/html/browse_album.html
index 6f1bf87..39433b1 100644
--- a/web/src/html/browse_album.html
+++ b/web/src/html/browse_album.html
@@ -1,6 +1,10 @@
 <div ng-init="init()" />
 
-<p>Album: {{album_info.album}}</p>
+<p>
+Album: {{album_info.album}}
+<a href="javascript:;" ng-click="add_album(album_info.id)"><span class="glyphicon glyphicon-plus-sign" /></a>
+</p>
+
 <p>Artist: <a href="#/local/artist/{{album_info.artist_id}}">{{album_info.artist}}</a></p>
 
 <table class="table table-striped">
@@ -14,7 +18,7 @@
   </thead>
   <tbody>
     <tr ng-repeat="t in tracks">
-      <th><span class="glyphicon glyphicon-plus-sign" /></th>
+      <th><a href="javascript:;" ng-click="add_track(t.id)"><span class="glyphicon glyphicon-plus-sign" /></a></th>
       <td>{{t.tracknum}}</td>
       <td><a href="#/local/track/{{t.id}}">{{t.title}}</a></td>
       <td><a href="#/local/artist/{{t.artist_id}}">{{t.artist}}</a></td>
diff --git a/web/src/html/browse_artist.html b/web/src/html/browse_artist.html
index 79baa9a..987932b 100644
--- a/web/src/html/browse_artist.html
+++ b/web/src/html/browse_artist.html
@@ -1,6 +1,9 @@
 <div ng-init="init()" />
 
-<p>Artist: {{artist_info.artist}}</p>
+<p>
+Artist: {{artist_info.artist}}
+<a href="javascript:;" ng-click="add_artist(artist_info.id)"><span class="glyphicon glyphicon-plus-sign" /></a>
+</p>
 
 <table class="table table-striped">
   <thead>
@@ -11,7 +14,7 @@
   </thead>
   <tbody>
     <tr ng-repeat="r in albums">
-      <th><span class="glyphicon glyphicon-plus-sign" /></th>
+      <th><a href="javascript:;" ng-click="add_album(r.id)"><span class="glyphicon glyphicon-plus-sign" /></a></th>
       <td><a href="#/local/album/{{r.id}}">{{r.album}}</a></td>
     </tr>
   </tbody>
diff --git a/web/src/html/browse_track.html b/web/src/html/browse_track.html
index 42d1493..9cebde0 100644
--- a/web/src/html/browse_track.html
+++ b/web/src/html/browse_track.html
@@ -1,6 +1,7 @@
 <div ng-init="init()" />
 
 <h2>Title: {{track.title}}</h2>
+<a href="javascript:;" ng-click="add_track(track.id)"><span class="glyphicon glyphicon-plus-sign" /></a>
 <ul>
 <li>Artist: <a href="#/local/artist/{{track.artist_id}}">{{track.artist}}</a></li>
 <li>Album: <a href="#/local/album/{{track.album_id}}">{{track.album}}</a></li>
diff --git a/web/src/html/playlist.html b/web/src/html/playlist.html
index f027940..2fc4be0 100644
--- a/web/src/html/playlist.html
+++ b/web/src/html/playlist.html
@@ -1 +1,26 @@
-<p>playlist page</p>
+<div ng-init="init()">
+
+<p>Player: {{data.player_name}} @ {{data.player_ip}}
+
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th class="col-xs-1"></th>
+      <th class="col-xs-1">Number</th>
+      <th class="col-xs-5">Track</th>
+      <th class="col-xs-4">Album</th>
+      <th class="col-xs-2">Artist</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr ng-class="($index==data.playlist_cur_index)?'success':''" ng-repeat="r in data.playlist_loop">
+      <td></td>
+      <td>{{r.tracknum}}</td>
+      <td><a href="#/local/track/{{r.id}}">{{r.title}}</a></td>
+      <td><a href="#/local/album/{{r.album_id}}">{{r.album}}</a></td>
+      <td><a href="#/local/artist/{{r.artist_id}}">{{r.artist}}</a></td>
+    </tr>
+  </tbody>
+</table>
+
+</div>
diff --git a/web/src/index.html b/web/src/index.html
index ccd6863..2dfc24d 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -34,12 +34,12 @@
   <body role="document">
 
     <div ng-controller="TransportController">
-      <a href="#/search"><span class="glyphicon glyphicon-search"></span></a>
-      <a href="#/playlist"><span class="glyphicon glyphicon-list"></span></a>
-      <a href="javascript:;" ng-click="ctrl_fb()"><span class="glyphicon glyphicon-fast-backward"></span></a>
-      <a href="javascript:;" ng-click="ctrl_play()"><span class="glyphicon glyphicon-play"></span></a>
-      <a href="javascript:;" ng-click="ctrl_pause()"><span class="glyphicon glyphicon-pause"></span></a>
-      <a href="javascript:;" ng-click="ctrl_ff()"><span class="glyphicon glyphicon-fast-forward"></span></a>
+      <a href="#/search"><span class="glyphicon bigicon glyphicon-search"></span></a>
+      <a href="#/playlist"><span class="glyphicon bigicon glyphicon-list"></span></a>
+      <a href="javascript:;" ng-click="ctrl_fb()"><span class="glyphicon bigicon glyphicon-fast-backward"></span></a>
+      <a href="javascript:;" ng-click="ctrl_play()"><span class="glyphicon bigicon glyphicon-play"></span></a>
+      <a href="javascript:;" ng-click="ctrl_pause()"><span class="glyphicon bigicon glyphicon-pause"></span></a>
+      <a href="javascript:;" ng-click="ctrl_ff()"><span class="glyphicon bigicon glyphicon-fast-forward"></span></a>
     </div>
 
     <div class="container main-body" role="main">
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 7fdecd0..da2fb2f 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -15,7 +15,9 @@ var app = angular.module('piradio', ['ngRoute', 'ui.bootstrap'])
     $scope.serverStatus = serverStatus;
   })
   .controller('TransportController', function($scope, slimClient) {
+    $scope.ctrl_fb = slimClient.ctrl_fb;
     $scope.ctrl_play = slimClient.ctrl_play;
     $scope.ctrl_pause = slimClient.ctrl_pause;
+    $scope.ctrl_ff = slimClient.ctrl_ff;
   });
 
diff --git a/web/src/js/browse_album.js b/web/src/js/browse_album.js
index 445bc17..5062d41 100644
--- a/web/src/js/browse_album.js
+++ b/web/src/js/browse_album.js
@@ -2,6 +2,10 @@ function AlbumController($scope, $routeParams, slimClient) {
 
   $scope.client = slimClient;
 
+  $scope.add_track = slimClient.add_track;
+  $scope.add_album = slimClient.add_album;
+  $scope.add_artist = slimClient.add_artist;
+
   $scope.init = function() {
     var album = $routeParams.album;
     if (album != "") {
diff --git a/web/src/js/browse_artist.js b/web/src/js/browse_artist.js
index 7e57ce1..0e87dc1 100644
--- a/web/src/js/browse_artist.js
+++ b/web/src/js/browse_artist.js
@@ -2,6 +2,10 @@ function ArtistController($scope, $routeParams, slimClient) {
 
   $scope.client = slimClient;
 
+  $scope.add_track = slimClient.add_track;
+  $scope.add_album = slimClient.add_album;
+  $scope.add_artist = slimClient.add_artist;
+
   $scope.init = function() {
     var artist = $routeParams.artist;
     if (artist != "") {
diff --git a/web/src/js/browse_track.js b/web/src/js/browse_track.js
index cc566c3..c647e4a 100644
--- a/web/src/js/browse_track.js
+++ b/web/src/js/browse_track.js
@@ -2,6 +2,10 @@ function TrackController($scope, $routeParams, slimClient) {
 
   $scope.client = slimClient;
 
+  $scope.add_track = slimClient.add_track;
+  $scope.add_album = slimClient.add_album;
+  $scope.add_artist = slimClient.add_artist;
+
   $scope.init = function() {
     var track = $routeParams.track;
     if (track != "") {
diff --git a/web/src/js/playlist.js b/web/src/js/playlist.js
index b2edeb6..d6a4051 100644
--- a/web/src/js/playlist.js
+++ b/web/src/js/playlist.js
@@ -1,3 +1,10 @@
-function PlaylistController($scope) {
+function PlaylistController($scope, slimClient) {
+
+  $scope.init = function() {
+    slimClient.player_status().
+      success(function(result) {
+        $scope.data = result;
+      });    
+  };
 }
 
diff --git a/web/src/js/slim-client.js b/web/src/js/slim-client.js
index 05cab75..8af2a51 100644
--- a/web/src/js/slim-client.js
+++ b/web/src/js/slim-client.js
@@ -52,6 +52,8 @@ function SlimClient($http, $location, serverStatus) {
     };
 
     this.ctrl_fb = function() {
+      data = ["playlist", "index", "-1"];
+      return slimRequest(data);
     };
 
     this.ctrl_play = function() {
@@ -65,8 +67,13 @@ function SlimClient($http, $location, serverStatus) {
     };
 
     this.ctrl_ff = function() {
+      data = ["playlist", "index", "+1"];
+      return slimRequest(data);
     };
 
-
+    this.player_status = function() {
+      data = ["status", 0, 100, "tags:adelsty"];
+      return slimRequest(data);
+    }
 };