1 files changed, 159 insertions, 0 deletions
diff --git a/src/RuzList.js b/src/RuzList.js
new file mode 100644
index 0000000..c31c4aa
--- /dev/null
+++ b/src/RuzList.js
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Link from '@material-ui/core/Link';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import Divider from '@material-ui/core/Divider';
+import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import { CircularProgress } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+import { useMediaQuery, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+
+import axios from 'axios';
+
+import RuzCard from './RuzCard.js';
+import RuzDialog from './RuzDialog.js';
+
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    marginTop: theme.spacing(3),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+  },
+  schedule: {
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  stickyHeader: {
+    background: 'inherit',
+  },
+  fixUl: {
+    padding: 0,
+    background: 'inherit',
+  },
+  centerProgress: {
+    position: 'absolute',
+    top: '50%',
+    verticalAlign: 'middle',
+  },
+  dateHeader: {
+    textTransform: 'capitalize',
+    color: 'teal',
+  },
+}));
+
+
+function RuzListDate(props) {
+  const items = props.items;
+  const date = new Date(props.date);
+  const datestring = date.toLocaleDateString('ru-RU', {weekday: 'short', day: 'numeric', month: 'long'})
+  const classes = useStyles();
+
+  return (
+    <React.Fragment key={`ruzdate-inner-${props.date}`}>
+      <ListSubheader className={classes.dateHeader}>
+          {datestring}
+      </ListSubheader>
+      {
+        items.map(item => {
+          return (
+            <React.Fragment>
+              <RuzCard onClick={() => props.onClickForward(item)} item={item} />
+              <Divider variant="inset" />
+            </React.Fragment>
+          );
+        })
+      }
+    </React.Fragment>
+  );
+}
+
+
+export default function RuzList(props) {
+  const classes = useStyles();
+
+  const [ items, setItems ] = useState([]);
+  const [ needUpdate, setNeedUpdate ] = useState(true);
+  const [ openDialog, setOpenDialog ] = useState(null);
+
+  if (needUpdate) {
+    axios({
+      method: 'GET',
+      url: 'http://cors.hell.fcked.net/api/schedule/group/11235',
+      params: {
+        start: '2019.12.16',
+        finish: '2019.12.23',
+        lng: '1',
+      },
+    }).then(resp => {
+      setNeedUpdate(false);
+
+      const data = {};
+      for (let [id, item] of resp.data.entries()) {
+        if (!item) continue;
+        item.id = id;
+        item.date in data
+        ?
+          data[item.date].push(item)
+        :
+          data[item.date] = [item];
+      }
+      setItems(data);
+    });
+  }
+
+  console.log(openDialog);
+  const dialogCloseAction = () => {
+    setOpenDialog(null);
+  }
+
+  let progressBar = (<React.Fragment />);
+  if (needUpdate) {
+    progressBar =  (<CircularProgress className={classes.centerProgress} />);
+  }
+
+  const dates = [...Object.keys(items)].sort();
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <RuzDialog dialog={openDialog} open={openDialog !== null} dialogCloseAction={dialogCloseAction} />
+      <div className={classes.paper}>
+        <Avatar className={classes.avatar}>
+          <ScheduleIcon />
+        </Avatar>
+        {progressBar}
+        <List className={classes.schedule} hidden={items.needUpdate}>
+          {
+            dates.map(date => {
+              return (
+                <li key={`ruzdate-${date}`} className={classes.stickyHeader}>
+                  <ul className={classes.fixUl}>
+                    <RuzListDate onClickForward={setOpenDialog} items={items[date]} date={date} />
+                  </ul>
+                </li>
+              )
+            })
+          }
+        </List>
+      </div>
+    </Container>
+  );
+}