Enable export of SQLite db. Sample export added. Upgraded from v0 to v1

Author: incubated-geek-cc

README.md

@@ -51,16 +51,22 @@
 		</tr>
 	</tbody>
 </table>
-<p>Note: Still a WIP. Other functionalities pending and in development are</p>
+<p>Note: Still a WIP. Other functionalities which are additional, pending or still in development are</p>
 
 <ul>
-	<li>Linearea wrap on/off toggle button</li>
-	<li>Export database</li>
-	<li>Replace code editor area with latest query reflected i.e. when table is selected</li>
-	<li>Render SQLite query tips and tricks in popover above editor area</li>
-	<li>A 'Reset' button</li>
-	<li>Pagination dropdown list for 'no. of rows/page'</li>
-	<li>UI/UX refinement - e.g. disable/enable selections before/after uploads</li>
+	<li>🗹 Include code editor and browse tables into a single view</li>
+	<li>🗹 Code editor wrap lines toggle button</li>
+	<li>🗹 Mobile-responsiveness</li>
+
+	<li>☐ Replace code editor area with latest query reflected i.e. when table is selected</li>
+	<li>☐ Render SQLite query tips and tricks in popover above editor area</li>
+
+	<li>🗹 Export sample database</li>
+	<li>🗹 Export updated database</li>
+
+	<li>🗹 Include 'Reset' ⭯ button (clears cache)</li>
+	<li>☐ Pagination dropdown list for 'no. of rows per page'</li>
+	<li>☐ UI/UX refinement - e.g. disable/enable selections before/after uploads</li>
 </ul>
 
 <p>— <b>Join me on 📝 <b>Medium</b> at <a href='https://medium.com/@geek-cc' target='_blank'>~ ξ(🎀˶❛◡❛) @geek-cc</a></b></p>

css/main.css

@@ -622,8 +622,16 @@ ul.nav.navbar-nav {
     border-left: 0;
     border-right: 0;
 }
-
-
+.reload-icon {
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+DQo8cGF0aCBmaWxsPScjZmZmZmZmJyBkPSJNMzIgMTJoLTEybDQuNDg1LTQuNDg1Yy0yLjI2Ny0yLjI2Ni01LjI4LTMuNTE1LTguNDg1LTMuNTE1cy02LjIxOSAxLjI0OC04LjQ4NSAzLjUxNWMtMi4yNjYgMi4yNjctMy41MTUgNS4yOC0zLjUxNSA4LjQ4NXMxLjI0OCA2LjIxOSAzLjUxNSA4LjQ4NWMyLjI2NyAyLjI2NiA1LjI4IDMuNTE1IDguNDg1IDMuNTE1czYuMjE5LTEuMjQ4IDguNDg1LTMuNTE1YzAuMTg5LTAuMTg5IDAuMzcxLTAuMzg0IDAuNTQ2LTAuNTgzbDMuMDEwIDIuNjM0Yy0yLjkzMyAzLjM0OS03LjIzOSA1LjQ2NC0xMi4wNDEgNS40NjQtOC44MzcgMC0xNi03LjE2My0xNi0xNnM3LjE2My0xNiAxNi0xNmM0LjQxOCAwIDguNDE4IDEuNzkxIDExLjMxMyA0LjY4N2w0LjY4Ny00LjY4N3YxMnoiLz4NCjwvc3ZnPg==');
+    padding: 7px 14px;
+    border: 8px solid rgba(8,152,138);
+    border-left: 0;
+    border-right: 0;
+}
+#clearCache {
+  font-size: 1rem;
+}
 
 /* [START] <details> + <summary> CSS for accordion */
 .user-select-none {

database_files/healthcare_records.db

@@ -12,7 +12,11 @@
 	    <link rel="icon" href="img/favicon-16x16.ico" type="image/x-icon" sizes="16x16">
 	    <link rel="icon" href="img/favicon-32x32.ico" type="image/x-icon" sizes="32x32">
 	    <link rel="icon" href="img/favicon-48x48.ico" type="image/x-icon" sizes="48x48">
-		<script type='text/javascript' src='js/sql-browser.min.js'></script>
+		<!-- <script type='text/javascript' src='js/sql-browser.min.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' />
@@ -42,9 +46,10 @@
 	      		<input id="upload" type="file" accept=".sqlite, .sqlite3, .db, .db3, .s3db, .sl3">
 	      		<span class="btn bg-custom-one text-white rounded-circle text-center site-header-icon upload-icon"></span><small>Upload SQLite File</small>
 	      	</label>
+	      	<button id='clearCache' type='button' class='btn btn-sm bg-custom-one text-white rounded-pill pl-2 pr-3 pt-0 pb-0 text-center border-0'><span class="btn bg-custom-one text-white rounded-circle text-center site-header-icon reload-icon"></span><small>Reload</small></button>
 	      </li>
 	    </ul>
-	  <!-- </div> application/vnd.sqlite3  -->
+	  <!-- </div> -->
 	</nav>
 
 
@@ -82,8 +87,10 @@
 				        	<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'><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'><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-bottom-0 border-custom-two rounded-0 datatable pt-2 pb-2 pr-3 pl-3'><span class='symbol mr-2'>📄</span>SQL Statements (.sql)</button>
-		            		<!-- <button id='exportDB' type='button' class='dropdown-item symbol'><strong class='text-custom-one'>‹/›</strong> <small>Export SQLite Database (.db)</small></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'><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'><span class='symbol mr-2'>📄</span>SQLite Database (.db)</button>
 				        </div>
 				    </details>
 				    <!-- <details class="accordion-item rounded-0 border-bottom">