Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf10e034

Browse files
committed
templates
1 parent3536f9d commitf10e034

File tree

2 files changed

+241
-73
lines changed

2 files changed

+241
-73
lines changed

‎examples/GUI/gui.js‎

Lines changed: 174 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,20 @@ function error(e) {
4646
// Clear loading spinner in the current tab when an error occurs
4747
consttabOutputElm=document.querySelector(`#${currentTabId} .results-content`);
4848
if(tabOutputElm){
49-
tabOutputElm.innerHTML=`<div class="no-results error-result">Query failed:${e.message}</div>`;
49+
tabOutputElm.innerHTML='';
50+
51+
// Use error template
52+
consterrorTemplate=document.getElementById('error-template');
53+
consterrorClone=errorTemplate.content.cloneNode(true);
54+
consterrorDiv=errorClone.querySelector('.error-result');
55+
56+
// Set error message
57+
consterrorMessage=document.createElement('span');
58+
errorMessage.slot='error-message';
59+
errorMessage.textContent=`Query failed:${e.message}`;
60+
errorDiv.appendChild(errorMessage);
61+
62+
tabOutputElm.appendChild(errorDiv);
5063
}
5164

5265
setTimeout(()=>{
@@ -64,19 +77,38 @@ function noerror() {
6477

6578
// Status updates
6679
functionupdateStatus(type,message){
80+
constcreateStatusSpan=(className,text)=>{
81+
constspan=document.createElement('span');
82+
span.className=className;
83+
span.textContent=text;
84+
returnspan;
85+
};
86+
6787
switch(type){
6888
case'executing':
69-
editorStatusElm.innerHTML=`<span class="status-info">Executing query...</span>`;
70-
resultsStatusElm.innerHTML=`<span class="status-info">Executing query...</span>`;
89+
editorStatusElm.innerHTML='';
90+
editorStatusElm.appendChild(createStatusSpan('status-info','Executing query...'));
91+
92+
resultsStatusElm.innerHTML='';
93+
resultsStatusElm.appendChild(createStatusSpan('status-info','Executing query...'));
7194
break;
95+
7296
case'success':
73-
editorStatusElm.innerHTML=`<span class="status-success">Query executed successfully</span>`;
74-
resultsStatusElm.innerHTML=`<span class="status-success">${message}</span>`;
97+
editorStatusElm.innerHTML='';
98+
editorStatusElm.appendChild(createStatusSpan('status-success','Query executed successfully'));
99+
100+
resultsStatusElm.innerHTML='';
101+
resultsStatusElm.appendChild(createStatusSpan('status-success',message));
75102
break;
103+
76104
case'error':
77-
editorStatusElm.innerHTML=`<span class="status-error">Query failed</span>`;
78-
resultsStatusElm.innerHTML=`<span class="status-error">${message}</span>`;
105+
editorStatusElm.innerHTML='';
106+
editorStatusElm.appendChild(createStatusSpan('status-error','Query failed'));
107+
108+
resultsStatusElm.innerHTML='';
109+
resultsStatusElm.appendChild(createStatusSpan('status-error',message));
79110
break;
111+
80112
default:
81113
editorStatusElm.textContent=message;
82114
break;
@@ -93,12 +125,27 @@ function execute(commands, tabId = currentTabId) {
93125
tic();
94126
updateStatus('executing');
95127

128+
// Check if we need to create a new tab
129+
// If the current tab is the initial tab and it hasn't been used yet, use it
130+
// Otherwise, create a new tab
131+
constcurrentTabPanel=document.getElementById(currentTabId);
132+
constisInitialUnusedTab=currentTabId==='tab1'&&
133+
currentTabPanel&&
134+
currentTabPanel.querySelector('.results-content').innerHTML.includes('Results will be displayed here');
135+
136+
if(!isInitialUnusedTab){
137+
tabId=createNewTab();
138+
}
139+
96140
// Get the output element for the current tab
97141
consttabOutputElm=document.querySelector(`#${tabId} .results-content`);
98142
if(!tabOutputElm)return;
99143

100-
// Show loading indicator
101-
tabOutputElm.innerHTML='<div class="loading"><div class="spinner"></div><span>Executing query...</span></div>';
144+
// Show loading indicator using template
145+
tabOutputElm.innerHTML='';
146+
constloadingTemplate=document.getElementById('loading-template');
147+
constloadingClone=loadingTemplate.content.cloneNode(true);
148+
tabOutputElm.appendChild(loadingClone);
102149

103150
// Add to query history
104151
addToHistory(commands);
@@ -116,7 +163,10 @@ function execute(commands, tabId = currentTabId) {
116163
tabOutputElm.innerHTML="";
117164

118165
if(results.length===0){
119-
tabOutputElm.innerHTML='<div class="no-results">Query executed successfully. No results to display.</div>';
166+
constnoResultsDiv=document.createElement('div');
167+
noResultsDiv.className='no-results';
168+
noResultsDiv.textContent='Query executed successfully. No results to display.';
169+
tabOutputElm.appendChild(noResultsDiv);
120170
updateStatus('success','Query executed with no results');
121171
return;
122172
}
@@ -140,36 +190,50 @@ function execute(commands, tabId = currentTabId) {
140190

141191
// Create an HTML table
142192
vartableCreate=function(){
143-
functionvalconcat(vals,tagName){
144-
if(vals.length===0)return'';
145-
varopen='<'+tagName+'>',close='</'+tagName+'>';
146-
returnopen+vals.join(close+open)+close;
147-
}
148193
returnfunction(columns,values){
149-
vartbl=document.createElement('table');
150-
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
194+
// Use the table template
195+
consttableTemplate=document.getElementById('table-template');
196+
consttableClone=tableTemplate.content.cloneNode(true);
197+
constwrapper=tableClone.querySelector('.table-wrapper');
198+
consttable=tableClone.querySelector('table');
199+
200+
// Set row and column counts
201+
wrapper.querySelector('.row-count').textContent=`${values.length} row${values.length!==1 ?'s' :''}`;
202+
wrapper.querySelector('.column-count').textContent=`${columns.length} column${columns.length!==1 ?'s' :''}`;
203+
204+
// Create header cells
205+
constthead=table.querySelector('thead tr');
206+
thead.innerHTML='';// Clear the slot
207+
columns.forEach(column=>{
208+
constth=document.createElement('th');
209+
th.textContent=column;
210+
thead.appendChild(th);
211+
});
212+
213+
// Create data rows
214+
consttbody=table.querySelector('tbody');
215+
tbody.innerHTML='';// Clear the slot
151216

152217
if(values.length===0){
153-
html+='<tbody><tr><td colspan="'+columns.length+'" class="no-results">No results</td></tr></tbody>';
218+
constemptyRow=document.createElement('tr');
219+
constemptyCell=document.createElement('td');
220+
emptyCell.className='no-results';
221+
emptyCell.textContent='No results';
222+
emptyCell.colSpan=columns.length;
223+
emptyRow.appendChild(emptyCell);
224+
tbody.appendChild(emptyRow);
154225
}else{
155-
varrows=values.map(function(v){returnvalconcat(v,'td');});
156-
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
226+
values.forEach(rowData=>{
227+
constrow=document.createElement('tr');
228+
rowData.forEach(cellData=>{
229+
constcell=document.createElement('td');
230+
cell.textContent=cellData;
231+
row.appendChild(cell);
232+
});
233+
tbody.appendChild(row);
234+
});
157235
}
158236

159-
tbl.innerHTML=html;
160-
161-
// Add a wrapper with a caption showing the number of rows
162-
varwrapper=document.createElement('div');
163-
wrapper.className='table-wrapper';
164-
varcaption=document.createElement('div');
165-
caption.className='table-caption';
166-
caption.innerHTML=`
167-
<span>${values.length} row${values.length!==1 ?'s' :''}</span>
168-
<span>${columns.length} column${columns.length!==1 ?'s' :''}</span>
169-
`;
170-
wrapper.appendChild(caption);
171-
wrapper.appendChild(tbl);
172-
173237
returnwrapper;
174238
}
175239
}();
@@ -178,11 +242,7 @@ var tableCreate = function () {
178242
functionexecEditorContents(){
179243
noerror();
180244

181-
// Create a new tab if needed
182-
if(document.querySelectorAll('.results-tabs .tab').length<=2){// Only the first tab and + button
183-
createNewTab();
184-
}
185-
245+
// Use the current tab if it exists, otherwise create a new one
186246
try{
187247
execute(editor.getValue()+';');
188248
}catch(e){
@@ -237,8 +297,7 @@ dbFileElm.onchange = function () {
237297
// Show the schema of the loaded database
238298
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
239299

240-
// Create a new tab for the results
241-
createNewTab();
300+
// Execute the query (this will create a new tab if needed)
242301
execEditorContents();
243302

244303
// Show success notification
@@ -300,8 +359,11 @@ function showNotification(message) {
300359
document.body.appendChild(notification);
301360
}
302361

303-
// Set message and show
362+
// Clear existing content and set new message
363+
notification.textContent='';
304364
notification.textContent=message;
365+
366+
// Show notification
305367
notification.classList.add('show');
306368

307369
// Hide after 3 seconds
@@ -397,6 +459,18 @@ function initTabs() {
397459
// Initialize the first tab
398460
constfirstTab=document.querySelector('.tab[data-tab="tab1"]');
399461
if(firstTab){
462+
// Clear the first tab's content
463+
firstTab.innerHTML='';
464+
465+
// Add the tab text directly
466+
firstTab.textContent=`Result${tabCounter}`;
467+
468+
// Add close button
469+
constcloseBtn=document.createElement('span');
470+
closeBtn.className='tab-close';
471+
closeBtn.textContent='×';
472+
firstTab.appendChild(closeBtn);
473+
400474
setActiveTab('tab1');
401475
}
402476
}
@@ -406,26 +480,33 @@ function createNewTab() {
406480
tabCounter++;
407481
consttabId=`tab${tabCounter}`;
408482

409-
// Create tab button
410-
consttab=document.createElement('button');
411-
tab.className='tab';
483+
// Create tab button using template
484+
consttabTemplate=document.getElementById('tab-template');
485+
consttabClone=tabTemplate.content.cloneNode(true);
486+
consttab=tabClone.querySelector('.tab');
412487
tab.dataset.tab=tabId;
413-
tab.innerHTML=`Result${tabCounter} <span class="tab-close">×</span>`;
488+
489+
// Clear any existing content in the tab
490+
tab.innerHTML='';
491+
492+
// Add the tab text directly (no slots)
493+
tab.textContent=`Result${tabCounter}`;
494+
495+
// Add close button
496+
constcloseBtn=document.createElement('span');
497+
closeBtn.className='tab-close';
498+
closeBtn.textContent='×';
499+
tab.appendChild(closeBtn);
414500

415501
// Insert before the + button
416502
resultsTabs.insertBefore(tab,newTabBtn);
417503

418-
// Create tab panel
419-
consttabPanel=document.createElement('div');
420-
tabPanel.className='tab-panel';
504+
// Create tab panel using template
505+
constpanelTemplate=document.getElementById('tab-panel-template');
506+
constpanelClone=panelTemplate.content.cloneNode(true);
507+
consttabPanel=panelClone.querySelector('.tab-panel');
421508
tabPanel.id=tabId;
422509

423-
// Create results content container
424-
constresultsContent=document.createElement('div');
425-
resultsContent.className='results-content';
426-
resultsContent.textContent='Execute a query to see results';
427-
428-
tabPanel.appendChild(resultsContent);
429510
document.querySelector('.results-panel .panel-content').appendChild(tabPanel);
430511

431512
// Set as active
@@ -506,9 +587,11 @@ function addToHistory(query) {
506587
functionupdateHistoryUI(){
507588
queryHistoryElm.innerHTML='';
508589

509-
queryHistory.forEach((item,index)=>{
510-
consthistoryItem=document.createElement('div');
511-
historyItem.className='history-item';
590+
queryHistory.forEach((item)=>{
591+
// Use history item template
592+
consthistoryTemplate=document.getElementById('history-item-template');
593+
consthistoryClone=historyTemplate.content.cloneNode(true);
594+
consthistoryItem=historyClone.querySelector('.history-item');
512595

513596
// Format timestamp
514597
consttimestamp=item.timestamp;
@@ -519,10 +602,18 @@ function updateHistoryUI() {
519602
item.query.substring(0,60)+'...' :
520603
item.query;
521604

522-
historyItem.innerHTML=`
523-
<div class="history-query" title="${item.query}">${queryPreview}</div>
524-
<div class="history-time">${timeString}</div>
525-
`;
605+
// Set query preview
606+
constqueryPreviewEl=document.createElement('span');
607+
queryPreviewEl.slot='query-preview';
608+
queryPreviewEl.textContent=queryPreview;
609+
historyItem.querySelector('.history-query').appendChild(queryPreviewEl);
610+
historyItem.querySelector('.history-query').title=item.query;
611+
612+
// Set query time
613+
constqueryTimeEl=document.createElement('span');
614+
queryTimeEl.slot='query-time';
615+
queryTimeEl.textContent=timeString;
616+
historyItem.querySelector('.history-time').appendChild(queryTimeEl);
526617

527618
// Add click handler to load query
528619
historyItem.addEventListener('click',()=>{
@@ -572,17 +663,27 @@ document.addEventListener('DOMContentLoaded', function() {
572663
if(editorHeader){
573664
constshortcuts=document.createElement('div');
574665
shortcuts.className='shortcuts';
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-
`;
666+
667+
// Create shortcut elements using template
668+
constaddShortcut=(title,keyText)=>{
669+
constshortcutTemplate=document.getElementById('shortcut-template');
670+
constshortcutClone=shortcutTemplate.content.cloneNode(true);
671+
constshortcut=shortcutClone.querySelector('span');
672+
shortcut.title=title;
673+
674+
constkeySlot=document.createElement('span');
675+
keySlot.slot='key';
676+
keySlot.textContent=keyText;
677+
shortcut.appendChild(keySlot);
678+
679+
shortcuts.appendChild(shortcut);
680+
};
681+
682+
// Add all shortcuts
683+
addShortcut('Execute: Ctrl/Cmd+Enter','Ctrl+Enter');
684+
addShortcut('Save DB: Ctrl/Cmd+S','Ctrl+S');
685+
addShortcut('Toggle History: Ctrl+Space','Ctrl+Space');
686+
586687
editorHeader.appendChild(shortcuts);
587688
}
588689
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp