75 lines
4.0 KiB
HTML
75 lines
4.0 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
<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>
|
|
<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 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 %} |