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

63
templates/partials/sql_explorer/results.html
View File

@@ -1,26 +1,43 @@
{% if error %}
<div class="bg-red-200 text-red-800 p-3 rounded mb-4">
<strong>Error:</strong> {{ error }}
</div>
{% endif %}
{% if error or results %}
<div class="relative">
<!-- Floating Clear Button -->
<button _="on click set the innerHTML of my.parentElement to ''"
class="absolute top-0 right-0 m-2 px-3 py-2 flex items-center gap-2 rounded-full bg-gray-800 text-white shadow-md opacity-50 hover:opacity-100 hover:bg-gray-700 transition-all">
<!-- Trash Icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
<path
d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m5 4v6m4-6v6" />
</svg>
<span>Clear</span>
</button>
{% if results %}
<table class="min-w-full bg-white">
<thead>
<tr>
{% for col in columns %}
<th class="py-2 px-4 border-b">{{ col }}</th>
{% if error %}
<div class="bg-red-200 text-red-800 p-4 rounded mb-4">
<strong>Error:</strong> {{ error }}
</div>
{% endif %}
{% if results %}
<table class="min-w-full bg-white">
<thead>
<tr>
{% for col in columns %}
<th class="py-2 px-4 border-b">{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in results %}
<tr class="text-center">
{% for col in columns %}
<td class="py-2 px-4 border-b">{{ row[col] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in results %}
<tr class="text-center">
{% for col in columns %}
<td class="py-2 px-4 border-b">{{ row[col] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</tbody>
</table>
{% endif %}
</div>
{% endif %}