Merge pull request 'Refactored some things in the frontend' (#175) from frontend/buttons into main
Reviewed-on: #175
This commit is contained in:
commit
d162a4005d
3 changed files with 80 additions and 37 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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 />
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in a new issue