From 239cced8112342c775266d069999f78da00ce441 Mon Sep 17 00:00:00 2001 From: TigerKnight555 <106614210+TigerKnight555@users.noreply.github.com> Date: Mon, 11 May 2026 11:20:07 +0200 Subject: [PATCH] =?UTF-8?q?Test=20|=20Toasts=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Initiale LocalSotrage-Werte hinzugefügt --- docs/Settings.md | 15 +- .../graphType/graphType-http-test-host.html | 31 ++++ src/settings/graphType/graphTypeBtn.css | 8 +- src/settings/graphType/graphTypeBtn.html | 11 +- src/settings/graphType/graphTypeBtn.js | 39 ++++- src/settings/settings-http-test.html | 163 ++++++++++++++++++ src/settings/settings.html | 12 ++ src/settings/settings.js | 57 +++++- 8 files changed, 318 insertions(+), 18 deletions(-) create mode 100644 src/settings/graphType/graphType-http-test-host.html create mode 100644 src/settings/settings-http-test.html diff --git a/docs/Settings.md b/docs/Settings.md index 3324766..bacf44e 100644 --- a/docs/Settings.md +++ b/docs/Settings.md @@ -1,14 +1,14 @@ # Settings Feature Dokumentation ## Übersicht -Das Settings-Feature ermöglicht es Benutzern, ihre persönlichen Einstellungen sowie Diagramm-Präferenzen zu speichern und zu verwalten. Alle Einstellungen werden persistent im Browser-localStorage gespeichert. +Das Settings-Feature ermöglicht es Benutzern, ihre persönlichen Einstellungen zu konfigurieren. Alle Einstellungen werden persistent im Browser-localStorage gespeichert. --- ## 1. User Settings ### Beschreibung -Verwaltet benutzerspezifische Einstellungen wie das Geschlecht. Nach jeder Änderung werden die Daten automatisch im localStorage gespeichert und bleiben auch nach einem Neustart der Anwendung erhalten. +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. ### LocalStorage Struktur **Key:** `userSettings` @@ -16,7 +16,8 @@ Verwaltet benutzerspezifische Einstellungen wie das Geschlecht. Nach jeder Ände **Value:** ```json { - "gender": "none" | "male" | "female" + "gender": "none" | "male" | "female", + "dateFormat": "YYYY-MM-DD" / "YYYY-MM-DD HH:mm" } ``` @@ -26,7 +27,8 @@ Verwaltet benutzerspezifische Einstellungen wie das Geschlecht. Nach jeder Ände ```javascript // Standard-Einstellungen let settings = { - gender: 'none' + gender: 'none', + dateFormat: 'YYYY-MM-DD' }; ``` @@ -68,6 +70,11 @@ function updateGender(newGender) { settings.gender = newGender; saveSettingsToStorage(); } + +function updateDateFormat(newFormat) { + settings.dateFormat = newFormat; + saveSettingsToStorage(); +} ``` --- 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();