Add button to edit connection settings

static/css/app.css

@@ -349,6 +349,16 @@
   display: none;
 }
 
+#edit_connection {
+  position: fixed;
+  right: 8px;
+  top: 10px;
+}
+
+#close_connection_window {
+  display: none;
+}
+
 #connection_error {
   display: none;
 }

static/index.html

@@ -23,6 +23,8 @@
         <li id="table_history">History</li>
         <li id="table_connection">Connection</li>
       </ul>
+
+      <a href="#" id="edit_connection" class="btn btn-primary btn-sm">Edit Connection</a>
     </div>
     <div id="sidebar">
       <div class="tables-list">
@@ -71,7 +73,7 @@
       <form role="form" id="connection_form">
         <div class="form-group">
           <label>Enter server URL scheme</label>
-          <input type="text" class="form-control" id="connection_url">
+          <input type="text" class="form-control" id="connection_url" name="url">
           <p class="help-block">URL format: postgres://user:password@host:port/db</p>
         </div>
 
@@ -86,6 +88,7 @@
 
         <div id="connection_error" class="alert alert-danger"></div>
         <button type="submit" class="btn btn-primary">Connect</button>
+        <a href="#" id="close_connection_window" class="btn btn-default">Cancel</a>
       </form>
     </div>
   </div>

static/js/app.js

@@ -1,4 +1,5 @@
 var editor;
+var connected = false;
 
 function apiCall(method, path, params, cb) {
   $.ajax({
@@ -307,6 +308,10 @@ function addShortcutTooltips() {
   }
 }
 
+function showConnectionSettings() {
+  $("#connection_window").show();
+}
+
 $(document).ready(function() {
   $("#table_content").on("click",    function() { showTableContent();    });
   $("#table_structure").on("click",  function() { showTableStructure();  });
@@ -339,6 +344,18 @@ $(document).ready(function() {
     showTableInfo();
   });
 
+  $("#edit_connection").on("click", function() {
+    if (connected) {
+      $("#close_connection_window").show();
+    }
+
+    showConnectionSettings();
+  });
+
+  $("#close_connection_window").on("click", function() {
+    $("#connection_window").hide();
+  })
+
   $("#connection_form").on("submit", function(e) {
     e.preventDefault();
 
@@ -361,9 +378,11 @@ $(document).ready(function() {
       button.prop("disabled", false).text("Connect");
 
       if (resp.error) {
+        connected = false;
         $("#connection_error").text(resp.error).show();
       }
       else {
+        connected = true;
         $("#connection_window").hide();
         loadTables();
         $("#main").show();
@@ -376,9 +395,11 @@ $(document).ready(function() {
   
   apiCall("get", "/info", {}, function(resp) {
     if (resp.error) {
-      $("#connection_window").show();
+      connected = false;
+      showConnectionSettings();
     }
     else {
+      connected = true;
       loadTables();
       $("#main").show();
     }