Added frontend for survey

frontend/src/components/pages/Umfrage.js

@@ -1,13 +1,59 @@
 import React from "react";
+import { useState } from "react/cjs/react.development";
 import "../../App.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">
+      <div className="sitePage" onSubmit={onSubmitClick}>
         <h1> Umfrage</h1>
         <p>
           Damit ich etwas über die Studienteilnehmenden erfahre, möchte ich hier
@@ -25,14 +71,68 @@ export default function Umfrage() {
         <form id="umfrage">
           <InputField
             InputType="number"
+            onChange={handleAgeChange}
             LabelName="Wie alt bist du? (Alter in Jahren)"
           />
-          <select>
+          <div>
-            <option value="male">Männlich</option>
+            <label htmlFor="gender">Welches Geschlecht hast du?</label> <br />
-            <option value="female">Weiblich</option>
+            <select
-            <option value="divers">divers</option>
+              name="gender"
-            <option value="sex_na">Keine Angabe</option>
+              id="gender"
-          </select>
+              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>
+            <label htmlFor="education">
+              Welches ist deine höchste abgeschlossene Ausbildung?
+            </label>
+            <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>
+            <label htmlFor="itskills">
+              Wie schätzt du deine Kompetenzen im Bereich der Informatik als
+              Anwender ein?
+            </label>
+            <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>
+            </select>
+          </div>
           <SubmitField
             InputName="Umfrage abschicken"
             InputValue="Umfrage abschicken"