Skip to content

Commit 3bdc29f

Browse files
BaseMaxBaseMax
committed
clean
1 parent 9fefe08 commit 3bdc29f

File tree

3 files changed

+105
-107
lines changed

3 files changed

+105
-107
lines changed

‎index.html

+5-107
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en-US" dir="ltr">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>SQLite Browser</title>
7-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8-
<script src="https://cdn.jsdelivr.net/npm/@sqlite.org/sqlite-wasm@3.46.1-build4/sqlite-wasm/jswasm/sqlite3.mjs" type="module"></script>
9-
<style>
10-
#tableList {
11-
max-height: 300px;
12-
overflow-y: auto;
13-
}
14-
table {
15-
margin-top: 20px;
16-
}
17-
</style>
7+
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
8+
<link type="text/css" rel="stylesheet" href="style.css">
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@sqlite.org/sqlite-wasm@3.46.1-build4/sqlite-wasm/jswasm/sqlite3.mjs"></script>
1810
</head>
1911
<body>
2012
<div class="container my-5">
@@ -39,100 +31,6 @@ <h5>SQL Query</h5>
3931
</div>
4032
</div>
4133

42-
<script type="module">
43-
import sqlite3InitModule from 'https://cdn.jsdelivr.net/npm/@sqlite.org/sqlite-wasm@3.46.1-build4/sqlite-wasm/jswasm/sqlite3.mjs';
44-
45-
let db;
46-
47-
document.getElementById('dbFile').addEventListener('change', async (event) => {
48-
const file = event.target.files[0];
49-
if (!file) return;
50-
51-
const arrayBuffer = await file.arrayBuffer();
52-
const sqlite3 = await sqlite3InitModule({
53-
print: console.log,
54-
printErr: console.error
55-
});
56-
57-
db = new sqlite3.oo1.DB(new Uint8Array(arrayBuffer));
58-
loadTables();
59-
});
60-
61-
async function loadTables() {
62-
if (!db) return;
63-
64-
try {
65-
const tables = db.selectObjects(`
66-
SELECT name
67-
FROM sqlite_master
68-
WHERE type='table' AND name NOT LIKE 'sqlite_%';
69-
`);
70-
71-
const tableList = document.getElementById('tableList');
72-
tableList.innerHTML = '';
73-
74-
tables.forEach((table) => {
75-
const li = document.createElement('li');
76-
li.className = 'list-group-item list-group-item-action';
77-
li.textContent = table.name;
78-
li.addEventListener('click', () => browseTable(table.name));
79-
tableList.appendChild(li);
80-
});
81-
} catch (err) {
82-
alert(`Error loading tables: ${err.message}`);
83-
}
84-
}
85-
86-
async function browseTable(tableName) {
87-
if (!db) return;
88-
89-
const query = `SELECT * FROM ${tableName};`;
90-
executeSQL(query);
91-
}
92-
93-
document.getElementById('executeQuery').addEventListener('click', () => {
94-
const query = document.getElementById('query').value;
95-
executeSQL(query);
96-
});
97-
98-
function executeSQL(query) {
99-
if (!db) return;
100-
101-
try {
102-
const results = db.selectObjects(query);
103-
displayResults(results);
104-
} catch (err) {
105-
document.getElementById('queryResult').innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
106-
}
107-
}
108-
109-
function displayResults(results) {
110-
const resultDiv = document.getElementById('queryResult');
111-
if (results.length === 0) {
112-
resultDiv.innerHTML = '<div class="alert alert-info">No results found.</div>';
113-
return;
114-
}
115-
116-
let columns = Object.keys(results[0]);
117-
let tableHtml = '<table class="table table-striped">';
118-
tableHtml += '<thead><tr>';
119-
120-
columns.forEach((column) => {
121-
tableHtml += `<th>${column}</th>`;
122-
});
123-
tableHtml += '</tr></thead><tbody>';
124-
125-
results.forEach((row) => {
126-
tableHtml += '<tr>';
127-
columns.forEach((column) => {
128-
tableHtml += `<td>${row[column]}</td>`;
129-
});
130-
tableHtml += '</tr>';
131-
});
132-
133-
tableHtml += '</tbody></table>';
134-
resultDiv.innerHTML = tableHtml;
135-
}
136-
</script>
34+
<script type="module" src="script.js"></script>
13735
</body>
13836
</html>

‎script.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import sqlite3InitModule from 'https://cdn.jsdelivr.net/npm/@sqlite.org/sqlite-wasm@3.46.1-build4/sqlite-wasm/jswasm/sqlite3.mjs';
2+
3+
let db;
4+
5+
document.getElementById('dbFile').addEventListener('change', async (event) => {
6+
const file = event.target.files[0];
7+
if (!file) return;
8+
9+
const arrayBuffer = await file.arrayBuffer();
10+
const sqlite3 = await sqlite3InitModule({
11+
print: console.log,
12+
printErr: console.error
13+
});
14+
15+
db = new sqlite3.oo1.DB(new Uint8Array(arrayBuffer));
16+
loadTables();
17+
});
18+
19+
async function loadTables() {
20+
if (!db) return;
21+
22+
try {
23+
const tables = db.selectObjects(`
24+
SELECT name
25+
FROM sqlite_master
26+
WHERE type='table' AND name NOT LIKE 'sqlite_%';
27+
`);
28+
29+
const tableList = document.getElementById('tableList');
30+
tableList.innerHTML = '';
31+
32+
tables.forEach((table) => {
33+
const li = document.createElement('li');
34+
li.className = 'list-group-item list-group-item-action';
35+
li.textContent = table.name;
36+
li.addEventListener('click', () => browseTable(table.name));
37+
tableList.appendChild(li);
38+
});
39+
} catch (err) {
40+
alert(`Error loading tables: ${err.message}`);
41+
}
42+
}
43+
44+
async function browseTable(tableName) {
45+
if (!db) return;
46+
47+
const query = `SELECT * FROM ${tableName};`;
48+
executeSQL(query);
49+
}
50+
51+
document.getElementById('executeQuery').addEventListener('click', () => {
52+
const query = document.getElementById('query').value;
53+
executeSQL(query);
54+
});
55+
56+
function executeSQL(query) {
57+
if (!db) return;
58+
59+
try {
60+
const results = db.selectObjects(query);
61+
displayResults(results);
62+
} catch (err) {
63+
document.getElementById('queryResult').innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
64+
}
65+
}
66+
67+
function displayResults(results) {
68+
const resultDiv = document.getElementById('queryResult');
69+
if (results.length === 0) {
70+
resultDiv.innerHTML = '<div class="alert alert-info">No results found.</div>';
71+
return;
72+
}
73+
74+
let columns = Object.keys(results[0]);
75+
let tableHtml = '<table class="table table-striped">';
76+
tableHtml += '<thead><tr>';
77+
78+
columns.forEach((column) => {
79+
tableHtml += `<th>${column}</th>`;
80+
});
81+
tableHtml += '</tr></thead><tbody>';
82+
83+
results.forEach((row) => {
84+
tableHtml += '<tr>';
85+
columns.forEach((column) => {
86+
tableHtml += `<td>${row[column]}</td>`;
87+
});
88+
tableHtml += '</tr>';
89+
});
90+
91+
tableHtml += '</tbody></table>';
92+
resultDiv.innerHTML = tableHtml;
93+
}

‎style.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#tableList {
2+
max-height: 300px;
3+
overflow-y: auto;
4+
}
5+
table {
6+
margin-top: 20px;
7+
}

0 commit comments

Comments
 (0)