WS tool - server select (needs race condition fix)

assets/css/devportal.css

@@ -802,11 +802,13 @@ a.current {
   margin-left: 0;
 }
 
-.right-sidebar .level-1 a {
+.right-sidebar .level-1 a,
+.right-sidebar .separator {
   font-weight: 700;
   font-family: "Space Mono", monospace;
 }
-.right-sidebar .level-2 {
+.right-sidebar .level-2,
+.right-sidebar .method {
   margin-left: 0;
 }
 
@@ -989,6 +991,12 @@ a.current {
   text-decoration: none;
 }
 
+.btn-group .btn:hover:after {
+  /* Don't resize buttons in a group this way, because it can cause the group
+  to spill into additional lines or worse */
+  padding-left: 7px;
+}
+
 .btn.fa-search::after,
 .btn.fa-search:hover::after {
   content: "";

assets/js/apitool-methods-ws.js

@@ -11,3 +11,14 @@ Request('account_channels', {
       "ledger_index": "validated"
     }
 })
+
+Request('account_currencies', {
+  description: "Retrieves a list of currencies that an account can send or receive, based on its trust lines.",
+  link: "account_currencies.html",
+  body: {
+    "command": "account_currencies",
+    "account": "r9cZA1mLK5R5Am25ArfXFmqgNwjZgnfk59",
+    "strict": true,
+    "ledger_index": "validated"
+  }
+})

assets/js/apitool-websocket2.js

@@ -2,6 +2,7 @@ const commandlist = $("#command_list")
 const request_body = $(".request-body.io")
 const response_body = $(".response-body.io")
 const request_button  = $('.request_button')
+const conn_btn = $(".connection")
 
 const GET = "GET"
 const POST = "POST"
@@ -48,7 +49,7 @@ function generate_table_of_contents() {
     if (req.slug === null) {
         commandlist.append("<li class='separator'>"+req.name+"</li>");
     } else {
-        commandlist.append("<li><a href='#"+req.slug+"'>"+req.name+"</a></li>");
+        commandlist.append("<li class='method'><a href='#"+req.slug+"'>"+req.name+"</a></li>");
     }
   });
 }
@@ -126,10 +127,47 @@ function send_request() {
   // TODO: send
 }
 
-function connect_to_server(host, port) {
-  // TODO: ws connection stuff
+let socket;
+function connect_socket() {
+  $(".connect-loader").show()
+  const selected_server_el = $("input[name='wstool-1-connection']:checked")
+  const conn_url = selected_server_el.val()
+  socket = new WebSocket(conn_url)
+
+  socket.addEventListener('open', (event) => {
+    conn_btn.text(selected_server_el.data("shortname") + " (Connected)")
+    conn_btn.removeClass("btn-outline-secondary")
+    conn_btn.removeClass("btn-danger")
+    conn_btn.addClass("btn-success")
+    $(".connect-loader").hide()
+  })
+  socket.addEventListener('close', (event) => {
+    if (event.wasClean) {
+      console.log("socket clean:", event)
+      conn_btn.text(selected_server_el.data("shortname") + " (Not Connected)")
+      conn_btn.removeClass("btn-success")
+      conn_btn.removeClass("btn-danger")
+      conn_btn.addClass("btn-outline-secondary")
+      $(".connect-loader").hide()
+    }
+  })
+  socket.addEventListener('error', (event) => {
+    console.error("socket error:", event)
+    conn_btn.text(selected_server_el.data("shortname") + " (Failed to Connect)")
+    conn_btn.removeClass("btn-outline-secondary")
+    conn_btn.removeClass("btn-success")
+    conn_btn.addClass("btn-danger")
+    $(".connect-loader").hide()
+  })
+  socket.addEventListener('message', (event) => {
+    // TODO: send to dispatcher?
+  })
 }
 
+handle_select_server = function(event) {
+  if (typeof socket !== "undefined") { socket.close(1000) }
+  connect_socket()
+}
 // TODO: more stuff
 
 
@@ -146,11 +184,15 @@ $(document).ready(function() {
       select_request();
     }
 
-    if (urlParams["base_url"]) {
-      //TODO: change_base_url(urlParams["base_url"]);
-    }
+    // TODO: permalink stuff here?
+    // if (urlParams["base_url"]) {
+    //   //TODO: change_base_url(urlParams["base_url"]);
+    // }
+
+    connect_socket()
 
     request_button.click(send_request);
+    $("input[name='wstool-1-connection']").click(handle_select_server)
 
 });
 

tool/template-websocket-api-tool.html

@@ -23,15 +23,20 @@
       <div class="request-options btn-toolbar" role="toolbar">
         <div class="btn-group mr-3" role="group">
           <button class="btn btn-outline-secondary send-request">Send request</button>
-          <div class="input-group loader" style="display:none;">
+          <div class="input-group loader send-loader" style="display:none;">
             <span class="input-group-append">
               <img src="assets/img/xrp-loader-96.png" height="24" width="24" />
             </span><!--/.input-group-append-->
           </div><!--/.input-group.loader-->
         </div><!--/.btn-group-->
         <div class="btn-group" role="group">
-          <button class="btn btn-outline-secondary connection" data-toggle="modal" data-target="#wstool-1-connection-settings">Online (Main Net)</button>
-          <button class="btn btn-outline-secondary permalink" data-toggle="modal" data-target="#wstool-1-permalink">Permanlink</button>
+          <button class="btn btn-outline-secondary connection" data-toggle="modal" data-target="#wstool-1-connection-settings">Offline (Main Net)</button>
+          <div class="input-group loader connect-loader" style="display:none;">
+            <span class="input-group-append">
+              <img src="assets/img/xrp-loader-96.png" height="24" width="24" />
+            </span><!--/.input-group-append-->
+          </div><!--/.input-group.loader-->
+          <button class="btn btn-outline-secondary permalink" data-toggle="modal" data-target="#wstool-1-permalink">Permalink</button>
           <button class="btn btn-outline-secondary curl" data-toggle="modal" data-target="#wstool-1-curl">cURL</button>
         </div><!--/.btn-group-->
       </div><!--/.request-options.btn-toolbar-->
@@ -60,25 +65,25 @@
         <div class="modal-body">
 
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="exampleRadios" id="wstool-1-connection-s1" value="wss://s1.ripple.com/" checked>
+            <input class="form-check-input" type="radio" name="wstool-1-connection" id="wstool-1-connection-s1" value="wss://s1.ripple.com/" data-shortname="Main Net" checked>
             <label class="form-check-label" for="wstool-1-connection-s1">
               s1.ripple.com (Main Net Public Server)
             </label>
           </div>
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="exampleRadios" id="wstool-1-connection-s2" value="wss://s2.ripple.com/">
+            <input class="form-check-input" type="radio" name="wstool-1-connection" id="wstool-1-connection-s2" value="wss://s2.ripple.com/" data-shortname="Main Net Full History">
             <label class="form-check-label" for="wstool-1-connection-s2">
               s2.ripple.com (Full History Public Server)
             </label>
           </div>
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="exampleRadios" id="wstool-1-connection-testnet" value="wss://s.altnet.rippletest.net:51233/">
+            <input class="form-check-input" type="radio" name="wstool-1-connection" id="wstool-1-connection-testnet" value="wss://s.altnet.rippletest.net:51233/" data-shortname="Test Net">
             <label class="form-check-label" for="wstool-1-connection-testnet">
               s.altnet.rippletest.net (Test Net Public Server)
             </label>
           </div>
           <div class="form-check">
-            <input class="form-check-input" type="radio" name="exampleRadios" id="wstool-1-connection-localhost" value="ws://localhost:6006/">
+            <input class="form-check-input" type="radio" name="wstool-1-connection" id="wstool-1-connection-localhost" value="ws://localhost:6006/" data-shortname="Local server">
             <label class="form-check-label" for="wstool-1-connection-localhost">
               localhost:6006 (Local <code>rippled</code> Server on port 6006) <br/>
               <small>(Requires that you <a href="install-rippled.html">run <code>rippled</code></a> on this machine with default WebSocket settings)</small>