Add bookmark dropdown to connection settings ui

bookmarks.go

@@ -13,10 +13,11 @@ import (
 type Bookmark struct {
 	Url      string `json:"url"`      // Postgres connection URL
 	Host     string `json:"host"`     // Server hostname
-	Port     int    `json:"port"`     // Server port
+	Port     string `json:"port"`     // Server port
 	User     string `json:"user"`     // Database user
 	Password string `json:"password"` // User password
-	SslMode  string `json:"ssl_mode"` // Connection SSL mode
+	Database string `json:"database"` // Database name
+	Ssl      string `json:"ssl"`      // Connection SSL mode
 }
 
 func readServerConfig(path string) (Bookmark, error) {

static/css/app.css

@@ -378,6 +378,10 @@
   display: none;
 }
 
+.bookmarks {
+  display: none;
+}
+
 .connection-settings {
   width: 600px;
   margin: 0px auto;

static/index.html

@@ -75,8 +75,8 @@
       <form role="form" class="form-horizontal" id="connection_form">
         <div class="text-center">
           <div class="btn-group btn-group-sm connection-group-switch">
-            <button type="button" data="scheme" class="btn btn-default">Scheme</button>
+            <button type="button" data="scheme" class="btn btn-default" id="connection_scheme">Scheme</button>
-            <button type="button" data="standard" class="btn btn-default active">Standard</button>
+            <button type="button" data="standard" class="btn btn-default active" id="connection_standard">Standard</button>
             <!--<button type="button" data="ssh" class="btn btn-default">SSH</button>-->
           </div>
         </div>
@@ -94,6 +94,13 @@
         </div>
 
         <div class="connection-standard-group">
+          <div class="form-group bookmarks">
+            <label class="col-sm-3 control-label">Bookmark</label>
+            <div class="col-sm-9">
+              <select class="form-control" id="connection_bookmarks"></select>
+            </div>
+          </div>
+
           <div class="form-group">
             <label class="col-sm-3 control-label">Host</label>
             <div class="col-sm-9">

static/js/app.js

@@ -1,5 +1,6 @@
 var editor;
 var connected = false;
+var bookmarks = {};
 
 function apiCall(method, path, params, cb) {
   $.ajax({
@@ -20,6 +21,7 @@ function getTables(cb)                { apiCall("get", "/tables", {}, cb); }
 function getTableStructure(table, cb) { apiCall("get", "/tables/" + table, {}, cb); }
 function getTableIndexes(table, cb)   { apiCall("get", "/tables/" + table + "/indexes", {}, cb); }
 function getHistory(cb)               { apiCall("get", "/history", {}, cb); }
+function getBookmarks(cb)             { apiCall("get", "/bookmarks", {}, cb); }
 
 function executeQuery(query, cb) {
   apiCall("post", "/query", { query: query }, cb);
@@ -332,6 +334,29 @@ function addShortcutTooltips() {
 }
 
 function showConnectionSettings() {
+  getBookmarks(function(data) {
+    if (Object.keys(data).length > 0) {
+      // Set bookmarks in global var
+      bookmarks = data;
+
+      // Remove all existing bookmark options
+      $("#connection_bookmarks").html("");
+
+      // Add blank option
+      $("<option value=''></option>").appendTo("#connection_bookmarks");
+
+      // Add all available bookmarks
+      for (key in data) {
+        $("<option value='" + key + "''>" + key + "</option>").appendTo("#connection_bookmarks");
+      }
+
+      $(".bookmarks").show();
+    }
+    else {
+      $(".bookmarks").hide();
+    }
+  });
+
   $("#connection_window").show();
 }
 
@@ -466,6 +491,31 @@ $(document).ready(function() {
     }
   });
 
+  $("#connection_bookmarks").on("change", function(e) {
+    var name = $.trim($(this).val());
+
+    if (name == "") {
+      return;
+    }
+
+    item = bookmarks[name];
+
+    // Check if bookmark only has url set
+    if (item.url != "") {
+      $("#connection_url").val(item.url);
+      $("#connection_scheme").click();
+      return;
+    }
+
+    // Fill in bookmarked connection settings
+    $("#pg_host").val(item.host);
+    $("#pg_port").val(item.port);
+    $("#pg_user").val(item.user);
+    $("#pg_password").val(item.password);
+    $("#pg_db").val(item.database);
+    $("#connection_ssl").val(item.ssl);
+  });
+
   $("#connection_form").on("submit", function(e) {
     e.preventDefault();