Merge pull request #174 from jcass77/fix/113_replace_javascript_dialogs

Various fixes to UI dialogs and buttons.

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)
 -------------------

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;

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>
+    <div class="ui-grid-a">
-    <h4>Playlists</h4>
+        <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>
+    <div class="ui-grid-a">
-    <a style="float:right; margin-right: 0.5em" onclick="return saveQueue();" data-role="button">Save</a><h4>Play Queue</h4>
+        <div class="ui-block-a">
-    <!--                <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
+            <h4>Play Queue</h4>
-                    <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
+        </div>
-    <ul class="table" id="currenttable"></ul>
+        <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">

mopidy_musicbox_webclient/static/js/controls.js

@@ -207,39 +207,67 @@ function removeTrack() {
 }
 
 function clearQueue() {
-    mopidy.playback.stop();
+    mopidy.tracklist.clear().then(
-    resetSong();
+        resetSong()
-    mopidy.tracklist.clear();
+    );
-    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 playlistName = $('#saveinput').val().trim();
-            var plname = window.prompt("Playlist name:", "").trim();
+        if (playlistName != null && playlistName != "") {
-            if (plname != null && plname != "") {
+            getPlaylistByName(playlistName, 'm3u', false).then(function(exists) {
-                mopidy.playlists.filter({"name": plname}).then(function(existing) {
+                if (exists) {
-                    var exists = false;
+                    $('#popupSave').popup('close');
-                    for (var i = 0; i < existing.length; i++) {
+                    $('#popupOverwrite').popup('open');
-                        exists = exists || existing[i].uri.indexOf("m3u:") == 0 || existing[i].uri.indexOf("local:") == 0;
+                    $('#overwriteConfirmBtn').click(function() {
-                    }
+                        initSave(playlistName, tracks);
-                    if (!exists || window.confirm("Overwrite existing playlist \"" + plname + "\"?")) {
+                    });
-                        mopidy.playlists.create({'name': plname, 'uri_scheme': "local"}).then(function(playlist) {
+                } else {
-                             playlist.tracks = tracks;
+                    initSave(playlistName, tracks);
-                             mopidy.playlists.save({'playlist': playlist}).then();
+                }
-                             getPlaylists();
+            });
-                        });
-                    }
-                });
-            }
         }
     });
     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;
 }
 

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);
     });