126 lines
3.3 KiB
HTML
Executable File
126 lines
3.3 KiB
HTML
Executable File
{% load i18n %}
|
|
|
|
<style>
|
|
section.station {
|
|
padding: 0.4em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
section.station header {
|
|
margin: 0.4em 0em;
|
|
}
|
|
|
|
section.station header > * {
|
|
margin: 0em 0.2em;
|
|
}
|
|
|
|
section.station h1 {
|
|
display: inline;
|
|
margin: 0px;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
section.station button {
|
|
float: right;
|
|
}
|
|
|
|
section.station .sources {
|
|
border: 1px grey solid;
|
|
}
|
|
|
|
section.station .source {
|
|
margin: 0.2em 0em;
|
|
}
|
|
|
|
section.station .name {
|
|
display: inline-block;
|
|
width: 10em;
|
|
}
|
|
|
|
section.station .file {
|
|
color: #007EDF;
|
|
}
|
|
|
|
section.station .source.current:before {
|
|
content: '▶';
|
|
color: red;
|
|
margin: 0em 1em;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
var Monitor = {
|
|
get_token: function () {
|
|
return document.cookie.replace(/.*csrftoken=([^;]+)(;.*|$)/, '$1');
|
|
},
|
|
|
|
post: function(station, source, action) {
|
|
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();
|
|
},
|
|
|
|
skip: function(station, source) {
|
|
this.post(station, source, 'skip');
|
|
},
|
|
|
|
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(1000);
|
|
</script>
|
|
|
|
<div id='stations'>
|
|
{% for station in stations %}
|
|
<section class="station">
|
|
<header>
|
|
<h1>{{ station.name }}</h1>
|
|
<button onclick="Monitor.skip('{{ station.name }}');">{% trans "skip" %}</button>
|
|
<button onclick="Monitor.update();">{% trans "update" %}</button>
|
|
</header>
|
|
<div class="sources">
|
|
{% for source in station.all_sources %}
|
|
{% if source.controller.current_sound %}
|
|
<div class="source{% if source == station.controller.current_source %} current{% endif %}">
|
|
<span class="name">{{ source.name }}</span>
|
|
<span class="file">{{ source.controller.current_sound }}</span>
|
|
<button onclick="Monitor.skip('{{ station.name }}','{{ source.name }}');">
|
|
{% trans "skip" %}</button>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endfor %}
|
|
</div>
|
|
|