Merge pull request 'Add multiple subpages for the survey...' (#177) from frontend/survey-multiple-sites into main

Reviewed-on: #177

frontend/src/components/BehaviorPhone.js

@@ -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 />
+    </>
+  );
+}

frontend/src/components/BehaviorStanding.js

@@ -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 />
+    </>
+  );
+}

frontend/src/components/pages/Study.js

@@ -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 [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 = () => {
-    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,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 (
     <>
       <div className="sitePage">
         <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>
       <Footer />
     </>