1 files changed, 138 insertions, 0 deletions
diff --git a/src/RuzDialog.js b/src/RuzDialog.js
new file mode 100644
index 0000000..5a8e8ea
--- /dev/null
+++ b/src/RuzDialog.js
@@ -0,0 +1,138 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Dialog, DialogContent, DialogContentText, DialogTitle, DialogActions, Button, List } from '@material-ui/core';
+import { useMediaQuery, useTheme } from '@material-ui/core';
+import { Divider, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core';
+import { AppBar, Toolbar, IconButton, Typography } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+
+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',
+  },
+  mobileBar: {
+    position: 'relative',
+  },
+  mobileTitle: {
+    marginLeft: theme.spacing(2),
+    flex: 1,
+  },
+}));
+
+function RuzDialogCard(props) {
+  
+  return (
+    <ListItem alignItems="flex-start">
+      <ListItemText
+        primary={props.entry.description}
+      />
+    </ListItem>
+  )
+}
+
+function RuzDialogList(props) {
+  const item = props.item;
+  const classes = useStyles();
+
+  const entries = [
+    { description: `${item.building}` },
+    { description: `${item.lecturer}` },
+  ];
+
+  return (
+    <List className={classes.schedule}>
+      {entries.map(entry => {
+        return (
+          <React.Fragment>
+            <RuzDialogCard entry={entry} />
+            <Divider />
+          </React.Fragment>
+        );}
+      )}
+    </List>
+  )
+}
+
+function MobileNavBar(props) {
+
+  const classes = useStyles();
+  const closeAction = props.closeAction;
+  const title = props.title;
+
+  return (
+    <AppBar className={classes.mobileBar}>
+      <Toolbar>
+        <IconButton edge="start" color="inherit" onClick={closeAction} aria-label="close">
+          <CloseIcon />
+        </IconButton>
+        <Typography variant="h6" className={classes.mobileTitle}>
+          {title}
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default function RuzDialog(props) {
+  if (!props.open)
+    return <React.Fragment />
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const closeAction = props.dialogCloseAction;
+  
+  return (
+    <Dialog
+      fullScreen={isMobile}
+      fullWidth={true}
+      maxWidth="xs"
+      open={true}
+      onClose={closeAction}
+      aria-labelledby="ruz-dialog-title"
+    >
+      {
+        isMobile ? 
+        <MobileNavBar closeAction={closeAction} title={props.dialog.discipline} />
+        :
+        <DialogTitle id="responsive-dialog-title">{props.dialog.discipline}</DialogTitle>
+      }
+      <DialogContent>
+        <RuzDialogList item={props.dialog} />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={closeAction} color="primary" autoFocus>
+          close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}