Aufnahmeantrag fromular ergänzt

Frontend/package-lock.json

@@ -1179,6 +1179,15 @@
         "warning": "^4.0.1"
       }
     },
+    "@material-ui/icons": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz",
+      "integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "recompose": "0.28.0 - 0.30.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.0.0-beta.2.tgz",
@@ -2801,6 +2810,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -10428,6 +10442,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-router": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.0.tgz",
@@ -10593,6 +10612,26 @@
         "util.promisify": "^1.0.0"
       }
     },
+    "recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -11822,6 +11861,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",

Frontend/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.0.0-beta.2",
+    "@material-ui/icons": "^3.0.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.0",

Frontend/src/components/App.js

@@ -3,21 +3,22 @@ import CssBaseline from "@material-ui/core/CssBaseline";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import Login from "./Login.js";
 import { Box } from "@material-ui/core";
-
+import Aufnahmeantrag from "./Aufnahmeantrag.js";
 
 class App extends Component {
   state = {};
   render() {
-    return <CssBaseline>
-      <Router>
-        <Box 
-          flexDirection="column"
-          width="100%"
-          >
-            <Route path="/login" component={Login}/>
-        </Box>
-      </Router>
-    </CssBaseline>;
+    return (
+      <>
+        <CssBaseline />
+        <Router>
+          <Box flexDirection="column" width="100%">
+            <Route path="/login" component={Login} />
+            <Route path="/aufnahmeantrag" component={Aufnahmeantrag} />
+          </Box>
+        </Router>
+      </>
+    );
   }
 }
 

Frontend/src/components/Aufnahmeantrag.js

@@ -1,9 +1,290 @@
 import React, { Component } from "react";
+import {
+  FormControl,
+  FormControlLabel,
+  Checkbox,
+  TextField,
+  Typography,
+  Grid,
+  Fab,
+  Container
+} from "@material-ui/core";
+import SendIcon from "@material-ui/icons/Send";
+import { makeStyles } from "@material-ui/core/styles";
 
 class Aufnahmeantrag extends Component {
-  state = {};
+  state = {
+    Name: "",
+    Vorname: "",
+    Geburtsdatum: "",
+    Geburtsort: "",
+    PLZ: "",
+    Ort: "",
+    Strasse: "",
+    Hausnummer: "",
+    Telefon: "",
+    EMail: "",
+    BLZ: "",
+    Bankname: "",
+    KontoNr: "",
+    Instrument: "",
+    Ermaessigt: null,
+    Laufzeit: "",
+    Typ: ""
+  };
+
+  handleChange = name => event => {
+    this.setState({ [name]: event.target.value });
+  };
+
+  useStyles = makeStyles(theme => ({
+    textField: {
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      width: 200
+    },
+    header: {
+      textAlign: "center"
+    },
+    fab: {
+      margin: theme.spacing(1)
+    }
+  }));
+
   render() {
-    return <></>;
+    const classes = this.useStyles;
+
+    return (
+      <Container maxWidth="md">
+        <FormControl variant="outlined">
+          <Grid container direction="row" justify="center" alignItems="center">
+            <Grid container spacing={1}>
+              <Grid item xs={12}>
+                <Typography align="center" variant="h4" gutterBottom>
+                  Aufnahmeantrag
+                </Typography>
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Name"
+                  className={classes.textField}
+                  value={this.state.Name}
+                  onChange={this.handleChange("Name")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Vorname"
+                  className={classes.textField}
+                  value={this.state.Vorname}
+                  onChange={this.handleChange("Vorname")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Geburtsdatum"
+                  className={classes.textField}
+                  value={this.state.Geburtsdatum}
+                  onChange={this.handleChange("Geburtsdatum")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Geburtsort"
+                  className={classes.textField}
+                  value={this.state.Geburtsort}
+                  onChange={this.handleChange("Geburtsort")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="PLZ"
+                  className={classes.textField}
+                  value={this.state.PLZ}
+                  onChange={this.handleChange("PLZ")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Ort"
+                  className={classes.textField}
+                  value={this.state.Ort}
+                  onChange={this.handleChange("Ort")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Strasse"
+                  className={classes.textField}
+                  value={this.state.Strasse}
+                  onChange={this.handleChange("Strasse")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Hausnummer"
+                  className={classes.textField}
+                  value={this.state.Hausnummer}
+                  onChange={this.handleChange("Hausnummer")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Telefon"
+                  className={classes.textField}
+                  value={this.state.Telefon}
+                  onChange={this.handleChange("Telefon")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="EMail"
+                  className={classes.textField}
+                  value={this.state.EMail}
+                  onChange={this.handleChange("EMail")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Instrument"
+                  className={classes.textField}
+                  value={this.state.Instrument}
+                  onChange={this.handleChange("Instrument")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Laufzeit"
+                  className={classes.textField}
+                  value={this.state.Laufzeit}
+                  onChange={this.handleChange("Laufzeit")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Typ"
+                  className={classes.textField}
+                  value={this.state.Typ}
+                  onChange={this.handleChange("Typ")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={this.state.Ermaessigt}
+                      onChange={() => this.handleChange("Ermaessigt")}
+                      value="Ermaessigt"
+                      color="primary"
+                    />
+                  }
+                  label="Schüler/Student/Azubi"
+                />
+              </Grid>
+            </Grid>
+            <Grid container spacing={1}>
+              <Grid item xs={12}>
+                <Typography align="center" variant="h4" gutterBottom>
+                  Bankverbindung
+                </Typography>
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="BLZ"
+                  className={classes.textField}
+                  value={this.state.BLZ}
+                  onChange={this.handleChange("BLZ")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Bankname"
+                  className={classes.textField}
+                  value={this.state.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.KontoNr}
+                  onChange={this.handleChange("KontoNr")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+            </Grid>
+
+            <Fab color="primary" aria-label="Send" className={classes.fab}>
+              <SendIcon />
+            </Fab>
+          </Grid>
+        </FormControl>
+      </Container>
+    );
   }
 }
 

Frontend/src/components/Login.js

@@ -1,40 +1,37 @@
 import React, { Component } from "react";
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
 
 class Login extends Component {
   state = {};
   render() {
     return (
-        <form>
-          <TextField
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            id="email"
-            label="Email Address"
-            name="email"
-            autoComplete="email"
-            autoFocus
-          >
-          </TextField>
-          <TextField
-            type="password"
-            variant="outlined"
-            margin="normal"
-            required
-            fullWidth
-            id="password"
-            label="Password"
-            name="password"
-            autoComplete="password"
-          >
-          </TextField>
-        </form>
-      </Box>
-    )
+      <form>
+        <TextField
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id="email"
+          label="Email Address"
+          name="email"
+          autoComplete="email"
+          autoFocus
+        />
+        <TextField
+          type="password"
+          variant="outlined"
+          margin="normal"
+          required
+          fullWidth
+          id="password"
+          label="Password"
+          name="password"
+          autoComplete="password"
+        />
+      </form>
+    );
   }
 }
 
-export default Login;
+export default Login;