Initial commit

templates/display.html

@@ -0,0 +1,115 @@
+{% 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 %}