azpect/Web-Database-Viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: Connection manager changes!

Browse Source 
Can now edit the connection names when creating a connection and the
connection manager can now edit those names! Much better ease of use.
This commit is contained in:
Azpect3120 2024-08-15 09:07:12 -07:00
parent 9c8a25609e
commit 36f7b9fe39
6 changed files with 273 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
internal/database/create.go
View File

@ -14,7 +14,7 @@ import (
func CreateConnection(c *gin.Context) {
var (
url string = c.PostForm("db-url")
database string = c.PostForm("db-database")
name string = c.PostForm("db-conn-name")
)
session := sessions.Default(c)
@ -30,7 +30,7 @@ func CreateConnection(c *gin.Context) {
}
}
connections[database] = url
connections[name] = url
conn_bytes, err := json.Marshal(connections)
if err != nil {
@ -38,9 +38,9 @@ func CreateConnection(c *gin.Context) {
}
session.Set("connections", []byte(conn_bytes))
session.Set("current", database)
session.Set("current", name)
session.Save()
html := templates.ConnectionsList(connections, database)
html := templates.ConnectionsList(connections, name)
c.String(200, html)
}

16
internal/database/delete.go
View File

@ -11,6 +11,7 @@ import (
func DeleteConnections(c *gin.Context) {
session := sessions.Default(c)
current, ok := session.Get("current").(string)
connections_bytes, ok := session.Get("connections").([]byte)
if !ok {
fmt.Println("No connections found")
@ -29,6 +30,21 @@ func DeleteConnections(c *gin.Context) {
}
}
for name, url := range connections {
newName := c.PostForm(url)
if name == newName {
continue
}
delete(connections, name)
connections[newName] = url
if name == current {
session.Set("current", newName)
}
}
connections_bytes, err := json.Marshal(connections)
if err != nil {
fmt.Println(err)

12
internal/templates/manager.go
View File

@ -16,7 +16,7 @@ const MANAGER string = `
<h2 class="text-xl font-bold">
Manage Stored Connections
<br>
<span class="text-xs font-light">Connection data is stored in the browsers session and can be deleted here.</span>
<span class="text-xs font-light">Connection data is stored in the browsers session and can be renamed or deleted here.</span>
</h2>
<button hx-get="/v1/web/manager/hide" hx-trigger="click" hx-swap="outerHTML" hx-target="#manager-modal" class="text-gray-500 hover:text-gray-700">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@ -51,16 +51,18 @@ const MANAGER string = `
const MANAGER_ENTRY string = `
<tr class="overflow-x-auto">
<td class="px-6 py-4 whitespace-nowrap flex items-center justify-center">
<input type="checkbox" name="connections" value="%s" class="w-4 h-4">
<input type="checkbox" name="connections" value="%s" class="w-4 h-4 m-2">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<input type="text" name="%s" value="%s" class="p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</td>
<td class="px-6 py-4 whitespace-nowrap">%s</td>
<td class="px-6 py-4 whitespace-nowrap">%s</td>
<td class="px-6 py-4 whitespace-nowrap">%s</td>
</tr>
`
const MANAGER_CLOSED string = `
<div id="manager-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden opacity-0"></div>
<div id="manager-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden opacity-0" hx-get="/v1/web/connections" hx-trigger="load" hx-swap="outerHTML" hx-target="#connected-database" hx-params="none"></div>
`
func OpenManager(c *gin.Context) {
@ -77,7 +79,7 @@ func OpenManager(c *gin.Context) {
var entries string
for name, url := range connections {
entries += fmt.Sprintf(MANAGER_ENTRY, url, name, "PostgreSQL", url)
entries += fmt.Sprintf(MANAGER_ENTRY, url, url, name, "PostgreSQL", url)
}
c.String(200, fmt.Sprintf(MANAGER, entries))

17
web/static/scripts/modal.js
View File

@ -16,6 +16,11 @@ function ShowModal() {
function HideModal() {
modal.classList.add("hidden");
modal.classList.add("opacity-0");
// Clear the inputs
for (const key in input) {
input[key].value = "";
}
}
const input = {
@ -25,6 +30,7 @@ const input = {
username: document.getElementById("db-username"),
password: document.getElementById("db-password"),
database: document.getElementById("db-database"),
name: document.getElementById("db-conn-name"),
connectionURL: document.getElementById("db-url")
}
@ -69,11 +75,18 @@ for (const key in input) {
input[key].addEventListener("input", () => {
ParseURL(input);
})
} else {
// If the input changed is the database name, update the connection name as well.
// This will create a default connection name based on the database name.
if (key == "database") {
input[key].addEventListener("input", () => {
GenerateURL(input);
input.name.value = input[key].value;
})
} else {
input[key].addEventListener("input", () => {
GenerateURL(input);
})
}
}
}

40
web/static/styles/main.css
View File

@ -583,6 +583,10 @@ video {
grid-column: span 2 / span 2;
}
.m-2 {
margin: 0.5rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
@ -670,6 +674,11 @@ video {
height: 100vh;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.max-h-full {
max-height: 100%;
}
@ -710,23 +719,10 @@ video {
width: 100%;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.min-w-full {
min-width: 100%;
}
.max-w-\[50\%\] {
max-width: 50%;
}
.max-w-\[50\%\%\] {
max-width: 50%%;
}
.max-w-full {
max-width: 100%;
}
@ -824,10 +820,6 @@ video {
overflow-x: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
@ -919,16 +911,6 @@ video {
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.bg-red-300 {
--tw-bg-opacity: 1;
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
@ -945,6 +927,10 @@ video {
padding: 1.5rem;
}
.p-1 {
padding: 0.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;

90
web/templates/index.html
View File

@ -25,14 +25,19 @@
<p class="text-sm text-gray-600">Connect and query your databases effortlessly.</p>
</div>
<div class="flex items-center justify-end space-x-4 flex-wrap">
<form hx-post="/v1/api/connections/connect" hx-trigger="change" hx-swap="outerHTML" hx-target="#connected-database" hx-indicator="#table-loading" hx-encoding="multipart/form-data" class="flex items-center justify-end space-x-2 flex-wrap">
<form hx-post="/v1/api/connections/connect" hx-trigger="change" hx-swap="outerHTML"
hx-target="#connected-database" hx-indicator="#table-loading" hx-encoding="multipart/form-data"
class="flex items-center justify-end space-x-2 flex-wrap">
<label for="connected-database" class="block text-sm font-medium text-gray-700">Connected Database:</label>
<select hx-get="/v1/web/connections" hx-trigger="load, change" hx-swap="outerHTML" id="connected-database" name="connected-database" hx-params="none" class="mt-1 block p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm md:text-base"></select>
<select hx-get="/v1/web/connections" hx-trigger="load, change" hx-swap="outerHTML" id="connected-database"
name="connected-database" hx-params="none"
class="mt-1 block p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm md:text-base"></select>
</form>
<button onclick="ShowModal();" class="bg-blue-500 text-white px-4 py-2 my-2 rounded-md text-sm md:text-base">
Add Connection
</button>
<button hx-get="/v1/web/manager/open" hx-trigger="click" hx-target="#manager-modal" hx-swap="outerHTML" class="bg-blue-500 text-white px-4 py-2 my-2 rounded-md text-sm md:text-base">
<button hx-get="/v1/web/manager/open" hx-trigger="click" hx-target="#manager-modal" hx-swap="outerHTML"
class="bg-blue-500 text-white px-4 py-2 my-2 rounded-md text-sm md:text-base">
Manage Connections
</button>
</div>
@ -44,22 +49,22 @@
<div class="p-4 border-b flex justify-between items-center">
<h2 class="text-lg font-bold">
<span id="database-name-tree">database</span>
<span id="table-loading" class="text-sm font-normal mx-1 htmx-indicator duration-300">loading tables...</span>
<span id="table-loading" class="text-sm font-normal mx-1 htmx-indicator duration-300">loading
tables...</span>
</h2>
<button
hx-get="/v1/web/connections/tree"
hx-trigger="click"
hx-target="#database-table-tree"
class="hover:bg-gray-100 p-2 rounded-md"
hx-indicator="#table-loading"
>
<button hx-get="/v1/web/connections/tree" hx-trigger="click" hx-target="#database-table-tree"
class="hover:bg-gray-100 p-2 rounded-md" hx-indicator="#table-loading">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon h-4 w-4" viewBox="0 0 512 512">
<path d="M400 148l-21.12-24.57A191.43 191.43 0 00240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 00181.07-128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/>
<path d="M464 97.42V208a16 16 0 01-16 16H337.42c-14.26 0-21.4-17.23-11.32-27.31L436.69 86.1C446.77 76 464 83.16 464 97.42z"/>
<path
d="M400 148l-21.12-24.57A191.43 191.43 0 00240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 00181.07-128"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" />
<path
d="M464 97.42V208a16 16 0 01-16 16H337.42c-14.26 0-21.4-17.23-11.32-27.31L436.69 86.1C446.77 76 464 83.16 464 97.42z" />
</svg>
</button>
</div>
<div class="p-4 max-h-full" hx-get="/v1/web/connections/tree" hx-trigger="load" hx-params="none" hx-indicator="#table-loading" hx-target="#database-table-tree">
<div class="p-4 max-h-full" hx-get="/v1/web/connections/tree" hx-trigger="load" hx-params="none"
hx-indicator="#table-loading" hx-target="#database-table-tree">
<ul hx-swap-oob="outerHTML" id="database-table-tree" class="space-y-2"></ul>
</div>
</div>
@ -72,13 +77,17 @@
<div class="flex items-center justify-between">
<label for="sql" class="block text-sm font-medium text-gray-700">SQL Query</label>
<div class="flex items-center space-x-6">
<form class="flex items-center space-x-2" hx-get="/v1/web/query/auto" hx-swap="outerHTML" hx-target="#query-main" hx-trigger="input">
<form class="flex items-center space-x-2" hx-get="/v1/web/query/auto" hx-swap="outerHTML"
hx-target="#query-main" hx-trigger="input">
<label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
<input type="checkbox" name="toggle" class="toggle-checkbox" title="Toggle auto-query functionality. Note: This will send whatever query is in the input and clear the box.">
<input type="checkbox" name="toggle" class="toggle-checkbox"
title="Toggle auto-query functionality. Note: This will send whatever query is in the input and clear the box.">
</form>
<!-- Manual Query Button -->
<button hx-post="/v1/api/query" hx-trigger="click" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner" hx-include="#sql" class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm">Run Query</button>
<button hx-post="/v1/api/query" hx-trigger="click" hx-swap="outerHTML" hx-target="#query-result"
hx-indicator="#spinner" hx-include="#sql"
class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm">Run Query</button>
<!-- Auto Query Button -->
<!-- <button class="bg-blue-500 text-white py-2 px-3 rounded-md text-xs md:text-sm opacity-60 cursor-default" title="Disable Auto-Run to use manual queries." disabled>Run Query</button> -->
@ -86,7 +95,8 @@
</div>
<!-- Manual Query Input -->
<textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
<textarea id="sql" name="sql" rows="4"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
<!-- Auto Query Input -->
<!-- <textarea id="sql" name="sql" rows="4" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" hx-post="/v1/api/query" hx-trigger="input delay:500ms" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner"></textarea> -->
@ -121,28 +131,21 @@
<form id="connection-form" class="grid grid-cols-2 gap-4">
<div>
<label for="db-host" class="block text-sm font-medium text-gray-700">Host</label>
<input id="db-host" name="db-host" type="text" placeholder="127.0.0.1" value="127.0.0.1"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<input id="db-host" name="db-host" type="text" placeholder="127.0.0.1" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="db-port" class="block text-sm font-medium text-gray-700">Port</label>
<input id="db-port" name="db-port" type="text" placeholder="5432" value="5432"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<input id="db-port" name="db-port" type="text" placeholder="5432" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="db-username" class="block text-sm font-medium text-gray-700">Username</label>
<input id="db-username" name="db-username" type="text" placeholder="admin" value="azpect"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<input id="db-username" name="db-username" type="text" placeholder="admin" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div>
<label for="db-password" class="block text-sm font-medium text-gray-700">Password</label>
<div class="relative mt-1">
<input id="db-password" name="db-password" type="password" placeholder="●●●●●●●●●"
value="Panther4487!!!!"
class="block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<button type="button" id="togglePassword"
class="absolute inset-y-0 right-0 px-3 py-2 text-gray-500 bg-gray-200 rounded-r-md border border-gray-300"
title="Display secret details">
<input id="db-password" name="db-password" type="password" placeholder="●●●●●●●●●" class="block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<button type="button" id="togglePassword" class="absolute inset-y-0 right-0 px-3 py-2 text-gray-500 bg-gray-200 rounded-r-md border border-gray-300" title="Display secret details">
<svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s3.5-7 11-7 11 7 11 7-3.5 7-11 7S1 12 1 12z"></path>
@ -166,8 +169,18 @@
</div>
<div>
<label for="db-database" class="block text-sm font-medium text-gray-700">Database Name</label>
<input id="db-database" name="db-database" type="text" placeholder="master_database" value="azpect"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
<input id="db-database" name="db-database" type="text" placeholder="master_database" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="col-span-2">
<label for="db-url" class="block text-sm font-medium text-gray-700">
Connection Name
<br>
<span class="text-xs font-light">
This is the name of the connection that will be displayed in the list of connections. By default it
will match the database name.
</span>
</label>
<input name="db-conn-name" id="db-conn-name" placeholder="master_database" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
</div>
<div class="col-span-2">
<label for="db-url" class="block text-sm font-medium text-gray-700">
@ -188,10 +201,13 @@
</div>
</form>
<div class="flex items-center space-x-4 mt-4">
<button hx-post="/v1/api/connections" hx-trigger="click" hx-target="#connected-database" hx-swap="outerHTML" hx-include="#connection-form" onclick="HideModal();" class="bg-blue-500 text-white px-4 py-2 rounded-md">
<button hx-post="/v1/api/connections" hx-trigger="click" hx-target="#connected-database" hx-swap="outerHTML"
hx-include="#connection-form" onclick="HideModal();" class="bg-blue-500 text-white px-4 py-2 rounded-md">
Create Connection
</button>
<button hx-post="/v1/api/connections/test" hx-trigger="click" hx-swap="outerHTML" hx-target="#connection-status" hx-include="#connection-form" hx-encoding="multipart/form-data" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md flex items-center space-x-2">
<button hx-post="/v1/api/connections/test" hx-trigger="click" hx-swap="outerHTML"
hx-target="#connection-status" hx-include="#connection-form" hx-encoding="multipart/form-data"
class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md flex items-center space-x-2">
<span>Test Connection</span>
<span id="connection-status" class="w-3 h-3 rounded-full bg-gray-400"></span>
</button>
@ -207,8 +223,8 @@
<div id="manager-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden opacity-0"></div>
<!-- Scripts -->
<script defer src="/v1/web/static/scripts/password.js"></script>
<script defer src="/v1/web/static/scripts/modal.js"></script>
<script defer src="/v1/web/static/scripts/tree.js"></script>
<script src="/v1/web/static/scripts/password.js"></script>
<script src="/v1/web/static/scripts/modal.js"></script>
<script src="/v1/web/static/scripts/tree.js"></script>
</body>
</html>