From c132f9b5df5cac44e19d945862b72e6d9080b744 Mon Sep 17 00:00:00 2001
From: jcass <john.cass77@gmail.com>
Date: Mon, 22 Feb 2016 09:37:47 +0200
Subject: [PATCH] fix:Replace Javascript dialogs and buttons with jQuery Mobile
 equivalents.

Use 'm3u' format for saving playlists. Invalidate the playlist cache on refresh or external changes.

Replace links with buttons and text with icons.

Fixes #113. Fixes #173. Fixes #177.
---
 README.rst                                    |  3 +
 .../static/css/webclient.css                  |  4 ++
 mopidy_musicbox_webclient/static/index.html   | 68 +++++++++++++++---
 .../static/js/controls.js                     | 72 +++++++++++++------
 mopidy_musicbox_webclient/static/js/gui.js    | 14 ++++
 5 files changed, 131 insertions(+), 30 deletions(-)

diff --git a/README.rst b/README.rst
index 9638811..57d86aa 100644
--- a/README.rst
+++ b/README.rst
@@ -79,6 +79,9 @@ v2.2.0 (UNRELEASED)
 - No longer interferes with changes to Mopidy's volume levels that are triggered externally. (Fixes: `#162 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/162>`_).
 - Volume slider now works with Mopidy-ALSAMixer again. (Fixes: `#168 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/168>`_).
 - Now falls back to track artist if album artist is not available for rendering cover art. (Fixes: `#128 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/128>`_).
+- Replace Javascript prompt with jQuery Mobile equivalent. (Fixes: `#113 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/113>`_).
+- Fix playlist refresh button. (Fixes: `#173 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/173>`_).
+- Update save queue functionality to use 'm3u' format. (Fixes: `#177 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/177>`_).
 
 v2.1.1 (2016-02-04)
 -------------------
diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
index dc09c4e..68ece16 100644
--- a/mopidy_musicbox_webclient/static/css/webclient.css
+++ b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -378,6 +378,10 @@
     border: 1px solid #aaa;
 }
 
+.popupDialog {
+    padding: 10px;
+}
+
 /*dont hide clear buttons in text input */
 .ui-input-clear-hidden {
     display: block !important;
diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
index d492084..22a9158 100644
--- a/mopidy_musicbox_webclient/static/index.html
+++ b/mopidy_musicbox_webclient/static/index.html
@@ -207,6 +207,37 @@
 </div>
 
 
+<div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
+    <form>
+        <p>Save current queue to a playlist.
+        <input id="saveinput" placeholder="Playlist name" class="span2" data-clear-btn="true"
+               onkeypress="return savePressed(event.keyCode);" type="text"/>
+        <div data-role="controlgroup" data-type="horizontal" align="center">
+            <button class="btn" type="button" onclick="return saveQueue();">
+                Ok
+            </button>
+            <button class="btn" type="button" onclick="return $('#popupSave').popup('close');">
+                Cancel
+            </button>
+        </div>
+    </form>
+</div>
+<!--/save queue to playlist-->
+
+
+<div data-role="popup" data-theme="b" id="popupOverwrite" class="popupDialog">
+    <form>
+        <p>Overwrite existing playlist with same name?
+        <div data-role="controlgroup" data-type="horizontal" align="center">
+            <button class="btn" type="button" id="overwriteConfirmBtn">
+                Ok
+            </button>
+            <button class="btn" type="button" onclick="$('#popupOverwrite').popup('close'); return $('#popupSave').popup('open');">
+                Cancel
+            </button>
+        </div>
+    </form>
+</div><!--/overwrite existing playlist-->
 
 <div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="header-breakpoint headerbtn">
     <a id="headermenubtn" href="#panel"><i class="fa fa-align-justify"></i></a>
@@ -297,8 +328,16 @@
 <!-- /nowplaying -->
 
 <div data-role="content" id="playlistspane" class="pane">
-    <a style="float:right; padding: 1.2em 10px" onclick="return refreshPlaylists();"><i class="fa fa-refresh"></i></a>
-    <h4>Playlists</h4>
+    <div class="ui-grid-a">
+        <div class="ui-block-a">
+            <h4>Playlists</h4>
+        </div>
+        <div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
+            <button class="btn" type="button" title="Refresh playlists" onclick="return refreshPlaylists();">
+                <i class="fa fa-refresh"></i>
+            </button>
+        </div>
+    </div>
     <div class="ui-grid-a pl-breakpoint">
         <div class="ui-block-a scroll" id="playlistslistdiv">
             <ul id="playlistslist" class="table"></ul>
@@ -307,7 +346,9 @@
             <div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;">
                 <a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a>
             </div>
-            <ul class="table" id="playlisttracks"></ul>
+            <div>
+                <ul class="table" id="playlisttracks"></ul>
+            </div>
         </div>
     </div>
 </div>
@@ -321,11 +362,22 @@
 <!--/browsepane-->
 
 <div data-role="content" class="pane" id="currentpane">
-    <a style="float:right" onclick="return clearQueue();" data-role="button">Clear</a>
-    <a style="float:right; margin-right: 0.5em" onclick="return saveQueue();" data-role="button">Save</a><h4>Play Queue</h4>
-    <!--                <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
-                    <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
-    <ul class="table" id="currenttable"></ul>
+    <div class="ui-grid-a">
+        <div class="ui-block-a">
+            <h4>Play Queue</h4>
+        </div>
+        <div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
+            <button class="btn" type="button" title="Save queue to playlist" onclick="return showSavePopup();">
+                <i class="fa fa-floppy-o"></i>
+            </button>
+            <button class="btn" type="button" title="Clear queue" onclick="return clearQueue();">
+                <i class="fa fa-trash-o"></i>
+            </button>
+        </div>
+    </div>
+    <div class="ui-grid">
+        <ul class="table" id="currenttable"></ul>
+    </div>
 </div>
 
 <div data-role="content" class="pane" id="albumspane">
diff --git a/mopidy_musicbox_webclient/static/js/controls.js b/mopidy_musicbox_webclient/static/js/controls.js
index 0b4cbe6..d06f894 100644
--- a/mopidy_musicbox_webclient/static/js/controls.js
+++ b/mopidy_musicbox_webclient/static/js/controls.js
@@ -207,39 +207,67 @@ function removeTrack() {
 }
 
 function clearQueue() {
-    mopidy.playback.stop();
-    resetSong();
-    mopidy.tracklist.clear();
-    resetSong();
+    mopidy.tracklist.clear().then(
+        resetSong()
+    );
     return false;
 }
 
+function savePressed(key) {
+    if (key == 13) {
+        saveQueue();
+        return false;
+    }
+    return true;
+}
+
+function showSavePopup(){
+    mopidy.tracklist.getTracks().then(function(tracks) {
+        if (tracks.length > 0) {
+            $('#saveinput').val('');
+            $('#popupSave').popup('open');
+        }
+    });
+
+}
+
 function saveQueue() {
     mopidy.tracklist.getTracks().then(function(tracks) {
-        if (tracks.length > 0) {
-            var plname = window.prompt("Playlist name:", "").trim();
-            if (plname != null && plname != "") {
-                mopidy.playlists.filter({"name": plname}).then(function(existing) {
-                    var exists = false;
-                    for (var i = 0; i < existing.length; i++) {
-                        exists = exists || existing[i].uri.indexOf("m3u:") == 0 || existing[i].uri.indexOf("local:") == 0;
-                    }
-                    if (!exists || window.confirm("Overwrite existing playlist \"" + plname + "\"?")) {
-                        mopidy.playlists.create({'name': plname, 'uri_scheme': "local"}).then(function(playlist) {
-                             playlist.tracks = tracks;
-                             mopidy.playlists.save({'playlist': playlist}).then();
-                             getPlaylists();
-                        });
-                    }
-                });
-            }
+        var playlistName = $('#saveinput').val().trim();
+        if (playlistName != null && playlistName != "") {
+            getPlaylistByName(playlistName, 'm3u', false).then(function(exists) {
+                if (exists) {
+                    $('#popupSave').popup('close');
+                    $('#popupOverwrite').popup('open');
+                    $('#overwriteConfirmBtn').click(function() {
+                        initSave(playlistName, tracks);
+                    });
+                } else {
+                    initSave(playlistName, tracks);
+                }
+            });
         }
     });
     return false;
 }
 
+function initSave(playlistName, tracks) {
+    $('#popupOverwrite').popup('close');
+    $('#popupSave').popup('close');
+    $('#saveinput').val('');
+    toast('Saving...');
+    mopidy.playlists.create({'name': playlistName, 'uri_scheme': "m3u"}).then(function(playlist) {
+         playlist.tracks = tracks;
+         mopidy.playlists.save({'playlist': playlist}).then();
+     });
+}
+
 function refreshPlaylists() {
-    mopidy.playlists.refresh();
+    mopidy.playlists.refresh().then(function() {
+        playlists = {};
+        $('#playlisttracksdiv').hide();
+        $('#playlistslistdiv').show();
+    });
     return false;
 }
 
diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js
index 0a9ea84..4cfef78 100644
--- a/mopidy_musicbox_webclient/static/js/gui.js
+++ b/mopidy_musicbox_webclient/static/js/gui.js
@@ -259,6 +259,20 @@ function initSocketevents() {
         getPlaylists();
     });
 
+    mopidy.on("event:playlistChanged", function(data) {
+        $('#playlisttracksdiv').hide();
+        $('#playlistslistdiv').show();
+        delete playlists[data["playlist"].uri];
+        getPlaylists();
+    });
+
+    mopidy.on("event:playlistDeleted", function(data) {
+        $('#playlisttracksdiv').hide();
+        $('#playlistslistdiv').show();
+        delete playlists[data["uri"]];
+        getPlaylists();
+    });
+
     mopidy.on("event:volumeChanged", function(data) {
         setVolume(data.volume);
     });