Save selections to local storage (FujiwaraChoki#230)

* saving selections

* Update index.html

* Update index.html

* Update index.html

* Update index.html

* Update index.html

* updated this PR re: upstream changes

---------

Co-authored-by: Eric Dahl <edahl+UND@nd.edu>

Frontend/app.js

@@ -133,7 +133,36 @@ document.addEventListener("DOMContentLoaded", (event) => {
   }
 });
 
-// When the voice select field changes, store the new value in localStorage.
-document.getElementById("voice").addEventListener("change", (event) => {
-  localStorage.setItem("voiceValue", event.target.value);
+// Save the data to localStorage when the user changes the value
+toggles = ["youtubeUploadToggle", "useMusicToggle", "reuseChoicesToggle"];
+fields = ["aiModel", "voice", "paragraphNumber", "videoSubject", "zipUrl", "customPrompt", "threads", "subtitlesPosition", "subtitlesColor"];
+
+document.addEventListener("DOMContentLoaded", () => {
+  toggles.forEach((id) => {
+    const toggle = document.getElementById(id);
+    const storedValue = localStorage.getItem(`${id}Value`);
+    const storedReuseValue = localStorage.getItem("reuseChoicesToggleValue");
+
+    if (toggle && storedValue !== null && storedReuseValue === "true") {
+        toggle.checked = storedValue === "true";
+    }
+    // Attach change listener to update localStorage
+    toggle.addEventListener("change", (event) => {
+        localStorage.setItem(`${id}Value`, event.target.checked);
+    });
+  });
+
+  fields.forEach((id) => {
+    const select = document.getElementById(id);
+    const storedValue = localStorage.getItem(`${id}Value`);
+    const storedReuseValue = localStorage.getItem("reuseChoicesToggleValue");
+
+    if (storedValue && storedReuseValue === "true") {
+      select.value = storedValue;
+    }
+    // Attach change listener to update localStorage
+    select.addEventListener("change", (event) => {
+      localStorage.setItem(`${id}Value`, event.target.value);
+    });
+  });
 });

Frontend/index.html

@@ -190,6 +190,18 @@ <h1 class="text-4xl text-center mb-4">MoneyPrinter</h1>
             />
             Use Music
           </label>
+          <label
+            for="reuseChoicesToggle"
+            class="flex items-center text-blue-600"
+          >
+            <input
+              type="checkbox"
+              name="reuseChoicesToggle"
+              id="reuseChoicesToggle"
+              class="mr-2"
+            />
+            Reuse Choices?
+          </label>
         </div>
         <button
           id="generateButton"
@@ -203,6 +215,7 @@ <h1 class="text-4xl text-center mb-4">MoneyPrinter</h1>
         >
           Cancel
         </button>
+
       </div>
     </div>