160 lines
3.9 KiB
JavaScript
160 lines
3.9 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import "../../App.css";
|
|
import Footer from "../../Footer";
|
|
import InputField from "../InputField";
|
|
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 = "";
|
|
const setUsername = (tmp_username) => {
|
|
username = tmp_username;
|
|
};
|
|
|
|
let password = "";
|
|
const setPassword = (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({
|
|
//inputs: ["cursor", "wheel", "keyboard", "touch"],
|
|
inputs: ["keyboard"],
|
|
// apiUrl: "https://behavior.marcocamenzind.ch",
|
|
apiUrl: "http://localhost:5000",
|
|
logToConsole: true,
|
|
});
|
|
|
|
logger.init();
|
|
|
|
const handleLoggerOff = () => {
|
|
logger.stop();
|
|
console.log("Logger ausgeschaltet");
|
|
};
|
|
|
|
const handleLoggerOn = () => {
|
|
logger.start();
|
|
console.log("start logging ");
|
|
};
|
|
|
|
const handlePasswordChange = (e) => {
|
|
setPassword(e.target.value);
|
|
};
|
|
|
|
const handleUsernameChange = (e) => {
|
|
setUsername(e.target.value);
|
|
};
|
|
|
|
const handleOnPasteEvent = (e) => {
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
|
|
const handleIsStepStart = () => {
|
|
setIsStepStart(false);
|
|
console.log("isStepStar", isStepStart)
|
|
setIsStepNormal(true);
|
|
console.log("isStepStar", isStepNormal)
|
|
};
|
|
|
|
const onSubmitClick = (e) => {
|
|
e.preventDefault();
|
|
let opts = {
|
|
username: username,
|
|
password: password,
|
|
};
|
|
fetch("/api/protected/behavior", {
|
|
method: "post",
|
|
body: JSON.stringify(opts),
|
|
}).then((response) => {
|
|
console.log(response.status);
|
|
if (response.status === 401) {
|
|
response.json().then((resp) => {
|
|
console.log("nicht so wirklich gut");
|
|
// setErrorMessage(resp.message);
|
|
});
|
|
} else {
|
|
response.json().then((token) => {
|
|
console.log("Alles gut :-)");
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
/*
|
|
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>
|
|
{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 />
|
|
</>
|
|
);
|
|
}
|