feat: support `/get_list`

4 years ago · b4c47928f4
6 changed files with 269 additions and 0 deletions
--- a/src/App.js
+++ b/src/App.js
@ -4,6 +4,7 @@ import ProgramType from "./ProgramType";
 import Male from "./Male";
 import Female from "./Female";
 import Team from "./Team";
+import List from "./List";
 import {HashRouter, Switch, Route} from 'react-router-dom';

 class App extends React.Component {
@ -28,6 +29,9 @@ class App extends React.Component {
          <Route path={'/team'}>
            <Team/>
          </Route>
+          <Route path={'/list'}>
+            <List/>
+          </Route>
          <Route path={'/'}>
            <Login/>
          </Route>
--- a/src/Female.js
+++ b/src/Female.js
@ -124,6 +124,13 @@ class Female extends React.Component {
                  to="/type">
            返回上级
          </Button>
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/list">
+            查看当前名单
+          </Button>
        </div>
        <Modal
          aria-labelledby="transition-modal-title"
--- a/src/List.js
+++ b/src/List.js
@ -0,0 +1,181 @@
+import React from "react";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import Typography from "@material-ui/core/Typography";
+import {makeStyles, withStyles} from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+import IconButton from '@material-ui/core/IconButton';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import Box from "@material-ui/core/Box";
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
+import Modal from "@material-ui/core/Modal";
+import {Link} from "react-router-dom";
+import Button from "@material-ui/core/Button";
+
+const useRowStyles = makeStyles({
+  root: {
+    '& > *': {
+      borderBottom: 'unset',
+    },
+  },
+});
+
+
+function Row(props) {
+  const {row} = props;
+  const [open, setOpen] = React.useState(false);
+  const classes = useRowStyles();
+
+  return (
+    <React.Fragment>
+      <TableRow className={classes.root}>
+        <TableCell>
+          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+            {open ? '▲' : '▼'}
+          </IconButton>
+        </TableCell>
+        <TableCell component="th" scope="row">
+          {row.type}
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell style={{paddingBottom: 0, paddingTop: 0}} colSpan={2}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box margin={1}>
+              <Table size="small" aria-label="purchases">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>项目</TableCell>
+                    <TableCell>姓名</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {row.list.map(line => (
+                    <TableRow>
+                      <TableCell component="th" scope="row">
+                        {line[0]}
+                      </TableCell>
+                      <TableCell>
+                        {line[1]}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+}
+
+const useStyles = theme => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: '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 List extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      modalContent: '加载中',
+      list: [],
+    };
+  }
+
+  componentDidMount() {
+    if (document.cookie.includes('jwt')) {
+      fetch('/get_list', {
+        method: 'Post'
+      })
+        .then(response => response.json())
+        .then(json => {
+          if (json.result === 'success') {
+            this.setState({loading: false, list: json.list});
+          } else {
+            this.setState({modalContent: '加载失败'});
+          }
+        });
+    }
+  }
+
+  handleCloseModal() {
+    this.setState({loading: false});
+  }
+
+  render() {
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline/>
+        <div className={this.props.classes.paper}>
+          <Typography component="h1" variant="h4">
+            当前名单
+          </Typography>
+          <TableContainer component={Paper}>
+            <Table aria-label="collapsible table">
+              <TableBody>
+                {this.state.list && this.state.list.map(row => (
+                  <Row row={row}/>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <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.loading}
+          onClose={this.handleCloseModal}
+          closeAfterTransition
+          BackdropComponent={Backdrop}
+          BackdropProps={{
+            timeout: 500,
+          }}
+        >
+          <Fade in={this.state.loading}>
+            <div className={this.props.classes.modalPaper}>
+              <p id="transition-modal-description">{this.state.modalContent}</p>
+            </div>
+          </Fade>
+        </Modal>
+      </Container>
+    );
+  }
+}
+
+export default withStyles(useStyles)(List);
--- a/src/Male.js
+++ b/src/Male.js
@ -127,6 +127,13 @@ class Male extends React.Component {
                  to="/type">
            返回上级
          </Button>
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/list">
+            查看当前名单
+          </Button>
        </div>
        <Modal
          aria-labelledby="transition-modal-title"
--- a/src/ProgramType.js
+++ b/src/ProgramType.js
@ -0,0 +1,63 @@
+import React from "react";
+import {Link} from 'react-router-dom'
+import {withStyles} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from "@material-ui/core/Typography";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+
+const useStyles = theme => ({
+  buttonPaper: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    '& > *': {
+      marginTop: theme.spacing(2),
+    },
+  },
+});
+
+class ProgramType extends React.Component {
+  render() {
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline/>
+        <div className={this.props.classes.buttonPaper}>
+          <Typography component="h1" variant="h4">
+            请选择项目类型
+          </Typography>
+          <Button variant="contained"
+                  color="primary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/male">
+            男子
+          </Button>
+          <Button variant="contained"
+                  color="primary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/female">
+            女子
+          </Button>
+          <Button variant="contained"
+                  color="primary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/team">
+            团体
+          </Button>
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/list">
+            查看当前名单
+          </Button>
+        </div>
+      </Container>
+    );
+  }
+}
+
+export default withStyles(useStyles)(ProgramType);
--- a/src/Team.js
+++ b/src/Team.js
@ -115,6 +115,13 @@ class Team extends React.Component {
                  to="/type">
            返回上级
          </Button>
+          <Button variant="contained"
+                  color="secondary"
+                  className={this.props.classes.typeButton}
+                  component={Link}
+                  to="/list">
+            查看当前名单
+          </Button>
        </div>
        <Modal
          aria-labelledby="transition-modal-title"