Feat: Add playlist actions

htdocs/index.html

@@ -195,6 +195,14 @@
       
       <div class="card-body hide" id="cardBrowsePlaylists">
         <div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
+          <div class="btn-group mr-2 hide">
+            <button data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists','All']}" id="btnBrowsePlaylistsAll" type="button" class="btn btn-secondary">&laquo; Playlists</button>
+          </div>
+          <div class="btn-group mr-2 hide">          
+            <button id="btnPlaylistClear" type="button" class="btn btn-secondary" data-href="{'cmd': 'playlistClear', 'options': []}" title="Clear playlist">
+              <span class="material-icons">clear_all</span>
+            </button>          
+          </div>
           <div class="btn-group mr-2">
             <button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
             <div class="dropdown-menu bg-dark px-2 letters" id="BrowsePlaylistsFilterLetters">
@@ -210,9 +218,8 @@
             <button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
           </div>
         </div>
-
         <div class="table-responsive-md">
-          <table id="BrowsePlaylistsList" class="table table-hover table-sm">
+          <table id="BrowsePlaylistsAllList" class="table table-hover table-sm">
             <col class="tblnum"/>
             <col class="tbltitle"/>  
             <col class="tbllastmodified"/>          
@@ -228,6 +235,27 @@
             <tbody class="clickable">
             </tbody>
           </table>
+          <table id="BrowsePlaylistsDetailList" class="table table-hover table-sm hide">
+            <caption>Playlist List</caption>
+            <col class="tblnum"/>
+            <col class="tbltitle"/>            
+            <col class="tblartist"/>
+            <col class="tblalbum"/>
+            <col class="tbllength"/>
+            <col class="tblaction"/>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Title</th>
+                <th>Artist</th>
+                <th>Album</th>
+                <th>Duration</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody class="clickable">
+            </tbody>
+          </table>          
         </div>
         <div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
@@ -248,10 +276,9 @@
       </div>
 
       <div class="card-body hide" id="cardBrowseDatabase">
-
         <div class="btn-toolbar card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
-          <div class="btn-group mr-2">
-            <button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
+          <div class="btn-group mr-2 hide">
+            <button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary">&laquo; Artists</button>
           </div>
           <div class="btn-group mr-2">
             <button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
@@ -286,7 +313,7 @@
           </table>
         </div>
         
-        <div id="BrowseDatabaseAlbumCards" class="row"></div>
+        <div id="BrowseDatabaseAlbumCards" class="row hide"></div>
         
         <div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
@@ -462,8 +489,8 @@
     </nav>
   </footer>
 
-  <!-- Modal -->
-  <div class="modal" id="modalConnectionError" role="dialog">
+  <!-- Modals -->
+  <div class="modal fade" id="modalConnectionError" role="dialog">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header bg-danger text-light">
@@ -476,7 +503,59 @@
       </div>
   </div>
 
-  <!-- Modal -->
+  <div class="modal fade" id="modalAddToPlaylist" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span> Add to playlist</h5>
+        </div>
+        <div class="modal-body">
+          <form id="addToPlaylistFrm">
+            <input type="hidden" id="addToPlaylistUri"/>
+            <div class="form-group input-group col-md-6 border-secondary">
+              <div class="input-group-prepend">
+                <div class="input-group-text bg-secondary text-light border-secondary">Playlist</div>
+              </div>
+              <select id="addToPlaylistPlaylist" class="form-control custom-select border-secondary">
+              </select>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-success" data-href="{'cmd': 'addToPlaylist', 'options': []}">Save</button>
+        </div>        
+      </div>
+      </div>
+  </div>
+
+  <div class="modal fade" id="modalRenamePlaylist" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title"><span class="material-icons title-icon">playlist_add</span>Rename playlist</h5>
+        </div>
+        <div class="modal-body">
+          <form class="needs-validation" id="renamePlaylistFrm" novalidate>
+            <div class="form-group">
+              <label for="fromInput">From</label>
+              <input type="text" class="form-control" id="renamePlaylistFrom" readonly>
+            </div>
+            <div class="form-group">
+              <label for="renamePlaylistTo">To</label>
+              <input type="text" class="form-control" id="renamePlaylistTo">
+              <div class="invalid-feedback">Invalid filename.</div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-success" data-href="{'cmd': 'renamePlaylist', 'options': []}">Save</button>
+        </div>        
+      </div>
+      </div>
+  </div>
+
   <div class="modal fade" id="modalSettings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
@@ -529,7 +608,7 @@
                 <option value="track">Track</option>
                 <option value="album">Album</option>
               </select>
-            </div>            
+            </div>
           </div>
           <div class="row">
             <div class="form-group input-group col-md-6 border-secondary">
@@ -570,7 +649,6 @@
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
   
-    <!-- Modal -->
   <div class="modal fade" id="modalAbout" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
@@ -608,7 +686,6 @@
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
 
-  <!-- Modal -->
   <div class="modal fade" id="modalAddstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">