Improvements to AL interface

npbreland · Jan 16, 2024 · 81f11ab · 81f11ab
1 parent 7824ca4
commit 81f11ab
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 34 deletions.
diff --git a/apps/habitbuilder/custom.html b/apps/habitbuilder/custom.html
@@ -18,6 +18,7 @@
 
       // When the 'upload' button is clicked...
       document.getElementById("upload").addEventListener("click", function() {
+        disableFormInput();
 
         const settings = getSettingsFromForm();
         if (!settings) {

diff --git a/apps/habitbuilder/interface.html b/apps/habitbuilder/interface.html
@@ -17,9 +17,38 @@ <h2 style="margin-top: 20px">Settings</h2>
 var dataElement = document.getElementById("data");
 var csvData = "";
 
-function getData() {
+function getSettings() {
   // show loading window
-  //Util.showModal("Loading...");
+  Util.showModal("Loading...");
+  Util.readStorage('habitbuilder.settings.json', data=>{
+    console.log("Settings: "+data);
+    const settings = JSON.parse(data || "[]");
+
+    // build settings form
+    settingsHtml = buildSettingsForm(settings.questions, settings.reminderTime);
+    document.getElementById("settings").innerHTML = settingsHtml;
+
+    document.getElementById("btnSaveSettings").addEventListener("click", function() {
+
+      disableFormInput();
+
+      // Get questions
+      const settings = getSettingsFromForm();
+      if (!settings) {
+        return;
+      }
+
+      Util.writeStorage('habitbuilder.settings.json', JSON.stringify(settings), () => {
+        location.reload(); // reload so we see current data
+      });
+    });
+
+    // Didn't work in onInit, so call it here
+    getData();
+  });
+}
+
+function getData() {
   // get the data
   dataElement.innerHTML = "";
   Util.readStorageFile('habitbuilder.data.csv',data=>{
@@ -32,7 +61,7 @@ <h2 style="margin-top: 20px">Settings</h2>
       return;
     }
     // Otherwise parse the data and output it as a table
-    dataElement.innerHTML = `<table>
+    dataElement.innerHTML = `<table class="table" style="margin-bottom: 10px">
     <tr>
       <th>Question</th>
       <th>Date</th>
@@ -48,47 +77,19 @@ <h2 style="margin-top: 20px">Settings</h2>
   });
 }
 
-function getSettings() {
-  // show loading window
-  Util.showModal("Loading...");
-  Util.readStorage('habitbuilder.settings.json', data=>{
-    console.log("Settings: "+data);
-    const settings = JSON.parse(data || "[]");
-
-    // build settings form
-    settingsHtml = buildSettingsForm(settings.questions, settings.reminderTime);
-    document.getElementById("settings").innerHTML = settingsHtml;
-
-    document.getElementById("btnSaveSettings").addEventListener("click", function() {
-      // Get questions
-      const settings = getSettingsFromForm();
-      if (!settings) {
-        return;
-      }
-      //disableFormInput();
-      Util.writeStorage('habitbuilder.settings.json', JSON.stringify(settings), () => {
-        location.reload(); // reload so we see current data
-      });
-    });
-
-    getData();
-  });
-}
-
 // You can call a utility function to save the data
 document.getElementById("btnSave").addEventListener("click", function() {
-  Util.readStorageFile('habitbuilder.data.csv',data=>{
-    csvData = data.trim();
-    Util.saveCSV("habitbuilder", csvData);
-  });
+  Util.saveCSV("habitbuilder", csvData);
 });
 // Or you can also delete the file
 document.getElementById("btnDelete").addEventListener("click", function() {
   Util.showModal("Deleting...");
   Util.eraseStorageFile("habitbuilder.data.csv", function() {
     Util.hideModal();
+    getData();
   });
 });
+
 // Called when app starts
 function onInit() {
   getSettings();

diff --git a/apps/habitbuilder/settings-form.js b/apps/habitbuilder/settings-form.js
@@ -47,3 +47,9 @@ function getTimeFromMs(ms) {
   const minutes = Math.floor((ms % (60 * 60 * 1000)) / (60 * 1000));
   return `${hours}:${minutes}`;
 }
+
+function disableFormInput() {
+  document.querySelectorAll(".form-input").forEach(el => el.disabled = true);
+  document.querySelectorAll(".btn").forEach(el => el.disabled = true);
+}
+