feat(controller): tester index.html

2025-09-06 17:02:12 -05:00
parent 71dcbf814b
commit 301f0339c5
1 changed files with 167 additions and 0 deletions
--- a/controller/index.html
+++ b/controller/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Go Socket.IO Logs Test</title>
+        <!-- Socket.IO v2 client -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
+        <style>
+            body {
+                font-family: monospace;
+                background: #111;
+                color: #eee;
+            }
+            #controls {
+                margin-bottom: 10px;
+            }
+            #logWindow {
+                border: 1px solid #444;
+                background: #000;
+                padding: 10px;
+                width: 100%;
+                height: 400px;
+                overflow-y: auto;
+                white-space: pre-wrap;
+                font-size: 14px;
+            }
+            .info {
+                color: #0f0;
+            }
+            .log {
+                color: #0af;
+            }
+            .error {
+                color: #f33;
+            }
+        </style>
+    </head>
+    <body>
+        <h2>Go Socket.IO Log Viewer</h2>
+
+        <div id="controls">
+            <button id="btnLogs">Subscribe Logs</button>
+            <button id="btnLeaveLogs">Leave Logs</button>
+            <button id="btnErrors">Subscribe Errors</button>
+            <button id="btnLeaveErrors">Leave Errors</button>
+            <button id="btnSubscribeBuild">Subscribe Build</button>
+            <button id="btnUnsubscribeBuild">Leave Build</button>
+            <button id="btnBuildApp">Build</button>
+            <!-- update buttons: copy  -->
+            <button id="btnSubscribeUpdate">Subscribe Update</button>
+            <button id="btnUnsubscribeUpdate">Leave Update</button>
+            <div>
+                <form onsubmit="return false;">
+                    <input
+                        type="text"
+                        id="myInput"
+                        placeholder="Type something here"
+                    />
+                    <button type="button" id="btnCopyLatest">Send</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="logWindow"></div>
+
+        <script>
+            // ✅ Define socket in global scope
+            const socket = io("http://localhost:8000");
+
+            // log window reference
+            const logWindow = document.getElementById("logWindow");
+
+            function logMessage(type, msg) {
+                const entry = document.createElement("div");
+                entry.textContent = `${new Date().toLocaleTimeString()} | ${msg}`;
+                entry.className = type;
+                logWindow.appendChild(entry);
+                logWindow.scrollTop = logWindow.scrollHeight; // auto-scroll
+            }
+
+            // connection events
+
+            // wire up buttons *after* socket is defined
+            document.getElementById("btnLogs").onclick = () => {
+                socket.emit("subscribe:logs");
+                logMessage("info", "Subscribed to logs");
+            };
+
+            document.getElementById("btnErrors").onclick = () => {
+                socket.emit("subscribe:errors");
+                logMessage("info", "Subscribed to errors");
+            };
+
+            document.getElementById("btnLeaveLogs").onclick = () => {
+                socket.emit("unsubscribe:logs");
+                logMessage("info", "👋 Left logs channel");
+            };
+
+            document.getElementById("btnLeaveErrors").onclick = () => {
+                socket.emit("unsubscribe:errors");
+                logMessage("info", "👋 Left errors channel");
+            };
+
+            document.getElementById("btnSubscribeBuild").onclick = () => {
+                socket.emit("subscribe:build");
+                logMessage("info", "📺 Subscribed to build");
+            };
+
+            document.getElementById("btnUnsubscribeBuild").onclick = () => {
+                socket.emit("unsubscribe:build");
+                logMessage("info", "👋 Left build room");
+            };
+
+            document.getElementById("btnBuildApp").onclick = () => {
+                socket.emit("build", "LST App"); // "frontend" = payload target
+                logMessage("info", "🚀 Build triggered");
+            };
+
+            // update stuff
+            document.getElementById("btnSubscribeUpdate").onclick = () => {
+                socket.emit("subscribe:update");
+                logMessage("info", "📺 Subscribed to update");
+            };
+
+            document.getElementById("btnUnsubscribeUpdate").onclick = () => {
+                socket.emit("unsubscribe:update");
+                logMessage("info", "👋 Left update room");
+            };
+
+            // document.getElementById("btnCopyLatest").onclick = () => {
+            //     socket.emit("update", "usmcd1vms036"); // "frontend" = payload target
+            //     logMessage("info", "Copying to USCMD1VMS036");
+            // };
+
+            window.onload = () => {
+                const input = document.getElementById("myInput");
+                const button = document.getElementById("btnCopyLatest");
+
+                button.onclick = () => {
+                    const fromMyInput = input.value;
+                    if (!fromMyInput) return;
+
+                    // Emit to backend (adjust event name as required)
+                    socket.emit("update", fromMyInput);
+
+                    // You can define your own logMessage function
+                    logMessage("info", `Copying to ${fromMyInput}`);
+
+                    input.value = "";
+
+                    input.focus();
+                };
+            };
+
+            socket.on("logs", (msg) => logMessage("logs", msg));
+            socket.on("errors", (msg) => logMessage("errors", msg));
+            socket.on("buildlogs", (msg) => logMessage("build", msg));
+            socket.on("updateLogs", (msg) => logMessage("update", msg));
+            socket.on("connect", () => {
+                logMessage("info", "✅ Connected to server");
+            });
+
+            socket.on("disconnect", () => {
+                logMessage("info", "❌ Disconnected");
+            });
+        </script>
+    </body>
+</html>