Added schedule locking and day jumping on scroll lock.

www/css/panel/queue.css

@@ -24,7 +24,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     position: absolute;
     left: 0;
     right: 0;
-    z-index: 3;
+    z-index: 4;
     padding: 0.15em 0.3em;
 }
 

www/js/channel/channel.js

@@ -54,11 +54,15 @@ class channel{
 
         this.socket.on("clientMetadata", this.handleClientInfo.bind(this));
 
-        this.socket.on("error", console.log);
+        this.socket.on("error", utils.ux.displayResponseError);
 
         this.socket.on("queue", (data) => {
             this.queue = new Map(data.queue);
-        })
+        });
+
+        this.socket.on("lock", (data) => {
+            this.queueLock = data.locked;
+        });
     }
 
     handleClientInfo(data){
@@ -75,6 +79,9 @@ class channel{
 
         //Store queue for use by the queue panel
         this.queue = new Map(data.queue);
+
+        //Store queue lock status
+        this.queueLock = data.queueLock;
     }
 }
 

www/js/channel/panels/queuePanel.js

@@ -45,6 +45,7 @@ class queuePanel extends panelObj{
         this.scrollLockButton = this.panelDocument.querySelector('#queue-scroll-lock');
         this.queueDateButton = this.panelDocument.querySelector('#queue-date')
         this.clearMediaButton = this.panelDocument.querySelector('#queue-clear');
+        this.queueLockButton = this.panelDocument.querySelector('#queue-lock');
 
         //Get control divs
         this.addMediaDiv = this.panelDocument.querySelector('#queue-media-prompts');
@@ -61,6 +62,9 @@ class queuePanel extends panelObj{
         this.queueDateIncrement = this.panelDocument.querySelector('#queue-control-date-increment');
         this.queueDatePrompt = this.panelDocument.querySelector('#queue-control-date-prompt');
 
+        //Display lock status
+        this.handleScheduleLock();
+
         //Render out the queue
         this.fullRender();
 
@@ -76,8 +80,9 @@ class queuePanel extends panelObj{
 
     defineListeners(){
         //Render queue when we receive a new copy of the queue data from the server
-        this.client.socket.on("clientMetadata", (data) => {this.renderQueue();})
-        this.client.socket.on("queue", (data) => {this.renderQueue();})
+        this.client.socket.on("clientMetadata", (data) => {this.renderQueue();});
+        this.client.socket.on("queue", (data) => {this.renderQueue();});
+        this.client.socket.on("lock", this.handleScheduleLock.bind(this));
     }
 
     setupInput(){
@@ -92,6 +97,7 @@ class queuePanel extends panelObj{
         this.scrollLockButton.addEventListener('click', this.lockScroll.bind(this));
         this.queueDateButton.addEventListener('click', this.toggleDateControl.bind(this));
         this.clearMediaButton.addEventListener('click', this.clearMedia.bind(this));
+        this.queueLockButton.addEventListener('click', this.lockSchedule.bind(this));
 
         //control bar divs
         //Add Media
@@ -103,6 +109,20 @@ class queuePanel extends panelObj{
         this.queueDatePrompt.addEventListener('change', this.setQueueDate.bind(this));
     }
 
+    /* socket.io listeners */
+    handleScheduleLock(){
+        //Get queue lock button icon
+        const icon = this.queueLockButton.querySelector('i');
+
+        if(this.client.queueLock){
+            this.queueLockButton.classList.remove('positive-button', 'bi-unlock-fill');
+            this.queueLockButton.classList.add('danger-button', 'bi-lock-fill');
+        }else{
+            this.queueLockButton.classList.remove('danger-button', 'bi-lock-fill');
+            this.queueLockButton.classList.add('positive-button', 'bi-unlock-fill');
+        }
+    }
+
     /* queue control button functions */
     toggleAddMedia(event){
         //If the div is hidden
@@ -119,7 +139,13 @@ class queuePanel extends panelObj{
         }
     }
 
-    lockScroll(event){
+    lockScroll(event, jumpToDay = true){
+        //If we're supposed to jump to the current day
+        if(jumpToDay){
+            //Set schedule to current day
+            this.setDay();
+        }
+
         //Enable scroll lock
         this.autoscroll = true;
 
@@ -159,6 +185,10 @@ class queuePanel extends panelObj{
         new clearPopup(event, this.client, null, this.ownerDoc);
     }
 
+    lockSchedule(event){
+        client.socket.emit('lock');
+    }
+
     /* add queue controls */
     queueLast(event){
         //Send off the request
@@ -203,7 +233,7 @@ class queuePanel extends panelObj{
         }
     }
 
-    setDay(date){
+    setDay(date = new Date()){
         //Set day
         this.day = date;
         //Zero out to midnight
@@ -220,7 +250,7 @@ class queuePanel extends panelObj{
         //If autoscroll is enabled
         if(this.autoscroll){
             //Simulate a button click to un/re-light the button and trigger a scroll when the date is set to today
-            this.lockScroll();
+            this.lockScroll(null, false);
         }
     }
 
@@ -610,7 +640,7 @@ class queuePanel extends panelObj{
             let bottomInput = this.queueContainer.offsetHeight - ((target.offsetTop + target.offsetHeight) + (this.queueLayoutController.scrollTopMax - this.queueLayoutController.scrollTop));
 
             //If the item we're dragging is fackin uge'
-            if(target.offsetHeight > (this.queueLayoutController.offsetHeight - ((detectionDistance * 2) + 10))){
+            if(target.offsetHeight > (this.queueLayoutController.offsetHeight - ((detectionDistance * 2) + 20))){
                 //AND THEY FUCKING SAID YOU COULDN'T GET MOUSE POS OUTSIDE OF AN EVENT WITHOUT :HOVER TRICKS EAT MY FUCKING ASS
                 topInput = Math.round(target.offsetTop - Number(target.dataset['dragoffset']) - (this.queueLayoutController.getBoundingClientRect().top + this.queueControlOffset.offsetHeight));
                 bottomInput = this.queueLayoutController.offsetHeight - (topInput + this.queueControlOffset.offsetHeight);

www/js/utils.js

@@ -105,7 +105,7 @@ class canopyUXUtils{
         try{
             const errors = body.errors;
             errors.forEach((err)=>{
-                new canopyUXUtils.popup(`<h3>Server Error:</h3><p><br>${err.msg}</p>`);
+                new canopyUXUtils.popup(`<h3>${err.type} Error:</h3><p><br>${err.msg}</p>`);
             });
         }catch(err){
             console.error("Display Error Body:");