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

Improve look of SQL explorer page, and improve validation of exercise selection in workouts

Browse Source
This commit is contained in:
Peter Stockings
2026-02-04 12:37:05 +11:00
parent 09d90b5a1e
commit 3f3725d277
8 changed files with 464 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,43 +1,56 @@
{% if error or results %}
<div class="relative">
<div class="mt-12 bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg animate-fadeIn 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" />
<button _="on click transition opacity to 0 then set my.parentElement.innerHTML to ''"
class="absolute top-4 right-4 p-2 bg-gray-900/10 hover:bg-red-50 text-gray-500 hover:text-red-600 rounded-full transition-all duration-200 group z-10"
title="Clear results">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4a2 2 0 012 2v1H7V5a2 2 0 012-2z" />
</svg>
<span>Clear</span>
</button>
<div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
<h3 class="text-sm font-bold text-gray-700 uppercase tracking-wider">Query Results</h3>
{% if results %}
<p class="text-xs text-gray-500 mt-0.5">{{ results|length }} rows returned</p>
{% endif %}
</div>
{% if error %}
<div class="bg-red-200 text-red-800 p-4 rounded mb-4">
<strong>Error:</strong> {{ error }}
<div class="p-6">
<div class="bg-red-50 border-l-4 border-red-400 p-4 rounded text-red-700 text-sm">
<strong class="font-bold">Execution Error:</strong> {{ error }}
</div>
</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>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 table-zebra">
<thead class="bg-gray-50/30">
<tr>
{% for col in columns %}
<th scope="col"
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-widest border-b border-gray-100">
{{ col }}
</th>
{% endfor %}
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-100">
{% for row in results %}
<tr class="hover:bg-blue-50/30 transition-colors">
{% for col in columns %}
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-medium">
{{ row[col] if row[col] is not none else 'NULL' }}
</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>
</div>
{% endif %}
</div>
{% endif %}