From 45dd2d663708bc1def07a1af7408c05229323754 Mon Sep 17 00:00:00 2001
From: jcass <john.cass77@gmail.com>
Date: Fri, 6 Jan 2017 21:19:09 +0200
Subject: [PATCH] Add more options to popup dialog box for inserting tracks in
 tracklist.

---
 .../static/css/webclient.css                  | 11 +++--
 mopidy_musicbox_webclient/static/index.html   | 47 +++++++-----------
 .../static/js/controls.js                     | 48 ++++++++++++-------
 mopidy_musicbox_webclient/static/mb.appcache  |  2 +-
 4 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
index aa891646..0220b3b6 100644
--- a/mopidy_musicbox_webclient/static/css/webclient.css
+++ b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -222,13 +222,14 @@ span.hostInfo {
     font-size: 28px;
 }
 
-.splitGroupLeft {
-    float: right;
+.ui-block-a-min {
+    float: left !important;
+    width: initial !important;
 }
 
-.splitGroupRight {
-    float:right;
-    margin-left: -6px;
+.ui-block-b-min {
+    float:right !important;
+    width: initial !important;
 }
 
 /***************
diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
index ec60c880..5aa6eb18 100644
--- a/mopidy_musicbox_webclient/static/index.html
+++ b/mopidy_musicbox_webclient/static/index.html
@@ -161,7 +161,7 @@ <h2>Artists</h2>
                 <a href="#" onclick="return controls.playQueueTrack();">Play <span class="popupTrackName"></span></a>
             </li>
             <li data-icon="playNext">
-                <a href="#" onclick="return controls.showInsertTrackPopup();">Insert Track After This One</a>
+                <a href="#" onclick="return controls.showAddTrackPopup();">Insert Track After This One</a>
             </li>
             <li data-icon="remove">
                 <a href="#" onclick="return controls.removeTrack();">Remove from Queue</a>
@@ -181,27 +181,17 @@ <h2>Artists</h2>
     </div>
 </div>
 
-<div data-role="popup" data-theme="b" id="popupInsertTrack" class="popupDialog">
-    <form>
-        <p>Insert a Track to Play Next
-        <input id="insertTrackInput" placeholder="Track URI" class="span2" data-clear-btn="true"
-               onkeypress="return controls.checkDefaultButtonClick(event.keyCode, '#popupInsertTrack');" type="text"/>
-        <div data-role="controlgroup" data-type="horizontal" align="center">
-            <button class="btn" type="button" onclick="return $('#popupInsertTrack').popup('close');">
-                Cancel
-            </button>
-            <button class="btn" type="button" data-default-btn="true" onclick="return controls.insertTrack($('#insertTrackInput').val());">
-                Insert
-            </button>
-        </div>
-    </form>
-</div><!--/insert track in queue to play next-->
-
 <div data-role="popup" data-theme="b" id="popupAddTrack" class="popupDialog">
     <form>
-        <p>Add a Track to End of Queue
+        <p>Add a Track to the Queue
+        <button class="btn" type="button" id="getPlayingBtn" title="Use URI of currently playing track" onclick="return controls.getCurrentlyPlaying('addTrackInput');">
+            Get Currently Playing URI
+        </button>
         <input id="addTrackInput" placeholder="Track URI" class="span2" data-clear-btn="true"
                onkeypress="return controls.checkDefaultButtonClick(event.keyCode, '#popupAddTrack');" type="text"/>
+        <div class="ui-field-contain">
+            <select name="select-add" id="select-add"></select>
+        </div>
         <div data-role="controlgroup" data-type="horizontal" align="center">
             <button class="btn" type="button" onclick="return $('#popupAddTrack').popup('close');">
                 Cancel
@@ -211,7 +201,7 @@ <h2>Artists</h2>
             </button>
         </div>
     </form>
-</div><!--/add track to bottom of queue-->
+</div><!--/add track to queue-->
 
 <div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
     <form>
@@ -377,11 +367,14 @@ <h4>Browse</h4>
 
 <div data-role="content" class="pane" id="currentpane">
     <div class="ui-grid-a">
-        <div class="ui-block-a">
+        <div class="ui-block-a ui-block-a-min">
             <h4>Play Queue</h4>
         </div>
-        <div align="right" class="ui-block-b">
-            <div class="splitGroupRight" data-role="controlgroup" data-type="horizontal">
+        <div align="right" class="ui-block-b ui-block-b-min">
+            <div data-role="controlgroup" data-type="horizontal">
+                <button class="btn" type="button" title="Add a track to the queue" onclick="return controls.showAddTrackPopup();">
+                    <i class="fa fa-plus"></i>
+                </button>
                 <button class="btn" type="button" title="Save queue to playlist" onclick="return controls.showSavePopup();">
                     <i class="fa fa-bookmark-o"></i>
                 </button>
@@ -389,14 +382,6 @@ <h4>Play Queue</h4>
                     <i class="fa fa-times"></i>
                 </button>
             </div>
-            <div class="splitGroupLeft" data-role="controlgroup" data-type="horizontal">
-                <button class="btn" type="button" title="Insert a Track to Play Next" onclick="return controls.showInsertTrackPopup();">
-                    <i class="fa fa-level-down"></i>
-                </button>
-                <button class="btn" type="button" title="Add a Track to Bottom of Queue" onclick="return controls.showAddTrackPopup();">
-                    <i class="fa fa-plus-square-o"></i>
-                </button>
-            </div>
         </div>
     </div>
     <div class="ui-grid">
@@ -474,7 +459,7 @@ <h4>Streams</h4>
         <div class="ui-block-a" style="padding: 5px">
             <form>
                 <p>Play a specific stream/track and optionally save it to your favourites.
-                <button class="btn" type="button" onclick="return controls.getCurrentlyPlaying();">
+                <button class="btn" type="button" onclick="return controls.getCurrentlyPlaying('streamuriinput', 'streamnameinput');">
                     Get currently playing
                 </button>
                 <input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true"
diff --git a/mopidy_musicbox_webclient/static/js/controls.js b/mopidy_musicbox_webclient/static/js/controls.js
index 0a4623e1..c643afc2 100644
--- a/mopidy_musicbox_webclient/static/js/controls.js
+++ b/mopidy_musicbox_webclient/static/js/controls.js
@@ -224,24 +224,45 @@
             return true
         },
 
-        showInsertTrackPopup: function (tlid) {
-            $('#insertTrackInput').val('')
+        showAddTrackPopup: function (tlid) {
+            $('#addTrackInput').val('')
+            $('#select-add').empty()
             tlid = tlid || $('#popupQueue').data('tlid')
             if (typeof tlid !== 'undefined' && tlid !== '') {
                 // Store the tlid of the track after which we want to perform the insert
-                $('#popupInsertTrack').data('tlid', $('#popupQueue').data('tlid'))
-                $('#popupInsertTrack').one('popupafterclose', function (event, ui) {
+                $('#popupAddTrack').data('tlid', $('#popupQueue').data('tlid'))
+                $('#popupAddTrack').one('popupafterclose', function (event, ui) {
                     // Ensure that popup attributes are reset when the popup is closed.
                     $(this).removeData('tlid')
                 })
+                var trackName = popupData[$('#popupQueue').data('track')].name
+                $('#select-add').append('<option value="0" selected="selected">Insert track after \'' + trackName + '\'</option>')
+            }
+            if (typeof songdata.track.uri !== 'undefined' && songdata.track.uri !== '') {
+                $('#getPlayingBtn').button('enable')
+            } else {
+                $('#getPlayingBtn').button('disable')
             }
+
+            $('#select-add').append('<option value="1">Play Next</option>') // PLAY_NEXT
+            $('#select-add').append('<option value="2">Add to Bottom of Queue</option>') // ADD_THIS_BOTTOM
+            $('#select-add').trigger('change')
+
             $('#popupQueue').popup('close')
-            $('#popupInsertTrack').popup('open')
+            $('#popupAddTrack').popup('open')
+        },
+
+        addTrack: function (trackUri) {
+            if (parseInt($('#select-add').val()) === ADD_THIS_BOTTOM) {
+                controls.addTrackToBottom(trackUri)
+            } else {
+                controls.insertTrack(trackUri)
+            }
         },
 
         insertTrack: function (trackUri) {
             if (typeof trackUri !== 'undefined' && trackUri !== '') {
-                var tlid = $('#popupInsertTrack').data('tlid')
+                var tlid = $('#popupAddTrack').data('tlid')
                 if (typeof tlid !== 'undefined' && tlid !== '') {
                     mopidy.tracklist.index({tlid: parseInt(tlid)}).then(function (index) {
                         controls.playTracks(PLAY_NEXT, mopidy, trackUri, 'undefined', index)
@@ -250,17 +271,12 @@
                     // No tlid provided, insert after current track.
                     controls.playTracks(PLAY_NEXT, mopidy, trackUri, 'undefined')
                 }
-                $('#popupInsertTrack').popup('close')
+                $('#popupAddTrack').popup('close')
             }
             return false
         },
 
-        showAddTrackPopup: function () {
-            $('#addTrackInput').val('')
-            $('#popupAddTrack').popup('open')
-        },
-
-        addTrack: function (trackUri) {
+        addTrackToBottom: function (trackUri) {
             if (typeof trackUri !== 'undefined' && trackUri !== '') {
                 controls.playTracks(ADD_THIS_BOTTOM, mopidy, trackUri, 'undefined')
                 $('#popupAddTrack').popup('close')
@@ -518,8 +534,8 @@
             return false
         },
 
-        getCurrentlyPlaying: function () {
-            $('#streamuriinput').val(songdata.track.uri)
+        getCurrentlyPlaying: function (uriInput, nameInput) {
+            $('#' + uriInput).val(songdata.track.uri)
             var name = songdata.track.name
             if (songdata.track.artists) {
                 var artistStr = artistsToString(songdata.track.artists)
@@ -527,7 +543,7 @@
                     name = artistStr + ' - ' + name
                 }
             }
-            $('#streamnameinput').val(name)
+            $('#' + nameInput).val(name)
             return true
         },
 
diff --git a/mopidy_musicbox_webclient/static/mb.appcache b/mopidy_musicbox_webclient/static/mb.appcache
index 08834284..b952b450 100644
--- a/mopidy_musicbox_webclient/static/mb.appcache
+++ b/mopidy_musicbox_webclient/static/mb.appcache
@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2016-12-11:v2
+# 2017-01-06:v2
 
 NETWORK:
 *