mirror of
https://gitlab.science.ru.nl/technicie/MarietjeDjango.git
synced 2025-12-09 20:02:20 +01:00
Merge branch 'implement-beeldscherm' into 'marietje-zuid'
Implement beeldscherm Closes #20 See merge request technicie/MarietjeDjango!59
This commit is contained in:
BIN
marietje/marietje/static/fonts/comic-serif.tff
Normal file
BIN
marietje/marietje/static/fonts/comic-serif.tff
Normal file
Binary file not shown.
@ -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>
|
||||
|
||||
97
marietje/marietje/templates/beeldscherm.html
Normal file
97
marietje/marietje/templates/beeldscherm.html
Normal 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>
|
||||
@ -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'),
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user