MarietjeDjango/marietje/queues/templates/queues/queue.html

{% extends "base.html" %}
{% load static %}

{% block title %}Queue{% endblock %}

{% block content %}
<h1 class="h1">Request</h1>
<button id="request-button" class="btn btn-primary">Request</button>
<br><br>
<div id="request-container" class="hidden">
    <div class="table-responsive">
        <table id="request-table" class="table table-striped">
            <thead>
                <tr>
                    <th>Artist</th>
                    <th>Title</th>
                    <th>Uploader</th>
                </tr>
                <tr>
                    <th colspan="2"><input id="search-all" class="search-input" type="text"></th>
                    <th><input id="search-uploader" class="search-input" type="text"></th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th colspan="3" class="ts-pager form-horizontal">
                        <button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
                        <button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
                        <button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
                        <button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
                        <select class="pagesize input-mini" title="Select page size">
                            <option selected value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <select class="pagenum input-mini" title="Select page number"></select>
                    </th>
                </tr>
            </tfoot>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<div id="queue-container">
    <h1 class="h1">Now Playing</h1>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="col-md-4">Artist</th>
                    <th class="col-md-4">Title</th>
                    <th class="col-md-2">Requested By</th>
                    <th class="col-md-1">Time Left</th>
                    <th class="col-md-1">Skip</th>
                </tr>
            </thead>
            <tbody>
                <tr class="currentsong">
                    <td class="artist"></td>
                    <td class="title"></td>
                    <td class="requestedby"></td>
                    <td class="timeleft"></td>
                    <td><a id="skip" href="#"></a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <h1 class="h1">Queue</h1>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="col-md-4">Artist</th>
                    <th class="col-md-4">Title</th>
                    <th class="col-md-2">Requested By</th>
                    <th class="col-md-1">Plays At</th>
                    <th class="col-md-1">Control</th>
                </tr>
            </thead>
            <tbody class="queuebody">
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript" src="{% static 'js/queue.js' %}"></script>
<script type="text/javascript">
var csrf_token = "{{ csrf_token }}";
var canSkip = {{ perms.queues.can_skip|yesno:"1,0" }};
var canCancel = {{ perms.queues.can_cancel|yesno:"1,0" }};
var canMoveSongs = {{ perms.queues.can_move|yesno:"1,0" }};
</script>
{% endblock %}