Skip to content

Commit 9521114

Browse files
simonwsimonw
authored
Create sqlite-wasm.html
https://gist.github.com/simonw/677c3794051c4dfeac94e514a8e5b697
1 parent 727bbfa commit 9521114

File tree

1 file changed

+147
-0
lines changed

1 file changed

+147
-0
lines changed

‎sqlite-wasm.html

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pelican Sightings Query Tool</title>
7+
<script src="https://cdn.jsdelivr.net/npm/@sqlite.org/sqlite-wasm@3.46.1-build4/sqlite-wasm/jswasm/sqlite3.mjs" type="module"></script>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
max-width: 800px;
12+
margin: 0 auto;
13+
padding: 20px;
14+
line-height: 1.6;
15+
}
16+
textarea {
17+
width: 100%;
18+
height: 100px;
19+
margin-bottom: 10px;
20+
}
21+
button {
22+
background-color: #4CAF50;
23+
border: none;
24+
color: white;
25+
padding: 10px 20px;
26+
text-align: center;
27+
text-decoration: none;
28+
display: inline-block;
29+
font-size: 16px;
30+
margin: 4px 2px;
31+
cursor: pointer;
32+
}
33+
button:disabled {
34+
background-color: #cccccc;
35+
cursor: not-allowed;
36+
}
37+
table {
38+
border-collapse: collapse;
39+
width: 100%;
40+
margin-top: 20px;
41+
}
42+
th, td {
43+
border: 1px solid #ddd;
44+
padding: 8px;
45+
text-align: left;
46+
}
47+
th {
48+
background-color: #4CAF50;
49+
color: white;
50+
}
51+
tr:nth-child(even) {
52+
background-color: #f2f2f2;
53+
}
54+
#loading {
55+
display: none;
56+
color: #4CAF50;
57+
font-weight: bold;
58+
}
59+
</style>
60+
</head>
61+
<body>
62+
<h1>Pelican Sightings in Half Moon Bay</h1>
63+
<div id="loading">Loading SQLite and initializing database...</div>
64+
<textarea id="query" placeholder="Enter your SQL query here...">SELECT * FROM pelican_sightings;</textarea>
65+
<button id="executeButton" onclick="executeQuery()" disabled>Execute Query</button>
66+
<div id="result"></div>
67+
68+
<script type="module">
69+
import sqlite3InitModule from 'https://cdn.jsdelivr.net/npm/@sqlite.org/sqlite-wasm@3.46.1-build4/sqlite-wasm/jswasm/sqlite3.mjs';
70+
71+
const loadingElement = document.getElementById('loading');
72+
const executeButton = document.getElementById('executeButton');
73+
74+
const initializeSQLite = async () => {
75+
loadingElement.style.display = 'block';
76+
try {
77+
const sqlite3 = await sqlite3InitModule({
78+
print: console.log,
79+
printErr: console.error,
80+
});
81+
console.log('Running SQLite version', sqlite3.version.libVersion);
82+
window.db = new sqlite3.oo1.DB();
83+
84+
window.db.exec(`
85+
CREATE TABLE pelican_sightings (
86+
id INTEGER PRIMARY KEY,
87+
date TEXT,
88+
location TEXT,
89+
species TEXT,
90+
count INTEGER
91+
);
92+
INSERT INTO pelican_sightings (date, location, species, count) VALUES
93+
('2024-10-01', 'Miramar Beach', 'Brown Pelican', 12),
94+
('2024-10-02', 'Pillar Point Harbor', 'California Brown Pelican', 8),
95+
('2024-10-03', 'Half Moon Bay State Beach', 'American White Pelican', 3),
96+
('2024-10-04', 'Dunes Beach', 'Brown Pelican', 15),
97+
('2024-10-05', 'Poplar Beach', 'California Brown Pelican', 10);
98+
`);
99+
console.log('Database initialized with sample data');
100+
executeButton.disabled = false;
101+
} catch (err) {
102+
console.error('Initialization error:', err.message);
103+
document.getElementById('result').innerHTML = `<p>Error initializing database: ${err.message}</p>`;
104+
} finally {
105+
loadingElement.style.display = 'none';
106+
}
107+
};
108+
109+
initializeSQLite();
110+
111+
window.executeQuery = () => {
112+
const query = document.getElementById('query').value;
113+
try {
114+
const results = window.db.selectObjects(query);
115+
displayResults(results);
116+
} catch (err) {
117+
document.getElementById('result').innerHTML = `<p>Error: ${err.message}</p>`;
118+
}
119+
};
120+
121+
function displayResults(results) {
122+
if (results.length === 0) {
123+
document.getElementById('result').innerHTML = '<p>No results.</p>';
124+
return;
125+
}
126+
let columns = Object.keys(results[0]);
127+
let tableHtml = '<table><tr>';
128+
columns.forEach(column => {
129+
tableHtml += `<th>${column}</th>`;
130+
});
131+
tableHtml += '</tr>';
132+
133+
results.forEach(row => {
134+
tableHtml += '<tr>';
135+
136+
columns.forEach(column => {
137+
tableHtml += `<td>${row[column]}</td>`;
138+
});
139+
tableHtml += '</tr>';
140+
});
141+
tableHtml += '</table>';
142+
143+
document.getElementById('result').innerHTML = tableHtml;
144+
}
145+
</script>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)