templates/display.html

@@ -3,10 +3,6 @@
 {% block extend_head %}
 <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
 <style>
-    body {
-        color: #EAEAEA;
-    }
-
     display:before {
         content: attr(title);
     }
@@ -53,24 +49,9 @@
     }
 
     displaylist list > a {
-        border: 2px solid #333;
+        border: 2px solid black;
         padding: 1em;
     }
-
-    displaylist fallback {
-        padding: 1em;
-    }
-
-    list:not(:empty) + fallback {
-        display: none;
-    }
-
-    fallback {
-        display: grid;
-
-        place-content: center;
-        text-align: center;
-    }
 </style>
 {% endblock %}
 
@@ -78,12 +59,6 @@
 <displaylist hidden>
     <scrollcontainer>
         <list></list>
-        <fallback>
-            <span>
-                There is no displays available.<br>
-                Create new displays in edit mode.
-            </span>
-        </fallback>
     </scrollcontainer>
 </displaylist>
 <display></display>
@@ -94,6 +69,7 @@
 
     socket.on("connect", () => {
         socket.emit("display", {action: "list"});
+        //socket.emit("connect", {data: "ฅ^•ﻌ•^ฅ"});
     });
 
     socket.on("display", (json) => {
@@ -117,6 +93,8 @@
     });*/
 
     function onDisplayList(list) {
+        console.log(list);
+
         function add(item) {
             let displayOption = document.createElement("a");
             displayOption.innerText = item;
@@ -127,6 +105,9 @@
         for (item in list) {
             add(item);
         }
+        add("+");
+        add("+");
+        add("+");
 
         displayList.hidden = false;
     }

templates/edit.html

@@ -2,153 +2,19 @@
 
 {% block extend_head %}
 <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
-<style>
-    body {
-        color: #EAEAEA;
-    }
-
-    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 #333;
-        padding: 1em;
-    }
-
-    displaylist fallback {
-        padding: 1em;
-    }
-
-    list:not(:empty) + fallback {
-        display: none;
-    }
-
-    fallback {
-        display: grid;
-
-        place-content: center;
-        text-align: center;
-
-        gap: 1em;
-    }
-
-    button {
-        display: grid;
-        place-content: center;
-        place-items: center;
-        
-        cursor: pointer;
-
-        border: 2px solid #333;
-
-        color: #919191;
-
-        background-color: transparent;
-
-        padding: 1em;
-
-        transition: .2s ease background-color, .2s ease color;
-    }
-
-    button:hover, button:focus {
-        background-color: #000;
-        color: #EAEAEA;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<displaylist hidden>
-    <scrollcontainer>
-        <list></list>
-        <fallback>
-            <span>
-                There is no running displays.<br>
-                Create new display to continue.
-            </span>
-            <button>
-                <i class="fas fa-plus fa-2x"></i>
-                <span>New display</span>
-            </button>
-        </fallback>
-    </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) => {
+    socket.on("msg", (data) => {
-        switch(json.action) {
+        console.log(data);
-            default:
-                console.warn("Unknown data: " + json);
-                break;
-            case "list":
-                onDisplayList(json.value);
-                break;
-        }
     });
-
-    function onDisplayList(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);
-        }
-
-        displayList.hidden = false;
-    }
 </script>
+{% endblock %}
+
+{% block content %}
+
 {% endblock %}

templates/main.html

@@ -4,7 +4,6 @@
 <style>
     body {
         font-size: 5vw;
-        color: #EAEAEA;
     }
 
     main {
@@ -20,23 +19,22 @@
         place-content: center;
         place-items: center;
 
-        border: 2px solid #333;
+        border: 2px solid black;
 
-        color: #919191;
+        color: white;
         text-decoration: none;
 
         background-color: transparent;
 
-        transition: .2s ease background-color, .2s ease color;
+        transition: .2s ease background-color;
     }
 
     main a:hover, main a:focus {
-        background-color: #000;
+        background-color: #333;
-        color: #EAEAEA;
     }
 
     main a:active {
-        background-color: #333;
+        background-color: #555;
     }
 </style>
 {% endblock %}