webug/templates/display.html
2020-02-21 15:45:30 +01:00

125 lines
2.7 KiB
HTML

{% extends "layout/default.html" %}
{% block extend_head %}
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<style>
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
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 black;
padding: 1em;
}
</style>
{% endblock %}
{% block content %}
<displaylist hidden>
<scrollcontainer>
<list></list>
</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.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
});
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) {
console.log(list);
function add(item) {
let displayOption = document.createElement("a");
displayOption.innerText = item;
displayList.getElementsByTagName("list")[0].appendChild(displayOption);
}
displayList.getElementsByTagName("list")[0].innerHTML = "";
for (const item of list) {
add(item);
}
displayList.hidden = false;
}
function addItemToDisplayList(item, onclick) {
}
</script>
{% endblock %}