육현진

material UI design

[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js":"4","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js":"5","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":3923,"mtime":1607450260952,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":2602,"mtime":1607450773121,"results":"11","hashOfConfig":"8"},{"size":3467,"mtime":1607448276867,"results":"12","hashOfConfig":"8"},{"size":439,"mtime":1607450769585,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"15hdric",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js",[],["27","28"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js",["29","30","31"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js",["32","33","34"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js",[],{"ruleId":"35","replacedBy":"36"},{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","severity":1,"message":"40","line":1,"column":27,"nodeType":"41","messageId":"42","endLine":1,"endColumn":37},{"ruleId":"39","severity":1,"message":"43","line":12,"column":8,"nodeType":"41","messageId":"42","endLine":12,"endColumn":24},{"ruleId":"39","severity":1,"message":"44","line":29,"column":7,"nodeType":"41","messageId":"42","endLine":29,"endColumn":15},{"ruleId":"39","severity":1,"message":"45","line":43,"column":7,"nodeType":"41","messageId":"42","endLine":43,"endColumn":19},{"ruleId":"39","severity":1,"message":"46","line":59,"column":7,"nodeType":"41","messageId":"42","endLine":59,"endColumn":18},{"ruleId":"39","severity":1,"message":"47","line":69,"column":7,"nodeType":"41","messageId":"42","endLine":69,"endColumn":19},"no-native-reassign",["48"],"no-negated-in-lhs",["49"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'curcularProgress' is defined but never used.","'students' is assigned a value but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
[{"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js":"1","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js":"2","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js":"3","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js":"4","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js":"5","C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js":"6"},{"size":500,"mtime":499162500000,"results":"7","hashOfConfig":"8"},{"size":3923,"mtime":1607450260952,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":2602,"mtime":1607450773121,"results":"11","hashOfConfig":"8"},{"size":6867,"mtime":1607455316983,"results":"12","hashOfConfig":"8"},{"size":2169,"mtime":1607455318372,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"15hdric",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\index.js",[],["27","28"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\App.js",["29","30","31"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\reportWebVitals.js",[],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\Student.js",["32","33","34"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentAdd.js",["35","36","37"],"C:\\Users\\sally\\Desktop\\3-1\\DBproject\\project\\client\\src\\components\\StudentDelete.js",["38"],{"ruleId":"39","replacedBy":"40"},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","severity":1,"message":"44","line":1,"column":27,"nodeType":"45","messageId":"46","endLine":1,"endColumn":37},{"ruleId":"43","severity":1,"message":"47","line":12,"column":8,"nodeType":"45","messageId":"46","endLine":12,"endColumn":24},{"ruleId":"43","severity":1,"message":"48","line":29,"column":7,"nodeType":"45","messageId":"46","endLine":29,"endColumn":15},{"ruleId":"43","severity":1,"message":"49","line":43,"column":7,"nodeType":"45","messageId":"46","endLine":43,"endColumn":19},{"ruleId":"43","severity":1,"message":"50","line":59,"column":7,"nodeType":"45","messageId":"46","endLine":59,"endColumn":18},{"ruleId":"43","severity":1,"message":"51","line":69,"column":7,"nodeType":"45","messageId":"46","endLine":69,"endColumn":19},{"ruleId":"43","severity":1,"message":"52","line":13,"column":7,"nodeType":"45","messageId":"46","endLine":13,"endColumn":12},{"ruleId":"43","severity":1,"message":"53","line":24,"column":7,"nodeType":"45","messageId":"46","endLine":24,"endColumn":14},{"ruleId":"43","severity":1,"message":"54","line":122,"column":15,"nodeType":"45","messageId":"46","endLine":122,"endColumn":22},{"ruleId":"43","severity":1,"message":"52","line":11,"column":7,"nodeType":"45","messageId":"46","endLine":11,"endColumn":12},"no-native-reassign",["55"],"no-negated-in-lhs",["56"],"no-unused-vars","'components' is defined but never used.","Identifier","unusedVar","'curcularProgress' is defined but never used.","'students' is assigned a value but never used.","'Searchscores' is defined but never used.","'Searchscore' is defined but never used.","'Searchothers' is defined but never used.","'theme' is assigned a value but never used.","'primary' is assigned a value but never used.","'classes' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
......
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){
......@@ -13,7 +43,8 @@ class StudentAdd extends React.Component{
st_Finalscore:'',
st_Assignscore:'',
st_Attendscore:'',
st_Score:''
st_Score:'',
open:false
}
}
......@@ -33,7 +64,8 @@ class StudentAdd extends React.Component{
st_Finalscore:'',
st_Assignscore:'',
st_Attendscore:'',
st_Score:''
st_Score:'',
open: false
})
}
......@@ -65,8 +97,54 @@ class StudentAdd extends React.Component{
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="이름" name="st_Name" value={this.state.st_Name} onChange={this.handleValueChange}/><br/>
<Textfield label="학번" name="st_Id" value={this.state.st_Id} onChange={this.handleValueChange}/><br/>
<Textfield label="전공" name="st_Major" value={this.state.st_Major} onChange={this.handleValueChange}/><br/>
<Textfield label="중간 점수" name="st_Midscore" value={this.state.st_Midscore} onChange={this.handleValueChange}/><br/>
<Textfield label="기말 점수" name="st_Finalscore" value={this.state.st_Finalscore} onChange={this.handleValueChange}/><br/>
<Textfield label="과제 점수" name="st_Assignscore" value={this.state.st_Assignscore} onChange={this.handleValueChange}/><br/>
<Textfield label="출석 점수" name="st_Attendscore" value={this.state.st_Attendscore} onChange={this.handleValueChange}/><br/>
<Textfield label="학점" 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>
/*
<form onSubmit={this.handleFormSubmit}>
<h1>학생 추가</h1>
코드 번호 : <input type="text" name="st_Code" value={this.state.st_Code} onChange={this.handleValueChange}/><br/>
......@@ -81,8 +159,9 @@ class StudentAdd extends React.Component{
<button type="submit">추가하기</button>
</form>
*/
)
}
}
export default StudentAdd;
\ No newline at end of file
export default withStyles(styles)(StudentAdd);
\ No newline at end of file
......
import React from 'react';
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 Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
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],
},
},
});
class StudentDelete extends React.Component{
constructor(props){
super(props);
this.state = {
open: false
}
}
handleClickOpen = () => {
this.setState({
open:true
});
}
handleClose = () => {
this.setState({
open: false
})
}
deleteStudent(st_Code){
const url='/api/students/'+st_Code;
fetch(url,{
......@@ -10,8 +49,26 @@ class StudentDelete extends React.Component{
}
render(){
return(
<button onClick={(e)=>{this.deleteStudent(this.props.st_Code)}}>삭제</button>
<div>
<Button variant="contained" color="secondary" onClick={this.handleClickOpen}>삭제</Button>
<Dialog open={this.state.open} onClose={this.handleClose}>
<DialogTitle onClose={this.handleClose}>
삭제 경고
</DialogTitle>
<DialogContent>
<Typography gutterBottom>
선택한 학생의 정보가 삭제됩니다!
</Typography>
</DialogContent>
<DialogActions>
<Button variant="contained" color="secondary" onClick={(e)=>{this.deleteStudent(this.props.st_Code)}}>삭제</Button>
<Button variant="outlined" color="secondary" onClick={this.handleClose}>닫기</Button>
</DialogActions>
</Dialog>
</div>
)
}
}
......