Added create new modal for Fragen
This commit is contained in:
parent
9ea23d1664
commit
0e4299b8ed
|
@ -6,6 +6,9 @@ import { CustomAppBar } from 'components/CustomAppBar/CustomAppBar';
|
|||
import { Overview } from 'components/Overview/Overview';
|
||||
|
||||
|
||||
export const dataApi = 'http://127.0.0.1:5000'
|
||||
|
||||
|
||||
const styles = createStyles({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
|
|
|
@ -0,0 +1,123 @@
|
|||
import React from 'react';
|
||||
import { createStyles, WithStyles } from '@material-ui/core/styles';
|
||||
import Modal from '@material-ui/core/Modal';
|
||||
import { TextField, Button } from '@material-ui/core';
|
||||
import { withStyles } from '@material-ui/styles';
|
||||
import { dataApi } from 'App';
|
||||
|
||||
|
||||
const styles = createStyles({
|
||||
paper: {
|
||||
margin: 'auto',
|
||||
width: 400,
|
||||
backgroundColor: 'white',
|
||||
border: '2px solid #000',
|
||||
padding: 8,
|
||||
},
|
||||
textField: {
|
||||
width: '100%',
|
||||
},
|
||||
buttonBar: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
button: {
|
||||
margin: 2,
|
||||
},
|
||||
})
|
||||
|
||||
interface OwnState {
|
||||
frageText: string,
|
||||
kategorieText: string,
|
||||
}
|
||||
|
||||
interface OwnProps {
|
||||
open?: boolean,
|
||||
handleClose(): void,
|
||||
}
|
||||
|
||||
interface CreateQuestionModalProps extends OwnProps, WithStyles<typeof styles> { }
|
||||
|
||||
class ProtoCreateQuestionModal extends React.PureComponent<CreateQuestionModalProps, OwnState> {
|
||||
public constructor(props: CreateQuestionModalProps) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
frageText: '',
|
||||
kategorieText: '',
|
||||
}
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<Modal
|
||||
aria-labelledby="simple-modal-title"
|
||||
aria-describedby="simple-modal-description"
|
||||
open={this.props.open ? true : false}
|
||||
onClose={this.props.handleClose}
|
||||
>
|
||||
<div className={this.props.classes.paper}>
|
||||
<h2 id="simple-modal-title">Neue Frage erstellen</h2>
|
||||
<TextField
|
||||
id="frage-text"
|
||||
label="Frage"
|
||||
multiline
|
||||
rows="4"
|
||||
className={this.props.classes.textField}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={this.state.frageText}
|
||||
onChange={(e) => this.setState({ frageText: e.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
id="kategorie-name"
|
||||
label="Kategorie"
|
||||
className={this.props.classes.textField}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={this.state.kategorieText}
|
||||
onChange={(e) => this.setState({ kategorieText: e.target.value })}
|
||||
/>
|
||||
<div className={this.props.classes.buttonBar}>
|
||||
<Button
|
||||
className={this.props.classes.button}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={this.createFrage}
|
||||
>
|
||||
Erstellen
|
||||
</Button>
|
||||
<Button
|
||||
className={this.props.classes.button}
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={this.props.handleClose}
|
||||
>
|
||||
Abbrechen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
private readonly createFrage = () => {
|
||||
fetch(`${dataApi}/fragen`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
})
|
||||
.then(res => {
|
||||
if (res.status === 200) {
|
||||
this.props.handleClose();
|
||||
alert("Frage wurde erfolgreich erstellt");
|
||||
} else {
|
||||
alert(`Es ist etwas schief gelaufen. Response: ${res.text}`);
|
||||
}
|
||||
})
|
||||
.catch(err => alert(`Es ist etwas schief gelaufen. Fehler: ${err}`))
|
||||
};
|
||||
}
|
||||
|
||||
export const CreateQuestionModal = withStyles(styles)(ProtoCreateQuestionModal)
|
|
@ -1,5 +1,6 @@
|
|||
import { WithStyles, createStyles, withStyles } from "@material-ui/core";
|
||||
import React from "react";
|
||||
import { dataApi } from "App";
|
||||
|
||||
|
||||
const styles = createStyles({
|
||||
|
@ -14,7 +15,6 @@ const styles = createStyles({
|
|||
}
|
||||
})
|
||||
|
||||
const dataApi = 'http://127.0.0.1:5000'
|
||||
|
||||
interface Question {
|
||||
id: number,
|
||||
|
@ -38,7 +38,7 @@ class ProtoExistingQuestions extends React.PureComponent<ExistingQuestionsProps,
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
fetch(`${dataApi}/fragen`)
|
||||
fetch(`${dataApi}/fragen/neu`, {method: 'GET'})
|
||||
.then(res => res.json())
|
||||
.then(json => this.setState({ existingQuestions: json }))
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { WithStyles, createStyles, Paper, Typography, Button, withStyles } from "@material-ui/core";
|
||||
import React from "react";
|
||||
import { ExistingQuestions } from "components/ExistingQuestions/ExistingQuestions";
|
||||
import { CreateQuestionModal } from "components/CreateQuestionModal/CreateQuestionModal";
|
||||
|
||||
|
||||
const styles = createStyles({
|
||||
|
@ -14,8 +15,18 @@ const styles = createStyles({
|
|||
|
||||
interface OverviewProps extends WithStyles<typeof styles> { }
|
||||
|
||||
interface OwnState {
|
||||
modalOpen: boolean,
|
||||
}
|
||||
|
||||
class ProtoOverview extends React.PureComponent<OverviewProps, OwnState> {
|
||||
public constructor(props: OverviewProps) {
|
||||
super(props)
|
||||
this.state = {
|
||||
modalOpen: false,
|
||||
}
|
||||
}
|
||||
|
||||
class ProtoOverview extends React.PureComponent<OverviewProps> {
|
||||
public render() {
|
||||
return (
|
||||
<Paper className={this.props.classes.mainPaper}>
|
||||
|
@ -23,11 +34,20 @@ class ProtoOverview extends React.PureComponent<OverviewProps> {
|
|||
Existierende Fragen
|
||||
</Typography>
|
||||
<ExistingQuestions />
|
||||
<Button variant='contained' color='primary'>
|
||||
<Button variant='contained' color='primary' onClick={this.createFrage}>
|
||||
Neue Frage erstellen
|
||||
</Button>
|
||||
<CreateQuestionModal open={this.state.modalOpen} handleClose={this.onModalClose}/>
|
||||
</Paper>
|
||||
)
|
||||
};
|
||||
|
||||
private readonly createFrage = () => {
|
||||
this.setState({modalOpen: true})
|
||||
}
|
||||
|
||||
private readonly onModalClose = () => {
|
||||
this.setState({modalOpen: false})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue