From 1c2b025493ed983560c985deb533348f30a6bb6f Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Thu, 17 Sep 2020 18:55:51 +0200 Subject: [PATCH] add id and title --- src/components/Routes.js | 2 + src/components/Tutorial/Builder/Builder.js | 95 ++++++++++++++++++++++ src/components/Tutorial/Builder/Id.js | 80 ++++++++++++++++++ src/components/Tutorial/Builder/Title.js | 45 ++++++++++ 4 files changed, 222 insertions(+) create mode 100644 src/components/Tutorial/Builder/Builder.js create mode 100644 src/components/Tutorial/Builder/Id.js create mode 100644 src/components/Tutorial/Builder/Title.js diff --git a/src/components/Routes.js b/src/components/Routes.js index b81bf51..70153de 100644 --- a/src/components/Routes.js +++ b/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 { + diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js new file mode 100644 index 0000000..0ea7baf --- /dev/null +++ b/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 ( +
+ + +

Tutorial-Builder

+ + + + + {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; diff --git a/src/components/Tutorial/Builder/Id.js b/src/components/Tutorial/Builder/Id.js new file mode 100644 index 0000000..2f8d5cd --- /dev/null +++ b/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; diff --git a/src/components/Tutorial/Builder/Title.js b/src/components/Tutorial/Builder/Title.js new file mode 100644 index 0000000..c9a598a --- /dev/null +++ b/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;