webug/templates/edit.html

{% extends "layout/default.html" %}

{% block extend_head %}
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<script>
    const socket = io();
    let timeout_interval_handle = -1;

    socket.on("connect", () => { // ฅ^•ﻌ•^ฅ
        socket.emit("display", {action: "list"}, ack = (list) => onDisplayListReceive(list));
    });

    socket.on("msg", (data) => {
        console.log(data);
    });

    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;
    }
</script>
<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>
{% endblock %}

{% block content %}
<div class="window list" id="dwindow" title="Displays" hidden>
    <div class="scrollable">
        <ul id="dlist"></ul>
    </div>
</div>
<div class="window" hidden></div>
{% endblock %}