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

View file

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

View file

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