StudentAdd.js 6.38 KB
import React from 'react';
import {post} from 'axios';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import Textfield from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import{withStyles}from '@material-ui/core/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import {blue, pink} from '@material-ui/core/colors';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: blue[100],
    },
    secondary: {
      main: pink[100],
    },
  },
});

const primary = blue[100]; //#bbdefb

const styles = theme=>({
    hidden:{
        display:'none'
    }

});

class StudentAdd extends React.Component{

    constructor(props){
        super(props);
        this.state={
            st_Code:'',
            //st_Name:'',
            //st_Id:'',
            st_Major:'',
            st_Midscore:'',
            st_Finalscore:'',
            st_Assignscore:'',
            st_Attendscore:'',
            st_Score:'',
            open:false
        }
    }

    handleFormSubmit = (e) => {
        e.preventDefault()
        this.addStudent()
        .then((response) => {
            console.log(response.data);
            this.props.stateRefresh();
        })
        this.setState({
            st_Code:'',
            //st_Name:'',
            //st_Id:'',
            st_Major:'',
            st_Midscore:'',
            st_Finalscore:'',
            st_Assignscore:'',
            st_Attendscore:'',
            st_Score:'',
            open: false
        })

    }

    handleValueChange = (e) => {
        let nextState = {};
        nextState[e.target.name]=e.target.value;
        this.setState(nextState);
    }

    addStudent = () =>{
        const url ='/api/students';
        const formData=new FormData();
        formData.append('st_Code',this.state.st_Code);
        //formData.append('st_Name',this.state.st_Name);
        //formData.append('st_Id',this.state.st_Id);
        formData.append('st_Major',this.state.st_Major);
        formData.append('st_Midscore',this.state.st_Midscore);
        formData.append('st_Finalscore',this.state.st_Finalscore);
        formData.append('st_Assignscore',this.state.st_Assignscore);
        formData.append('st_Attendscore',this.state.st_Attendscore);
        formData.append('st_Score',this.state.st_Score);
        const config = {
            headers: {
                'content-tupe': 'multipart/form-data'        
            }

        }
        return post(url, formData, config);
    }

    handleClickOpen = () => {
        this.setState({
            open:true
        });
    }

    handleClose = () => {
        this.setState({
            st_Code:'',
            //st_Name:'',
            //st_Id:'',
            st_Major:'',
            st_Midscore:'',
            st_Finalscore:'',
            st_Assignscore:'',
            st_Attendscore:'',
            st_Score:'',
            open: false
        })
    }

    render(){
        const{classes}=this.props;
        return(
            <div>
                <Button variant="contained" color="primary" onClick={this.handleClickOpen}>
                    등수확인
                </Button>
                
                <Dialog open={this.state.open} onClose={this.handleClose}>
                <DialogTitle>학생 추가</DialogTitle>

                    <DialogContent>
                        <Textfield label="코드 번호" type="text" name="st_Code" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>


                        <Textfield label="전공" type="text" name="st_Major" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>
                        <Textfield label="중간 점수" type="text" name="st_Midscore" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>
                        <Textfield label="기말 점수" type="text" name="st_Finalscore" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>
                        <Textfield label="과제 점수" type="text" name="st_Assignscore" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>
                        <Textfield label="출석 점수" type="text" name="st_Attendscore" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>
                        <Textfield label="학점" type="text" name="st_Score" value={this.state.st_Score} onChange={this.handleValueChange}/><br/>
                    </DialogContent>
                    <DialogActions>
                    <Button varient="contained" color="primary" onClick={this.handleFormSubmit}>추가</Button>
                    <Button varient="outlined" color="primary" onClick={this.handleClose}>닫기</Button>
                    </DialogActions>
                </Dialog>
            </div>

        )
    }
}

export default withStyles(styles)(StudentAdd);
            /*
            <form onSubmit={this.handleFormSubmit}>
                <h1>학생 추가</h1>
                코드 번호 : <input type="text" name="st_Code" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>
                   이름   : <input type="text" name="st_Name" value={this.state.st_Name} onChange={this.handleValueChange}/><br/>
                   학번   : <input type="text" name="st_Id" value={this.state.st_Id} onChange={this.handleValueChange}/><br/>
                   전공   : <input type="text" name="st_Major" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>
                중간 점수 : <input type="text" name="st_Midscore" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>
                기말 점수 : <input type="text" name="st_Finalscore" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>
                과제 점수 : <input type="text" name="st_Assignscore" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>
                출석 점수 : <input type="text" name="st_Attendscore" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>
                   학점   : <input type="text" name="st_Score" value={this.state.st_Score} onChange={this.handleValueChange}/><br/>
                <button type="submit">추가하기</button>

            </form>
            */