Add a export/impot button for B20 settings

Closes kakaroto#931

gulpfile.js

@@ -5,6 +5,7 @@ const rename = require("gulp-rename");
 
 const ROLL_RENDERER_DEPS = [
     "src/common/utils.js",
+    "libs/FileSaver.min.js",
     "src/common/settings.js",
     "src/common/constants.js",
     "src/discord/discord.js",
@@ -26,25 +27,29 @@ const SRC_FILES = {
     background: [
         "src/common/constants.js",
         "src/common/utils.js",
+        "libs/FileSaver.min.js",
         "src/common/settings.js",
         "src/extension/background.js"
     ],
     options: [
         "src/common/utils.js",
+        "libs/FileSaver.min.js",
         "src/common/settings.js",
         "src/extension/options.js"
     ],
     default_popup: [
         "src/common/sandbox-header.js",
         "src/common/constants.js",
         "src/common/utils.js",
+        "libs/FileSaver.min.js",
         "src/common/settings.js",
         "src/extension/default_popup.js",
         "src/common/sandbox-footer.js"
     ],
     popup: [
         "src/common/constants.js",
         "src/common/utils.js",
+        "libs/FileSaver.min.js",
         "src/common/settings.js",
         "src/extension/popup.js"
     ],
@@ -64,6 +69,7 @@ const SRC_FILES = {
     ],
     fvtt: [
         "src/common/utils.js",
+        "libs/FileSaver.min.js",
         "src/common/settings.js",
         "src/fvtt/content-script.js"
     ],

src/common/settings.js

@@ -415,6 +415,21 @@ const options_list = {
         "advanced": true
     },
 
+    "backup-settings": {
+        "title": "Backup Beyond20 settings",
+        "description": "Export your Beyond20 settings to a file for backup",
+        "type": "special",
+        "advanced": true,
+        "default": null
+    },
+    "restore-settings": {
+        "title": "Restore Beyond20 settings",
+        "description": "Import your Beyond20 settings from a previously exported backup file",
+        "type": "special",
+        "advanced": true,
+        "default": null
+    },
+
     "donate": {
         "short": "Buy rations (1 day) to feed my familiar",
         "title": "Become a patron of the art of software development!",
@@ -785,6 +800,12 @@ function storageRemove(names, cb = null) {
             cb(names);
     });
 }
+function storageGetEverything(cb) {
+    getStorage().get(null, cb);
+}
+function storageSetEverything(value, cb) {
+    getStorage().set(value, cb);
+}
 
 function getDefaultSettings(_list = options_list) {
     const settings = {}
@@ -1773,6 +1794,90 @@ function getCustomDomainsSetting(name) {
     return cleaned;
 }
 
+
+function createBackupRestoreSetting(name, short) {
+    const backup = (name === "backup-settings");
+    const opt = options_list[name];
+    const description_p = opt.description.split("\n").map(desc => E.p({}, desc));
+    const label = backup ? "Export" : "Import";
+    // If import, add a hidden file input
+    if (!backup) {
+        description_p.push(E.input({
+            style: "display: none;",
+            type: "file",
+            accept: ".json",
+        }))
+    }
+    const setting = E.li({
+        id: `beyond20-option-${name}`,
+        class: "list-group-item beyond20-option beyond20-option-text" 
+    },
+        E.label({ class: "list-content", for: name },
+            E.h4({}, opt.title),
+            ...description_p,
+            E.div({class: "save button-group"},
+                E.button({ class: "beyond20-option-input btn", type: "button"}, label),
+            )
+        )
+    );
+    const button = $(setting).find("button");
+    const input = $(setting).find("input");
+    button.click(ev => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        if (backup) {
+            // Export
+            storageGetEverything(allSettings => {
+                allSettings.beyond20 = {format: 1};
+                const blob = new Blob([JSON.stringify(allSettings)], {type: "application/json"});
+                saveAs(blob, "Beyond20.json");
+            });
+        } else {
+            // Import
+            input.click();
+        }
+    });
+    if (!backup) {
+        input.on('change', (ev) => {
+            if (input[0].files.length === 0) return;
+            const file = input[0].files[0];
+            const fr = new FileReader();
+            fr.addEventListener("load", () => {
+                try {
+                    const allSettings = JSON.parse(fr.result);
+                    if (!allSettings.beyond20 || allSettings.beyond20.format !== 1) {
+                        throw new Error("File doesn't contain Beyond20 settings");
+                    }
+                    delete allSettings.beyond20;
+                    storageSetEverything(allSettings, () => {
+                        for (const key in allSettings) {
+                            if (key === "settings") {
+                                chrome.runtime.sendMessage({ "action": "settings", "type": "general", "settings": allSettings[key] });
+                            } else if (key.startsWith("character-")) {
+                                const id = key.slice("character-".length);
+                                chrome.runtime.sendMessage({ "action": "settings", "type": "character", "id": id, "settings": allSettings[key] })
+                            }
+                        }
+                        alertify.success("Beyond20 settings loaded successfully");
+                    });
+                } catch (err) {
+                    alertify.error(`Unable to load selected file : ${err.message}`);
+                }
+            }, false);
+            fr.addEventListener("error", (ev) => {
+                alertify.error("Unable to load selected file");
+            }, false);
+            fr.readAsText(file);
+        })
+    }
+
+    return setting;
+}
+function setBackupRestoreSetting(name, settings) {
+}
+function getBackupRestoreSetting(name) {
+}
+
 options_list["vtt-tab"]["createHTMLElement"] = createVTTTabSetting;
 options_list["vtt-tab"]["set"] = setVTTTabSetting;
 options_list["vtt-tab"]["get"] = getVTTTabSetting;
@@ -1787,4 +1892,12 @@ options_list["custom-domains"]["set"] = setCustomDomainsSetting;
 options_list["custom-domains"]["get"] = getCustomDomainsSetting;
 character_settings["discord-target"]["createHTMLElement"] = createDiscordTargetSetting;
 character_settings["discord-target"]["set"] = setDiscordTargetSetting;
-character_settings["discord-target"]["get"] = getDiscordTargetSetting;
+character_settings["discord-target"]["get"] = getDiscordTargetSetting;
+
+options_list["backup-settings"]["createHTMLElement"] = createBackupRestoreSetting;
+options_list["backup-settings"]["set"] = setBackupRestoreSetting;
+options_list["backup-settings"]["get"] = getBackupRestoreSetting;
+
+options_list["restore-settings"]["createHTMLElement"] = createBackupRestoreSetting;
+options_list["restore-settings"]["set"] = setBackupRestoreSetting;
+options_list["restore-settings"]["get"] = getBackupRestoreSetting;