feat: support register

4 years ago · 4aa080fed7
6 changed files with 500 additions and 15 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.js
+++ b/src/App.js
@ -1,14 +1,32 @@
 import React from "react";
 import Login from "./Login";
-import Register from "./register";
+import ProgramType from "./ProgramType";
+import Male from "./Male";
+import Female from "./Female";
+import Team from "./Team";
 import {HashRouter, Switch, Route} from 'react-router-dom';

-function App() {
+class App extends React.Component {
+  componentDidMount() {
+    document.location.hash = '';
+  }
+
+
+  render() {
    return (
      <HashRouter>
        <Switch>
-        <Route path={'/register'}>
-          <Register/>
+          <Route path={'/type'}>
+            <ProgramType/>
+          </Route>
+          <Route path={'/male'}>
+            <Male/>
+          </Route>
+          <Route path={'/female'}>
+            <Female/>
+          </Route>
+          <Route path={'/team'}>
+            <Team/>
          </Route>
          <Route path={'/'}>
            <Login/>
@ -17,5 +35,6 @@ function App() {
      </HashRouter>
    );
  }
+}

 export default App;
--- a/src/Female.js
+++ b/src/Female.js
@ -0,0 +1,152 @@
+import React from "react";
+import {withStyles} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from "@material-ui/core/Typography";
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
+import Modal from "@material-ui/core/Modal";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import {Link} from "react-router-dom";
+
+const useStyles = theme => ({
+  buttonPaper: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    '& > *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+  modalPaper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+class Female extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      modalTitle: '',
+      modalContent: '',
+      programs: [{
+        program: '100',
+        handler: () => this.handleClick('100')
+      }, {
+        program: '200',
+        handler: () => this.handleClick('200')
+      }, {
+        program: '400',
+        handler: () => this.handleClick('400')
+      }, {
+        program: '800',
+        handler: () => this.handleClick('800')
+      }, {
+        program: '跳高',
+        handler: () => this.handleClick('跳高')
+      }, {
+        program: '跳远',
+        handler: () => this.handleClick('跳远')
+      }, {
+        program: '三级跳',
+        handler: () => this.handleClick('三级跳')
+      }, {
+        program: '铅球',
+        handler: () => this.handleClick('铅球')
+      }],
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  openModal(modalTitle, modalContent) {
+    this.setState({
+      modalTitle,
+      modalContent,
+    });
+    this.setState({'open': true});
+  }
+
+  handleCloseModal() {
+    this.setState({'open': false});
+  }
+
+  handleClick(program_name) {
+    const program_type = '女子';
+    fetch('/register', {
+      method: 'Post',
+      body: JSON.stringify({
+        program_type,
+        program_name,
+      })
+    })
+      .then(response => response.json())
+      .then(json => {
+        if (json.result === 'success') {
+          this.openModal('成功', '成功报名女子项目' + program_name);
+        } else {
+          this.openModal('失败', '报名女子项目' + program_name + '时失败');
+        }
+      });
+  }
+
+  render() {
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline/>
+        <div className={this.props.classes.buttonPaper}>
+          <Typography component="h1" variant="h4">
+            请选择项目
+          </Typography>
+          {
+            this.state.programs.map(item =>
+              <Button variant="contained"
+                      color="primary"
+                      className={this.props.classes.typeButton}
+                      onClick={() => item.handler()}>
+                {item.program}
+              </Button>)
+          }
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/type">
+            返回上级
+          </Button>
+        </div>
+        <Modal
+          aria-labelledby="transition-modal-title"
+          aria-describedby="transition-modal-description"
+          className={this.props.classes.modal}
+          open={this.state.open}
+          onClose={this.handleCloseModal}
+          closeAfterTransition
+          BackdropComponent={Backdrop}
+          BackdropProps={{
+            timeout: 500,
+          }}
+        >
+          <Fade in={this.state.open}>
+            <div className={this.props.classes.modalPaper}>
+              <h2 id="transition-modal-title">{this.state.modalTitle}</h2>
+              <p id="transition-modal-description">{this.state.modalContent}</p>
+            </div>
+          </Fade>
+        </Modal>
+      </Container>
+    );
+  }
+}
+
+export default withStyles(useStyles)(Female);
--- a/src/Login.js
+++ b/src/Login.js
@ -57,6 +57,22 @@ class Login extends React.Component {
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }

+  componentDidMount() {
+    if (document.cookie.includes('jwt')) {
+      fetch('/login', {
+        method: 'Post'
+      })
+        .then(response => response.json())
+        .then(json => {
+          if (json.result === 'success') {
+            this.props.history.push('/type');
+          } else {
+            this.handleOpenModal();
+          }
+        });
+    }
+  }
+
  handleOpenModal() {
    this.setState({open: true});
  }
@ -79,7 +95,7 @@ class Login extends React.Component {
      .then(response => response.json())
      .then(json => {
        if (json.result === 'success') {
-          this.props.history.push('/register');
+          this.props.history.push('/type');
        } else {
          this.handleOpenModal();
        }
--- a/src/Male.js
+++ b/src/Male.js
@ -0,0 +1,155 @@
+import React from "react";
+import {withStyles} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from "@material-ui/core/Typography";
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
+import Modal from "@material-ui/core/Modal";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import {Link} from "react-router-dom";
+
+const useStyles = theme => ({
+  buttonPaper: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    '& > *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+  modalPaper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+class Male extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      modalTitle: '',
+      modalContent: '',
+      programs: [{
+        program: '100',
+        handler: () => this.handleClick('100')
+      }, {
+        program: '200',
+        handler: () => this.handleClick('200')
+      }, {
+        program: '400',
+        handler: () => this.handleClick('400')
+      }, {
+        program: '800',
+        handler: () => this.handleClick('800')
+      }, {
+        program: '1500',
+        handler: () => this.handleClick('1500')
+      }, {
+        program: '跳高',
+        handler: () => this.handleClick('跳高')
+      }, {
+        program: '跳远',
+        handler: () => this.handleClick('跳远')
+      }, {
+        program: '三级跳',
+        handler: () => this.handleClick('三级跳')
+      }, {
+        program: '铅球',
+        handler: () => this.handleClick('铅球')
+      }],
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  openModal(modalTitle, modalContent) {
+    this.setState({
+      modalTitle,
+      modalContent,
+    });
+    this.setState({'open': true});
+  }
+
+  handleCloseModal() {
+    this.setState({'open': false});
+  }
+
+  handleClick(program_name) {
+    const program_type = '男子';
+    fetch('/register', {
+      method: 'Post',
+      body: JSON.stringify({
+        program_type,
+        program_name,
+      })
+    })
+      .then(response => response.json())
+      .then(json => {
+        if (json.result === 'success') {
+          this.openModal('成功', '成功报名男子项目' + program_name);
+        } else {
+          this.openModal('失败', '报名男子项目' + program_name + '时失败');
+        }
+      });
+  }
+
+  render() {
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline/>
+        <div className={this.props.classes.buttonPaper}>
+          <Typography component="h1" variant="h4">
+            请选择项目
+          </Typography>
+          {
+            this.state.programs.map(item =>
+              <Button variant="contained"
+                      color="primary"
+                      className={this.props.classes.typeButton}
+                      onClick={() => item.handler()}>
+                {item.program}
+              </Button>)
+          }
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/type">
+            返回上级
+          </Button>
+        </div>
+        <Modal
+          aria-labelledby="transition-modal-title"
+          aria-describedby="transition-modal-description"
+          className={this.props.classes.modal}
+          open={this.state.open}
+          onClose={this.handleCloseModal}
+          closeAfterTransition
+          BackdropComponent={Backdrop}
+          BackdropProps={{
+            timeout: 500,
+          }}
+        >
+          <Fade in={this.state.open}>
+            <div className={this.props.classes.modalPaper}>
+              <h2 id="transition-modal-title">{this.state.modalTitle}</h2>
+              <p id="transition-modal-description">{this.state.modalContent}</p>
+            </div>
+          </Fade>
+        </Modal>
+      </Container>
+    );
+  }
+}
+
+export default withStyles(useStyles)(Male);
--- a/src/Team.js
+++ b/src/Team.js
@ -0,0 +1,143 @@
+import React from "react";
+import {withStyles} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from "@material-ui/core/Typography";
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
+import Modal from "@material-ui/core/Modal";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import {Link} from "react-router-dom";
+
+const useStyles = theme => ({
+  buttonPaper: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    '& > *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+  modalPaper: {
+    backgroundColor: theme.palette.background.paper,
+    border: '2px solid #000',
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+class Team extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+      modalTitle: '',
+      modalContent: '',
+      programs: [{
+        program: '男子4*100',
+        handler: () => this.handleClick('男子4*100')
+      }, {
+        program: '女子4*100',
+        handler: () => this.handleClick('女子4*100')
+      }, {
+        program: '男子引体向上',
+        handler: () => this.handleClick('男子引体向上')
+      }, {
+        program: '女子仰卧起坐',
+        handler: () => this.handleClick('女子仰卧起坐')
+      }, {
+        program: '长绳',
+        handler: () => this.handleClick('长绳')
+      }],
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  openModal(modalTitle, modalContent) {
+    this.setState({
+      modalTitle,
+      modalContent,
+    });
+    this.setState({'open': true});
+  }
+
+  handleCloseModal() {
+    this.setState({'open': false});
+  }
+
+  handleClick(program_name) {
+    const program_type = '团体';
+    fetch('/register', {
+      method: 'Post',
+      body: JSON.stringify({
+        program_type,
+        program_name,
+      })
+    })
+      .then(response => response.json())
+      .then(json => {
+        if (json.result === 'success') {
+          this.openModal('成功', '成功报名团体项目' + program_name);
+        } else {
+          this.openModal('失败', '报名团体项目' + program_name + '时失败');
+        }
+      });
+  }
+
+  render() {
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline/>
+        <div className={this.props.classes.buttonPaper}>
+          <Typography component="h1" variant="h4">
+            请选择项目
+          </Typography>
+          {
+            this.state.programs.map(item =>
+              <Button variant="contained"
+                      color="primary"
+                      className={this.props.classes.typeButton}
+                      onClick={() => item.handler()}>
+                {item.program}
+              </Button>)
+          }
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/type">
+            返回上级
+          </Button>
+        </div>
+        <Modal
+          aria-labelledby="transition-modal-title"
+          aria-describedby="transition-modal-description"
+          className={this.props.classes.modal}
+          open={this.state.open}
+          onClose={this.handleCloseModal}
+          closeAfterTransition
+          BackdropComponent={Backdrop}
+          BackdropProps={{
+            timeout: 500,
+          }}
+        >
+          <Fade in={this.state.open}>
+            <div className={this.props.classes.modalPaper}>
+              <h2 id="transition-modal-title">{this.state.modalTitle}</h2>
+              <p id="transition-modal-description">{this.state.modalContent}</p>
+            </div>
+          </Fade>
+        </Modal>
+      </Container>
+    );
+  }
+}
+
+export default withStyles(useStyles)(Team);