add ability to change name

pastagang · Jan 1, 2025 · e01ffff · e01ffff
1 parent ee1b4d4
commit e01ffff
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 49 deletions.
diff --git a/index.html b/index.html
@@ -103,8 +103,14 @@ <h1 style="margin-bottom: 0px">nudelsalat</h1>
     <div class="dialog-container">
       <dialog id="settings-dialog">
         <h1>Settings</h1>
-        <p>This is where settings can go!</p>
         <p>
+          <label for="settings-username">
+            <span>Username:</span>
+            <input type="text" id="settings-username" />
+          </label>
+          <br />
+        </p>
+        <!-- <p>
           <label for="settings-sample-checkbox">
             <input type="checkbox" id="settings-sample-checkbox" />
             Sample toggle
@@ -121,7 +127,6 @@ <h1>Settings</h1>
         <p></p>
 
         <h3>Sample option input</h3>
-        <!-- radio buttons -->
         <p>
           <label>
             <input type="radio" name="settings-sample-radio" value="1" />
@@ -139,7 +144,7 @@ <h3>Sample option input</h3>
             <input type="radio" name="settings-sample-radio" value="3" />
             Option 3
           </label>
-        </p>
+        </p> -->
 
         <br />
         <p><button id="settings-reset-button">Reset to defaults</button></p>

diff --git a/src/settings.js b/src/settings.js
@@ -1,18 +1,17 @@
 import { nudelConfirm } from "./confirm.js";
 
+//=======//
+// ADMIN //
+//=======//
+// Scroll down to configure settings ...
+
 const settingsButton = document.querySelector("#settings-button");
 const settingsDialog = document.querySelector("#settings-dialog");
 
 settingsButton.addEventListener("click", () => {
   settingsDialog.showModal();
 });
 
-const defaultSettings = {
-  sampleToggle: false,
-  sampleText: "hello world",
-  sampleOption: 2,
-};
-
 const LOCAL_STORAGE_KEY = "nudelsalat-settings-v0";
 
 function getSettingsFromLocalStorage() {
@@ -38,7 +37,11 @@ function saveSettingsToLocalStorage(settings) {
 
 function setSettings(settings) {
   saveSettingsToLocalStorage(settings);
-  applySettingsToDom(settings);
+  applySettingsToNudel(settings);
+}
+
+export function getSettings() {
+  return getSettingsFromLocalStorage();
 }
 
 const resetButton = document.querySelector("#settings-reset-button");
@@ -49,56 +52,37 @@ resetButton.addEventListener("click", async () => {
   }
 });
 
-const sampleTextInput = document.querySelector("#settings-sample-text");
-const sampleToggleInput = document.querySelector("#settings-sample-checkbox");
-const sampleOptionInputs = document.querySelectorAll(
-  'input[name="settings-sample-radio"]'
-);
+//========================//
+// SETTINGS CONFIGURATION //
+//========================//
+// Here's where you can make changes to the settings.
+
+const defaultSettings = {
+  username: "",
+};
+
+const usernameInput = document.querySelector("#settings-username");
 
 function inferSettingsFromDom() {
-  const chosenRadio = document.querySelector(
-    'input[name="settings-sample-radio"]:checked'
-  );
   const inferredSettings = {
-    sampleText: sampleTextInput?.value,
-    sampleToggle: sampleToggleInput?.checked,
+    username: usernameInput.value || defaultSettings.username,
   };
-  if (chosenRadio) {
-    inferredSettings.sampleOption = chosenRadio.value;
-  }
-  const settings = { ...defaultSettings, ...inferredSettings };
-  return settings;
+  return inferredSettings;
 }
 
-function applySettingsToDom(settings) {
-  if (sampleTextInput) {
-    sampleTextInput.value = settings.sampleText;
-  }
-  if (sampleToggleInput) {
-    sampleToggleInput.checked = settings.sampleToggle;
+function applySettingsToNudel(settings) {
+  if (usernameInput) {
+    usernameInput.value = settings.username;
   }
-  sampleOptionInputs.forEach((input) => {
-    input.checked = input.value == settings.sampleOption;
-  });
-}
 
-if (sampleTextInput) {
-  sampleTextInput.addEventListener("input", () => {
-    saveSettingsToLocalStorage(inferSettingsFromDom());
-  });
+  session.user = settings.username;
 }
 
-if (sampleToggleInput) {
-  sampleToggleInput.addEventListener("change", () => {
-    saveSettingsToLocalStorage(inferSettingsFromDom());
+if (usernameInput) {
+  usernameInput.addEventListener("input", () => {
+    setSettings(inferSettingsFromDom());
   });
 }
 
-sampleOptionInputs.forEach((input) => {
-  input.addEventListener("change", () => {
-    saveSettingsToLocalStorage(inferSettingsFromDom());
-  });
-});
-
 const loadedSettings = getSettingsFromLocalStorage();
-applySettingsToDom(loadedSettings);
+applySettingsToNudel(loadedSettings);