Started work on implementing user playlists

www/js/channel/panels/queuePanel/playlistManager.js

@@ -33,11 +33,14 @@ class playlistManager{
     docSwitch(){
         //Grab menus
         this.channelPlaylistDiv = this.panelDocument.querySelector("#queue-channel-playlist-div");
+        this.userPlaylistDiv = this.panelDocument.querySelector("#queue-user-playlist-div");
 
         //Grab controls
         this.createPlaylistSpan = this.panelDocument.querySelector('#queue-add-playlist-span');
         this.channelPlaylistLabel = this.panelDocument.querySelector('#queue-channel-playlist-span');
         this.channelPlaylistCaret = this.panelDocument.querySelector('#queue-channel-playlist-toggle');
+        this.userPlaylistLabel = this.panelDocument.querySelector('#queue-user-playlist-span');
+        this.userPlaylistCaret = this.panelDocument.querySelector('#queue-user-playlist-toggle');
 
         //Force playlist re-render to fix controls
         this.client.socket.emit('getChannelPlaylists');
@@ -49,6 +52,7 @@ class playlistManager{
     setupInput(){
         this.createPlaylistSpan.addEventListener('click', (event)=>{new newPlaylistPopup(event, this.client, this.queuePanel.ownerDoc)})
         this.channelPlaylistLabel.addEventListener('click', this.toggleChannelPlaylists.bind(this));
+        this.userPlaylistLabel.addEventListener('click', this.toggleUserPlaylists.bind(this));
     }
 
     /* queue control button functions */
@@ -71,6 +75,26 @@ class playlistManager{
         }
     }
 
+    /* queue control button functions */
+    toggleUserPlaylists(event){
+        //If the div is hidden
+        if(this.userPlaylistDiv.style.display == 'none'){
+            //Light up the button
+            this.userPlaylistLabel.classList.add('positive');
+            //Flip the caret
+            this.userPlaylistCaret.classList.replace('bi-caret-right-fill', 'bi-caret-down-fill');
+            //Show the div
+            this.userPlaylistDiv.style.display = '';
+        }else{
+            //Unlight the button
+            this.userPlaylistLabel.classList.remove('positive');
+            //Flip the caret
+            this.userPlaylistCaret.classList.replace('bi-caret-down-fill', 'bi-caret-right-fill');
+            //Hide the div
+            this.userPlaylistDiv.style.display = 'none';
+        }
+    }
+
     checkOpenPlaylists(){
         //If open map is a string, indicating we just renamed a playlist with it's media open
         if(typeof this.openMap == 'string'){