Add WS debug console

templates/ws_debug.html

@@ -0,0 +1,46 @@
+{% extends "base_page.html" %}
+{% block content %}
+
+<style>
+    #ws_actions {
+        margin: 30px;
+        border: 1px white solid;
+        padding: 10px;
+    }
+
+    #ws_log {
+        margin: 30px;
+        border: 1px white solid;
+        padding: 10px;
+    }
+
+    #ws_log .message {
+        display: flex;
+        margin-bottom: 10px;
+    }
+
+    #ws_log .message .type {
+        font-style: italic;
+        margin-right: 10px;
+    }
+</style>
+
+
+<h2>WS Debug</h2>
+
+<div id="ws_actions">
+    <button onclick="connect()">Reconnect</button>
+    <button onclick="disconnect()">Disconnect</button>
+    <button onclick="clearLogs()">Clear logs</button>
+    <span>State: <span id="state">DISCONNECTED</span></span>
+</div>
+
+<div id="ws_log">
+    <div class="message">
+        <div class="type">INFO</div>
+        <div>Welcome!</div>
+    </div>
+</div>
+
+<script src="/assets/ws_debug.js"></script>
+{% endblock content %}