Refactored some things in the frontend #175

Merged
cami merged 1 commit from frontend/buttons into main 2021-07-21 02:34:25 +00:00
3 changed files with 80 additions and 37 deletions

View file

@ -31,6 +31,12 @@
font-size: 1.3em; font-size: 1.3em;
} }
.btn--full{
padding: 12px 26px;
margin: 0 auto;
font-size: 1.5em;
}
.btn--large:hover, .btn--large:hover,
.btn--medium:hover { .btn--medium:hover {
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
@ -38,3 +44,4 @@
color: var(--secondary); color: var(--secondary);
transition: 250ms; transition: 250ms;
} }

View file

@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
const STYLES = ["btn--primary", "btn--outline"]; const STYLES = ["btn--primary", "btn--outline"];
const SIZES = ["btn--medium", "btn--large"]; const SIZES = ["btn--medium", "btn--large", "btn--full"];
export const Button = ({ export const Button = ({
children, children,
type, type,

View file

@ -6,6 +6,7 @@ import SubmitField from "../SubmitField";
import { Logger } from "@behametrics/logger-web"; import { Logger } from "@behametrics/logger-web";
import BehaviorStudyInfo from "../BehaviorStudyInfo"; import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal"; import BehaviorNormal from "../BehaviorNormal";
import { Button } from "../Button";
export default function Study() { export default function Study() {
let username = ""; let username = "";
@ -18,6 +19,16 @@ export default function Study() {
password = tmp_password; password = tmp_password;
}; };
let isStepStart = true;
const setIsStepStart = (tmp) => {
isStepStart = tmp;
};
let isStepNormal = false;
const setIsStepNormal = (tmp) => {
isStepNormal = tmp;
};
let logger = new Logger({ let logger = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"], //inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"], inputs: ["keyboard"],
@ -51,6 +62,13 @@ export default function Study() {
return false; return false;
}; };
const handleIsStepStart = () => {
setIsStepStart(false);
console.log("isStepStar", isStepStart)
setIsStepNormal(true);
console.log("isStepStar", isStepNormal)
};
const onSubmitClick = (e) => { const onSubmitClick = (e) => {
e.preventDefault(); e.preventDefault();
let opts = { let opts = {
@ -75,22 +93,40 @@ export default function Study() {
}); });
}; };
/*
useEffect(() => {
if (isStepStart) {
handleIsStepStart();
console.log("useEffect; normal");
} else if (isStepNormal) {
console.log("useEffect; normal");
}
});
*/
return ( return (
<> <>
<div className="sitePage"> <div className="sitePage">
<h1>Studie</h1> <h1>Studie</h1>
<button onClick={handleLoggerOn}>LOGGER StaRTEN</button> <button onClick={handleLoggerOn}>LOGGER StaRTEN</button>
<BehaviorStudyInfo />{" "} {isStepStart ? (
<form id="behaviorNormal" action="#"> <>
<SubmitField <BehaviorStudyInfo />
LabelName="Starten mit der Studie" <Button
InputValue="next-situation" className="btns"
InputName="Weiter" buttonStyle="btn--primary"
onClick={handleLoggerOn} buttonSize="btn--full"
/> onClick={handleIsStepStart}
</form>{" "} newTo="study"
>
Starten mit der Studie
</Button>
</>
) : null}
{isStepNormal ? (
<>
<BehaviorNormal /> <BehaviorNormal />
<form id="behaviorNormal" action="#"> <form id="behaviorNormal">
<InputField <InputField
LabelName="Benutzername" LabelName="Benutzername"
onChange={handleUsernameChange} onChange={handleUsernameChange}
@ -108,14 +144,14 @@ export default function Study() {
onPaste={handleOnPasteEvent} onPaste={handleOnPasteEvent}
/> />
<SubmitField <SubmitField
LabelNa LabelName="Weiter zur nächsten Situation"
me="Weiter zur nächsten Situation"
InputValue="next-situation" InputValue="next-situation"
InputName="Weiter" InputName="Weiter"
onClick={onSubmitClick} onClick={onSubmitClick}
/> />
</form> </form>
<button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button> </>
) : null}
</div> </div>
<Footer /> <Footer />
</> </>