2019-12-14 19:07:29 +01:00
|
|
|
{% extends "layout/default.html" %}
|
|
|
|
|
|
|
|
{% block extend_head %}
|
|
|
|
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
|
2019-12-26 21:59:42 +01:00
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
color: #EAEAEA;
|
|
|
|
}
|
|
|
|
|
|
|
|
display:before {
|
|
|
|
content: attr(title);
|
|
|
|
}
|
|
|
|
|
|
|
|
displaylist:before {
|
|
|
|
content: "Displays";
|
|
|
|
|
|
|
|
background-color: #333;
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
displaylist {
|
|
|
|
display: grid;
|
|
|
|
grid-template-rows: auto 1fr;
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
background-color: #242424;
|
|
|
|
|
|
|
|
transition: transform .2s ease, opacity .2s ease;
|
|
|
|
transform: scale(1);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
displaylist[hidden], displaylist:focus {
|
|
|
|
transform: scale(.96);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
scrollcontainer {
|
|
|
|
display: block;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
displaylist list {
|
|
|
|
display: grid;
|
|
|
|
gap: 1em;
|
|
|
|
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
displaylist list > a {
|
|
|
|
border: 2px solid #333;
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
displaylist fallback {
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
list:not(:empty) + fallback {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
fallback {
|
|
|
|
display: grid;
|
|
|
|
|
|
|
|
place-content: center;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
gap: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
display: grid;
|
|
|
|
place-content: center;
|
|
|
|
place-items: center;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
border: 2px solid #333;
|
|
|
|
|
|
|
|
color: #919191;
|
|
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
|
|
padding: 1em;
|
|
|
|
|
|
|
|
transition: .2s ease background-color, .2s ease color;
|
|
|
|
}
|
|
|
|
|
|
|
|
button:hover, button:focus {
|
|
|
|
background-color: #000;
|
|
|
|
color: #EAEAEA;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
{% block content %}
|
|
|
|
<displaylist hidden>
|
|
|
|
<scrollcontainer>
|
|
|
|
<list></list>
|
|
|
|
<fallback>
|
|
|
|
<span>
|
|
|
|
There is no running displays.<br>
|
|
|
|
Create new display to continue.
|
|
|
|
</span>
|
|
|
|
<button>
|
|
|
|
<i class="fas fa-plus fa-2x"></i>
|
|
|
|
<span>New display</span>
|
|
|
|
</button>
|
|
|
|
</fallback>
|
|
|
|
</scrollcontainer>
|
|
|
|
</displaylist>
|
|
|
|
<display></display>
|
2019-12-14 19:07:29 +01:00
|
|
|
<script>
|
2019-12-26 21:59:42 +01:00
|
|
|
const displayList = document.getElementsByTagName("displaylist")[0];
|
|
|
|
const display = document.getElementsByTagName("display")[0];
|
2019-12-14 19:07:29 +01:00
|
|
|
const socket = io();
|
|
|
|
|
|
|
|
socket.on("connect", () => {
|
2019-12-26 21:59:42 +01:00
|
|
|
socket.emit("display", {action: "list"});
|
2019-12-14 19:07:29 +01:00
|
|
|
});
|
|
|
|
|
2019-12-26 21:59:42 +01:00
|
|
|
socket.on("display", (json) => {
|
|
|
|
switch(json.action) {
|
|
|
|
default:
|
|
|
|
console.warn("Unknown data: " + json);
|
|
|
|
break;
|
|
|
|
case "list":
|
|
|
|
onDisplayList(json.value);
|
|
|
|
break;
|
|
|
|
}
|
2019-12-14 19:07:29 +01:00
|
|
|
});
|
|
|
|
|
2019-12-26 21:59:42 +01:00
|
|
|
function onDisplayList(list) {
|
|
|
|
function add(item) {
|
|
|
|
let displayOption = document.createElement("a");
|
|
|
|
displayOption.innerText = item;
|
|
|
|
displayList.getElementsByTagName("list")[0].appendChild(displayOption);
|
|
|
|
}
|
2019-12-14 19:07:29 +01:00
|
|
|
|
2019-12-26 21:59:42 +01:00
|
|
|
displayList.getElementsByTagName("list")[0].innerHTML = "";
|
|
|
|
for (item in list) {
|
|
|
|
add(item);
|
|
|
|
}
|
|
|
|
|
|
|
|
displayList.hidden = false;
|
|
|
|
}
|
|
|
|
</script>
|
2019-12-14 19:07:29 +01:00
|
|
|
{% endblock %}
|