Merge branch 'implement-beeldscherm' into 'marietje-zuid'

Implement beeldscherm

Closes #20

See merge request technicie/MarietjeDjango!59
This commit is contained in:
2022-10-28 08:46:10 +02:00
4 changed files with 99 additions and 0 deletions

Binary file not shown.

View File

@ -37,6 +37,7 @@
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Stats</a></li>
{% url 'stats:user_stats' as url %}
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">User Stats</a></li>
<li><a href="/beeldscherm/">Beeldscherm</a></li>
{% if user.is_staff %}
{% url 'admin:index' as url %}
<li><a href="{{ url }}">Admin</a></li>

View File

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- marietje-zuid -->
<title>Marietje-Zuid beeldscherm</title>
<style>
@font-face {
font-family: zuidSerif;
src: url('/static/fonts/comic-serif.tff') format('truetype');
}
html, body {
margin: 0;
padding: 0;
background-color: #BE311A;
color: #FFFFFF;
font-family: zuidSerif;
overflow: hidden;
}
p {
margin: 0;
padding: 0;
white-space: nowrap;
}
.artist {
font-size: 80pt;
}
.title {
font-size: 64pt;
}
.requestedBy {
font-size: 64pt;
}
#content {
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 25px;
}
</style>
<script>
function init() {
fetchCurrentQueue();
}
function fetchCurrentQueue() {
fetch('/api/queue')
.then(response => {
switch(response.status) {
case 200:
break;
case 401:
throw { name: 'NotLoggedIn', message: 'Fblwurp!' };
default:
throw new Error('unexpected response: '+ response);
}
return response.json();
})
.then(json => {
updateScreen(json.current_song.requested_by, json.current_song.song.artist, json.current_song.song.title);
setTimeout(fetchCurrentQueue, 1000);
}).catch(err => {
if(err.name == "NotLoggedIn") {
setTimeout(function() {
window.location.assign('/login/?next=/beeldscherm/');
}, 5000);
updateScreen('Error Handler', 'Not Logged In', 'Redirecting You In Five');
return;
}
console.log("error: "+ err);
updateScreen('Error Handler', 'Faulty Request', 'Help!');
})
}
function updateScreen(requestor, artist, title) {
var r = document.getElementById('requestor');
var a = document.getElementById('song_artist');
var t = document.getElementById('song_title');
r.textContent = requestor;
a.textContent = artist;
t.textContent = title;
}
document.addEventListener('DOMContentLoaded', function() {
init();
}, false);
</script>
</head>
<body>
<div id="content">
<p class="requestedBy" id="requestor">?</p>
<p class="artist" id="song_artist">?</p>
<p class="title" id="song_title">?</p>
</div>
</body>
</html>

View File

@ -40,4 +40,5 @@ urlpatterns = [
url(r'^playerapi/', include('playerapi.urls')),
url(r'^stats/', include('stats.urls')),
url(r'^metrics', metrics, name='metrics'),
url(r'^beeldscherm/$', partial(render, template_name='beeldscherm.html'), name='beeldscherm'),
]