127 lines
4.8 KiB
HTML
127 lines
4.8 KiB
HTML
<!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> |