peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading icons to sql plot and add clear button to results container

Browse Source
This commit is contained in:
Peter Stockings
2025-02-01 21:06:01 +11:00
parent 8b02307397
commit 5fe003bcbf
2 changed files with 68 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/partials/sql_explorer/sql_query.html
View File

@@ -42,8 +42,9 @@
<!-- Plot Button -->
<button hx-post="{{ url_for('plot_unsaved_query') }}" hx-target="#sql-plot-results" hx-trigger="click"
hx-include="[name='query'],[name='title']"
hx-include="[name='query'],[name='title']" hx-indicator="#sql-plot-results-loader"
class="flex items-center bg-blue-100 text-white px-4 py-2 rounded hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
<!-- Plot Icon (Heroicon: Chart Bar) -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-5 w-5 mr-1">
@@ -52,6 +53,17 @@
</svg>
Plot
<!-- Overlay with Animated Spinner -->
<div id="sql-plot-results-loader" class="loading-indicator inset-0 opacity-35 pl-2">
<svg class="animate-spin h-5 w-5 text-white opacity-100" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10" stroke-linecap="round"
class="opacity-20"></circle>
<path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-75"></path>
</svg>
</div>
</button>
<!-- Save Button -->
@@ -69,14 +81,15 @@
</form>
<!-- Sql query Results Section -->
<div id="execute-query-results" class="mt-6">
</div>
<!-- Plot Results Section -->
<div id="sql-plot-results" class="mt-8">
<!-- Plot will be loaded here via htmx -->
</div>
<!-- Saved Queries Section -->
<div class="mt-8">
<h2 class="text-xl font-semibold mb-4">Saved Queries</h2>
@@ -118,7 +131,7 @@
<a href="#" hx-get="{{ url_for('plot_query', query_id=saved.id) }}"
hx-target="#sql-plot-results"
class="flex items-center text-green-500 hover:text-green-700 cursor-pointer"
hx-trigger="click">
hx-trigger="click" hx-indicator="#sql-plot-results-loader-{{ saved.id }}">
<!-- Plot Icon (Heroicon: Chart Bar) -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-1">
@@ -126,6 +139,18 @@
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
</svg>
Plot
<!-- Overlay with Animated Spinner -->
<div id="sql-plot-results-loader-{{ saved.id }}"
class="loading-indicator inset-0 opacity-35 pl-2">
<svg class="animate-spin h-5 w-5 text-white opacity-100"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-20"></circle>
<path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-75"></path>
</svg>
</div>
</a>
<!-- Delete Action -->