From c3e00b94103591f445bf1f131640d2649e84c04b Mon Sep 17 00:00:00 2001 From: Azpect3120 <104033825+Azpect3120@users.noreply.github.com> Date: Tue, 13 Aug 2024 20:38:57 -0700 Subject: [PATCH] FEAT: Toggle for auto-run Still not stored in the session like I would like, but for now, it works! --- internal/http/router.go | 4 ++ internal/templates/query.go | 51 ++++++++++++++++++ web/static/styles/main.css | 103 ++++++++++++++++++++++++++++++------ web/templates/index.html | 36 ++++++++++--- 4 files changed, 173 insertions(+), 21 deletions(-) create mode 100644 internal/templates/query.go diff --git a/internal/http/router.go b/internal/http/router.go index ec0b490..adb5993 100644 --- a/internal/http/router.go +++ b/internal/http/router.go @@ -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) } diff --git a/internal/templates/query.go b/internal/templates/query.go new file mode 100644 index 0000000..e199e23 --- /dev/null +++ b/internal/templates/query.go @@ -0,0 +1,51 @@ +package templates + +import ( + "github.com/gin-gonic/gin" +) + +const MANUAL_QUERY string = ` +
+
+ +
+
+ + +
+ +
+
+ + + +
+` + +const AUTO_QUERY string = ` +
+
+ +
+
+ + +
+ +
+
+ + + +
+` + +func ToggleQueryType(c *gin.Context) { + toggled := c.Query("toggle") + + if toggled == "on" { + c.String(200, AUTO_QUERY) + } else { + c.String(200, MANUAL_QUERY) + } +} diff --git a/web/static/styles/main.css b/web/static/styles/main.css index a593e8d..8a54770 100644 --- a/web/static/styles/main.css +++ b/web/static/styles/main.css @@ -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; + } } diff --git a/web/templates/index.html b/web/templates/index.html index 6544754..629f8bd 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -8,6 +8,11 @@ + @@ -60,12 +65,32 @@
-
- - -

Query running...

+
+
+ +
+ + + + + + + + + + +
+
+ + + + + + + + - +
@@ -182,5 +207,4 @@ -