{% extends "admin/base_site.html" %}
{% load i18n %}
{% load static %}

{% block title %}
{% trans "Monitoring streamer" %}
{% endblock %}

{% block content %}
<style>
.actions button {
    padding: 0em;
    margin: 0.2em;
    text-align: center;
}
.actions button img {
    max-width: 2em;
    max-height: 2em;
}

.sources img {
    max-width: 2.5em;
    max-height: 2em;
}

.float_right {
    float: right;
}

.table_section_header {
    font-style: italic;
}

section.station {
    padding: 0.4em;
    font-size: 0.9em;
}

    section.station .sources {
        width: 100%;
    }

    section.station .name {
        width: 15em;
    }

    section.station .file {
        color: #007EDF;

    }

    section.station .actions {
        width: 4em;
        text-align: right;
    }

    section.station .sources .current:before {
        content: '▶';
        color: red;
        margin: 0em 1em;
    }

</style>
<script>
var Monitor = {
    get_token: function () {
        return document.cookie.replace(/.*csrftoken=([^;]+)(;.*|$)/, '$1');
    },

    run: function(action, station, source) {
        var params = 'station=' + station + '&&action=' + action;
        if(source)
            params += '&&source=' + source;

        var req = new XMLHttpRequest()
        req.open('POST', '{% url 'aircox.monitor' %}', false);
        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        req.setRequestHeader("Content-length", params.length);
        req.setRequestHeader("Connection", "close");
        req.setRequestHeader("X-CSRFToken", this.get_token());
        req.send(params);
        this.update();
    },

    update: function(timeout) {
        var req = new XMLHttpRequest()
        req.open('GET', '{% url 'aircox.monitor' %}', true);
        req.onreadystatechange = function() {
            if(req.readyState != 4 || (req.status != 200 && req.status != 0))
                return;

            var doc = document.implementation.createHTMLDocument('xhr')
                              .documentElement;
            doc.innerHTML = req.responseText;

            document.getElementById('stations').innerHTML =
                doc.querySelector('#stations').innerHTML;

            if(timeout)
                window.setTimeout(
                    function() { Monitor.update(timeout);}, timeout
                );
        };
        req.send();
    },
}

Monitor.update(50000);
</script>

<header>
<h1>{% trans "Monitor Streamer" %}</h1>

<input type="button" onclick="Monitor.update();"
       value="{% trans "refresh" %}">
</header>

<div id='stations'>
    {% for station in stations %}
    <section class="station">
        <header>
        <h2>{{ station.name }}</h2>
        </header>
        <table cellspacing="0" cellpadding="0" class="sources object">
            <tr>
                <th class="name" colspan=2>{{ station.name }}</th>
                <td>
                    {% with station.streamer.current_source.name as current_source %}
                    {% blocktrans %}
                    Current source: {{ current_source }}
                    {% endblocktrans %}
                    {% endwith %}
                </td>
                <td class="actions">
                    <button onclick="Monitor.run('restart', '{{ station.name }}');">
                        <img src="{% static "aircox/images/redo.png" %}" alt="{% trans "restart" %}"></button>
                    <button onclick="Monitor.run('skip', '{{ station.name }}');">
                        <img src="{% static "aircox/images/playback_next.png" %}" alt="{% trans "skip" %}"></button>
                </td>
            </tr>

            <tr class="table_section_header">
                <td colspan=2>{% trans "Source" %}</td>
                <td>{% trans "File" %}</td>
                <td>{% trans "Actions*" %}</td>
            </tr>
            {% for source in station.sources %}
            <tr class="source">
                <td class="name">
                    {% if source.is_dealer %}
                        {% trans "Diffusions" %}
                    {% else %}
                        {{ source.name }}
                    {% endif %}
                </td>
                <td class="source_info">
                    {% if source.name == station.streamer.current_source.name %}
                    <img src="{% static "aircox/images/play.png" %}" alt="{% trans "current" %}">
                    {% endif %}
                    {% if source.is_dealer %}
                    <img src="{% static "aircox/images/calendar_month.png" %}" alt="{% trans "diffusions" %}">
                    {% elif not source.program.is_show %}
                    <img src="{% static "aircox/images/schuffle.png" %}" alt="{% trans "stream" %}">
                    {% endif %}
                </td>
                <td class="file">
                    {% if source.is_dealer %}
                    {{ source.playlist|join:"<br>" }}
                    {% else %}
                    {{ source.current_sound }}
                    {% endif %}
                </td>
                <td class="actions">
                    <button onclick="Monitor.run('restart', '{{ station.name }}', '{{ source.name }}');">
                        <img src="{% static "aircox/images/redo.png" %}" alt="{% trans "restart" %}"></button>
                    <button onclick="Monitor.run('skip', '{{ station.name }}', '{{ source.name }}');">
                        <img src="{% static "aircox/images/playback_next.png" %}" alt="{% trans "skip" %}"></button>
                </td>
            </tr>
            {% endfor %}
        </table>
    </section>
    {% endfor %}

    <div class="info small">
    {% blocktrans %}
    *: Due to some technical issues, it might take up to 30 seconds to execute the given action.
    {% endblocktrans %}
    </div>
</div>
{% endblock %}