config.json

@@ -4,12 +4,5 @@
         "use_reloader": true,
         "host": "0.0.0.0",
         "port": 5101
-    },
-    "socket": {
-        "ping_timeout": 8,
-        "ping_interval": 2
-    },
-    "display": {
-        "timeout": 86400
     }
 }

helpers/__init__.py

@@ -1,2 +0,0 @@
-from . import uuid
-from . import connection

helpers/connection.py

@@ -1,10 +0,0 @@
-from objects import glob
-
-def connect(sid):
-    glob.connections[sid] = set()
-
-def disconnect(sid):
-    for display in glob.connections[sid]:
-        display.detach(sid)
-
-    del glob.connections[sid]

helpers/uuid.py

@@ -1,8 +0,0 @@
-from random import randint
-
-UUID_SIZE = (8, 4, 4, 4, 12)
-UUID_GLUE = "-"
-
-def generate():
-    #[randint(0, 15) for s in UUID_SIZE for _ in range(s)]
-    return "-".join("".join(format(randint(0, 15), "x") for _ in range(s)) for s in UUID_SIZE)

objects/__init__.py

@@ -1,2 +0,0 @@
-from . import display
-from . import glob

objects/display.py

@@ -1,64 +1,24 @@
-from datetime import datetime
+displays = {}
-
+windows = {}
-from . import glob
+tabs = {}
-from helpers.uuid import generate as generate_uuid
 
 class Display:
     def __init__(self, uuid):
-        if uuid in glob.displays.keys():
-            raise Exception("Display with this UUID already exists!")
-        glob.displays[uuid] = self
-
         self.uuid = uuid
-        self.connections = set() # maybe set()?
+        self.connections = [] # maybe set()?
         self.windows = [] # maybe set()?
     
-        self.title = None
+    def attach(self, connection):
-        self.start_time = int( datetime.now().timestamp() )
+        self.connections.append(connection)
-        self.kill_time = self.start_time + glob.config["display"]["timeout"]
 
-    def attach(self, sid):
+    def detach(self, connection):
-        self.connections.add(sid)
+        self.connections.remove(connection)
-        glob.connections[sid].add(self)
-
-        self.kill_time = None
-
-    def detach(self, sid):
-        self.connections.remove(sid)
-        glob.connections[sid].remove(self)
-
-        if len(self.connections) == 0:
-            self.kill_time = int( datetime.now().timestamp() ) + glob.config["display"]["timeout"]
-
-    def serialize(self):
-        return {
-            "uuid": self.uuid,
-            "connections": len(self.connections),
-            "title": self.title,
-            "start_time": self.start_time,
-            "kill_time": self.kill_time
-        }
-
-    def __str__(self):
-        return self.uuid
-
-    @staticmethod
-    def generate():
-        while True:
-            uuid = generate_uuid()
-            if uuid not in glob.displays.keys():
-                break
-        return Display(uuid)
 
 class Window:
     def __init__(self, uuid,
             title = "__unnamed__",
             grid_column = (0, 0),
             grid_row = (0, 0)):
-        if uuid in glob.windows.keys():
-            raise Exception("Window with this UUID already exists!")
-        glob.windows[uuid] = self
-
         self.uuid = uuid
         self.title = title
 
@@ -93,10 +53,6 @@ class Window:
 class Tab:
     def __init__(self, uuid,
             title = "__unnamed__"):
-        if uuid in glob.tabs.keys():
-            raise Exception("Tab with this UUID already exists!")
-        glob.tabs[uuid] = self
-            
         self.uuid = uuid
         self.content = ""
 

objects/glob.py

@@ -2,13 +2,8 @@ import json
 from flask import Flask
 from flask_socketio import SocketIO
 
+app = Flask("__main__")
+websocket = SocketIO(app)
+
 with open("config.json", "r") as f:
     config = json.load(f)
-
-app = Flask("__main__")
-websocket = SocketIO(app, **config["socket"])
-
-connections = {}
-displays = {}
-windows = {}
-tabs = {}

templates/display.html

@@ -3,13 +3,8 @@
 {% block extend_head %}
 <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
 <style>
-    * {
+    body {
-        -webkit-touch-callout: none;
+        color: #EAEAEA;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
     }
 
     display:before {
@@ -58,6 +53,7 @@
     }
 
     displaylist list > a {
+        border: 2px solid #333;
         padding: 1em;
     }
 
@@ -128,15 +124,11 @@
         }
 
         displayList.getElementsByTagName("list")[0].innerHTML = "";
-        for (const item of list) {
+        for (item in list) {
             add(item);
         }
 
         displayList.hidden = false;
     }
-
-    function addItemToDisplayList(item, onclick) {
-
-    }
 </script>
 {% endblock %}

templates/edit.html

@@ -2,150 +2,23 @@
 
 {% 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));
-    });
-
-    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);
+        color: #EAEAEA;
     }
 
-    .border {
+    display:before {
-        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 {
+    displaylist:before {
+        content: "Displays";
+
+        background-color: #333;
+        padding: 1em;
+    }
+
+    displaylist {
         display: grid;
         grid-template-rows: auto 1fr;
 
@@ -155,66 +28,127 @@ Timeout: <span class="timeout" data-timeout="${displayItem.kill_time}">Fetching.
         height: 100%;
         width: 100%;
 
-        background-color: var(--color-background);
+        background-color: #242424;
 
         transition: transform .2s ease, opacity .2s ease;
         transform: scale(1);
         opacity: 1;
     }
 
-    .window[hidden] {
+    displaylist[hidden], displaylist:focus {
         transform: scale(.96);
         opacity: 0;
     }
 
-    .scrollable {
+    scrollcontainer {
         display: block;
         overflow: auto;
     }
 
-    ul {
+    displaylist list {
-        display: flex;
+        display: grid;
-        flex-flow: column;
+        gap: 1em;
-
-        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 {
+    displaylist list > a {
-        background-color: var(--color-nav);
+        border: 2px solid #333;
+        padding: 1em;
     }
 
-    ul li[title]:before {
+    displaylist fallback {
-        content: "Display: " attr(title);
+        padding: 1em;
     }
 
-    ul li.new:before {
+    list:not(:empty) + fallback {
-        content: "+";
+        display: none;
     }
 
-    ul li.new {
+    fallback {
-        order: 1;
+        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 %}
-<div class="window list" id="dwindow" title="Displays" hidden>
+<displaylist hidden>
-    <div class="scrollable">
+    <scrollcontainer>
-        <ul id="dlist"></ul>
+        <list></list>
-    </div>
+        <fallback>
-</div>
+            <span>
-<div class="window" hidden></div>
+                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.on("display", (json) => {
+        switch(json.action) {
+            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 %}

websocket.py

@@ -1,49 +1,20 @@
 import json
 
-from flask import request
 from flask_socketio import emit
 
-from objects.display import Display, Window, Tab
+from objects import display
 from objects import glob
 
-from helpers import uuid, connection
-
-@glob.websocket.on_error_default  # handles all namespaces without an explicit error handler
-def default_error_handler(e):
-    print("ERR:", e)
-    return 500
-
 @glob.websocket.on("connect")
 def ws_connect():
-    connection.connect(request.sid)
+    emit("msg", "hi")
-    return "hi"
-
-@glob.websocket.on("disconnect")
-def ws_disconnect():
-    connection.disconnect(request.sid)
 
 @glob.websocket.on("display")
 def ws_display(data):
     def handle_list(_):
-        return [ item.serialize() for item in glob.displays.values() ]
+        emit("display", {"action": "list", "value": list( display.displays.keys() )})
-    
-    def handle_new(_):
-        display = Display.generate()
-        return display.serialize()
-    
-    def handle_connect(data):
-        uuid = data["uuid"]
-        if uuid not in glob.displays.keys():
-            raise Exception("Display not found")
-
-        glob.displays[uuid].attach(request.sid)
-        #print(dir(request))
-        #print(request.sid)
-        #print("TODO")
 
     switch = {
-        "list": handle_list,
+        "list": handle_list
-        "new": handle_new,
-        "connect": handle_connect
     }
-    return switch.get(data["action"])(data)
+    switch.get(data["action"])(data)