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 "../../App.css";
import Footer from "../../Footer"; import Footer from "../../Footer";
import InputField from "../InputField"; import InputField from "../InputField";
@ -7,8 +7,23 @@ 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"; import { Button } from "../Button";
import BehaviorPhone from "../BehaviorPhone";
import BehaviorStanding from "../BehaviorStanding";
export default function Study() { 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 = ""; let username = "";
const setUsername = (tmp_username) => { const setUsername = (tmp_username) => {
username = tmp_username; username = tmp_username;
@ -19,33 +34,19 @@ export default function Study() {
password = tmp_password; password = tmp_password;
}; };
let isStepStart = true; const [isStepStart, setIsStepStart] = useState(true);
const setIsStepStart = (tmp) => { const [isStepNormal, setIsStepNormal] = useState(false);
isStepStart = tmp; const [isStepPhone, setIsStepPhone] = useState(false);
}; const [isStepStanding, setIsStepStanding] = useState(false);
const [isStepEnd, setIsStepEnd] = useState(false);
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 = () => { const handleLoggerOff = () => {
logger.stop(); _logger.current.stop();
console.log("Logger ausgeschaltet"); console.log("Logger ausgeschaltet");
}; };
const handleLoggerOn = () => { const handleLoggerOn = () => {
logger.start(); _logger.current.start();
console.log("start logging "); console.log("start logging ");
}; };
@ -62,11 +63,27 @@ export default function Study() {
return false; return false;
}; };
const handleIsStepStart = () => { const handleClickAtStepStart = () => {
setIsStepStart(false); setIsStepStart(false);
console.log("isStepStar", isStepStart)
setIsStepNormal(true); 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) => { const onSubmitClick = (e) => {
@ -93,65 +110,122 @@ export default function Study() {
}); });
}; };
/* const study_start = (
useEffect(() => { <>
if (isStepStart) { <BehaviorStudyInfo />
handleIsStepStart(); <Button
console.log("useEffect; normal"); className="btns"
} else if (isStepNormal) { buttonStyle="btn--primary"
console.log("useEffect; normal"); buttonSize="btn--full"
} onClick={handleClickAtStepStart}
}); newTo="study"
*/ >
Starten mit der Studie
</Button>
</>
);
const study_normal = (
<>
<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={handleClickAtStepNormal}
/>
</form>
</>
);
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 ( return (
<> <>
<div className="sitePage"> <div className="sitePage">
<h1>Studie</h1> <h1>Studie</h1>
<button onClick={handleLoggerOn}>LOGGER StaRTEN</button> {isStepStart ? study_start : null}
{isStepStart ? ( {isStepNormal ? study_normal : null}
<> {isStepPhone ? study_phone : null}
<BehaviorStudyInfo /> {isStepStanding ? study_standing : null}
<Button {isStepEnd ? study_end : null}
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> </div>
<Footer /> <Footer />
</> </>