-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
213 lines (184 loc) · 17.3 KB
/
index.html
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang='en' class='notranslate' translate='no'>
<head>
<meta name='google' content='notranslate' />
<meta charset='UTF-8'>
<meta name='description' content='SQLite Browser Tool' />
<meta name="author" content="Charmaine Chui" />
<meta name='keywords' content='SQL,SQLite,Browser Plugin,Database,Offline'>
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
<meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1' />
<meta http-equiv='Content-Language' content='en' />
<meta name='msapplication-TileColor' content='#ffffff' />
<meta name='theme-color' content='#ffffff' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='HandheldFriendly' content='True' />
<meta name='MobileOptimized' content='320' />
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon-152.png">
<link rel="icon" sizes="196x196" href="img/favicon-196.png">
<link rel="icon" sizes="16x16" href="img/favicon-16x16.ico" type="image/x-icon">
<link rel="icon" sizes="32x32" href="img/favicon-32x32.ico" type="image/x-icon">
<link rel="icon" sizes="48x48" href="img/favicon-48x48.ico" type="image/x-icon">
<!-- <script type='text/javascript' src='js/sql-browser.min.js'></script> -->
<script type='text/javascript' src='js/sql_wasm_dataURL.js'></script>
<script type='text/javascript' src='js/sql-wasm.min.js'></script>
<!-- <script type='text/javascript' src='js/sql-asm.min.js'></script> -->
<!-- <script type='text/javascript' src='js/sql-asm-memory-growth.min.js'></script> -->
<link rel='stylesheet' type='text/css' href='css/bootstrap-4.5.2.min.css' />
<link rel='stylesheet' type='text/css' href='css/offcanvas.css' />
<link rel='stylesheet' type='text/css' href='css/main.css' />
<title>SQLite Browser Tool ⸬ A Lightweight Client-Side JavaScript For Offline Use</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<nav class="navbar navbar-expand-sm navbar-light fixed-top">
<a class="navbar-brand p-0"><img id='site-logo' src='img/site-logo.png' /></a>
<!-- <button class="navbar-toggler symbol text-center border-custom-one bg-light text-custom-one pt-1 pb-1 pl-2 pr-2" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">☰</button> -->
<!-- <div id="collapsibleNavbar" class="collapse navbar-collapse"> -->
<!-- <ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li> <span class="btn bg-custom-one text-white rounded-circle text-center site-header-icon reload-icon"></span>
</ul> -->
<ul class="nav navbar-nav ml-auto nowrap">
<li class="nav-item">
<button id='infoModalBtn' type="button" class="site-header-btn btn btn-sm bg-custom-one text-white rounded-pill pl-2 pr-3 pt-1 pb-1 text-center border-0" data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to view information modal."><span class="text-white text-center font-weight-400 mr-2 pl-1 symbol">𝖎</span>About</button>
</li>
<li class="nav-item">
<button id="clearCache" type="button" class="site-header-btn btn btn-sm bg-custom-one text-white rounded-pill pl-2 pr-2 pt-1 pb-1 text-center border-0" data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to reload page and clear local storage.</p>"><span class="text-white text-center font-weight-400 mr-1 symbol">🧹</span>Clear Cache</button>
</li>
</ul>
<!-- </div> -->
</nav>
<div id="siteModal" class="custom-scrollbar modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"><div class="modal-content"></div></div>
</div>
<div id='dropFileZone' class="card rounded-0 p-4 ml-2 mr-2 mt-1 mb-1">
<!-- <ul id="initTabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="uploadDB-tab" href="#uploadDB" data-toggle="tab" data-height="true" aria-controls="uploadDB" aria-selected="true" role="tab"><span class="icon icon-database p-2 mr-1 ml-1"></span><span class='symbol'>ᴜᴘʟᴏᴀᴅ ᴅʙ</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="importData-tab" href="#importData" data-toggle="tab" data-height="true" aria-controls="importData" aria-selected="false" role="tab"><span class='symbol'>ɪᴍᴘᴏʀᴛ ᴅᴀᴛᴀ</span></a>
</li>
</ul> -->
<div class='rounded-0 pl-0 pr-0 pt-0 pb-2 border-0 font-weight-bold text-left'>Upload SQLite File:</div>
<!-- <div id='uploadDB' class="tab-content h-100"> role='tabpanel' tab-pane fade active show aria-labelledby='uploadDB-tab' -->
<div class='card-body rounded-0 p-2 border-custom-one text-center h-100' >
<strong class='text-custom-one'>Drag & Drop</strong>
<hr class="invisible-divider mb-1 mt-1">
<span class='text-custom-one'>…or</span>
<label for="upload" class="site-header-btn btn btn-sm bg-custom-one text-white rounded-pill mb-1 mt-1 pl-2 pr-2 pt-1 pb-1 text-center border-0" data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select SQLite file (.sqlite, .sqlite3, .db, .db3, .s3db, .sl3, .mbtiles) from local disk"><span class="text-white text-center font-weight-400 mr-2 pl-1 symbol">
<input id="upload" type="file" accept=".sqlite, .sqlite3, .db, .db3, .s3db, .sl3, .mbtiles">
<span class="text-white text-center font-weight-400 mr-1 symbol">📂</span>Choose File
</label>
</div>
<!-- <div id="importData" role="tabpanel" class="tab-pane fade" aria-labelledby="importData-tab">...</div> -->
<!-- </div> -->
</div>
<div id="main-wrapper" class='w-100' hidden>
<aside class="left-sidebar">
<button id="toggleSidebarBtn" type="button" class='btn btn-sm btn-outline-custom-two symbol text-center font-weight-bold ml-2' value='false'>☰</button>
<div id='databaseTables' class="scroll-sidebar ps-container ps-active-y pt-5 pb-1 custom-scrollbar border-bottom h-100">
<hr class="invisible-divider mb-1 mt-1">
<span class="icon icon-database p-2 mr-2 ml-3"></span><span class='text-custom-one font-weight-700'>SQLite Database</span>
<hr class='invisible-divider mb-1 mt-0'>
<div class='small row no-gutters pl-2'><div class='col-4 text-left pl-2 font-weight-600'>File Name:</div><div id='fileNameDisplay' class='col-8'>---</div></div>
<hr class='invisible-divider mb-1 mt-1'>
<div class='small row no-gutters pl-2'><div class='col-4 text-left pl-2 font-weight-600'>File Size:</div><div id='fileSizeDisplay' class='col-8'>---</div></div>
<hr class='invisible-divider mb-1 mt-1'>
<div class='accordion-wrapper small border-top border-bottom'>
<details class="accordion-item rounded-0 border-bottom border-top">
<summary class="accordion-button border-bottom pt-2 pb-2 pr-3 pl-3">
<div class="w-100 accordion-header user-select-none font-weight-600"><span class='mr-2 pr-1 pl-2 font-weight-bolder symbol d-inline-block'>𝄜</span>Tables<span id="noOfTablesDisplay" class="ml-2 mr-1 badge bg-custom-one text-white symbol font-weight-lighter">0</span></div>
</summary>
<div id='dbTableDetails' class="accordion-body border-bottom"></div>
</details>
<details class="accordion-item rounded-0 border-bottom">
<summary class="accordion-button border-bottom pt-2 pb-2 pr-3 pl-3">
<div class="w-100 accordion-header user-select-none font-weight-600"><span class='mr-2 pr-1 pl-2 font-weight-bolder symbol d-inline-block'>📥</span>File Downloads</div>
</summary>
<div class="accordion-body border-bottom">
<button id='exportSampleDB' type='button' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to download a sample database for upload and testing.</p>"><span class='symbol mr-2'>📄</span>Sample Database (.db)</button>
<button id='exportQueryAsJSON' type='button' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to export the full queried dataset in JSON format.</p>"><span class='symbol mr-2'>📄</span>Data ResultSet (.json)</button>
<button id='exportEditorQuery' type='button' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to output all content in the code editor into an SQL script.</p>"><span class='symbol mr-2'>📄</span>SQL Statements (.sql)</button>
<button id='exportDB' type='button' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-bottom-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to export the latest version of the database including all changes which were made (if any).</p>"><span class='symbol mr-2'>📄</span>SQLite Database (.db)</button>
</div>
</details>
<details class="accordion-item rounded-0 border-bottom">
<summary class="accordion-button border-bottom pt-2 pb-2 pr-3 pl-3">
<div class="w-100 accordion-header user-select-none font-weight-600"><span class='mr-2 pr-1 pl-2 font-weight-bolder symbol d-inline-block'>✎</span>Related Posts</div>
</summary>
<div class="accordion-body border-bottom">
<!-- Nov 4, 2021 -->
<a href='https://medium.com/geekculture/5-key-mysql-operations-which-sqlite-commands-can-emulate-b7a1a202856d' target='_blank' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>5 Key MySQL Operations which SQLite Commands can Emulate</p>"><span class='symbol mr-2'>📄</span>5 Key MySQL Operations which SQLite Commands can Emulate</a>
<!-- Dec 15, 2021 -->
<a href='https://medium.com/weekly-webtips/implement-sqlite-on-web-with-javascript-both-node-browser-with-sql-js-14448fd7a3cb' target='_blank' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Implement SQLite on web with JavaScript — both Node & Browser with sql.js plugin</p>"><span class='symbol mr-2'>📄</span>Implement SQLite on web with JavaScript — both Node & Browser with sql.js plugin</a>
<!-- Mar 11, 2022 -->
<a href='https://medium.com/weekly-webtips/read-export-sqlite-data-in-a-javascript-enabled-browser-locally-b655deda879d' target='_blank' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-bottom-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Read & Export SQLite Data in a JavaScript-enabled Browser Locally</p>"><span class='symbol mr-2'>📄</span>Read & Export SQLite Data in a JavaScript-enabled Browser Locally</a>
<!-- Oct 19, 2023 -->
<a href='https://geek-cc.medium.com/how-to-load-run-local-wasm-modules-without-a-server-using-client-side-javascript-692f7b89da7d' target='_blank' class='btn btn-sm btn-link border-left-0 border-right-0 border-top-0 border-bottom-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3' data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>How To Load & Run Local WASM Modules Without A Server Using Client-Side JavaScript</p>"><span class='symbol mr-2'>📄</span>How To Load & Run Local WASM Modules Without A Server Using Client-Side JavaScript</a>
</div>
</details>
<!-- <details class="accordion-item rounded-0 border-bottom">
<summary class="accordion-button border-bottom pt-2 pb-2 pr-3 pl-3">
<div class="w-100 accordion-header user-select-none font-weight-600">Accordion Title</div>
</summary>
<div class="accordion-body border-bottom">
</div>
</details>
-->
<hr class="border mb-1 mt-0">
<hr class="invisible-divider mb-1 mt-1">
<p class='text-center nowrap mt-1 mb-1 ml-1'><span class='symbol'>© 𝖢𝗈𝗉𝗒𝗋𝗂𝗀𝗁𝗍</span> <span id='copyrightYearDisplay' class='copyrightNote'></span> <span class='symbol pl-0 pr-1 ml-1 mr-1 text-center'> ▪ <a href='https://github.com/incubated-geek-cc/' target='_blank'><span data-profile='github' class='attribution-icon'></span></a> ▪ <a href='https://medium.com/@geek-cc' target='_blank'><span data-profile='medium' class='attribution-icon'></span></a> ▪ <a href='https://www.linkedin.com/in/charmaine-chui-15133282/' target='_blank'><span data-profile='linkedin' class='attribution-icon'></span></a> ▪ <a href='https://twitter.com/IncubatedGeekCC' target='_blank'><span data-profile='twitter' class='attribution-icon'></span></a></span></p>
<hr class="invisible-divider mb-1 mt-1">
<p class='text-left nowrap mt-1 mb-1 ml-1'><a href='https://www.buymeacoffee.com/geekcc' target='_blank'><img src='img/buy_me_a_taco.png' height='26' /></a> <a href="https://medium.com/@geek-cc" target="_blank" class='small'><span class="symbol">~ξ(</span><span class="emoji">🎀</span><span class="symbol">˶❛◡❛) ᵀᴴᴱ ᴿᴵᴮᴮᴼᴺ ᴳᴵᴿᴸ</span></a></p>
<hr class="invisible-divider mb-1 mt-1">
<hr class="border mb-0 mt-1">
</div>
</aside>
<div class="page-wrapper mt-0 mb-0 mr-1 pr-0 pl-1 pt-0 pb-0">
<!-- card -->
<div class="card rounded-0 p-0 m-0 h-100">
<!-- card-body -->
<div class='card-body rounded-0 p-0 h-100'>
<p id='errorDisplay' class='m-1 p-0 small text-danger'></p>
<div id='filters' class="card-subtitle pl-1 pr-1 custom-scrollbar nowrap">
<!-- <button id='hint-btn' type='button' class="btn btn-sm bg-custom-one text-white rounded-pill pl-2 pr-2 pt-1 pb-1 mb-1 text-center border-0" data-toggle="popover" data-title="💡 Tips & Tricks" data-dismissible="true" data-placement="right" data-content='<div class="row">
<div class="col-sm-12" style="text-align:left">
<p><span class="symbol">❶</span> Original work by Kripken <cite title="sql.js/sql.js: A javascript library to run SQLite on the web."><a href="https://github.com/sql-js/sql.js" target="_blank">sql.js</a></cite> which is <a href="LICENSE.txt" target="_blank">MIT licensed</a>.</p>
<p><span class="symbol">❷</span> SQLite is a <abbr title="Relational Database Management System">RDBMS</abbr> with no dependencies and able to operate offline in-browser without a database engine.</p>
<p><span class="symbol">❸</span> This application requires no server-side processing i.e. <span class="emoji">🚫</span> No server setup required.</p>
<p><span class="symbol">❹</span> Mobile-responsive and works on JavaScript-enabled mobile web browsers.</p>
</div>
</div>'><small class='symbol'>‹/› SQL Editor</small></button> -->
<!-- <span class='symbol text-custom-one mr-1 ml-1'>❘</span> -->
<span class='nowrap'><small id='displayedRecordsRange'></small></span>
<ul id='tableQueryPagination' class="pagination pagination-sm ml-1 mr-1 mb-0 mt-0"></ul>
<button id="runQueryBtn" type="button" class="site-header-btn btn btn-sm bg-custom-one text-white rounded-pill pl-2 pr-3 pt-1 pb-1 text-center border-0 symbol" data-toggle="tooltip" data-original-title="<p class='mb-0 small text-left'>Select to run query in the code editor</p>">▶ Run</button>
</div>
<p class="mb-0 mt-0 ml-1 mr-1"><textarea id='lineCounter' wrap='off' readonly rows='5' class='border-0'>1.</textarea><textarea id='codeEditor' class='custom-scrollbar' wrap='off' rows='5'></textarea></p>
<div id='tableQueryRecords' class="table-responsive table-responsive-sm border custom-scrollbar m-1 p-0"></div>
</div>
<!-- // card-body -->
</div>
<!-- // card -->
</div>
<!-- // page-wrapper -->
</div>
<script src='js/polyfill.js'></script>
<script src='js/ie10-viewport-bug-workaround.js'></script>
<script src='js/bootstrap-native-v4.js'></script>
<script src='js/custom.js'></script>
</body>
</html>