regie: add button to grab tracks from nonstop

[panikdb.git] / panikdb / templates / regie-home.html

diff --git a/panikdb/templates/regie-home.html b/panikdb/templates/regie-home.html
index 8c62fec70ef9fd7c04179c87af18ac11940d1125..626d1c5181778f6b0b7705cf32f74777660d80a9 100644 (file)
--- a/panikdb/templates/regie-home.html
+++ b/panikdb/templates/regie-home.html
@@ -48,6 +48,48 @@ $(function () {
   window.setInterval(update_clock, 500);
 });
 </script>
+
+<div id="tracks">
+  <button>{% trans "Get tracks" %}</button>
+  <ul>
+  </ul>
+</div>
+
+<script>
+$(function() {
+  const track_language_labels = {
+    'na': 'instru',
+    'fr': 'french',
+    'en': 'english',
+    'nl': 'dutch',
+    'other': 'other',
+  };
+  $('#tracks button').on('click', function() {
+    $.ajax('/regie/tracks').success(function(data) {
+      for (const track of data.data) {
+        var $line = $('<li></li>')
+        var $remove_button = $('<button>×</button>');
+        $remove_button.on('click', function() {
+          $(this).parent().remove();
+        });
+        $line.append($remove_button);
+        $line.append('<audio preload controls src="/nonstop/tracks/' + track.id + '/sound/"></audio>')
+        $line.append($('<span></span>', {'class': 'title', 'text': track.title}));
+        if (track.artist) {
+          $line.append($('<span class="sep"> - </span>'));
+          $line.append($('<span></span>', {'class': 'artist', 'text': track.artist}));
+        }
+        if (track.language) {
+          $line.append(' ');
+          $line.append($('<span></span>', {'class': 'type', 'text': '(' + track_language_labels[track.language] + ')'}));
+        }
+        $('#tracks').find('ul').append($line);
+      }
+    });
+  });
+});
+</script>
+
 {% endblock %}
 
 {% block sidebar %}