✨ Add a button to download the displayed notes as JSON (fix #95)

ENT8R · Feb 22, 2024 · 22cbef1 · 22cbef1
1 parent e66c59a
commit 22cbef1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/app/js/modals/share.js b/app/js/modals/share.js
@@ -4,7 +4,7 @@ import Toast from '../toast.js';
 
 export default class Share extends Modal {
   /**
-    * Initializes the permalink handler
+    * Initializes the sharing modal
     *
     * @constructor
     * @param {Query} query
@@ -13,12 +13,17 @@ export default class Share extends Modal {
   constructor(query) {
     super();
 
-    // Update the permalink if the share modal is opened
+    // Update links if the share modal is opened
     document.querySelector('.modal[data-modal="share"]').addEventListener('modal-open', () => {
       document.getElementById('permalink').value = query.permalink;
+
+      document.getElementById('download').href = URL.createObjectURL(new Blob([JSON.stringify(query.result, null, 2)], {
+        type: 'application/json',
+      }));
+      document.getElementById('download').download = `NotesReview-${query.history[query.history.length - 1].time.toISOString()}.json`;
     });
 
-    // Update the permalink if a parameter changed
+    // Update links if a parameter changed
     Array.from(document.getElementsByClassName('update-permalink')).forEach(element => {
       element.addEventListener('change', () => {
         document.getElementById('permalink').value = query.permalink;
@@ -28,10 +33,15 @@ export default class Share extends Modal {
     document.getElementById('permalink').addEventListener('click', document.getElementById('permalink').select);
     document.getElementById('permalink').addEventListener('dblclick', () => this.copy());
     document.getElementById('permalink-copy').addEventListener('click', () => this.copy());
+
+    // Free memory if the share modal is closed
+    document.querySelector('.modal[data-modal="share"]').addEventListener('modal-close', () => {
+      URL.revokeObjectURL(document.getElementById('download').href);
+    });
   }
 
   /**
-    * Copy the permalink to the clipboard
+    * Copy permalink to clipboard
     *
     * @function
     * @returns {void}

diff --git a/app/js/query.js b/app/js/query.js
@@ -94,6 +94,7 @@ export default class Query {
     this.data = {};
     this.history = [];
     this.controller = null;
+    this.result = null;
 
     this.input = [{
       id: 'query',
@@ -589,6 +590,8 @@ export default class Query {
       url: this.url
     });
 
+    this.result = result;
+
     // Set the information that the query changed to false, because the request was just done moments ago
     document.body.dataset.queryChanged = false;
 

diff --git a/app/locales/en.json b/app/locales/en.json
@@ -51,7 +51,8 @@
         "refresh": "Refresh",
         "reset": "Reset",
         "center": "Center map to results",
-        "deepl": "Deepl"
+        "deepl": "Deepl",
+        "download": "Download data (.json)"
     },
     "header": {
         "share": "Share",

diff --git a/app/svg/icon/download.svg b/app/svg/icon/download.svg
diff --git a/app/templates/modals/share.hbs b/app/templates/modals/share.hbs
@@ -31,5 +31,10 @@
 </div>
 
 <div class="modal-footer">
+  <a id="download" class="btn btn-primary float-left">
+    <svg class="icon"><use xlink:href="#icon-download"></use></svg>
+    <span data-i18n="action.download">Download data (.json)</span>
+  </a>
+
   <a class="btn btn-link modal-close" data-i18n="action.close">Close</a>
 </div>