115 lines
2.5 KiB
HTML
115 lines
2.5 KiB
HTML
{% extends "layout/default.html" %}
|
|
|
|
{% block extend_head %}
|
|
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
|
|
<style>
|
|
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 (item in list) {
|
|
add(item);
|
|
}
|
|
add("+");
|
|
add("+");
|
|
add("+");
|
|
|
|
displayList.hidden = false;
|
|
}
|
|
</script>
|
|
{% endblock %} |