Refactored some things in the frontend
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

- use button insted of inputfield
- make use of conditional rendering
This commit is contained in:
cami 2021-07-21 04:33:52 +02:00
parent 1751a37511
commit d055e693aa
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,47 +93,65 @@ 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"
<BehaviorNormal /> >
<form id="behaviorNormal" action="#"> Starten mit der Studie
<InputField </Button>
LabelName="Benutzername" </>
onChange={handleUsernameChange} ) : null}
InputType="text" {isStepNormal ? (
InputName="Benutzername" <>
InputPlaceHolder="Benutzername" <BehaviorNormal />
onPaste={handleOnPasteEvent} <form id="behaviorNormal">
/> <InputField
<InputField LabelName="Benutzername"
LabelName="Passwort" onChange={handleUsernameChange}
onChange={handlePasswordChange} InputType="text"
InputType="password" InputName="Benutzername"
InputName="Passwort" InputPlaceHolder="Benutzername"
InputPlaceHolder="Benutzername" onPaste={handleOnPasteEvent}
onPaste={handleOnPasteEvent} />
/> <InputField
<SubmitField LabelName="Passwort"
LabelNa onChange={handlePasswordChange}
me="Weiter zur nächsten Situation" InputType="password"
InputValue="next-situation" InputName="Passwort"
InputName="Weiter" InputPlaceHolder="Benutzername"
onClick={onSubmitClick} onPaste={handleOnPasteEvent}
/> />
</form> <SubmitField
<button onClick={handleLoggerOff}>STOP THAT FUCKING LOGGER</button> LabelName="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={onSubmitClick}
/>
</form>
</>
) : null}
</div> </div>
<Footer /> <Footer />
</> </>