instrument checkbox added

Frontend/src/components/Aufnahmeantrag.js

@@ -29,41 +29,69 @@ const useStyles = createStyles(theme => ({
     borderRadius: "5px",
     margin: "20px",
     padding: "20px",
-    boxShadow: "0px 0px 5px 0px grey"
+    boxShadow: "0px 0px 5px 0px lightgrey",
+    border: "1px solid grey"
   },
   checkbox: {
     display: "flex",
     alignItems: "center",
     height: "100%",
     marginLeft: "7px"
+  },
+  instruments: {
+    border: "1px solid lightgrey",
+    borderRadius: "5px",
+    display: "flex",
+    flexWrap: "wrap",
+    padding: "10px"
   }
 }));
 
 class Aufnahmeantrag extends Component {
   state = {
-    Name: "",
-    Vorname: "",
-    Geburtsdatum: "",
-    Geburtsort: "",
-    PLZ: "",
-    Ort: "",
-    Strasse: "",
-    Hausnummer: "",
-    Telefon: "",
-    EMail: "",
-    BLZ: "",
-    Bankname: "",
-    KontoNr: "",
-    Instrument: "",
-    Ermaessigt: null,
-    Laufzeit: "",
-    Typ: ""
+    form: {
+      Name: "",
+      Vorname: "",
+      Geburtsdatum: "",
+      Geburtsort: "",
+      PLZ: "",
+      Ort: "",
+      Strasse: "",
+      Hausnummer: "",
+      Telefon: "",
+      EMail: "",
+      BLZ: "",
+      Bankname: "",
+      KontoNr: "",
+      Instrument: [],
+      Ermaessigt: null,
+      Laufzeit: "",
+      Typ: ""
+    },
+    instruments: [
+      { name: "Gitarre", toggle: false },
+      { name: "Schlagzeug", toggle: false },
+      { name: "Flöte", toggle: false },
+      { name: "Trompete", toggle: false },
+      { name: "Banjo", toggle: false },
+      { name: "Klavier", toggle: false },
+      { name: "Orgel", toggle: false },
+      { name: "Kazoo", toggle: false }
+    ]
   };
 
   handleChange = name => event => {
     this.setState({ [name]: event.target.value });
   };
 
+  handleInstrument = instrument => {
+    var instruments = this.state.instruments;
+    instruments.forEach(obj => {
+      if (obj === instrument) instrument.toggle = !instrument.toggle;
+    });
+    this.setState({ instruments });
+  };
+
   render() {
     const classes = this.props.classes;
 
@@ -197,17 +225,26 @@ class Aufnahmeantrag extends Component {
                   variant="outlined"
                 />
               </Grid>
-              <Grid item sm={6} xs={12}>
-                <TextField
-                  fullWidth={true}
-                  id="outlined-name"
-                  label="Instrument"
-                  className={classes.textField}
-                  value={this.state.Instrument}
-                  onChange={this.handleChange("Instrument")}
-                  margin="normal"
-                  variant="outlined"
-                />
+              <Grid item sm={12} xs={12}>
+                <Typography align="left" variant="h6">
+                  Instrumente
+                </Typography>
+                <div className={classes.instruments}>
+                  {this.state.instruments.map(instrument => (
+                    <FormControlLabel
+                      key={instrument.name}
+                      control={
+                        <Checkbox
+                          checked={instrument.toggle}
+                          onChange={() => this.handleInstrument(instrument)}
+                          value={instrument.name}
+                          color="primary"
+                        />
+                      }
+                      label={instrument.name}
+                    />
+                  ))}
+                </div>
               </Grid>
               <Grid item sm={6} xs={12}>
                 <FormControl
@@ -261,7 +298,7 @@ class Aufnahmeantrag extends Component {
                   </Select>
                 </FormControl>
               </Grid>
-              <Grid item sm={6} xs={12}>
+              <Grid item sm={12} xs={12}>
                 <div className={classes.checkbox}>
                   <FormControlLabel
                     control={