1 files changed, 167 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Calendar/DetailEvent.js b/front/odiparpack/app/components/Calendar/DetailEvent.js
new file mode 100644
index 0000000..b25d8b9
--- /dev/null
+++ b/front/odiparpack/app/components/Calendar/DetailEvent.js
@@ -0,0 +1,167 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Today from '@material-ui/icons/Today';
+import { Typography, IconButton, Menu, MenuItem, Divider, Popover } from '@material-ui/core';
+import styles from './calendar-jss';
+
+
+const ITEM_HEIGHT = 48;
+
+class DetailEvent extends React.Component {
+  state = {
+    anchorElOpt: null,
+  };
+
+  handleClickOpt = event => {
+    this.setState({ anchorElOpt: event.currentTarget });
+  };
+
+  handleCloseOpt = () => {
+    this.setState({ anchorElOpt: null });
+  };
+
+  handleDeleteEvent = (event) => {
+    this.setState({ anchorElOpt: null });
+    this.props.remove(event);
+    this.props.close();
+  };
+
+  render() {
+    const getDate = date => {
+      if (date._isAMomentObject) {
+        return date.format('MMMM Do YYYY');
+      }
+      let dd = date.getDate();
+      const monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+      ];
+      const mm = monthNames[date.getMonth()]; // January is 0!
+      const yyyy = date.getFullYear();
+
+      if (dd < 10) {
+        dd = '0' + dd;
+      }
+
+      const convertedDate = mm + ', ' + dd + ' ' + yyyy;
+
+      return convertedDate;
+    };
+
+    const getTime = time => {
+      if (time._isAMomentObject) {
+        return time.format('LT');
+      }
+      let h = time.getHours();
+      let m = time.getMinutes();
+
+      if (h < 10) {
+        h = '0' + h;
+      }
+
+      if (m < 10) {
+        m = '0' + m;
+      }
+
+      const convertedTime = h + ':' + m;
+      return convertedTime;
+    };
+
+    const {
+      classes,
+      anchorEl,
+      event,
+      close,
+      anchorPos
+    } = this.props;
+    const { anchorElOpt } = this.state;
+    return (
+      <Popover
+        open={anchorEl}
+        anchorReference="anchorPosition"
+        anchorPosition={anchorPos}
+        className={classes.eventDetail}
+        onClose={close}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <IconButton
+          aria-label="More"
+          aria-owns={anchorElOpt ? 'long-menu' : null}
+          aria-haspopup="true"
+          className={classes.moreOpt}
+          onClick={this.handleClickOpt}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        {event !== null
+          && (
+            <Fragment>
+              <Menu
+                id="long-menu"
+                anchorEl={anchorElOpt}
+                open={Boolean(anchorElOpt)}
+                onClose={this.handleCloseOpt}
+                PaperProps={{
+                  style: {
+                    maxHeight: ITEM_HEIGHT * 4.5,
+                    width: 200,
+                  },
+                }}
+              >
+                <MenuItem onClick={() => this.handleDeleteEvent(event)}>
+                Delete Event
+                </MenuItem>
+              </Menu>
+              <Typography variant="h5" style={{ background: `#${event.hexColor}` }} className={classes.eventName}>
+                <Today />
+                {' '}
+                {event.title}
+              </Typography>
+              <div className={classes.time}>
+                <Typography>
+Start:
+                  {getDate(event.start)}
+                  {' '}
+-
+                  {getTime(event.start)}
+                </Typography>
+                <Divider className={classes.divider} />
+                <Typography>
+End:
+                  {getDate(event.end)}
+                  {' '}
+-
+                  {getTime(event.end)}
+                </Typography>
+              </div>
+            </Fragment>
+          )
+        }
+      </Popover>
+    );
+  }
+}
+
+DetailEvent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  anchorEl: PropTypes.bool.isRequired,
+  anchorPos: PropTypes.object.isRequired,
+  event: PropTypes.object,
+  close: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+};
+
+DetailEvent.defaultProps = {
+  event: null,
+};
+
+export default withStyles(styles)(DetailEvent);