Skip to content

Commit 3536f9d

Browse files
lovasoalovasoa
committed
no inline css in js
1 parent 739fb78 commit 3536f9d

File tree

3 files changed

+114
-115
lines changed

3 files changed

+114
-115
lines changed

‎examples/GUI/demo.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,14 @@ tr:nth-child(even) {
413413
display: flex;
414414
align-items: center;
415415
gap: 10px;
416+
margin-left: auto;
417+
}
418+
419+
.shortcuts span {
420+
display: flex;
421+
align-items: center;
422+
margin-left: 8px;
423+
color: var(--text-muted);
416424
}
417425

418426
.shortcut-key {
@@ -421,6 +429,8 @@ tr:nth-child(even) {
421429
border-radius: 3px;
422430
font-family: 'JetBrains Mono', monospace;
423431
font-size: 0.85em;
432+
margin-left: 4px;
433+
color: var(--text-secondary);
424434
}
425435

426436
footer {
@@ -514,6 +524,7 @@ footer a:hover {
514524

515525
.panel-resizable {
516526
max-width: 100%;
527+
width: 100% !important;
517528
height: 50%;
518529
min-height: 200px;
519530
max-height: calc(100% - 200px);
@@ -532,4 +543,59 @@ footer a:hover {
532543
bottom: -3px;
533544
top: auto;
534545
}
546+
547+
.shortcuts {
548+
display: none;
549+
}
550+
}
551+
552+
body.resizing {
553+
cursor: col-resize;
554+
user-select: none;
555+
}
556+
557+
@media (max-width: 768px) {
558+
body.resizing {
559+
cursor: row-resize;
560+
}
561+
}
562+
563+
.error-result {
564+
color: #ff6b6b;
565+
border-left: 3px solid #ff6b6b;
566+
background: rgba(255, 0, 0, 0.05);
567+
}
568+
569+
.github-corner:hover .octo-arm {
570+
animation: octocat-wave 560ms ease-in-out;
571+
}
572+
573+
@keyframes octocat-wave {
574+
0%, 100% { transform: rotate(0); }
575+
20%, 60% { transform: rotate(-25deg); }
576+
40%, 80% { transform: rotate(10deg); }
577+
}
578+
579+
@media (max-width: 500px) {
580+
.github-corner:hover .octo-arm {
581+
animation: none;
582+
}
583+
.github-corner .octo-arm {
584+
animation: octocat-wave 560ms ease-in-out;
585+
}
586+
}
587+
588+
.actions {
589+
display: flex;
590+
flex-wrap: wrap;
591+
margin: 15px 0;
592+
}
593+
594+
.results-header, .editor-header {
595+
display: flex;
596+
justify-content: space-between;
597+
align-items: center;
598+
margin-bottom: 8px;
599+
color: rgba(255, 255, 255, 0.7);
600+
font-weight: 500;
535601
}

‎examples/GUI/gui.js

Lines changed: 45 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@ function error(e) {
4343

4444
updateStatus('error', `Error: ${e.message}`);
4545

46+
// Clear loading spinner in the current tab when an error occurs
47+
const tabOutputElm = document.querySelector(`#${currentTabId} .results-content`);
48+
if (tabOutputElm) {
49+
tabOutputElm.innerHTML = `<div class="no-results error-result">Query failed: ${e.message}</div>`;
50+
}
51+
4652
setTimeout(() => {
4753
errorElm.style.opacity = 0;
4854
setTimeout(() => {
@@ -102,7 +108,7 @@ function execute(commands, tabId = currentTabId) {
102108
const executionTime = toc("Executing SQL");
103109

104110
if (!results) {
105-
error({message: event.data.error});
111+
error({message: event.data.error || "Unknown error occurred"});
106112
return;
107113
}
108114

@@ -125,6 +131,11 @@ function execute(commands, tabId = currentTabId) {
125131
}
126132

127133
worker.postMessage({ action: 'exec', sql: commands });
134+
135+
// Set up error handling for the worker
136+
worker.onerror = function(e) {
137+
error(e);
138+
};
128139
}
129140

130141
// Create an HTML table
@@ -172,7 +183,11 @@ function execEditorContents() {
172183
createNewTab();
173184
}
174185

175-
execute(editor.getValue() + ';');
186+
try {
187+
execute(editor.getValue() + ';');
188+
} catch (e) {
189+
error(e);
190+
}
176191

177192
// Add visual feedback for button click
178193
execBtn.classList.add('active');
@@ -298,6 +313,7 @@ function showNotification(message) {
298313
// Initialize resizable panels
299314
function initResizer() {
300315
const editorPanel = document.querySelector('.editor-panel');
316+
const isMobileView = window.matchMedia('(max-width: 768px)').matches;
301317

302318
panelResizerElm.addEventListener('mousedown', function(e) {
303319
isResizing = true;
@@ -312,7 +328,7 @@ function initResizer() {
312328
let newWidth;
313329

314330
// Check if we're in mobile view (flexbox column)
315-
const isMobileView = window.getComputedStyle(document.querySelector('.app-container')).flexDirection === 'column';
331+
const isMobileView = window.matchMedia('(max-width: 768px)').matches;
316332

317333
if (isMobileView) {
318334
// In mobile view, resize height instead of width
@@ -341,6 +357,15 @@ function initResizer() {
341357
panelResizerElm.classList.remove('active');
342358
}
343359
});
360+
361+
// Set initial width/height based on view
362+
if (isMobileView) {
363+
editorPanel.style.height = '50%';
364+
editorPanel.style.width = '';
365+
} else {
366+
editorPanel.style.width = '50%';
367+
editorPanel.style.height = '';
368+
}
344369
}
345370

346371
// Initialize tabs
@@ -368,6 +393,12 @@ function initTabs() {
368393
}
369394
}
370395
});
396+
397+
// Initialize the first tab
398+
const firstTab = document.querySelector('.tab[data-tab="tab1"]');
399+
if (firstTab) {
400+
setActiveTab('tab1');
401+
}
371402
}
372403

373404
// Create a new results tab
@@ -535,116 +566,23 @@ window.addEventListener('resize', function() {
535566
}
536567
});
537568

538-
// Add CSS for new elements
539-
const style = document.createElement('style');
540-
style.textContent = `
541-
.loading {
542-
display: flex;
543-
align-items: center;
544-
justify-content: center;
545-
flex-direction: column;
546-
height: 100px;
547-
color: rgba(255, 255, 255, 0.7);
548-
}
549-
550-
.spinner {
551-
width: 30px;
552-
height: 30px;
553-
border: 3px solid rgba(79, 190, 255, 0.3);
554-
border-radius: 50%;
555-
border-top-color: #4fbeff;
556-
animation: spin 1s ease-in-out infinite;
557-
margin-bottom: 15px;
558-
}
559-
560-
@keyframes spin {
561-
to { transform: rotate(360deg); }
562-
}
563-
564-
.table-wrapper {
565-
margin-bottom: 20px;
566-
}
567-
568-
.table-caption {
569-
color: rgba(255, 255, 255, 0.6);
570-
font-size: 0.85em;
571-
margin-bottom: 8px;
572-
text-align: right;
573-
}
574-
575-
.no-results {
576-
color: rgba(255, 255, 255, 0.5);
577-
text-align: center;
578-
padding: 30px;
579-
}
580-
581-
.notification {
582-
position: fixed;
583-
bottom: -60px;
584-
left: 50%;
585-
transform: translateX(-50%);
586-
background: rgba(40, 60, 80, 0.9);
587-
color: #fff;
588-
padding: 12px 20px;
589-
border-radius: 8px;
590-
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
591-
transition: bottom 0.3s ease;
592-
z-index: 1000;
593-
border-left: 3px solid #4fbeff;
594-
}
595-
596-
.notification.show {
597-
bottom: 20px;
598-
}
599-
600-
.button.active {
601-
transform: translateY(1px);
602-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
603-
}
604-
605-
.results-header, .editor-header {
606-
display: flex;
607-
justify-content: space-between;
608-
align-items: center;
609-
margin-bottom: 8px;
610-
color: rgba(255, 255, 255, 0.7);
611-
font-weight: 500;
612-
}
613-
614-
.actions {
615-
display: flex;
616-
flex-wrap: wrap;
617-
margin: 15px 0;
618-
}
619-
620-
.github-corner:hover .octo-arm {
621-
animation: octocat-wave 560ms ease-in-out;
622-
}
623-
624-
@keyframes octocat-wave {
625-
0%, 100% { transform: rotate(0); }
626-
20%, 60% { transform: rotate(-25deg); }
627-
40%, 80% { transform: rotate(10deg); }
628-
}
629-
630-
@media (max-width: 500px) {
631-
.github-corner:hover .octo-arm {
632-
animation: none;
633-
}
634-
.github-corner .octo-arm {
635-
animation: octocat-wave 560ms ease-in-out;
636-
}
637-
}
638-
`;
639-
document.head.appendChild(style);
640-
641569
// Add keyboard shortcuts info
642570
document.addEventListener('DOMContentLoaded', function() {
643571
const editorHeader = document.querySelector('.editor-header');
644572
if (editorHeader) {
645573
const shortcuts = document.createElement('div');
646574
shortcuts.className = 'shortcuts';
647-
shortcuts.innerHTML = '<span title="Execute: Ctrl/Cmd+Enter, Save: Ctrl/Cmd+S">Keyboard shortcuts</span>';
575+
shortcuts.innerHTML = `
576+
<span title="Execute: Ctrl/Cmd+Enter">
577+
<span class="shortcut-key">Ctrl+Enter</span>
578+
</span>
579+
<span title="Save DB: Ctrl/Cmd+S">
580+
<span class="shortcut-key">Ctrl+S</span>
581+
</span>
582+
<span title="Toggle History: Ctrl+Space">
583+
<span class="shortcut-key">Ctrl+Space</span>
584+
</span>
585+
`;
648586
editorHeader.appendChild(shortcuts);
649587
}
650588
});

‎examples/GUI/index.html

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,8 @@ <h1>SQL.js Interpreter</h1>
5454
<div class="app-container">
5555
<!-- Editor Panel -->
5656
<div class="panel panel-resizable editor-panel">
57-
<div class="panel-header">
57+
<div class="panel-header editor-header">
5858
<span>SQL Editor</span>
59-
<div class="shortcuts">
60-
<span title="Execute query">
61-
<span class="shortcut-key">Ctrl+Enter</span>
62-
</span>
63-
</div>
6459
</div>
6560
<div class="panel-content">
6661
<textarea id="commands">DROP TABLE IF EXISTS employees;
@@ -84,7 +79,7 @@ <h1>SQL.js Interpreter</h1>
8479
INSERT INTO employees VALUES (13,'MONROE','ENGINEER',10,'2000-12-03',30000,NULL,2);
8580
INSERT INTO employees VALUES (14,'ROOSEVELT','CPA',9,'1995-10-12',35000,NULL,1);
8681

87-
SELECT designation,COUNT(*) AS nbr, (AVG(salary)) AS avg_salary FROM employees GROUP BY designation ORDER BY avg_salary DESC;
82+
SELECT designation,COUNT(*) AS nbr, AVG(salary) AS avg_salary FROM employees GROUP BY designation ORDER BY avg_salary DESC;
8883
SELECT name,hired_on FROM employees ORDER BY hired_on;</textarea>
8984
<div class="query-history" id="queryHistory">
9085
<!-- History items will be added here dynamically -->
@@ -107,7 +102,7 @@ <h1>SQL.js Interpreter</h1>
107102
<div class="panel-content">
108103
<div id="error" class="error"></div>
109104
<div class="tab-panel active" id="tab1">
110-
<div id="output" class="results-content">Results will be displayed here</div>
105+
<div class="results-content">Results will be displayed here</div>
111106
</div>
112107
</div>
113108
<div class="status-bar">

0 commit comments

Comments
 (0)