1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- import React, { useEffect, useState } from "react";
- import "./App.css";
- function Settings() {
- const [autoComma, setAutoComma] = useState(false);
- const [allowStart, setAllowStart] = useState(false);
- useEffect(()=>{
- let comma = JSON.parse(window.localStorage.getItem("autoMoveComma"));
- setAutoComma(comma);
- console.log("current auto comma state:", comma);
- let start = JSON.parse(window.localStorage.getItem("allowStartOver"));
- setAllowStart(start);
- console.log("current allow start state:", start);
- }, []);
- function handleMoveChange(newValue) {
- window.localStorage.setItem("autoMoveComma", newValue.target.checked);
- console.log("set auto comma state:", newValue.target.checked);
- setAutoComma(newValue.target.checked);
- }
- function handleStartChange(newValue) {
- window.localStorage.setItem("allowStartOver", newValue.target.checked);
- console.log("set allow start state:", newValue.target.checked);
- setAllowStart(newValue.target.checked);
- }
- return (
- <main>
- <h1>Einstellungen</h1>
- <form>
- <input type="checkbox" id="autoMoveComma" name="autoMoveComma" autoFocus
- onChange={(e) => handleMoveChange(e)}
- checked={autoComma} />
- <label htmlFor="autoMoveComma">Zahlen automatisch ausrichten</label>
- <br/>
- <input type="checkbox" id="allowStartOver" name="allowStartOver"
- onChange={(e) => handleStartChange(e)}
- checked={allowStart}/>
- <label htmlFor="allowStartOver">Fehler ausbessern erlauben</label>
- </form>
- </main>
- );
- }
- export default Settings;
|