added settings page

package.json

@@ -22,6 +22,12 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -33,6 +39,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {}
-}
+  }
+}

src/Addition.js

@@ -17,13 +17,22 @@ function Addition() {
   const [numbers, setNumbers] = useState(0); // array of arrays with input numbers
   const [resultsGrid, setResultsGrid] = useState([{id: 1, number: ""}]); // calculated result
   const [stepsGrid, setStepsGrid] = useState([{id: 1, step: ""}]); // one step for every digit
-
   const [autoMoveComma, setAutoMoveComma] = useState(false); // move the comma automatically
   const [allowStartOver, setAllowStartOver] = useState(true); // show steps and allow restart
 
-  // focus the input field
   let calculationInput = useRef(null);
   useEffect(()=>{
+    let autoMove = window.localStorage.getItem("autoMoveComma");
+    if(autoMove !== null){
+      setAutoMoveComma(JSON.parse(autoMove));
+    }
+
+    let allowStart = window.localStorage.getItem("allowStartOver");
+    if(allowStart !== null){
+      setAllowStartOver(JSON.parse(allowStart));
+    }
+
+    // focus the input field
     if(calculationInput.current && calculationInput.current.value === ""){
       calculationInput.current.focus();
     }

src/App.css

@@ -76,6 +76,10 @@ input[type="text"]{
   margin: 7px;
 }
 
+#autoMoveComma, #allowStartOver{
+  margin-right: 10px;
+}
+
 #wrapper .navbar-dark .navbar-nav .nav-link{
   color: rgba(255,255,255,.9)
 }

src/App.js

@@ -1,10 +1,11 @@
 import React from "react";
-import {BrowserRouter, Route, Switch } from "react-router-dom";
+import {BrowserRouter, Route, Switch} from "react-router-dom";
 
 import Home from "./Home.js";
 import Addition from "./Addition.js";
 import Subtraction from "./Subtraction.js";
 import Help from "./Help.js";
+import Settings from "./Settings.js";
 
 import Navigation from "./Navigation.js";
 import Footer from "./Footer.js";
@@ -24,6 +25,7 @@ function App() {
           <Route path="/addition" component={Addition} />
           <Route path="/subtraktion" component={Subtraction} />
           <Route path="/hilfe" component={Help} />
+          <Route path="/einstellungen" component={Settings} />
           <Route component={Error404} />
         </Switch>
       </BrowserRouter>

src/Help.js

@@ -5,17 +5,35 @@ function Help() {
     <main>
       <h1>Hilfe</h1>
 
-      <h2>1. Navigation</h2>
+      <h2>Navigation</h2>
       <p>
         Um die MAWEN Web App zu starten, gehen Sie bitte zu einer der Rechenarten:
       </p>
 
       <ul>
-        <li><a href="/addition">Addition</a></li>
-        <li><a href="/subtraktion">Subtraktion</a></li>
+        <li><a href="/addition">Addition</a> (Accesskey a)</li>
+        <li><a href="/subtraktion">Subtraktion</a> (Accesskey s)</li>
       </ul>
 
-      <h2>2. Eingabe der Rechnung</h2>
+      <p>
+        Auf der Seite <a href="/einstellungen">Einstellungen</a> (Accesskey e) k&ouml;nnen zuvor noch folgende Einstellungen bearbeitet werden:
+      </p>
+
+      <ul>
+        <li>
+          <b>Zahlen automatisch ausrichten: </b>
+          Wenn diese Option ausgew&auml;hlt wurde, werden die Zahlen automatisch richtig untereinander ausgerichtet.
+          Falls nicht, muss der User mit Hilfe der Pfeiltasten die Zahlen nach links und rechts verschieben, sodass am Ende alle Kommas an derselben Stelle sind.
+        </li>
+        <li>
+          <b>Fehler ausbessern erlauben: </b>
+          Wenn diese Option ausgew&auml;hlt wurde, werden nach der Eingabe des letzten &Uuml;bertrags nochmal alle Rechenschritte angezeigt.
+          Zus&auml;tzlich kann bei jedem Schritt neu begonnen werden, um Fehler auszubessern.
+          Falls diese Option nicht aktiviert wurde, wird nach der letzten Eingabe sofort angezeigt, ob das Endergebnis richtig oder falsch ist.
+        </li>
+      </ul>
+
+      <h2>Eingabe der Rechnung</h2>
       <p>
         Dort k&ouml;nnen Sie dann im Eingabefeld eine Rechnung wie beispielsweise &quot;1.4+34&quot; oder &quot;98-3.2&quot; eingeben.
         Mit Hilfe der Pfeiltasten (auf und ab), k&ouml;nnen zuvor eingebene Rechnungen erneut verwendet werden.
@@ -29,33 +47,41 @@ function Help() {
         Unter den Zahlen befindet sich das Feld f&uuml;r das Ergebnis, das anfangs nat&uuml;rlich noch leer ist.
       </p>
 
+      <h2>Komma schieben (falls aktiviert)</h2>
+      <p>
+        Mit Hilfe der Pfeiltasten k&ouml;nnen die einzelnen Zahlen nach links und rechts verschoben werden.
+        Wenn alle Zahlen ausgerichtet wurden, kann dies mit Enter oder dem Button nach den Zahlen best&auml;tigt werden.
+        Falls die Zahlen nicht richtig ausgerichtet wurden, erscheint eine Warnung.
+        Erst wenn alle Zahlen richtig verschoben wurden, kann mit dem n&auml;chsten Schritt begonnen werden.
+      </p>
+
 
-      <h2>3. Stellenweises L&ouml;sen der Rechnung</h2>
+      <h2>Stellenweises L&ouml;sen der Rechnung</h2>
       <p>
         F&uuml;r jede Stelle der eingegeben Zahlen erscheinen nacheinander ein Eingabefeld f&uuml;r das Ergebnis und f&uuml;r den &Uuml;bertrag.
-        Mit der Tab-Taste kann zwischen den beiden Eingabefeldern navigiert werden.
+        Mit der Tab- oder Enter-Taste kann zwischen den beiden Eingabefeldern navigiert werden.
         Nach Eingabe des &Uuml;bertrags, muss dieser mit der Enter Taste best&auml;tigt werden.
         Dann erscheinen die beiden Eingabefelder der n&auml;chsten Stelle und der Fokus r&uuml;ckt in das erste Feld.
       </p>
 
 
-      <h2>4. &Uuml;berpr&uuml;fung</h2>
+      <h2>&Uuml;berpr&uuml;fung (falls aktiviert)</h2>
       <p>
-        Wenn alle Eingabefelder ausgef&uuml;llt wurden, erscheint ein Overlay in dem ausgew&auml;hlt werden muss, ob das Ergebnis abgesendet werden soll oder vorher nochmal &uuml;berpr&uuml;ft werden soll.
-        Wird die &Uuml;berpr&uuml;fung ausgew&auml;hlt, erscheinen unter der Zahlenbox die einzelnen Rechnungsschritte.
+        Wenn alle Eingabefelder ausgef&uuml;llt wurden, und die Überprüfung aktiviert ist, erscheinen unter der Zahlenbox die einzelnen Rechnungsschritte.
         Bei jedem Schritt wird das davor berechnete Ergebnis, der &Uuml;bertrag und ob die Eingabe richtig oder falsch war, angezeigt.
         Au&szlig;erdem erscheint neben jedem Schritt ein Button, mit dem bei dem jeweiligen Schritt neu begonnen werden kann, um m&ouml;gliche Fehler ausbessern zu k&ouml;nnen.
       </p>
 
 
-      <h2>5. Absenden des Ergebnisses</h2>
+      <h2>Absenden des Ergebnisses</h2>
       <p>
         Unter den Rechenschritten befindet sich ein Button um das Ergebnis abzusenden.
         Das berechnete Ergebnis wird dann in die Box mit den Zahlen in der letzten Zeile erg&auml;nzt.
         Unter der Box wird gezeigt ob das Ergebnis richtig oder falsch ist.
-        Das Ergebnis wird genauso angezeigt, wenn beim Overlay &quot;abgeben&quot; statt &quot;&uuml;berpr&uuml;fen&quot; ausgew&auml;hlt wird, das hei&szlig;t, es wird einfach die &Uuml;berpr&uuml;fung &uuml;bersprungen.
+        Falls die &Uuml;berpr&uuml;fung deaktiviert wurde, wird das Ergebnis sofort angezeigt.
       </p>
 
+      <h2>Neu beginnen</h2>
       <p>
         Um die Eingabe zu korrigieren oder eine neue Rechnung zu beginnen, muss die Seite neu geladen werden.
       </p>

src/Navigation.js

@@ -36,11 +36,17 @@ const Navigation = () => {
               Subtraktion
             </NavLink>
           </NavItem>
+          <NavItem>
+            <NavLink href="/einstellungen" accessKey="e">
+              Einstellungen
+            </NavLink>
+          </NavItem>
           <NavItem>
             <NavLink href="/hilfe" accessKey="h">
               Hilfe
             </NavLink>
           </NavItem>
+
         </Nav>
       </Collapse>
 

src/Settings.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "./App.css";
+
+function Settings() {
+  function handleMoveChange(newValue) {
+    window.localStorage.setItem("autoMoveComma", newValue.target.checked);
+  }
+
+  function handleStartChange(newValue) {
+    window.localStorage.setItem("allowStartOver", newValue.target.checked);
+  }
+
+  return (
+    <main>
+
+      <h1>Einstellungen</h1>
+
+      <form>
+
+        <input type="checkbox" id="autoMoveComma" name="autoMoveComma" autoFocus
+          onChange={(e) => handleMoveChange(e)}
+          defaultChecked={JSON.parse(window.localStorage.getItem("autoMoveComma"))} />
+        <label htmlFor="autoMoveComma">Zahlen automatisch ausrichten</label>
+
+        <br/>
+
+        <input type="checkbox" id="allowStartOver" name="allowStartOver"
+          onChange={(e) => handleStartChange(e)}
+          defaultChecked={JSON.parse(window.localStorage.getItem("allowStartOver"))}/>
+        <label htmlFor="allowStartOver">Fehler ausbessern erlauben</label>
+
+      </form>
+
+    </main>
+  );
+}
+
+export default Settings;

src/Subtraction.js

@@ -17,13 +17,22 @@ function Subtraction() {
   const [numbers, setNumbers] = useState(0); // array of arrays with input numbers
   const [resultsGrid, setResultsGrid] = useState([{id: 1, number: ""}]); // calculated result
   const [stepsGrid, setStepsGrid] = useState([{id: 1, step: ""}]); // one step for every digit
-
   const [autoMoveComma, setAutoMoveComma] = useState(false); // move the comma automatically
   const [allowStartOver, setAllowStartOver] = useState(true); // show steps and allow restart
 
-  // focus the input field
   let calculationInput = useRef(null);
   useEffect(()=>{
+    let autoMove = window.localStorage.getItem("autoMoveComma");
+    if(autoMove !== null){
+      setAutoMoveComma(JSON.parse(autoMove));
+    }
+
+    let allowStart = window.localStorage.getItem("allowStartOver");
+    if(allowStart !== null){
+      setAllowStartOver(JSON.parse(allowStart));
+    }
+
+    // focus the input field
     if(calculationInput.current && calculationInput.current.value === ""){
       calculationInput.current.focus();
     }