webug/templates/edit.html

220 lines
5.8 KiB
HTML
Raw Permalink 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>
<script>
const socket = io();
2020-02-21 15:45:30 +01:00
let timeout_interval_handle = -1;
2019-12-14 19:07:29 +01:00
2020-02-21 15:45:30 +01:00
socket.on("connect", () => { // ฅ^•ﻌ•^ฅ
socket.emit("display", {action: "list"}, ack = (list) => onDisplayListReceive(list));
2019-12-14 19:07:29 +01:00
});
2020-02-21 15:45:30 +01:00
function onDisplayListReceive(list) {
clearDisplayList();
for (const item of list) {
dlist.appendChild(
createDisplayItem(item.uuid, item.title, item.connections, item.start_time, item.kill_time)
);
}
dwindow.hidden = false;
}
function onDisplayNewReceive(item) {
dlist.appendChild(
createDisplayItem(item.uuid, item.title, item.connections, item.start_time, item.kill_time)
);
}
function clearDisplayList() {
dlist.innerHTML = "";
dlist.appendChild( createDisplayItemNew() );
}
function createDisplayItem(uuid, title, connections, start_time, kill_time) {
let displayItem = document.createElement("li");
displayItem.onclick = () => {
socket.emit("display",
{action: "connect", uuid: uuid}//,
//ack = () => onDisplayNewReceive(uuid)
);
};
displayItem.id = uuid;
displayItem.title = title || uuid;
displayItem.connections = connections;
displayItem.start_time = start_time;
displayItem.kill_time = kill_time;
displayItem.innerHTML = `<pre>Connections: ${displayItem.connections}
Created: ${new Date(displayItem.start_time * 1000).toLocaleString()}` + ( displayItem.kill_time ? `
Timeout: <span class="timeout" data-timeout="${displayItem.kill_time}">Fetching...</span>` : "") + `</pre>`;
// Not actually fetching... just sounded better for the time being ^
if (timeout_interval_handle == -1 && document.getElementsByClassName("timeout")) {
timeout_interval_handle = setInterval(() => {
if (document.getElementsByClassName("timeout").length == 0) {
clearInterval(timeout_interval_handle);
timeout_interval_handle = -1;
} else {
let remove_list = [];
for (const dom of document.getElementsByClassName("timeout")) {
const date = dom.dataset.timeout - Math.floor(Date.now() / 1000);
if (date < 0) {
dom.innerText = "Should be gone by now...";
remove_list.push(dom); // We cant remove this class while iterating using it
} else {
let h = parseInt(date / 3600);
let m = parseInt(date / 60) % 60;
let s = date % 60;
if (h < 10) h = "0" + h;
if (m < 10) m = "0" + m;
if (s < 10) s = "0" + s;
dom.innerText = `${h}:${m}:${s}`;
}
}
for (const dom of remove_list) { // Remove the timeout class
dom.classList.remove("timeout");
}
}
}, 1000);
}
return displayItem;
}
function createDisplayItemNew() {
let displayItem = document.createElement("li");
displayItem.classList.add("new");
displayItem.onclick = () => {
socket.emit("display",
{action: "new"},
ack = (uuid) => onDisplayNewReceive(uuid)
);
};
return displayItem;
}
2019-12-14 19:07:29 +01:00
</script>
2020-02-21 15:45:30 +01:00
<style>
:root {
--color-nav: #333;
--color-background: #242424;
--color-text: #CCC;
--color-border-bottom: #3D3D3D;
--color-border-sides: #525252;
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
color: var(--color-text);
}
.border {
border: 1px solid var(--color-border-sides);
border-top-width: 0;
border-bottom-color: var(--color-border-bottom);
}
.window[title]:before {
content: attr(title);
background-color: var(--color-nav);
padding: .5em;
border-bottom: 1px solid var(--color-border-bottom);
}
.window.list {
display: grid;
grid-template-rows: auto 1fr;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--color-background);
transition: transform .2s ease, opacity .2s ease;
transform: scale(1);
opacity: 1;
}
.window[hidden] {
transform: scale(.96);
opacity: 0;
}
.scrollable {
display: block;
overflow: auto;
}
ul {
display: flex;
flex-flow: column;
padding-inline-start: 0px;
}
ul li {
display: block;
padding: 1em;
margin: .5em 1em;
border: 1px solid var(--color-border-sides);
border-top-color: var(--color-nav);
border-bottom-color: var(--color-border-bottom);
}
ul li:hover {
background-color: var(--color-nav);
}
ul li[title]:before {
content: "Display: " attr(title);
}
ul li.new:before {
content: "+";
}
ul li.new {
order: 1;
text-align: center;
}
</style>
2019-12-14 19:07:29 +01:00
{% endblock %}
{% block content %}
2020-02-21 15:45:30 +01:00
<div class="window list" id="dwindow" title="Displays" hidden>
<div class="scrollable">
<ul id="dlist"></ul>
</div>
</div>
<div class="window" hidden></div>
2019-12-14 19:07:29 +01:00
{% endblock %}