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

Add plot functionality to unsaved sql query and use htmx

Browse Source
This commit is contained in:
Peter Stockings
2025-02-01 20:26:54 +11:00
parent 55149c5ea9
commit 8b02307397
3 changed files with 75 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/partials/sql_explorer/results.html Normal file
View File

@@ -0,0 +1,26 @@
{% if error %}
<div class="bg-red-200 text-red-800 p-3 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 %}
</tbody>
</table>
{% endif %}

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

@@ -26,7 +26,8 @@
<!-- Buttons -->
<div class="flex space-x-2 pt-1">
<!-- Execute Button -->
<button type="submit" name="action" value="execute"
<button hx-post="{{ url_for('execute_sql_query') }}" hx-target="#execute-query-results"
hx-include="[name='query']" hx-trigger="click" hx-swap="innerHTML"
class="flex items-center bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<!-- Execute Icon (Heroicon: Play) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
@@ -39,6 +40,20 @@
Execute
</button>
<!-- Plot Button -->
<button hx-post="{{ url_for('plot_unsaved_query') }}" hx-target="#sql-plot-results" hx-trigger="click"
hx-include="[name='query'],[name='title']"
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">
<path stroke-linecap=" round" stroke-linejoin="round"
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
</button>
<!-- Save Button -->
<button type="submit" name="action" value="save"
class="flex items-center bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500">
@@ -54,27 +69,12 @@
</form>
<div class="mt-6">
{% 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 %}
</tbody>
</table>
{% endif %}
<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 -->
@@ -120,10 +120,10 @@
class="flex items-center text-green-500 hover:text-green-700 cursor-pointer"
hx-trigger="click">
<!-- Plot Icon (Heroicon: Chart Bar) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m5-9v9m4-9v9m5-9v9" />
<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">
<path stroke-linecap=" round" stroke-linejoin="round"
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
</a>
@@ -153,10 +153,4 @@
{% endif %}
</div>
<!-- Plot Results Section -->
<div id="sql-plot-results" class="mt-8">
<!-- Plot will be loaded here via htmx -->
</div>
</div>