diff --git a/docs/Settings.md b/docs/Settings.md index ba821d7..d502ef9 100644 --- a/docs/Settings.md +++ b/docs/Settings.md @@ -1,15 +1,14 @@ # Settings -## Purpose +## Übersicht +Das Settings-Feature ermöglicht es Benutzern, ihre persönlichen Einstellungen zu konfigurieren. Alle Einstellungen werden persistent im Browser-localStorage gespeichert. The Settings view stores basic user preferences in browser `localStorage`. ## What This View Provides -- A dialog that can be opened and closed -- A gender selector with values `none`, `male`, and `female` -- Persistent settings storage under `userSettings` -- A separate graph type toggle feature stored under `graphType` (`bar` or `line`) +### Beschreibung +Verwaltet benutzerspezifische Einstellungen wie das Geschlecht oder das Datumsformat. Nach jeder Änderung werden die Daten automatisch im localStorage gespeichert und bleiben auch nach einem Neustart der Anwendung erhalten. ## Data Model @@ -17,13 +16,21 @@ The Settings view stores basic user preferences in browser `localStorage`. ```json { - "gender": "none" + "gender": "none" | "male" | "female", + "dateFormat": "YYYY-MM-DD" / "YYYY-MM-DD HH:mm" } ``` ### `graphType` -Saved by the graph type toggle feature: +#### Initialisierung +```javascript +// Standard-Einstellungen +let settings = { + gender: 'none', + dateFormat: 'YYYY-MM-DD' +}; +``` - `bar` - `line` @@ -35,7 +42,17 @@ Saved by the graph type toggle feature: 3. Close the dialog 4. Re-open the app and confirm the setting is still selected -Graph type flow (separate view): +// Bei Änderung der Einstellungen +function updateGender(newGender) { + settings.gender = newGender; + saveSettingsToStorage(); +} + +function updateDateFormat(newFormat) { + settings.dateFormat = newFormat; + saveSettingsToStorage(); +} +``` 1. Open `settings/graphType/graphTypeBtn.html` 2. Click the button to toggle between bar and line diff --git a/src/settings/graphType/graphType-http-test-host.html b/src/settings/graphType/graphType-http-test-host.html new file mode 100644 index 0000000..528e048 --- /dev/null +++ b/src/settings/graphType/graphType-http-test-host.html @@ -0,0 +1,31 @@ + + + + + + GraphType Button Test Host + + + + + +

+ Schaltet zwischen Balken- und Liniendiagramm um. Die Auswahl wird gespeichert. +

+

+ +
+ +
+ + + + + diff --git a/src/settings/graphType/graphTypeBtn.css b/src/settings/graphType/graphTypeBtn.css index d6880b3..aee46ec 100644 --- a/src/settings/graphType/graphTypeBtn.css +++ b/src/settings/graphType/graphTypeBtn.css @@ -1,6 +1,6 @@ /* Button Styling */ -button { - background-color: #4caf50; +#graphTypeBtn { + background-color: #4CAF50; color: white; padding: 10px 20px; border: none; @@ -11,11 +11,11 @@ button { margin: 5px; } -button:hover { +#graphTypeBtn:hover { background-color: #45a049; } -button:active { +#graphTypeBtn:active { transform: scale(0.98); } diff --git a/src/settings/graphType/graphTypeBtn.html b/src/settings/graphType/graphTypeBtn.html index 86fa7f2..4259e7e 100644 --- a/src/settings/graphType/graphTypeBtn.html +++ b/src/settings/graphType/graphTypeBtn.html @@ -8,12 +8,21 @@

Schaltet zwischen Balken- und Liniendiagramm um. Die Auswahl wird gespeichert.

+ +
+ +
\ No newline at end of file diff --git a/src/settings/graphType/graphTypeBtn.js b/src/settings/graphType/graphTypeBtn.js index 10e840c..5cb2279 100644 --- a/src/settings/graphType/graphTypeBtn.js +++ b/src/settings/graphType/graphTypeBtn.js @@ -1,5 +1,5 @@ // Saved Settings -let graphType = "bar"; +let graphType = "line"; // Load Settings from local storage function loadGraphTypeFromStorage() { @@ -7,9 +7,19 @@ function loadGraphTypeFromStorage() { const savedGraphType = localStorage.getItem("graphType"); if (savedGraphType) { graphType = JSON.parse(savedGraphType); + } else { + // Persist default graph type immediately. + localStorage.setItem("graphType", JSON.stringify(graphType)); } } catch (e) { - console.log("Fehler beim Laden des Graphtypens aus dem LocalStorage:\n" + e) + console.log("Fehler beim Laden des Graphtypens aus dem LocalStorage:\n" + e); + showErrorToast("Fehler beim Laden des Graphtypens aus dem LocalStorage."); + + try { + localStorage.setItem("graphType", JSON.stringify(graphType)); + } catch (storageError) { + console.log("Fehler beim Setzen des Standard-Graphtypens im LocalStorage:\n" + storageError); + } } } @@ -29,13 +39,16 @@ function saveGraphType() { // Save GraphType in local storage localStorage.setItem("graphType", JSON.stringify(graphType)); } catch (e) { - console.log("Fehler beim Speichern des Graphtypens im LocalStorage:\n" + e) + console.log("Fehler beim Speichern des Graphtypens im LocalStorage:\n" + e); + showErrorToast("Fehler beim Speichern des Graphtypens im LocalStorage."); } } function updateButtonText() { const button = document.getElementById("graphTypeBtn"); const status = document.getElementById("graphTypeStatus"); + if (!button) return; + if (graphType === "bar") { button.textContent = "Balkendiagramm"; button.setAttribute("aria-label", "Graphtyp: Balkendiagramm"); @@ -57,8 +70,26 @@ function updateButtonText() { } } +/* ========================================================= + Toast +========================================================= */ + +function showErrorToast(message) { + const toastEl = document.getElementById("errorToast"); + const toastBody = document.getElementById("errorToastBody"); + + if (!toastEl || !toastBody) return; + + toastBody.textContent = message; + + const toast = new bootstrap.Toast(toastEl); + toast.show(); +} + +// Persist default as soon as this script is loaded. +loadGraphTypeFromStorage(); + // Loads Settings into Btn document.addEventListener("DOMContentLoaded", () => { - loadGraphTypeFromStorage(); updateButtonText(); }); diff --git a/src/settings/settings-http-test.html b/src/settings/settings-http-test.html new file mode 100644 index 0000000..5a57530 --- /dev/null +++ b/src/settings/settings-http-test.html @@ -0,0 +1,163 @@ + + + + + + Settings HTTP Test + + + +
+
+

HTTP-Test fuer Einstellungen

+

Diese Seite ist nur zum Testen. Das eigentliche Konstrukt von settings und graphTypeBtn bleibt unveraendert.

+
+ +
+

LocalStorage Kontrolle: userSettings

+
+ + +
+ 
(keine Daten im LocalStorage)
+
+ +
+

LocalStorage Kontrolle: graphType

+
+ + +
+ 
(keine Daten im LocalStorage)
+
+ +
+

Eingebettete Settings-Komponente

+

Oeffne im eingebetteten Bereich den Einstellungen-Button, aendere Werte und schliesse den Dialog. Danach oben auf "Storage neu laden" klicken.

+ +
+ +
+

Eingebetteter GraphType-Button

+

Klicke den Button, um zwischen Balken- und Liniendiagramm umzuschalten. Danach oben auf "graphType neu laden" klicken.

+ +
+
+ + + + diff --git a/src/settings/settings.html b/src/settings/settings.html index ca0e4e3..85cc4a4 100644 --- a/src/settings/settings.html +++ b/src/settings/settings.html @@ -1,10 +1,12 @@ Einstellungen + +

Einstellungen

@@ -30,6 +32,16 @@

Einstellungen



 + +
+ +
+ \ No newline at end of file diff --git a/src/settings/settings.js b/src/settings/settings.js index ddd4210..9b8299f 100644 --- a/src/settings/settings.js +++ b/src/settings/settings.js @@ -4,15 +4,44 @@ let settings = { dateFormat: 'YYYY-MM-DD' }; +const STORAGE_KEY = 'userSettings'; +const GRAPH_TYPE_KEY = 'graphType'; +const GRAPH_TYPE_DEFAULT = 'line'; + +function ensureGraphTypeDefaultInStorage() { + try { + const savedGraphType = localStorage.getItem(GRAPH_TYPE_KEY); + if (!savedGraphType) { + localStorage.setItem(GRAPH_TYPE_KEY, JSON.stringify(GRAPH_TYPE_DEFAULT)); + } + } catch (e) { + console.log("Fehler beim Setzen des Standard-Graphtypens im LocalStorage:\n" + e); + } +} + // Load Settings from local storage function loadSettingsFromStorage() { try { - const savedSettings = localStorage.getItem('userSettings'); + const savedSettings = localStorage.getItem(STORAGE_KEY); if (savedSettings) { - settings = JSON.parse(savedSettings); + const parsedSettings = JSON.parse(savedSettings); + settings = { + ...settings, + ...parsedSettings + }; + } else { + // Persist default settings immediately so other modules can rely on the key. + localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); } } catch (e) { - console.log("Fehler beim Laden der Einstellungen aus dem LocalStorage:\n" + e) + console.log("Fehler beim Laden der Einstellungen aus dem LocalStorage:\n" + e); + showErrorToast("Fehler beim Laden der Einstellungen aus dem LocalStorage."); + + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); + } catch (storageError) { + console.log("Fehler beim Setzen der Standard-Einstellungen im LocalStorage:\n" + storageError); + } } } @@ -33,7 +62,7 @@ function saveSettings() { settings.dateFormat = document.getElementById('dateFormat').value; // Save settings in local storage - localStorage.setItem('userSettings', JSON.stringify(settings)); + localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); console.log('Einstellungen im localStorage gespeichert:', settings); const status = document.getElementById('settingsStatus'); @@ -44,7 +73,8 @@ function saveSettings() { }, 1500); } } catch (e) { - console.log("Fehler beim Speichern der Einstellungen im LocalStorage:\n" + e) + console.log("Fehler beim Speichern der Einstellungen im LocalStorage:\n" + e); + showErrorToast("Fehler beim Speichern der Einstellungen im LocalStorage."); } } @@ -53,8 +83,25 @@ function loadSettings() { document.getElementById('dateFormat').value = settings.dateFormat; } +/* ========================================================= + Toast +========================================================= */ + +function showErrorToast(message) { + const toastEl = document.getElementById("errorToast"); + const toastBody = document.getElementById("errorToastBody"); + + if (!toastEl || !toastBody) return; + + toastBody.textContent = message; + + const toast = new bootstrap.Toast(toastEl); + toast.show(); +} + // Loads Settings into Dialog document.addEventListener('DOMContentLoaded', () => { + ensureGraphTypeDefaultInStorage(); loadSettingsFromStorage(); loadSettings();