File size: 5,581 Bytes
509f3c2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
class CustomSqlLab extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
.sql-lab {
background: rgba(31, 41, 55, 0.8);
border-radius: 1rem;
overflow: hidden;
border: 1px solid rgba(55, 65, 81, 0.5);
}
.table-browser {
background: rgba(17, 24, 39, 0.9);
padding: 1.5rem;
}
.sql-editor {
background: #1a202c;
border-radius: 0.5rem;
padding: 1rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.5;
color: #e2e8f0;
}
.run-button {
background: linear-gradient(135deg, #22c55e, #22c55e/80);
color: #111827;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
.run-button:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.4);
}
.results-grid {
background: rgba(17, 24, 39, 0.9);
}
.reset-button {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
}
.table-row:hover {
background: rgba(55, 65, 81, 0.3);
}
</style>
<div class="sql-lab">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
<!-- Left: Table Browser -->
<div class="table-browser rounded-xl">
<div class="flex items-center mb-4">
<i data-feather="database" class="w-5 h-5 text-secondary mr-3"></i>
<h3 class="text-lg font-semibold">Employees Database</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-700">
<th class="pb-3 text-left">Table</th>
<th class="pb-3 text-left">Rows</th>
<th class="pb-3 text-left">Preview</th>
</tr>
</thead>
<tbody>
<tr class="table-row border-b border-gray-800">
<td class="py-3 font-medium">employees</td>
<td class="py-3">500</td>
<td class="py-3">
<button class="view-table-btn p-1 rounded hover:bg-gray-800">
<i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
</td>
</tr>
<tr class="table-row border-b border-gray-800">
<td class="py-3 font-medium">departments</td>
<td class="py-3">10</td>
<td class="py-3">
<button class="view-table-btn p-1 rounded hover:bg-gray-800">
<i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
</td>
</tr>
<tr class="table-row">
<td class="py-3 font-medium">salaries</td>
<td class="py-3">500</td>
<td class="py-3">
<button class="view-table-btn p-1 rounded hover:bg-gray-800">
<i data-feather="eye" class="w-4 h-4 text-gray-400"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Middle: SQL Editor -->
<div class="space-y-6">
<div class="sql-editor">
SELECT id, name, department<br>
FROM employees<br>
WHERE department = 'Engineering'<br>
ORDER BY name ASC<br>
LIMIT 10;
</div>
<div class="flex space-x-4">
<button id="sql-run-btn" class="run-button flex items-center">
<i data-feather="play" class="w-4 h-4 mr-2"></i>
Run Query
</button>
<button class="reset-button flex items-center text-sm">
<i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
Reset DB
</button>
</div>
</div>
<!-- Right: Results Grid -->
<div class="results-grid rounded-xl p-4">
<div class="flex items-center justify-between mb-4">
<div class="text-gray-300">Query Results</div>
<div class="text-xs text-gray-400">Click "Run Query" to see results</div>
</div>
<div id="sql-results" class="text-gray-400 text-sm">
Results will appear here...
</div>
</div>
</div>
</div>
<div class="p-6 bg-gray-900/50 border-t border-gray-800">
<div class="text-sm text-gray-300 mb-2">Sample Query:</div>
<div class="font-mono text-xs text-gray-400">
-- Find all employees in Engineering department
</div>
</div>
</div>
`;
setTimeout(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
}, 100);
}
}
customElements.define('custom-sql-lab', CustomSqlLab); |