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

76
templates/partials/sql_explorer/schema.html
View File

@@ -1,23 +1,51 @@
<div class="relative">
<div class="relative space-y-4">
<!-- Hidden textarea containing the actual SQL (so we preserve line breaks) -->
<textarea id="create_sql_text" style="display: none;">{{ create_sql }}</textarea>
<textarea id="create_sql_text" class="hidden">{{ create_sql }}</textarea>
<!-- Floating Clear Button -->
<button onclick="copySqlToClipboard()"
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">
<!-- Floating Actions Container -->
<div class="absolute top-4 right-4 flex items-center gap-2 z-10">
<button id="copy-ddl-btn" onclick="copySqlToClipboard()"
_="on click set my.innerText to 'Copied!' then wait 2s then set my.innerText to 'Copy DDL SQL'"
class="px-4 py-2 flex items-center gap-2 rounded-xl bg-gray-900 text-white shadow-lg hover:bg-gray-800 transition-all text-sm font-medium border border-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
</svg>
<span>Copy DDL SQL</span>
</button>
</div>
<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">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
</svg>
<!-- Schema Diagram Frame -->
<div class="overflow-auto border-2 border-dashed border-gray-200 rounded-2xl bg-slate-50 p-8 shadow-inner"
style="max-height: 80vh;">
<div class="flex justify-center min-w-max">
<div class="bg-white p-4 rounded-2xl shadow-xl border border-gray-100">
<object data="/static/img/schema.svg" type="image/svg+xml" id="schema-svg-object"
class="block transition-all duration-300"
style="min-width: 1000px; height: auto; min-height: 600px;">
<p class="text-gray-500">Your browser does not support SVG objects.
<a href="/static/img/schema.svg" target="_blank" class="text-blue-500 hover:underline">Click
here to view the schema directly.</a>
</p>
</object>
</div>
</div>
</div>
<span>Copy SQL</span>
</button>
<div class="overflow-auto border rounded-xl bg-slate-50 p-4" style="max-height: 80vh;">
<div class="flex justify-center">
<img src="/static/img/schema.svg" alt="Database Schema Diagram" class="max-w-full h-auto">
<!-- Schema Footer Info -->
<div class="flex items-center justify-center gap-4 text-xs font-medium text-gray-400">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
Primary Keys
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
Foreign Keys
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-gray-300"></span>
Columns
</div>
</div>
@@ -27,27 +55,23 @@
const text = textArea.value;
if (navigator.clipboard && navigator.clipboard.writeText) {
// Modern approach: Use Clipboard API
navigator.clipboard.writeText(text)
.then(() => {
alert("SQL copied to clipboard!");
// We could use a toast here if available
console.log("SQL copied to clipboard!");
})
.catch(err => {
alert("Failed to copy: " + err);
console.error("Failed to copy: " + err);
});
} else {
// Fallback (older browsers):
// - Temporarily show the textarea, select, and use document.execCommand('copy')
// - This approach is less reliable but widely supported before navigator.clipboard.
textArea.style.display = "block"; // show temporarily
textArea.classList.remove('hidden');
textArea.select();
try {
document.execCommand("copy");
alert("SQL copied to clipboard!");
} catch (err) {
alert("Failed to copy: " + err);
console.error("Failed to copy: " + err);
}
textArea.style.display = "none"; // hide again
textArea.classList.add('hidden');
}
}
</script>