sql.js/examples/GUI/gui.js at master · sbgrid/sql.js · GitHub

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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);
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
varexecBtn=document.getElementById("execute");
varoutputElm=document.getElementById('output');
varerrorElm=document.getElementById('error');
varcommandsElm=document.getElementById('commands');
vardbFileElm=document.getElementById('dbfile');
varsavedbElm=document.getElementById('savedb');

// Start the worker in which sql.js will run
varworker=newWorker("../../dist/worker.sql-wasm.js");
worker.onerror=error;

// Open a database
worker.postMessage({action: 'open'});

// Connect to the HTML element we 'print' to
functionprint(text){
outputElm.innerHTML=text.replace(/\n/g,'<br>');
}
functionerror(e){
console.log(e);
errorElm.style.height='2em';
errorElm.textContent=e.message;
}

functionnoerror(){
errorElm.style.height='0';
}

// Run a command in the database
functionexecute(commands){
tic();
worker.onmessage=function(event){
varresults=event.data.results;
toc("Executing SQL");
if(!results){
error({message: event.data.error});
return;
}

tic();
outputElm.innerHTML="";
for(vari=0;i<results.length;i++){
outputElm.appendChild(tableCreate(results[i].columns,results[i].values));
}
toc("Displaying results");
}
worker.postMessage({action: 'exec',sql: commands});
outputElm.textContent="Fetching results...";
}

// Create an HTML table
vartableCreate=function(){
functionvalconcat(vals,tagName){
if(vals.length===0)return'';
varopen='<'+tagName+'>',close='</'+tagName+'>';
returnopen+vals.join(close+open)+close;
}
returnfunction(columns,values){
vartbl=document.createElement('table');
varhtml='<thead>'+valconcat(columns,'th')+'</thead>';
varrows=values.map(function(v){returnvalconcat(v,'td');});
html+='<tbody>'+valconcat(rows,'tr')+'</tbody>';
tbl.innerHTML=html;
returntbl;
}
}();

// Execute the commands when the button is clicked
functionexecEditorContents(){
noerror()
execute(editor.getValue()+';');
}
execBtn.addEventListener("click",execEditorContents,true);

// Performance measurement functions
vartictime;
if(!window.performance||!performance.now){window.performance={now: Date.now}}
functiontic(){tictime=performance.now()}
functiontoc(msg){
vardt=performance.now()-tictime;
console.log((msg||'toc')+": "+dt+"ms");
}

// Add syntax highlihjting to the textarea
vareditor=CodeMirror.fromTextArea(commandsElm,{
mode: 'text/x-mysql',
viewportMargin: Infinity,
indentWithTabs: true,
smartIndent: true,
lineNumbers: true,
matchBrackets: true,
autofocus: true,
extraKeys: {
"Ctrl-Enter": execEditorContents,
"Ctrl-S": savedb,
}
});

// Load a db from a file
dbFileElm.onchange=function(){
varf=dbFileElm.files[0];
varr=newFileReader();
r.onload=function(){
worker.onmessage=function(){
toc("Loading database from file");
// Show the schema of the loaded database
editor.setValue("SELECT `name`, `sql`\n FROM `sqlite_master`\n WHERE type='table';");
execEditorContents();
};
tic();
try{
worker.postMessage({action: 'open',buffer: r.result},[r.result]);
}
catch(exception){
worker.postMessage({action: 'open',buffer: r.result});
}
}
r.readAsArrayBuffer(f);
}

// Save the db to a file
functionsavedb(){
worker.onmessage=function(event){
toc("Exporting the database");
vararraybuff=event.data.buffer;
varblob=newBlob([arraybuff]);
vara=document.createElement("a");
document.body.appendChild(a);
a.href=window.URL.createObjectURL(blob);
a.download="sql.db";
a.onclick=function(){
setTimeout(function(){
window.URL.revokeObjectURL(a.href);
},1500);
};
a.click();
};
tic();
worker.postMessage({action: 'export'});
}
savedbElm.addEventListener("click",savedb,true);