webug/templates/display.html

142 lines
3.0 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>
<style>
2020-02-21 15:45:30 +01:00
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
2019-12-14 19:07:29 +01:00
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 {
padding: 1em;
}
2019-12-26 19:54:46 +01:00
displaylist fallback {
padding: 1em;
}
list:not(:empty) + fallback {
display: none;
}
fallback {
display: grid;
place-content: center;
text-align: center;
}
2019-12-14 19:07:29 +01:00
</style>
{% endblock %}
{% block content %}
<displaylist hidden>
<scrollcontainer>
<list></list>
2019-12-26 19:54:46 +01:00
<fallback>
<span>
There is no displays available.<br>
Create new displays in edit mode.
</span>
</fallback>
2019-12-14 19:07:29 +01:00
</scrollcontainer>
</displaylist>
<display></display>
<script>
const displayList = document.getElementsByTagName("displaylist")[0];
const display = document.getElementsByTagName("display")[0];
const socket = io();
socket.on("connect", () => {
socket.emit("display", {action: "list"});
});
socket.on("display", (json) => {
switch(json.action) {
default:
console.warn("Unknown data: " + json);
break;
case "list":
onDisplayList(json.value);
break;
}
});
/*socket.on("display", (title, grid_column, grid_row) => {
a = title;
b = grid_column;
c = grid_row;
display.title = title;
display.grid_column = grid_column;
display.grid_row = grid_row;
});*/
function onDisplayList(list) {
function add(item) {
let displayOption = document.createElement("a");
displayOption.innerText = item;
displayList.getElementsByTagName("list")[0].appendChild(displayOption);
}
displayList.getElementsByTagName("list")[0].innerHTML = "";
2020-02-21 15:45:30 +01:00
for (const item of list) {
2019-12-14 19:07:29 +01:00
add(item);
}
displayList.hidden = false;
}
2020-02-21 15:45:30 +01:00
function addItemToDisplayList(item, onclick) {
}
2019-12-14 19:07:29 +01:00
</script>
{% endblock %}