add connector dialog for websocket ui

8 years ago · 0105ad59d8
2 changed files with 59 additions and 32 deletions
--- a/websocket-ui/index.html
+++ b/websocket-ui/index.html
@ -31,6 +31,10 @@
				@@ -31,6 +31,10 @@
    </style>
  </head>
  <body>
+    <div id="login-wrapper">
+      <input id="ws-url" value="ws://127.0.0.1:7666"></input>
+      <button id="connect-button" onclick="startui()">connect</button>
+    </div>
    <pre id="log"></pre>
    <canvas id="main">
    </canvas>
--- a/websocket-ui/ui.js
+++ b/websocket-ui/ui.js
@ -1,5 +1,3 @@
				@@ -1,5 +1,3 @@
-var url = "ws://127.0.0.1:7665";
-
 var l = document.getElementById("log");
 var c = document.getElementById("main");
 var nodes = {
@ -130,7 +128,7 @@ function tunnelCreated(tid) {
				@@ -130,7 +128,7 @@ function tunnelCreated(tid) {

 function logit(msg) {
  console.log(msg);
-  var t = document.createTextNode(leftpad(msg, 25));
+  var t = document.createTextNode(msg);
  var e = document.createElement("div");
  e.appendChild(t);
  l.appendChild(e);
@ -138,12 +136,31 @@ function logit(msg) {
				@@ -138,12 +136,31 @@ function logit(msg) {
    l.removeChild(l.children[0]);
 }

-var ws = new WebSocket(url);
-ws.onclose = function (ev) {
+function socketClosed() {
+  var b = document.getElementById("connect-button");
+  b.onclick = startui
+  b.value = "connect";
+}
+
+function startui() {
+  var el = document.getElementById("ws-url");
+  var url;
+  if(el)
+    url = el.value;
+  else
+    url = "ws://127.0.0.1:7666";
+  
+  var ws = new WebSocket(url);
+  ws.onclose = function (ev) {
+    logit("failed to connect to "+url);
    nodes = { length: 0 };
    tpeers = { length: 0 };
-}
-ws.onmessage = function(ev) {
+    socketClosed();
+  }
+  ws.onopen = function(ev) {
+    logit("connected to "+url);
+  }
+  ws.onmessage = function(ev) {
    var j = JSON.parse(ev.data);
    if (j) {
      console.log(j);
@ -169,7 +186,13 @@ ws.onmessage = function(ev) {
				@@ -169,7 +186,13 @@ ws.onmessage = function(ev) {
        logit("message: "+j.type);
      }
    }
-};
+  };
+  var b = document.getElementById("connect-button");
+  b.onclick = function() {
+    ws.close();
+  }
+  b.value = "disconnect";
+}

 function getPeer(h, us) {
  if (tpeers[h]) {