Skip to content

Commit 572b58c

Browse files
kameronmazudakameronmazuda
authored
Merge pull request #66 from TigerKnight555/develop
index zu App | Fehlermeldungen | Datumsformat
2 parents 463ed7c + 999fd53 commit 572b58c

7 files changed

Lines changed: 109 additions & 23 deletions

File tree

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,4 @@
4242
</div>
4343
</body>
4444

45-
</html>
45+
</html>

‎src/settings/graphType/graphTypeBtn.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,16 @@ body {
2525
padding: 20px;
2626
background-color: #f5f5f5;
2727
}
28+
29+
/* Screen reader only text */
30+
.sr-only {
31+
position: absolute;
32+
width: 1px;
33+
height: 1px;
34+
padding: 0;
35+
margin: -1px;
36+
overflow: hidden;
37+
clip: rect(0, 0, 0, 0);
38+
white-space: nowrap;
39+
border: 0;
40+
}

‎src/settings/graphType/graphTypeBtn.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
</head>
88

99
<body>
10-
<button id="graphTypeBtn" onclick="toggleGraphType()">Balkendiagramm</button>
10+
<button id="graphTypeBtn" onclick="toggleGraphType()" aria-describedby="graphTypeHelp graphTypeStatus">
11+
Balkendiagramm
12+
</button>
13+
<p id="graphTypeHelp" class="sr-only">
14+
Schaltet zwischen Balken- und Liniendiagramm um. Die Auswahl wird gespeichert.
15+
</p>
16+
<p id="graphTypeStatus" class="sr-only" role="status" aria-live="polite"></p>
1117
</body>
1218

1319
</html>

‎src/settings/graphType/graphTypeBtn.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ let graphType = "bar";
33

44
// Load Settings from local storage
55
function loadGraphTypeFromStorage() {
6-
const savedGraphType = localStorage.getItem("graphType");
7-
if (savedGraphType) {
8-
graphType = JSON.parse(savedGraphType);
6+
try {
7+
const savedGraphType = localStorage.getItem("graphType");
8+
if (savedGraphType) {
9+
graphType = JSON.parse(savedGraphType);
10+
}
11+
} catch (e) {
12+
console.log("Fehler beim Laden des Graphtypens aus dem LocalStorage:\n" + e)
913
}
1014
}
1115

@@ -21,17 +25,35 @@ function toggleGraphType() {
2125
}
2226

2327
function saveGraphType() {
24-
// Save GraphType in local storage
25-
localStorage.setItem("graphType", JSON.stringify(graphType));
26-
console.log("Graph-Typ im localStorage gespeichert:", graphType);
28+
try {
29+
// Save GraphType in local storage
30+
localStorage.setItem("graphType", JSON.stringify(graphType));
31+
} catch (e) {
32+
console.log("Fehler beim Speichern des Graphtypens im LocalStorage:\n" + e)
33+
}
2734
}
2835

2936
function updateButtonText() {
3037
const button = document.getElementById("graphTypeBtn");
38+
const status = document.getElementById("graphTypeStatus");
3139
if (graphType === "bar") {
3240
button.textContent = "Balkendiagramm";
41+
button.setAttribute("aria-label", "Graphtyp: Balkendiagramm");
42+
if (status) {
43+
status.textContent = "Graphtyp auf Balkendiagramm gestellt.";
44+
}
3345
} else {
3446
button.textContent = "Liniendiagramm";
47+
button.setAttribute("aria-label", "Graphtyp: Liniendiagramm");
48+
if (status) {
49+
status.textContent = "Graphtyp auf Liniendiagramm gestellt.";
50+
}
51+
}
52+
53+
if (status) {
54+
setTimeout(() => {
55+
status.textContent = "";
56+
}, 1500);
3557
}
3658
}
3759

‎src/settings/settings.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,16 @@ body {
8383
padding: 20px;
8484
background-color: #f5f5f5;
8585
}
86+
87+
/* Screen reader only text */
88+
.sr-only {
89+
position: absolute;
90+
width: 1px;
91+
height: 1px;
92+
padding: 0;
93+
margin: -1px;
94+
overflow: hidden;
95+
clip: rect(0, 0, 0, 0);
96+
white-space: nowrap;
97+
border: 0;
98+
}

‎src/settings/settings.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,34 @@
22
<head>
33
<title>Einstellungen</title>
44
<link rel="stylesheet" href="./settings.css">
5-
<script src="./settings.js" defer></script>
65
</head>
76
<body>
8-
<button onclick="toggleDialog()">Einstellungen</button>
9-
<dialog id="settingsDialog">
10-
<h1>Einstellungen</h1>
7+
<button onclick="toggleDialog()" aria-label="Einstellungen öffnen">Einstellungen</button>
8+
<dialog id="settingsDialog" aria-labelledby="settingsTitle" aria-describedby="settingsDialogDesc settingsStatus">
9+
<h1 id="settingsTitle">Einstellungen</h1>
10+
<p id="settingsDialogDesc" class="sr-only">
11+
In diesem Dialog kannst du dein Geschlecht und das Datumsformat auswählen. Änderungen werden automatisch gespeichert.
12+
</p>
13+
<p id="settingsStatus" class="sr-only" role="status" aria-live="polite"></p>
1114

1215
<label for="gender"><h5>Geschlecht:</h5></label>
13-
<select name="gender" id="gender">
16+
<select name="gender" id="gender" aria-describedby="genderHelp">
1417
<option value="none">---</option>
1518
<option value="male">Männlich</option>
1619
<option value="female">Weiblich</option>
1720
</select>
21+
<p id="genderHelp" class="sr-only">Wähle eine Option, falls du diese Angabe machen möchtest.</p>
22+
23+
<label for="dateFormat"><h5>Datumsformat:</h5></label>
24+
<select name="dateFormat" id="dateFormat" aria-describedby="dateFormatHelp">
25+
<option value="YYYY-MM-DD">Kurz</option>
26+
<option value="YYYY-MM-DD HH:mm">Lang</option>
27+
</select>
28+
<p id="dateFormatHelp" class="sr-only">Legt fest, wie Datumsangaben angezeigt werden.</p>
1829

1930
<br><br>
20-
<button onclick="toggleDialog()">Schließen</button>
31+
<button onclick="toggleDialog()" aria-label="Einstellungen schließen">Schließen</button>
2132
</dialog>
2233
</body>
34+
<script src="./settings.js" defer></script>
2335
</html>

‎src/settings/settings.js‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
// Saved Settings
22
let settings = {
3-
gender: 'none'
3+
gender: 'none',
4+
dateFormat: 'YYYY-MM-DD'
45
};
56

67
// Load Settings from local storage
78
function loadSettingsFromStorage() {
8-
const savedSettings = localStorage.getItem('userSettings');
9-
if (savedSettings) {
10-
settings = JSON.parse(savedSettings);
9+
try {
10+
const savedSettings = localStorage.getItem('userSettings');
11+
if (savedSettings) {
12+
settings = JSON.parse(savedSettings);
13+
}
14+
} catch (e) {
15+
console.log("Fehler beim Laden der Einstellungen aus dem LocalStorage:\n" + e)
1116
}
1217
}
1318

@@ -23,15 +28,29 @@ function toggleDialog() {
2328
}
2429

2530
function saveSettings() {
26-
settings.gender = document.getElementById('gender').value;
27-
28-
// Save settings in local storage
29-
localStorage.setItem('userSettings', JSON.stringify(settings));
30-
console.log('Einstellungen im localStorage gespeichert:', settings);
31+
try {
32+
settings.gender = document.getElementById('gender').value;
33+
settings.dateFormat = document.getElementById('dateFormat').value;
34+
35+
// Save settings in local storage
36+
localStorage.setItem('userSettings', JSON.stringify(settings));
37+
console.log('Einstellungen im localStorage gespeichert:', settings);
38+
39+
const status = document.getElementById('settingsStatus');
40+
if (status) {
41+
status.textContent = 'Einstellungen gespeichert.';
42+
setTimeout(() => {
43+
status.textContent = '';
44+
}, 1500);
45+
}
46+
} catch (e) {
47+
console.log("Fehler beim Speichern der Einstellungen im LocalStorage:\n" + e)
48+
}
3149
}
3250

3351
function loadSettings() {
3452
document.getElementById('gender').value = settings.gender;
53+
document.getElementById('dateFormat').value = settings.dateFormat;
3554
}
3655

3756
// Loads Settings into Dialog
@@ -40,4 +59,5 @@ document.addEventListener('DOMContentLoaded', () => {
4059
loadSettings();
4160

4261
document.getElementById('gender').addEventListener('change', saveSettings);
62+
document.getElementById('dateFormat').addEventListener('change', saveSettings);
4363
});

0 commit comments

Comments
 (0)