Merge pull request 'Infra/Update Dockerfiles' (#59) from infra/update-dockerfiles into main

backend/Dockerfile.prod

@@ -1,12 +1,13 @@
 FROM python
 
-WORKDIR /opt/demo/
+WORKDIR /app
+
+RUN apt-get -y update && apt-get -y upgrade
 
 COPY requirements.txt .
 
-RUN apt-get -y update && apt-get -y upgrade
 RUN pip install -r requirements.txt
 
 COPY /src .
 
-CMD [ "python", "main.py" ]
+CMD [ "python", "app.py" ]

docker-compose.prod.yml

@@ -8,3 +8,15 @@ services:
       dockerfile: Dockerfile.prod
     ports:
       - 8877:80
+  backend-prod:
+    container_name: backend_bt
+    build:
+      context: ./backend
+      dockerfile: Dockerfile.prod
+    ports:
+      - 5000:5000
+    environment:
+      DEBUG: "no"
+      PORT: 5000
+      HOST: "0.0.0.0"
+

frontend/src/App.js

@@ -10,6 +10,7 @@ import Login from "./components/pages/Login";
 import Register from "./components/pages/Register";
 import Manual from "./components/pages/Manual";
 import Secret from "./components/pages/Secret";
+import Umfrage from "./components/pages/Umfrage";
 import PrivateRoute from "./auth/PrivateRoute";
 
 function App() {
@@ -27,6 +28,7 @@ function App() {
           <Route path="/manual" component={Manual} />
           <Route path="/ueber" component={Ueber} />
           <PrivateRoute path="/secret" component={Secret} />
+          <PrivateRoute path="/umfrage" component={Umfrage} />
         </Switch>
       </Router>
     </>

frontend/src/components/Input.css

@@ -1,12 +1,15 @@
 .input-field {
   width: auto;
+  margin-bottom: 2em;
+  font-size: 1.5em;
 }
 
 .input-field p {
   font-size: 1.5em;
 }
 
-.input-field input {
+.input-field input,
+.input-field select {
   width: 100%;
   border-color: var(--primary);
   background-color: var(--secondary);
@@ -27,3 +30,7 @@
 .input-field input[type="submit"]:hover {
   background-color: var(--primary-contr);
 }
+
+.input-field label {
+  font-size: 1.5em;
+}

frontend/src/components/pages/Umfrage.js

@@ -0,0 +1,152 @@
+import React from "react";
+import { useState } from "react/cjs/react.development";
+import "../../App.css";
+import "../Input.css";
+import Footer from "../../Footer";
+import InputField from "../InputField";
+import SubmitField from "../SubmitField";
+
+export default function Umfrage() {
+  const [age, setAge] = useState("");
+  const [gender, setGender] = useState("");
+  const [education, setEducation] = useState("");
+  const [skills, setSkills] = useState("");
+
+  const onSubmitClick = (e) => {
+    e.preventDefault();
+    let opts = {
+      age: age,
+      gender: gender,
+      education: education,
+      skills: skills,
+    };
+    console.log(opts);
+    /*fetch("/api/login", {
+      method: "post",
+      body: JSON.stringify(opts),
+    })
+      .then((r) => r.json())
+      .then((token) => {
+        if (token.access_token) {
+          login(token);
+        } else {
+          console.log("Please type in the correct username / password");
+        }
+      });
+      */
+  };
+
+  const handleAgeChange = (e) => {
+    setAge(e.target.value);
+  };
+
+  const handleGenderChange = (e) => {
+    setGender(e.target.value);
+  };
+
+  const handleEducationChange = (e) => {
+    setEducation(e.target.value);
+  };
+
+  const handleSkillsChange = (e) => {
+    setSkills(e.target.value);
+  };
+
+  return (
+    <>
+      <div className="sitePage">
+        <h1> Umfrage</h1>
+        <p>
+          Damit ich etwas über die Studienteilnehmenden erfahre, möchte ich hier
+          eine kurze Erhebung einiger wichtiger Daten machen. Die Daten werden
+          natürlich nicht genauer verfolgt und die Auswertung der biometrischen
+          Verhaltensmerkmale geschieht unabhängig davon. Konkret bedeutet das,
+          dass ich deine Angaben nicht mit den Informationen aus den
+          Verhaltensmerkmalen zusammenfliessen lasse.
+        </p>
+        <p>
+          Die Umfrage dauert nur ca. 2 Minuten und nach der ersten Befragung
+          musst du diese auch nicht mehr ausfüllen, da ich dann eine ungefähre
+          Auswertung machen kann, wie sich die Studienteilnehmenden aufteilen.
+          So kann es für mich beispielsweise relevant sein, wenn sämtliche
+          Teilnehmenden ein sehr gutes Informatikverständnis haben.
+        </p>
+        <form id="umfrage" onClick={onSubmitClick}>
+          <InputField
+            InputType="number"
+            onChange={handleAgeChange}
+            LabelName="Wie alt bist du? (Alter in Jahren)"
+          />
+          <div className="input-field">
+            <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
+            <select
+              name="gender"
+              id="gender"
+              onChange={handleGenderChange}
+              defaultValue="DEFAULT"
+            >
+              <option disabled value="DEFAULT">
+                -- Bitte wähle etwas aus --{" "}
+              </option>
+              <option value="male">Männlich</option>
+              <option value="female">Weiblich</option>
+              <option value="divers">divers</option>
+              <option value="sex_na">Keine Angabe</option>
+            </select>
+          </div>
+          <div className="input-field">
+            <label htmlFor="education">
+              Welches ist deine höchste abgeschlossene Ausbildung?
+            </label>
+            <br />
+            <select
+              name="education"
+              id="education"
+              onChange={handleEducationChange}
+              defaultValue="DEFAULT"
+            >
+              <option disabled value="DEFAULT">
+                -- Bitte wähle deine Ausbildung aus --
+              </option>
+              <option>Berufslehre</option>
+              <option>Gymnasiale Maturität</option>
+              <option>Berufsmatura</option>
+              <option>Bachelor</option>
+              <option>Master oder höher</option>
+              <option>Keine Angabe</option>
+            </select>
+          </div>
+          <div className="input-field">
+            <label htmlFor="itskills">
+              Wie schätzt du deine Kompetenzen im Bereich der Informatik als
+              Anwender ein?
+            </label>
+            <br />
+            <select
+              name="itskills"
+              id="itskills"
+              onChange={handleSkillsChange}
+              defaultValue="DEFAULT"
+            >
+              <option disabled value="DEFAULT">
+                -- Bitte wähle etwas aus --
+              </option>
+              <option>Sehr gut</option>
+              <option>Gut</option>
+              <option>Mittel</option>
+              <option>Eher nicht so gut</option>
+              <option>Gar nicht gut</option>
+              <option>Keine Angabe</option>
+            </select>
+          </div>
+          <SubmitField
+            InputName="Umfrage abschicken"
+            InputValue="Umfrage abschicken"
+            LabelName="Umfrage abschicken"
+          />
+        </form>
+      </div>
+      <Footer />
+    </>
+  );
+}