Browse page, UI redesign, Websockets, Navigation, and more!

2024-03-26 23:32:01 -04:00
parent 81d13a70db
commit 0ca513e976
25 changed files with 1160 additions and 108 deletions
--- a/websocket_test.html
+++ b/websocket_test.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>WebSocket Test</title>
+
+    <style>
+        footer {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 10px 0;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .service-box {
+            width: 150px;
+            padding: 10px;
+            border-radius: 5px;
+        }
+
+        .service-up {
+            background-color: green;
+        }
+
+        .service-down {
+            background-color: red;
+        }
+    </style>
+
+
+    <script>
+
+        // class Service {
+        //     constructor(name, status) {
+        //         this.name = name
+        //         this.status = status
+        //     }
+        // }
+
+        var updatedTime = new Date();
+        // Initial status of services
+        // var serviceA = new Service("234234", 'down');
+        // var serviceBStatus = 'down';
+        // var serviceCStatus = 'down';
+
+        document.addEventListener("DOMContentLoaded", function () {
+            // Create WebSocket connection.
+            const socket = new WebSocket('ws://localhost:9000');
+
+            // Connection opened
+            socket.addEventListener('open', function (event) {
+                console.log("Connected to WebSocket server");
+                updatedTime = new Date();
+            });
+
+            // Listen for messages
+            socket.addEventListener('message', function (event) {
+                console.log('Message from server', event.data);
+                let messages = document.getElementById('messages');
+                let message = document.createElement('li');
+                message.textContent = "Received: " + event.data;
+                messages.appendChild(message);
+                updatedTime = new Date();
+            });
+
+            // Send a message to the server
+            function sendMessage() {
+                let message = document.getElementById('messageInput').value;
+                socket.send(message);
+                console.log('Message sent', message);
+            }
+
+            // This function just sends a ping to make sure the server is there and it is able to responds
+            function ping() {
+                let message = `{ "call": "send", "type": "log", "data": "This is a ping!!" }`;
+                socket.send(message);
+                console.log('Message sent', message);
+            }
+            //setInterval(ping, 1500);
+
+            // setInterval(() => {
+            //     updateServiceStatus('serviceA', 'down');
+            // }, 2000);
+
+
+            // Bind send message function to button click
+            document.getElementById('sendMessage').addEventListener('click', sendMessage);
+        });
+    </script>
+</head>
+
+<body>
+    <h2>WebSocket Test</h2>
+    <textarea rows="4" cols="50" id="messageInput" placeholder="Type a message..."> </textarea>
+    <button id="sendMessage">Send Message</button>
+    <p>Example JSON</p>
+    <p>{ "type": "cable_map", "call": "request", "data": { } }</p>
+    <p>{ "type": "log", "call": "send", "data": "123123" }</p>
+
+    <p>Messages/Logs</p>
+    <ul id="messages"></ul>
+
+    <footer>
+        <!-- <div id="serviceA" class="service-box"></div>
+        <div id="serviceB" class="service-box"></div>
+        <div id="serviceC" class="service-box"></div> -->
+        <div id="clock"></div>
+
+    </footer>
+
+    <script>
+        // // Function to update service status
+        // function updateServiceStatus(service) {
+        //     // serviceId, status
+        //     var serviceElement = document.getElementById(service.serviceId);
+        //     // updateClock();
+
+        //     if (service.status === 'up') {
+        //         serviceElement.innerHTML = '<h3>' + service.serviceId + '</h3><p>Running</p>';
+        //         serviceElement.classList.remove('service-down');
+        //         serviceElement.classList.add('service-up');
+        //     } else {
+        //         serviceElement.innerHTML = '<h3>' + service.serviceId + '</h3><p>Down</p>';
+        //         serviceElement.classList.remove('service-up');
+        //         serviceElement.classList.add('service-down');
+        //     }
+        // }
+
+
+
+        // // Update service statuses
+        // updateServiceStatus('node.js (for this page)', serviceAStatus);
+        // updateServiceStatus('Python WebSocket', serviceBStatus);
+        // updateServiceStatus('serviceC', serviceCStatus);
+
+        // Function to update clock
+        function updateClock() {
+            var now = new Date();
+            now = now.getTime() - updatedTime.getTime();
+            // console.log(now)
+            document.getElementById('clock').textContent = 'Milliseconds Since Update: ' + now.toString().padStart(6, '0');
+        }
+
+        // Update clock every second
+        setInterval(updateClock, 100);
+
+    </script>
+
+</body>
+
+</html>