EVA_Lernsituation/Frontend/src/components/Aufnahmeantrag.js

import React, { Component } from "react";
import {
  FormControlLabel,
  Checkbox,
  TextField,
  Typography,
  Grid,
  Fab,
  Container,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  OutlinedInput
} from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import { withStyles, createStyles } from "@material-ui/core/styles";

const useStyles = createStyles(theme => ({
  textField: {
    margingLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  },
  fab: {
    margin: theme.spacing(1)
  },
  form: {
    backgroundColor: "#f5f5f5",
    borderRadius: "5px",
    margin: "20px",
    padding: "20px",
    boxShadow: "0px 0px 5px 0px lightgrey",
    border: "1px solid lightgrey"
  },
  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 = {
    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({ form: { ...this.state.form, [name]: event.target.value } });
  };

  handleInstrument = instrument => {
    var instruments = this.state.instruments;
    var instrumentsArray = [];
    instruments.forEach(obj => {
      if (obj === instrument) obj.toggle = !obj.toggle;
      if (obj.toggle === true) instrumentsArray.push(obj.name);
    });
    this.setState({
      form: { ...this.state.form, Instrument: instrumentsArray }
    });
    this.setState({ instruments });
  };

  render() {
    const classes = this.props.classes;

    return (
      <Container maxWidth="md">
        <div className={classes.form}>
          <Grid container direction="row" justify="center" alignItems="center">
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <Typography align="center" variant="h4">
                  Aufnahmeantrag
                </Typography>
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Name"
                  className={classes.textField}
                  value={this.state.form.Name}
                  onChange={this.handleChange("Name")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Vorname"
                  className={classes.textField}
                  value={this.state.form.Vorname}
                  onChange={this.handleChange("Vorname")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Geburtsdatum"
                  className={classes.textField}
                  value={this.state.form.Geburtsdatum}
                  onChange={this.handleChange("Geburtsdatum")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Geburtsort"
                  className={classes.textField}
                  value={this.state.form.Geburtsort}
                  onChange={this.handleChange("Geburtsort")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="PLZ"
                  className={classes.textField}
                  value={this.state.form.PLZ}
                  onChange={this.handleChange("PLZ")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Ort"
                  className={classes.textField}
                  value={this.state.form.Ort}
                  onChange={this.handleChange("Ort")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Strasse"
                  className={classes.textField}
                  value={this.state.form.Strasse}
                  onChange={this.handleChange("Strasse")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Hausnummer"
                  className={classes.textField}
                  value={this.state.form.Hausnummer}
                  onChange={this.handleChange("Hausnummer")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Telefon"
                  className={classes.textField}
                  value={this.state.form.Telefon}
                  onChange={this.handleChange("Telefon")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="EMail"
                  className={classes.textField}
                  value={this.state.form.EMail}
                  onChange={this.handleChange("EMail")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <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
                  margin="normal"
                  fullWidth={true}
                  variant="outlined"
                  className={classes.textField}
                >
                  <InputLabel htmlFor="outlined-laufzeit-simple">
                    Laufzeit
                  </InputLabel>
                  <Select
                    value={this.state.form.Laufzeit}
                    onChange={this.handleChange("Laufzeit")}
                    input={
                      <OutlinedInput
                        labelWidth={60}
                        name="laufzeit"
                        id="outlined-laufzeit-simple"
                      />
                    }
                  >
                    <MenuItem value={6}>6 Monate</MenuItem>
                    <MenuItem value={12}>12 Monate</MenuItem>
                  </Select>
                </FormControl>
              </Grid>
              <Grid item sm={6} xs={12}>
                <FormControl
                  margin="normal"
                  fullWidth={true}
                  variant="outlined"
                  className={classes.textField}
                >
                  <InputLabel htmlFor="outlined-laufzeit-simple">
                    Unterichtstyp
                  </InputLabel>
                  <Select
                    value={this.state.form.Typ}
                    onChange={this.handleChange("Typ")}
                    input={
                      <OutlinedInput
                        labelWidth={95}
                        name="laufzeit"
                        id="outlined-laufzeit-simple"
                      />
                    }
                  >
                    <MenuItem value={"einzel"}>Einzelunterricht</MenuItem>
                    <MenuItem value={"band"}>Gruppenunterricht / Band</MenuItem>
                  </Select>
                </FormControl>
              </Grid>
              <Grid item sm={12} xs={12}>
                <div className={classes.checkbox}>
                  <FormControlLabel
                    control={
                      <Checkbox
                        checked={this.state.form.Ermaessigt}
                        onChange={() => this.handleChange("Ermaessigt")}
                        value="Ermaessigt"
                        color="primary"
                      />
                    }
                    label="Schüler/Student/Azubi"
                  />
                </div>
              </Grid>
            </Grid>
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <Typography align="center" variant="h4">
                  Bankverbindung
                </Typography>
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="BLZ"
                  className={classes.textField}
                  value={this.state.form.BLZ}
                  onChange={this.handleChange("BLZ")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item sm={6} xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="Bankname"
                  className={classes.textField}
                  value={this.state.form.Bankname}
                  onChange={this.handleChange("Bankname")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth={true}
                  id="outlined-name"
                  label="KontoNr"
                  className={classes.textField}
                  value={this.state.form.KontoNr}
                  onChange={this.handleChange("KontoNr")}
                  margin="normal"
                  variant="outlined"
                />
              </Grid>
            </Grid>

            <Fab color="primary" aria-label="Send" className={classes.fab}>
              <SendIcon />
            </Fab>
          </Grid>
        </div>
      </Container>
    );
  }
}

export default withStyles(useStyles)(Aufnahmeantrag);