From fb548e420794e78a2d54cb44a5b244a21adc1251 Mon Sep 17 00:00:00 2001
From: Azpect3120 <104033825+Azpect3120@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:18:51 -0700
Subject: [PATCH] FEAT: Displays database name in tree view

---
 internal/templates/connections.go |  7 ++++++-
 web/templates/index.html          | 11 ++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/internal/templates/connections.go b/internal/templates/connections.go
index 760c6b5..0390a3f 100644
--- a/internal/templates/connections.go
+++ b/internal/templates/connections.go
@@ -2,10 +2,13 @@ package templates
 
 import "fmt"
 
+// List item templates
 const LIST_OPEN string = `<select id="connected-database" name="connected-database" 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">`
 const LIST_ITEM string = `<option value="%s"%s>%s</option>`
 const LIST_CLOSE string = `</select>`
 
+const TREE_VIEW_NAME string = `<span hx-swap-oob="outerHTML" id="database-name-tree">%s</span>`
+
 // Generate a list of connections to display in the drop-down.
 // Current connection will be toggled as selected
 func ConnectionsList(connections map[string]string, current string) string {
@@ -24,6 +27,8 @@ func ConnectionsList(connections map[string]string, current string) string {
 		}
 	}
 
+	treeName := fmt.Sprintf(TREE_VIEW_NAME, current)
+
 	html += LIST_CLOSE
-	return html
+	return html + treeName
 }
diff --git a/web/templates/index.html b/web/templates/index.html
index c111076..c72707a 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -34,7 +34,7 @@
         <!-- Sidebar -->
         <div class="w-full md:w-1/4 bg-white shadow-md">
           <div class="p-4 border-b">
-            <h2 class="text-lg font-bold"><em>Database 1</em> Tables</h2>
+            <h2 class="text-lg font-bold"><span id="database-name-tree">database</span> Tables</h2>
           </div>
           <div class="p-4 max-h-full">
             <ul class="space-y-2">
@@ -112,14 +112,7 @@
         <div class="w-full md:w-3/4 p-4">
           <main>
             <!-- Query Input -->
-            <form
-              class="mb-4"
-              hx-post="/v1/api/query"
-              hx-trigger="input delay:500ms"
-              hx-swap="outerHTML"
-              hx-target="#query-result"
-              hx-indicator="#spinner"
-            >
+            <form class="mb-4" hx-post="/v1/api/query" hx-trigger="input delay:500ms" hx-swap="outerHTML" hx-target="#query-result" hx-indicator="#spinner">
               <label for="sql" class="block text-sm font-medium text-gray-700">SQL Query</label>
               <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>
               <p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator"> Query running... </p>