Massive structure rewrite

templates/edit.html

@@ -4,17 +4,221 @@
 <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("connect", {data: "ฅ^•ﻌ•^ฅ"});
+    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 %}