From 753095e8bd71cb1837c9a1641650b1c61882318a Mon Sep 17 00:00:00 2001
From: Jim Driessen <jim@driessen.li>
Date: Tue, 2 May 2017 12:40:26 +0200
Subject: [PATCH] Toggle column plays at with plays in.

---
 marietje/marietje/static/js/queue.js        | 76 ++++++++++++++-------
 marietje/queues/templates/queues/queue.html |  2 +-
 2 files changed, 52 insertions(+), 26 deletions(-)

diff --git a/marietje/marietje/static/js/queue.js b/marietje/marietje/static/js/queue.js
index f4a75b3..37ad265 100644
--- a/marietje/marietje/static/js/queue.js
+++ b/marietje/marietje/static/js/queue.js
@@ -8,9 +8,14 @@ var songs = [];
 var refreshing = false;
 var iteration = 0;
 var requestViewOpen = false;
+var showTimeToPlay = true;
+var noRemove = false;
+
 
 $(function () {
     $('.pagesize').val(Cookies.get('pagesize'));
+    showTimeToPlay = (Cookies.get('showtimetoplay') || '1') === '1' ? true : false;
+    $('#queue-time-header').text(showTimeToPlay ? 'Plays In' : 'Plays At');
     refreshQueue();
     setInterval(updateTime, 1000);
 
@@ -107,6 +112,12 @@ $(function () {
         }
     });
 
+    $('#queue-time-header').click(function(){
+        showTimeToPlay = !showTimeToPlay;
+        $('#queue-time-header').text(showTimeToPlay ? 'Plays In' : 'Plays At');
+        Cookies.set('showtimetoplay', showTimeToPlay ? '1' : '0');
+    });
+
     getSongs();
 });
 
@@ -142,6 +153,7 @@ function updateTime()
     if (secondsLeft >= 0)
     {
         $('.currentsong .time-left').text(secondsLeft.secondsToHHMMSS());
+        renderQueue(secondsLeft + timestamp, timestamp);
     }
 
     // Refresh every ten seconds, or if the song has ended in the last ten
@@ -152,6 +164,43 @@ function updateTime()
     }
 }
 
+function renderQueue(playNextAt, now)
+{
+    $('.queuebody').empty();
+    var timeToPlay = playNextAt - now;
+    var firstSongInQueue = true;
+    $.each(queue, function (id, song) {
+        var requestedBy = song.requested_by;
+        var canDelete = song.can_move_down || canMoveSongs;
+        var canMoveDown = canDelete && id < queue.length - 1;
+        var artist = song.song.artist.trim() === '' ? '?' : song.song.artist;
+        var title = song.song.title.trim() === '' ? '?' : song.song.title;
+        if (firstSongInQueue === true) {
+            firstSongInQueue = false;
+        } else {
+            timeToPlay += song.song.duration;
+        }
+
+        showTime = showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToHHMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
+
+        $('.queuebody:last-child').append('<tr><td class="artist">' + artist
+                + '</td><td class="title">' + title + '</td><td class="hidden-xs requested-by">' + requestedBy
+                + '</td><td class="hidden-xs plays-at">' + showTime
+                + '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
+                + (canMoveSongs && id !== 0 ? '' : ' invisible')
+                + '" onclick="return moveUp(' + song.id
+                + ')"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="glyphicon glyphicon-arrow-down'
+                + (canMoveDown ? '' : ' invisible') + '" onclick="return moveDown('
+                + song.id + ')"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="glyphicon glyphicon-trash'
+                + (canDelete ? '' : ' invisible') + '" onclick="return cancelSong('
+                + song.id + ')"></a></td></tr>');
+        if(playNextAt >= now)
+        {
+            playNextAt += parseInt(song.song.duration);
+        }
+    });
+}
+
 function refreshQueue()
 {
     refreshing = true;
@@ -181,30 +230,7 @@ function refreshQueue()
             $('#skip').removeClass('glyphicon glyphicon-fast-forward');
         }
 
-        $('.queuebody').empty();
-        $.each(queue, function (id, song) {
-            var requestedBy = song.requested_by;
-            var canDelete = song.can_move_down || canMoveSongs;
-            var canMoveDown = canDelete && id < queue.length - 1;
-            var artist = song.song.artist.trim() === '' ? '?' : song.song.artist;
-            var title = song.song.title.trim() === '' ? '?' : song.song.title;
-
-            $('.queuebody:last-child').append('<tr><td class="artist">' + artist
-                    + '</td><td class="title">' + title + '</td><td class="hidden-xs requested-by">' + requestedBy
-                    + '</td><td class="hidden-xs plays-at">' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
-                    + '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
-                    + (canMoveSongs && id !== 0 ? '' : ' invisible')
-                    + '" onclick="return moveUp(' + song.id
-                    + ')"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="glyphicon glyphicon-arrow-down'
-                    + (canMoveDown ? '' : ' invisible') + '" onclick="return moveDown('
-                    + song.id + ')"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="glyphicon glyphicon-trash'
-                    + (canDelete ? '' : ' invisible') + '" onclick="return cancelSong('
-                    + song.id + ')"></a></td></tr>');
-            if(playNextAt >= now)
-            {
-                playNextAt += parseInt(song.song.duration);
-            }
-        });
+        renderQueue(playNextAt, now);
 
         updateTime();
         refreshing = false;
@@ -271,7 +297,7 @@ Number.prototype.secondsToHHMMSS = function () {
     var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
     var seconds = sec_num - (hours * 3600) - (minutes * 60);
 
-    if (hours < 10) {
+    if (hours < 10 && hours >= 0) {
         hours = '0' + hours;
     }
     if (minutes < 10) {
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 7b4db19..13c8f50 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -75,7 +75,7 @@
                 <th class="col-md-4">Artist</th>
                 <th class="col-md-4">Title</th>
                 <th class="col-md-2 hidden-xs">Requested By</th>
-                <th class="col-md-1 hidden-xs">Plays At</th>
+                <th id="queue-time-header" class="col-md-1 hidden-xs">Plays At</th>
                 <th class="col-md-1 control-icons">Control</th>
             </tr>
         </thead>