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/sql_explorer.html
View File

@@ -2,17 +2,74 @@
{% block content %}
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 mb-8">
<div class="mb-4 flex items-center justify-between">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2">SQL Explorer</h3>
<h1 class="text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
SQL <span class="text-blue-600">Explorer</span>
</h1>
<p class="mt-2 text-sm text-gray-500 max-w-2xl">
Query your workout data directly using SQL or natural language. Explore the database schema below to
understand the available tables and relationships.
</p>
</div>
<div class="flex items-center gap-2">
<span
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
<span class="flex h-2 w-2 mr-1.5 space-x-1">
<span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
</span>
PostgreSQL Connected
</span>
</div>
</div>
<div hx-get="{{ url_for('sql_explorer.sql_schema') }}" hx-trigger="load"></div>
{{ render_partial('partials/sql_explorer/sql_query.html', saved_queries=saved_queries) }}
<div class="grid grid-cols-1 gap-8">
<!-- Schema Section -->
<section
class="bg-white shadow-sm border border-gray-200 rounded-2xl overflow-hidden transition-all hover:shadow-md">
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<h3 class="text-lg font-semibold text-gray-800">Database Schema</h3>
</div>
<button class="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors" _="on click toggle .hidden on #schema-content then
if #schema-content.classList.contains('hidden') set my.innerText to 'Show Schema'
else set my.innerText to 'Hide Schema'">
Hide Schema
</button>
</div>
<div id="schema-content" class="p-6 transition-all duration-300">
<div hx-get="{{ url_for('sql_explorer.sql_schema') }}" hx-trigger="load">
<!-- Loader placeholder -->
<div class="flex justify-center items-center py-12">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
</div>
</div>
</div>
</section>
<!-- Query Section -->
<section
class="bg-white shadow-sm border border-gray-200 rounded-2xl overflow-hidden transition-all hover:shadow-md">
<div class="px-6 py-4 border-b border-gray-100 flex items-center gap-2 bg-gray-50/50">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<h3 class="text-lg font-semibold text-gray-800">SQL Query Editor</h3>
</div>
<div class="p-6">
{{ render_partial('partials/sql_explorer/sql_query.html', saved_queries=saved_queries) }}
</div>
</section>
</div>
</div>
{% endblock %}