Visually separate regular and Marietje's queue

Original commit message:
Arrows and marietje part of queue updates

marietje/api/urls.py

@@ -13,7 +13,6 @@ urlpatterns = [
     url(r'^request', views.request),
     url(r'^report', views.report),
     url(r'^skip', views.skip),
-    url(r'^moveup', views.move_up),
     url(r'^movedown', views.move_down),
     url(r'^cancel', views.cancel),
     url(r'^upload', views.upload),

marietje/api/views.py

@@ -188,16 +188,6 @@ def skip(request):
     return JsonResponse({})
 
 
-@require_http_methods(["POST"])
-@api_auth_required
-def move_up(request):
-    if not request.user.has_perm('queues.can_move'):
-        return HttpResponseForbidden()
-    playlist_song = get_object_or_404(PlaylistSong, id=request.POST.get('id'))
-    playlist_song.move_up()
-    return JsonResponse({})
-
-
 @require_http_methods(["POST"])
 @api_auth_required
 def move_down(request):

marietje/marietje/static/css/custom.css

@@ -21,3 +21,11 @@
 footer {
     text-align: center;
 }
+
+.marietjequeue {
+    color: #777777;
+}
+
+.marietjequeue-start {
+    border-top: 4px double #777777;
+}

marietje/marietje/static/js/queue.js

@@ -194,27 +194,56 @@ function renderQueue(playNextAt, now)
 {
     $('.queuebody').empty();
     var timeToPlay = playNextAt - now;
+    var canDeletePrevious = false;
     $.each(queue, function (id, song) {
         var requestedBy = song.requested_by;
+        var reqMarietje = requestedBy != 'Marietje';
+        var startMarietje = false
+
+        //checks if id is the last item and returns false if the next song is Marietje, while the current song is not.
+        if(id === queue.length-1){
+            var requestNext = false
+        } else {
+            var requestNext = !((queue[id+1].requested_by === 'Marietje') && (requestedBy !== 'Marietje'))
+        }
+        //checks if id is the first item and returns false if the previous song is not Marietje, while the current song is.
+        if(id === 0){
+            var requestPrev = false
+        } else {
+            var prevItem = queue[id-1].id
+            if(queue[id-1].requested_by !== 'Marietje'){
+                var requestPrev = false
+                if (requestedBy == 'Marietje'){
+                    var startMarietje = true
+                } else {
+                    var requestPrev = true
+                }
+            } else {var requestPrev = true}
+        }
+
         var canDelete = song.can_move_down || canMoveSongs;
-        var canMoveDown = canDelete && id < queue.length - 1;
+        var canMoveUp = canMoveSongs &&  requestPrev || canDeletePrevious && reqMarietje && requestPrev;
+        var canMoveDown = canMoveSongs && requestNext || canDelete && reqMarietje && requestNext;
         var artist = song.song.artist.trim() === '' ? '?' : song.song.artist;
         var title = song.song.title.trim() === '' ? '?' : song.song.title;
+        var marietjeclass = reqMarietje ? '' : ' class="marietjequeue"';
+        var marietjestartclass = startMarietje ? ' class="marietjequeue marietjequeue-start"' : '';
 
         showTime = showTimeToPlay ? (timeToPlay < 0 ? '' : timeToPlay.secondsToMMSS()) : (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
 
-        $('.queuebody:last-child').append('<tr><td class="artist">' + artist
+        $('.queuebody:last-child').append('<tr' + marietjestartclass + marietjeclass + '>' + '<td class="artist">' + artist
                 + '</td><td class="title">' + title + '</td><td class="hidden-xs requested-by">' + requestedBy
                 + '</td><td class="hidden-xs plays-at" style="text-align: right;">' + showTime
                 + '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
-                + (canMoveSongs && id !== 0 ? '' : ' invisible')
+                + (canMoveUp && id !== 0 ? '' : ' invisible')
-                + '" onclick="return moveUp(' + song.id
+                + '" onclick=" return moveDown(' + prevItem
                 + ')"></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>');
         timeToPlay += parseInt(song.song.duration);
+        canDeletePrevious = canDelete
         if(playNextAt >= now)
         {
             playNextAt += parseInt(song.song.duration);

marietje/queues/models.py

@@ -47,16 +47,9 @@ class PlaylistSong(models.Model):
     )
     state = models.IntegerField(default=0, db_index=True, choices=STATECHOICE)
 
-    def move_up(self):
-        other_song = PlaylistSong.objects.filter(playlist=self.playlist, id__lt=self.id)\
-            .order_by('-id').first()
-        self.switch_order(other_song)
 
     def move_down(self):
-        other_song = PlaylistSong.objects.filter(playlist=self.playlist, id__gt=self.id).order_by('id').first()
+        other_song = PlaylistSong.objects.filter(playlist=self.playlist, id__gt=self.id).first()
-        self.switch_order(other_song)
-
-    def switch_order(self, other_song):
         old_id = self.id
         self.id = other_song.id
         other_song.id = old_id