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">
    <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>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                    </select>
                    <select class="pagenum input-mini" title="Select page number"></select>
                </th>
            </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>
</div>

<div id="queue-container">
    <h1 class="h1">
        Now Playing{% if perms.queues.can_control_volume %}
        <a id="mute" class="glyphicon glyphicon-volume-off" href="#"></a>{% endif %}
    </h1>
    <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 hidden-xs">Requested By</th>
                <th class="col-md-1 hidden-xs">Time Left</th>
                <th class="col-md-1 control-icons">Control</th>
            </tr>
        </thead>
        <tbody>
            <tr class="currentsong">
                <td class="artist"></td>
                <td class="title"></td>
                <td class="requested-by hidden-xs"></td>
                <td class="time-left hidden-xs"></td>
                <td>
                    <a id="skip" href="#"></a>{% if perms.queues.can_control_volume %}&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-down" class="glyphicon glyphicon-volume-down" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-up" class="glyphicon glyphicon-volume-up" href="#"></a>{% endif %}
                </td>
            </tr>
        </tbody>
    </table>
    <h1 class="h1">Queue</h1>
    <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 hidden-xs">Requested By</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>
        <tbody class="queuebody">
        </tbody>
    </table>
</div>

<script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/queue.js' %}?1"></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 %}