add id and title

src/components/Routes.js

@@ -5,6 +5,7 @@ import { Route, Switch } from 'react-router-dom';
 import Home from './Home';
 import Tutorial from './Tutorial/Tutorial';
 import TutorialHome from './Tutorial/TutorialHome';
+import Builder from './Tutorial/Builder/Builder';
 import NotFound from './NotFound';
 
 class Routes extends Component {
@@ -15,6 +16,7 @@ class Routes extends Component {
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/tutorial" exact component={TutorialHome} />
+          <Route path="/tutorial/builder" exact component={Builder}/>
           <Route path="/tutorial/:tutorialId" exact component={Tutorial} />
           <Route component={NotFound} />
         </Switch>

src/components/Tutorial/Builder/Builder.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react';
+
+import Breadcrumbs from '../../Breadcrumbs';
+import Id from './Id';
+import Title from './Title';
+
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+
+import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+class Builder extends Component {
+
+  state = {
+    steps: [
+      {
+        headline: ''
+      },
+      {
+        headline: ''
+      }
+    ]
+  }
+
+  addStep = (index) => {
+    var step = {
+      headline: ''
+    };
+    var steps = this.state.steps;
+    steps.splice(index, 0, step);
+    this.setState({steps: steps});
+  }
+
+  removeStep = (index) => {
+    var steps = this.state.steps;
+    steps.splice(index, 1);
+    this.setState({steps: steps});
+  }
+
+  render() {
+    return (
+      <div>
+        <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: '/tutorial/builder', title: 'Builder'}]}/>
+
+        <h1>Tutorial-Builder</h1>
+
+        <Id />
+        <Title />
+
+        {this.state.steps.map((step, i) =>
+          <div style={{borderRadius: '25px', background: 'lightgrey', padding: '10px', marginBottom: '20px'}}>
+            <Typography style={{marginBottom: '10px', marginLeft: '25px'}}>Schritt {i+1}</Typography>
+            <Title />
+            <div style={{display: 'flex'}}>
+              <Button
+                disabled={i === 0}
+                onClick={() => this.removeStep(i)}
+                variant='contained'
+                color='primary'
+                style={{borderRadius: '25px 0 0 25px', height: '40px', boxShadow: '0 0 transparent'}}
+              >
+                <FontAwesomeIcon icon={faMinus} />
+              </Button>
+              <Button
+                onClick={() => this.addStep(i)}
+                variant='contained'
+                color='primary'
+                style={{borderRadius: '0 25px 25px 0', height: '40px', boxShadow: '0 0 transparent'}}
+              >
+                <FontAwesomeIcon icon={faPlus} />
+              </Button>
+            </div>
+          </div>
+
+        )}
+
+
+        <Button variant='contained' color='primary' onClick={() => {alert('hi')}}>Submit</Button>
+
+
+      </div>
+      /*<div style={{borderRadius: '25px', background: 'yellow', textAlign: 'center'}}>
+        <Typography variant='h4'>Tutorial-Builder</Typography>
+      </div>
+      */
+    );
+  };
+}
+
+export default Builder;

src/components/Tutorial/Builder/Id.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+
+import Button from '@material-ui/core/Button';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+class Id extends Component {
+
+  state = {
+    id: 0,
+    error: false
+  }
+
+  handleChange = (e) => {
+    var value = parseInt(e.target.value);
+    if(Number.isInteger(value)){
+      this.setState({id: value, error: false});
+    }
+    else {
+      this.setState({id: e.target.value, error: true});
+    }
+  };
+
+  handleCounter = (step) => {
+    if(!this.state.id){
+      this.setState({id: 0+step});
+    }
+    else {
+      this.setState({id: this.state.id+step});
+    }
+  }
+
+  render() {
+    return (
+      <FormControl variant="outlined" /*fullWidth*/ style={{marginBottom: '10px', width: '100%'}}>
+        <InputLabel htmlFor="id">ID</InputLabel>
+        <OutlinedInput
+          style={{borderRadius: '25px', padding: '0 0 0 10px', width: '200px'}}
+          error={this.state.error}
+          value={this.state.id}
+          name='id'
+          label='ID'
+          id='id'
+          onChange={this.handleChange}
+          inputProps={{
+            style: {marginRight: '10px'}
+          }}
+          endAdornment={
+            <div style={{display: 'flex'}}>
+              <Button
+                onClick={() => this.handleCounter(-1)}
+                variant='contained'
+                color='primary'
+                style={{borderRadius: '25px 0 0 25px', height: '56px', boxShadow: '0 0 transparent'}}
+              >
+                <FontAwesomeIcon icon={faMinus} />
+              </Button>
+              <Button
+                onClick={() => this.handleCounter(1)}
+                variant='contained'
+                color='primary'
+                style={{borderRadius: '0 25px 25px 0', height: '56px', boxShadow: '0 0 transparent'}}
+              >
+                <FontAwesomeIcon icon={faPlus} />
+              </Button>
+            </div>
+          }
+        />
+        {this.state.error ? <FormHelperText style={{color: 'red'}}>Es muss eine positive ganzzahlige Zahl sein.</FormHelperText> : null}
+      </FormControl>
+    );
+  };
+}
+
+export default Id;

src/components/Tutorial/Builder/Title.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+
+import Button from '@material-ui/core/Button';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+class Title extends Component {
+
+  state = {
+    title: '',
+    error: false
+  }
+
+  handleChange = (e) => {
+    var value = e.target.value;
+    if(value.replace(/\s/g,'') !== ''){
+      this.setState({[e.target.name]: value, error: false});
+    }
+    else {
+      this.setState({[e.target.name]: value, error: true});
+    }
+  };
+
+  render() {
+    return (
+      <FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
+        <InputLabel htmlFor="title">Titel</InputLabel>
+        <OutlinedInput
+          style={{borderRadius: '25px', padding: '0 0 0 10px'}}
+          error={this.state.error}
+          value={this.state.title}
+          name='title'
+          label='Titel'
+          id='title'
+          onChange={this.handleChange}
+        />
+        {this.state.error ? <FormHelperText style={{color: 'red'}}>Gib einen Titel für das Tutorial ein.</FormHelperText> : null}
+      </FormControl>
+    );
+  };
+}
+
+export default Title;