FEAT: Toggle for auto-run
Still not stored in the session like I would like, but for now, it works!
This commit is contained in:
Azpect3120
parent
0876222f4c
commit
c3e00b9410
@ -72,4 +72,8 @@ func populate(web, api *gin.RouterGroup) {
|
||||
web.GET("/connections/tree", func(c *gin.Context) {
|
||||
c.String(200, database.TableTree(c))
|
||||
})
|
||||
|
||||
// This should return an HTML template which will be used to auto or not
|
||||
// auto send the query to the server.
|
||||
web.GET("/query/auto", templates.ToggleQueryType)
|
||||
}
|
||||
|
||||
51
internal/templates/query.go
Normal file
51
internal/templates/query.go
Normal file
@ -0,0 +1,51 @@
|
||||
package templates
|
||||
|
||||
import (
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
const MANUAL_QUERY string = `
|
||||
<div id="query-main" class="mb-4">
|
||||
<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">
|
||||
<label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
|
||||
<input type="checkbox" name="toggle" class="toggle-checkbox">
|
||||
</form>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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 hidden"> Query running... </p>
|
||||
<p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
|
||||
</div>
|
||||
`
|
||||
|
||||
const AUTO_QUERY string = `
|
||||
<div id="query-main" class="mb-4">
|
||||
<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">
|
||||
<label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
|
||||
<input type="checkbox" name="toggle" class="toggle-checkbox" checked>
|
||||
</form>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator hidden"> Query running... </p>
|
||||
<p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
|
||||
</div>
|
||||
`
|
||||
|
||||
func ToggleQueryType(c *gin.Context) {
|
||||
toggled := c.Query("toggle")
|
||||
|
||||
if toggled == "on" {
|
||||
c.String(200, AUTO_QUERY)
|
||||
} else {
|
||||
c.String(200, MANUAL_QUERY)
|
||||
}
|
||||
}
|
||||
@ -583,6 +583,11 @@ video {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
@ -593,11 +598,6 @@ video {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -622,6 +622,14 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -722,6 +730,18 @@ video {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@ -778,6 +798,18 @@ video {
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
@ -875,6 +907,21 @@ video {
|
||||
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 165 165 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
@ -926,6 +973,11 @@ video {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
@ -1027,6 +1079,22 @@ video {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.opacity-60 {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.opacity-75 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.opacity-65 {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
@ -1045,12 +1113,6 @@ video {
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.duration-150 {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
@ -1059,10 +1121,6 @@ video {
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.ease-in-out {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
@ -1092,6 +1150,16 @@ video {
|
||||
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.disabled\:bg-red-500:disabled {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.disabled\:px-5:disabled {
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
@ -1116,4 +1184,9 @@ video {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.md\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,11 @@
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.1"></script>
|
||||
<link rel="icon" type="image/png" href="/v1/web/assets/favicon.ico">
|
||||
<style>
|
||||
.htmx-request {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100">
|
||||
@ -60,13 +65,33 @@
|
||||
<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">
|
||||
<div id="query-main" class="mb-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<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>
|
||||
<p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
|
||||
<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">
|
||||
<label for="auto-toggle" class="text-sm font-medium text-gray-700">Auto-Run</label>
|
||||
<input type="checkbox" name="toggle" class="toggle-checkbox" checked>
|
||||
</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> -->
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</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> -->
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<p id="spinner" class="text-gray-700 text-sm px-1 py-2 htmx-indicator hidden"> Query running... </p>
|
||||
<p id="query-error" hx-swap-oob="outerHTML" class="text-red-500 py-2 text-sm hidden"></p>
|
||||
</div>
|
||||
|
||||
<!-- Query Results -->
|
||||
<div class="overflow-x-auto overflow-y-hidden bg-white shadow-md rounded-lg">
|
||||
<table id="query-result" class="min-w-full divide-y divide-gray-200"></table>
|
||||
@ -182,5 +207,4 @@
|
||||
<script defer src="/v1/web/static/scripts/modal.js"></script>
|
||||
<script defer src="/v1/web/static/scripts/tree.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user