webug/templates/edit.html

154 lines
3.1 KiB
HTML
Raw Normal View History

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 %}