From 4aa080fed702728705c0a7eaf46c8771339ddfe5 Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Tue, 3 Nov 2020 23:07:41 +0800
Subject: [PATCH] feat: support register

---
 public/favicon.ico | Bin 0 -> 4286 bytes
 src/App.js         |  47 ++++++++++----
 src/Female.js      | 152 ++++++++++++++++++++++++++++++++++++++++++++
 src/Login.js       |  18 +++++-
 src/Male.js        | 155 +++++++++++++++++++++++++++++++++++++++++++++
 src/Team.js        | 143 +++++++++++++++++++++++++++++++++++++++++
 6 files changed, 500 insertions(+), 15 deletions(-)
 create mode 100644 public/favicon.ico
 create mode 100644 src/Female.js
 create mode 100644 src/Male.js
 create mode 100644 src/Team.js

diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..bd1b49baf5269beea8bb312d99fa32c30778bdee
GIT binary patch
literal 4286
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

literal 0
HcmV?d00001

diff --git a/src/App.js b/src/App.js
index 041e63c..c40341e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,40 @@
 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() {
-  return (
-    <HashRouter>
-      <Switch>
-        <Route path={'/register'}>
-          <Register/>
-        </Route>
-        <Route path={'/'}>
-          <Login/>
-        </Route>
-      </Switch>
-    </HashRouter>
-  );
+class App extends React.Component {
+  componentDidMount() {
+    document.location.hash = '';
+  }
+
+
+  render() {
+    return (
+      <HashRouter>
+        <Switch>
+          <Route path={'/type'}>
+            <ProgramType/>
+          </Route>
+          <Route path={'/male'}>
+            <Male/>
+          </Route>
+          <Route path={'/female'}>
+            <Female/>
+          </Route>
+          <Route path={'/team'}>
+            <Team/>
+          </Route>
+          <Route path={'/'}>
+            <Login/>
+          </Route>
+        </Switch>
+      </HashRouter>
+    );
+  }
 }
 
 export default App;
diff --git a/src/Female.js b/src/Female.js
new file mode 100644
index 0000000..57a5d1d
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/src/Login.js b/src/Login.js
index 36d65b9..553e557 100644
--- 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();
         }
diff --git a/src/Male.js b/src/Male.js
new file mode 100644
index 0000000..cfb7f62
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/src/Team.js b/src/Team.js
new file mode 100644
index 0000000..eb795fa
--- /dev/null
+++ 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);
\ No newline at end of file