ability to load options from JSON config file

anh-chu · Feb 24, 2024 · c471015 · c471015
1 parent 4263ba4
commit c471015
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/public/options.html b/public/options.html
@@ -13,6 +13,13 @@
     <body class="pure-g" style="padding: 16px" onsubmit="return false;">
         <form class="pure-form pure-form-aligned pure-u-1">
             <fieldset>
+                <h3>JSON config</h3>
+                <div class="pure-control-group">
+                    <label>Load JSON to populate fields</label>
+                    <input type="file" id="file" />
+                </div>
+                <hr style="margin-top: 14px" />
+                <h3>Main config</h3>
                 <div class="pure-control-group">
                     <label> TCB base URL </label>
                     <input type="text" id="tcbUrl" class="pure-input-rounded" required />

diff --git a/src/options.ts b/src/options.ts
@@ -1,5 +1,29 @@
 // @ts-nocheck
 // Saves options to chrome.storage
+
+const handleFileSelect = () => {
+  const file = (<HTMLInputElement>document.getElementById("file")).files[0];
+  const reader = new FileReader();
+  reader.onload = () => {
+    const text = reader.result;
+    const config = JSON.parse(text);
+    document?.getElementById("tcbUrl")?.value = config.tcb_url;
+    document?.getElementById("actualUrl")?.value = config.actual_url;
+    document?.getElementById("actualPassword")?.value = config.actual_password;
+    document?.getElementById("actualBudgetId")?.value = config.actual_budget_id;
+    document?.getElementById("actualBudgetPassword")?.value =
+      config.actual_budget_password;
+    document?.getElementById("exchangeRateKey")?.value =
+      config.exchange_rate_api_key;
+    document?.getElementById("mappings")?.value = JSON.stringify(
+      config.mappings
+    );
+    return;
+  };
+  reader.readAsText(file);
+  return;
+};
+
 const saveOptions = () => {
   const tcbUrl = document?.getElementById("tcbUrl")?.value;
   const actualUrl = document?.getElementById("actualUrl")?.value;
@@ -10,7 +34,6 @@ const saveOptions = () => {
   )?.value;
   const exchangeRateKey = document?.getElementById("exchangeRateKey")?.value;
   const mappings = document?.getElementById("mappings")?.value;
-
   chrome.storage.sync.set(
     {
       tcbUrl,
@@ -49,17 +72,22 @@ const restoreOptions = () => {
       "mappings",
     ],
     (items) => {
-      document.getElementById("tcbUrl").value = items.tcbUrl;
-      document.getElementById("actualUrl").value = items.actualUrl;
-      document.getElementById("actualPassword").value = items.actualPassword;
-      document.getElementById("actualBudgetId").value = items.actualBudgetId;
+      document.getElementById("tcbUrl").value = items?.tcbUrl || "";
+      document.getElementById("actualUrl").value = items?.actualUrl || "";
+      document.getElementById("actualPassword").value =
+        items?.actualPassword || "";
+      document.getElementById("actualBudgetId").value =
+        items?.actualBudgetId || "";
       document.getElementById("actualBudgetPassword").value =
-        items.actualBudgetPassword;
-      document.getElementById("exchangeRateKey").value = items.exchangeRateKey;
-      document.getElementById("mappings").value = items.mappings;
+        items?.actualBudgetPassword || "";
+      document.getElementById("exchangeRateKey").value =
+        items?.exchangeRateKey || "";
+      document.getElementById("mappings").value = items?.mappings || "";
     }
   );
+  return;
 };
 
 document.addEventListener("DOMContentLoaded", restoreOptions);
+document?.getElementById("file")?.addEventListener("change", handleFileSelect);
 document?.getElementById("save")?.addEventListener("click", saveOptions);