Added export and import settings #58

3 files changed, 34 insertions, 15 deletions

diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 9cb247ef..7335d254 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -120,17 +120,23 @@
         <option value="dark-theme">Dark</option>
       </select>
     </div>
+
+
+
     <div class="buttons buttons-inline">
       <a class="button button-inline" id="update-instances">
-        <span>Update Instances</span>
+        Update Instances
       </a>
-    </div>
-
-    <!-- <div class="buttons buttons-inline">
+      &nbsp; &nbsp;
+      <label for="import-settings" class="button button-inline">
+        Import Settings
+        <input type="file" class="button button-inline" style="display:none;" id="import-settings">
+      </label>
+      &nbsp; &nbsp;
       <a class="button button-inline" id="export-settings">
-        <span>Export Settings</span>
+        Export Settings
       </a>
-    </div> -->
+    </div>
 
     <div class="some-block option-block">
       <h4>Exceptions</h4>
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 0a0d41c3..302f44d5 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -20,21 +20,34 @@ themeElement.addEventListener("change", (event) => {
   browser.storage.local.set({ theme: value });
 });
 
-document.querySelector("#update-instances").addEventListener("click", () => {
-  document.querySelector("#update-instances").innerHTML = '...';
+document.getElementById("update-instances").addEventListener("click", () => {
+  document.getElementById("update-instances").innerHTML = '...';
   if (commonHelper.updateInstances()) {
-    document.querySelector("#update-instances").innerHTML = 'Done!';
+    document.getElementById("update-instances").innerHTML = 'Done!';
     new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
-      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+      () => document.getElementById("update-instances").innerHTML = 'Update Instances'
     )
   }
   else
-    document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
+    document.getElementById("update-instances").innerHTML = 'Failed Miserabely';
 });
 
-// document.querySelector("#export-settings").addEventListener("click", () => {
-//   browser.storage.local.get(null, result => console.log(result))
-// });
+let exportSettingsElement = document.getElementById("export-settings");
+browser.storage.local.get(null, result => {
+  let resultString = JSON.stringify(result, null, '  ');
+  exportSettingsElement.href = 'data:application/json;base64,' + btoa(resultString);
+  exportSettingsElement.download = 'libredirect-settings.json';
+});
+
+let importSettingsElement = document.getElementById("import-settings");
+importSettingsElement.addEventListener("change",
+  _ => {
+    let file = importSettingsElement.files[0];
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = () => browser.storage.local.set({ ...JSON.parse(reader.result) })
+    reader.onerror = error => reject(error);
+  })
 
 let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
 let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index e2aaf5ae..3fd398e0 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -77,7 +77,7 @@ themeElement.addEventListener("change",
 );
 
 let volumeElement = document.getElementById("invidious-volume");
-let volumeValueElement = document.querySelector("#volume-value");
+let volumeValueElement = document.getElementById("volume-value");
 volumeElement.addEventListener("input",
     () => {
         youtubeHelper.setVolume(volumeElement.value);