Merge pull request 'Add multiple subpages for the survey...' (#177) from frontend/survey-multiple-sites into main
All checks were successful
continuous-integration/drone/push Build is passing

Reviewed-on: #177
This commit is contained in:
cami 2021-07-21 21:41:32 +00:00
commit 060f20d25c
3 changed files with 184 additions and 79 deletions

View file

@ -0,0 +1,17 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword";
export default function BehaviorPhone() {
return (
<>
<p>
Im nächsten Schritt geht es darum, dass Sie während der Passworteingabe
telefonieren. Nehmen Sie hierzu Ihr Smartphone oder Telefon und stellen
Sie sich vor, dass Sie gerade am Telefonieren sind. Verwenden Sie bitte
kein Headset oder Ähnliches.
</p>
<GeneratedPassword />
</>
);
}

View file

@ -0,0 +1,14 @@
import React from "react";
import "../App.css";
import GeneratedPassword from "./GeneratedPassword"
export default function BehaviorStanding() {
return (
<>
<p>
In dieser Situation geht es darum, dass Sie das Passwort im Stehen eingeben. Stehen Sie also vor den Computer und geben Sie den Benutzernamen und das Passwort wie gewohnt ein.
</p>
<GeneratedPassword />
</>
);
}

View file

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useRef, useState } from "react";
import "../../App.css";
import Footer from "../../Footer";
import InputField from "../InputField";
@ -7,8 +7,23 @@ import { Logger } from "@behametrics/logger-web";
import BehaviorStudyInfo from "../BehaviorStudyInfo";
import BehaviorNormal from "../BehaviorNormal";
import { Button } from "../Button";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
export default function Study() {
const _logger = useRef(0);
useEffect(() => {
_logger.current = new Logger({
//inputs: ["cursor", "wheel", "keyboard", "touch"],
inputs: ["keyboard"],
// apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true,
});
_logger.current.init();
}, []);
let username = "";
const setUsername = (tmp_username) => {
username = tmp_username;
@ -19,33 +34,19 @@ 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"],
// apiUrl: "https://behavior.marcocamenzind.ch",
apiUrl: "http://localhost:5000",
logToConsole: true,
});
logger.init();
const [isStepStart, setIsStepStart] = useState(true);
const [isStepNormal, setIsStepNormal] = useState(false);
const [isStepPhone, setIsStepPhone] = useState(false);
const [isStepStanding, setIsStepStanding] = useState(false);
const [isStepEnd, setIsStepEnd] = useState(false);
const handleLoggerOff = () => {
logger.stop();
_logger.current.stop();
console.log("Logger ausgeschaltet");
};
const handleLoggerOn = () => {
logger.start();
_logger.current.start();
console.log("start logging ");
};
@ -62,11 +63,27 @@ export default function Study() {
return false;
};
const handleIsStepStart = () => {
const handleClickAtStepStart = () => {
setIsStepStart(false);
console.log("isStepStar", isStepStart)
setIsStepNormal(true);
console.log("isStepStar", isStepNormal)
handleLoggerOn();
// forceUpdate();
};
const handleClickAtStepNormal = () => {
setIsStepNormal(false);
setIsStepPhone(true);
};
const handleClickAtStepPhone = () => {
setIsStepPhone(false);
setIsStepStanding(true);
};
const handleClickAtStepStanding = () => {
setIsStepStanding(false);
setIsStepEnd(true);
handleLoggerOff();
};
const onSubmitClick = (e) => {
@ -93,37 +110,22 @@ 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>
{isStepStart ? (
const study_start = (
<>
<BehaviorStudyInfo />
<Button
className="btns"
buttonStyle="btn--primary"
buttonSize="btn--full"
onClick={handleIsStepStart}
onClick={handleClickAtStepStart}
newTo="study"
>
Starten mit der Studie
</Button>
</>
) : null}
{isStepNormal ? (
);
const study_normal = (
<>
<BehaviorNormal />
<form id="behaviorNormal">
@ -147,11 +149,83 @@ export default function Study() {
LabelName="Weiter zur nächsten Situation"
InputValue="next-situation"
InputName="Weiter"
onClick={onSubmitClick}
onClick={handleClickAtStepNormal}
/>
</form>
</>
) : null}
);
const study_phone = (
<>
<BehaviorPhone />
<form id="behaviorPhone">
<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={handleClickAtStepPhone}
/>
</form>
</>
);
const study_standing = (
<>
<BehaviorStanding />
<form id="behaviorPhone">
<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="Studie beenden"
InputValue="stopStudy"
InputName="quit"
onClick={handleClickAtStepStanding}
/>
</form>
</>
);
const study_end = <p>Merci :-)</p>;
return (
<>
<div className="sitePage">
<h1>Studie</h1>
{isStepStart ? study_start : null}
{isStepNormal ? study_normal : null}
{isStepPhone ? study_phone : null}
{isStepStanding ? study_standing : null}
{isStepEnd ? study_end : null}
</div>
<Footer />
</>