78 lines
3.7 KiB
HTML
78 lines
3.7 KiB
HTML
<div class="relative space-y-4">
|
|
<!-- Hidden textarea containing the actual SQL (so we preserve line breaks) -->
|
|
<textarea id="create_sql_text" class="hidden">{{ create_sql }}</textarea>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<script>
|
|
function copySqlToClipboard() {
|
|
const textArea = document.getElementById("create_sql_text");
|
|
const text = textArea.value;
|
|
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
navigator.clipboard.writeText(text)
|
|
.then(() => {
|
|
// We could use a toast here if available
|
|
console.log("SQL copied to clipboard!");
|
|
})
|
|
.catch(err => {
|
|
console.error("Failed to copy: " + err);
|
|
});
|
|
} else {
|
|
textArea.classList.remove('hidden');
|
|
textArea.select();
|
|
try {
|
|
document.execCommand("copy");
|
|
} catch (err) {
|
|
console.error("Failed to copy: " + err);
|
|
}
|
|
textArea.classList.add('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
</div> |