Split API / Webpage

We use react as a webpage, so it can be served either on OBS or on the server.
2023-09-18 00:52:42 +02:00
parent 6733a857ac
commit 7d18b5dc2e
29 changed files with 412 additions and 3 deletions
--- a/api/templates/index.html
+++ b/api/templates/index.html
@@ -0,0 +1,48 @@
+<html>
+    <head>
+        <title>Hello Asso</title>
+        <style>
+        .notif {
+            margin: 10px;
+            padding: 5px;
+            border-radius: 5px;
+            border: 2px solid #1100ff;
+        }
+        </style>
+    </head>
+    <body>
+        <div id="msg"></div>
+        <script>
+            function addNode(msg){
+                let notifs = document.getElementsByClassName("notif");
+                if(notifs.length > 5)
+                {
+                    notifs.slice(0,notifs.length-5).forEach(e => e.remove());
+                }
+                console.log(msg);
+                let ndiv = document.createElement('div');
+                ndiv.className='notif';
+                let data = document.createTextNode(msg);
+                ndiv.appendChild(data);
+                message = document.getElementById('msg');
+                document.body.insertBefore(ndiv,message);
+            }
+
+            const websocket = new WebSocket('ws://'+ location.host + '/notify');
+            websocket.addEventListener('message', ev => {
+                addNode(ev.data);
+            });
+
+            websocket.addEventListener('error', ev => {
+                let div = document.createTextNode(ev);
+                document.body.append(div);
+            });
+
+            websocket.addEventListener('close', ev => {
+                let div = document.createTextNode(ev);
+                document.body.append(div);
+            });
+
+        </script>
+    </body>
+</html>