Added views

2025-07-25 16:25:16 +03:00
parent 9c69271de8
commit a182befeb6
2 changed files with 171 additions and 0 deletions
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Main</title>
+
+    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
+
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
+</head>
+
+<body style="overflow: hidden;">
+    <label style="font-size: 260%;">WebRTC Tunnel</label>
+
+    <div id="status_div" style="display: flex; height: 200px; flex-direction: column; justify-content: space-evenly;">
+
+        <div style="display: flex; align-items: center;">
+            <div class="spinner-border m-3" role="status">
+                <span class="sr-only"></span>
+            </div>
+            <label>Electron app started</label>
+        </div>
+
+        <div style="display: flex; align-items: center;">
+            <div class="spinner-border m-3" role="status">
+                <span class="sr-only"></span>
+            </div>
+            <label>Client backend started</label>
+        </div>
+
+        <div style="display: flex; align-items: center;">
+            <div class="spinner-border m-3" role="status">
+                <span class="sr-only"></span>
+            </div>
+            <label>Peer connection established</label>
+        </div>
+
+        <div style="display: flex; align-items: center;">
+            <textarea class="form-control" id="logger" rows="12" style="resize: none;" readonly></textarea>
+        </div>
+
+    </div>
+    <script>
+        const { ipcRenderer } = require("electron");
+        const status_div = document.getElementById("status_div");
+        const logger = document.getElementById("logger");
+        const SVG_NS = "http://www.w3.org/2000/svg";
+
+        const STEPS = Object.freeze({
+            APP_START: 0,
+            BACKEND_START: 1,
+            CONNECTED: 2
+        });
+
+        const STATUS = Object.freeze({
+            FAIL: 0,
+            DONE: 1
+        });
+
+        function setStatus(step, status) {
+            if (status == STATUS.DONE) {
+                const STATUS_DOM = document.createElementNS(SVG_NS, "svg");
+
+                STATUS_DOM.setAttribute("width", "64");
+                STATUS_DOM.setAttribute("height", "64");
+                STATUS_DOM.setAttribute("viewBox", "0 0 16 16");
+
+                const SVG_PATH = document.createElementNS(SVG_NS, "path");
+
+                STATUS_DOM.setAttribute("fill", "lightGreen");
+                SVG_PATH.setAttribute("d", "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z");
+
+                STATUS_DOM.appendChild(SVG_PATH);
+
+                status_div.children[step].replaceChild(STATUS_DOM, status_div.children[step].firstElementChild);
+            } else {
+                for (var STATUS_i = step; STATUS_i < Object.keys(STEPS).length; STATUS_i++) {
+                    const STATUS_DOM = document.createElementNS(SVG_NS, "svg");
+
+                    STATUS_DOM.setAttribute("width", "64");
+                    STATUS_DOM.setAttribute("height", "64");
+                    STATUS_DOM.setAttribute("viewBox", "0 0 16 16");
+
+                    const SVG_PATH = document.createElementNS(SVG_NS, "path");
+
+                    STATUS_DOM.setAttribute("fill", "red");
+                    SVG_PATH.setAttribute("d", "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708");
+
+                    STATUS_DOM.appendChild(SVG_PATH);
+
+                    status_div.children[STATUS_i].replaceChild(STATUS_DOM, status_div.children[STATUS_i].firstElementChild);
+                }
+            }
+        }
+
+        setStatus(STEPS.APP_START, STATUS.DONE);
+
+        function loggerAppend(message) {
+            logger.textContent += message;
+            logger.scrollTop = logger.scrollHeight;
+        }
+
+        ipcRenderer.on("backend_spawn", (event, data) => {
+            setStatus(STEPS.BACKEND_START, STATUS.DONE);
+        });
+        ipcRenderer.on("backend_info", (event, data) => {
+            loggerAppend(`[INFO] ${data}`);
+        });
+        ipcRenderer.on("backend_error", (event, data) => {
+            loggerAppend(`[ERROR] ${data}`);
+            setStatus(STEPS.BACKEND_START, STATUS.FAIL);
+        });
+        ipcRenderer.on("backend_dc", (event, data) => {
+            setStatus(STEPS.CONNECTED, STATUS.DONE);
+            window.location.href = `http://127.0.0.1:${data}`;
+        });
+        ipcRenderer.on("backend_quit", (event, data) => {
+            setStatus(STEPS.BACKEND_START, STATUS.FAIL);
+            loggerAppend("[ERROR] WebSocket connection closed\n");
+        });
+    </script>
+</body>
+
+</html>