From 48222ce44c80d974f6d72ef2dd9cb1759f877b25 Mon Sep 17 00:00:00 2001
From: Malcolm Diller <malcolm@dillerm.io>
Date: Tue, 18 Oct 2022 22:13:45 -0700
Subject: [PATCH] updated to make autosaving on by default and updated some of
 the new logic

---
 ui/index.html            |  2 +-
 ui/media/js/auto-save.js |  8 ++++++--
 ui/media/js/utils.js     | 20 ++++++++------------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 4f5b7ee4..9d28ee9a 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -43,7 +43,7 @@
                         <li><input id="use_cpu" name="use_cpu" type="checkbox"> <label for="use_cpu">Use CPU instead of GPU <small>(warning: this will be *very* slow)</small></label></li>
                         <li><input id="use_full_precision" name="use_full_precision" type="checkbox"> <label for="use_full_precision">Use full precision <small>(for GPU-only. warning: this will consume more VRAM)</small></label></li>
                         <li>
-                            <input id="auto_save_settings" name="auto_save_settings" type="checkbox">
+                            <input id="auto_save_settings" name="auto_save_settings" checked type="checkbox">
                             <label for="auto_save_settings">Automatically save settings <small>(settings restored on browser load)</small></label>
                             <br/>
                             <button id="configureSettingsSaveBtn">Configure</button>
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index 1d0cf4b5..e3d85dd0 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -62,6 +62,9 @@ function getSetting(element) {
     return element.value
 }
 function setSetting(element, value) {
+    if (typeof element === "string" || element instanceof String) {
+        element = SETTINGS_TO_SAVE.find(e => e.id == element);
+    }
     if (getSetting(element) == value) {
         return // no setting necessary
     }
@@ -85,10 +88,11 @@ function saveSettings() {
 
 var CURRENTLY_LOADING_SETTINGS = false
 function loadSettings() {
-    if (!saveSettingsCheckbox.checked) {
+    var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY))
+    if (!saved_settings.values["auto_save_settings"]) {
+        setSetting("auto_save_settings", false);
         return
     }
-    var saved_settings = JSON.parse(localStorage.getItem(SETTINGS_KEY))
     if (saved_settings) {
         var values = saved_settings.values
         var should_save = saved_settings.should_save
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index 9a119e7a..a0d0c2fe 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -26,7 +26,7 @@ const COLLAPSIBLE_PANELS = []; // filled in by createCollapsibles with all the e
 // on-init call this for any panels that are marked open
 function toggleCollapsible(element) {
     var collapsibleHeader = element.querySelector(".collapsible");
-    var handle = element.firstChild;
+    var handle = element.querySelector(".collapsible-handle");
     collapsibleHeader.classList.toggle("active")
     let content = getNextSibling(collapsibleHeader, '.collapsible-content')
     if (content.style.display === "block") {
@@ -37,16 +37,16 @@ function toggleCollapsible(element) {
         handle.innerHTML = '&#x2796;' // minus
     }
     
-    if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element.parentElement)) {
+    if (COLLAPSIBLES_INITIALIZED && COLLAPSIBLE_PANELS.includes(element)) {
         saveCollapsibles();
     }
 }
 
 function saveCollapsibles() {
     var values = {};
-    console.log(COLLAPSIBLE_PANELS);
     COLLAPSIBLE_PANELS.forEach(element => {
-        values[element.id] = element.querySelector(".collapsible").className.indexOf("active") !== -1;
+        var value = element.querySelector(".collapsible").className.indexOf("active") !== -1;
+        values[element.id] = value;
     });
     localStorage.setItem(COLLAPSIBLES_KEY, JSON.stringify(values));
 }
@@ -57,10 +57,6 @@ function createCollapsibles(node) {
         node = document;
         save = true;
     }
-    // FIX: problem here is that the elements we're getting in c are the buttons, and they are the children of the things with collapsible stuff
-    // FIX: gotta get parent
-
-    // default closed.
     let collapsibles = node.querySelectorAll(".collapsible")
     collapsibles.forEach(function(c) {
         if (save && c.parentElement.id) {
@@ -87,12 +83,12 @@ function createCollapsibles(node) {
             saved = localStorage.getItem(COLLAPSIBLES_KEY);
         }
         var values = JSON.parse(saved);
-        Object.keys(values).forEach(element_id => {
-            if (values[element_id]) {
-                var element = COLLAPSIBLE_PANELS.find(e => e.id == element_id);
+        COLLAPSIBLE_PANELS.forEach(element => {
+            var value = element.querySelector(".collapsible").className.indexOf("active") !== -1;
+            if (values[element.id] != value) {
                 toggleCollapsible(element);
             }
-        });
+        })
         COLLAPSIBLES_INITIALIZED = true;
     }
 }