Merge pull request #2 from nklmkln/add-data-export-option

add data export

css/list.css

@@ -29,6 +29,8 @@
 }
 
 .menuItem {
+    margin-left: var(--space-xs);
+
     cursor: pointer;
 
     transition: 0.3s ease;

index.html

@@ -22,6 +22,7 @@
     <link rel="manifest" href="manifest.webmanifest">
 
     <title>Something from Your Mind</title>
+    <meta name="application-name" content="smthmind">
     <meta name="description"
       content="A space to collect your thoughts locally on your device and revisit them for reflection">
 
@@ -111,6 +112,7 @@
       <div id="listHeader">
         <span id='clearFilter' onClick='getAndDisplayThoughts()'>ALL THOUGHTS</span>
         <div id="listFilter"></div>
+        <div class="menuItem" id="exportLink"></div>
         <div class="menuItem"></div>
       </div>
       <div id="list"></div>
@@ -127,6 +129,9 @@
     }
   </script>
   <script src="https://unpkg.com/dexie/dist/dexie.js"></script>
+  <script src="https://unpkg.com/dexie-export-import/dist/dexie-export-import.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>
+
   <script src="main.js"></script>
 
 </body>

main.js

@@ -108,3 +108,20 @@ function displayThoughts(items) {
 function deleteItem(timestamp) {
   db.thoughts.delete(timestamp).then(getAndDisplayThoughts);
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+  const exportLink = document.getElementById("exportLink");
+
+  exportLink.onclick = async () => {
+    try {
+      const blob = await db.export({ prettyJson: true, progressCallback });
+      download(blob, "my_smthmind_data.json", "application/json");
+    } catch (error) {
+      console.error("" + error);
+    }
+  };
+});
+
+function progressCallback({ totalRows, completedRows }) {
+  console.log(`Progress: ${completedRows} of ${totalRows} rows completed`);
+}