kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

package/src/components/toolbar/main/Alert.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import ErrorIcon from '@material-ui/icons/Error';
+import InfoIcon from '@material-ui/icons/Info';
+import CloseIcon from '@material-ui/icons/Close';
+import { amber, green } from '@material-ui/core/colors';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
+import WarningIcon from '@material-ui/icons/Warning';
+import { makeStyles } from '@material-ui/core/styles';
+
+const variantIcon = {
+  success: CheckCircleIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon
+};
+
+const useStyles1 = makeStyles(theme => ({
+  success: {
+    backgroundColor: green[600]
+  },
+  error: {
+    backgroundColor: theme.palette.error.dark
+  },
+  info: {
+    backgroundColor: theme.palette.primary.main
+  },
+  warning: {
+    backgroundColor: amber[700]
+  },
+  icon: {
+    fontSize: 20
+  },
+  iconVariant: {
+    opacity: 0.9,
+    marginRight: theme.spacing(1)
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+}));
+
+function MySnackbarContentWrapper(props) {
+  const classes = useStyles1();
+  const { className, message, onClose, variant, ...other } = props;
+  const Icon = variantIcon[variant];
+
+  return (
+    <SnackbarContent
+      className={clsx(classes[variant], className)}
+      aria-describedby="client-snackbar"
+      message={
+        <span id="client-snackbar" className={classes.message}>
+          <Icon className={clsx(classes.icon, classes.iconVariant)} />
+          {message}
+        </span>
+      }
+      action={[
+        <IconButton
+          key="close"
+          aria-label="close"
+          color="inherit"
+          onClick={onClose}
+        >
+          <CloseIcon className={classes.icon} />
+        </IconButton>
+      ]}
+      {...other}
+    />
+  );
+}
+
+MySnackbarContentWrapper.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.string,
+  onClose: PropTypes.func,
+  variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired
+};
+
+export function Alert_Drawing_2D() {
+  const [open, setOpen] = React.useState(true);
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Snackbar
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'left'
+      }}
+      open={open}
+      autoHideDuration={6000}
+      onClose={handleClose}
+    >
+      <MySnackbarContentWrapper
+        onClose={handleClose}
+        variant="info"
+        style={{
+          position: 'fixed',
+          top: '90px',
+          paddingRight: '35px',
+          borderRadius: '6px',
+          textAlign: 'center',
+          zIndex: '11',
+          backgroundColor: '#409bc5',
+          left: 'calc(50% - 136px)'
+        }}
+        message="Press ESC key to finish drawing!"
+      />
+    </Snackbar>
+  );
+}

package/src/components/toolbar/main/TakePictureModal.jsx

@@ -0,0 +1,104 @@
+import React, { useState, useCallback } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Cropper from 'react-easy-crop';
+import { TakePictureDialog } from './styles';
+
+const DialogContent = withStyles(theme => ({
+  root: {
+    padding: theme.spacing(0),
+    minWidth: 550,
+    minHeight: 335,
+    '&:first-child': {
+      paddingTop: 0
+    }
+  }
+}))(MuiDialogContent);
+
+export default function TakePictureModal(props) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [cropped, setCropped] = useState({
+    width: 100,
+    height: 100,
+    x: 0,
+    y: 0
+  });
+  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
+    // console.log(croppedArea, croppedAreaPixels)
+    setCropped(croppedAreaPixels);
+  }, []);
+
+  return (
+    <TakePictureDialog
+      open={props.isModalVisible}
+      onClose={props.cancel}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogContent>
+        <Cropper
+          image={props.imageUri}
+          crop={crop}
+          zoom={zoom}
+          aspect={4 / 3}
+          onCropChange={setCrop}
+          onCropComplete={onCropComplete}
+          onZoomChange={setZoom}
+        />
+      </DialogContent>
+      <DialogActions style={{ backgroundColor: '#41403F' }}>
+        <Button
+          onClick={e => {
+            let img = new Image();
+            let canvas = document.createElement('canvas');
+            let ctx = canvas.getContext('2d');
+
+            // Set width and height for the new canvas
+            let heightAtt = document.createAttribute('height');
+            heightAtt.value = document.getElementsByClassName(
+              'reactEasyCrop_CropArea reactEasyCrop_CropAreaGrid'
+            )[0].clientHeight;
+            canvas.setAttributeNode(heightAtt);
+
+            let widthAtt = document.createAttribute('width');
+            widthAtt.value = document.getElementsByClassName(
+              'reactEasyCrop_CropArea reactEasyCrop_CropAreaGrid'
+            )[0].clientWidth;
+            canvas.setAttributeNode(widthAtt);
+
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            img.crossOrigin = 'anonymous';
+            img.src = props.imageUri;
+
+            img.onload = () => {
+              ctx.drawImage(
+                img,
+                cropped.x,
+                cropped.y,
+                cropped.width,
+                cropped.height,
+                0,
+                0,
+                canvas.width,
+                canvas.height
+              );
+              props.ok(canvas.toDataURL());
+            };
+          }}
+          color="primary"
+          style={{ minWidth: 80, marginLeft: '-35px' }}
+        >
+          Save
+        </Button>
+        <Button onClick={props.cancel} color="primary">
+          Cancel
+        </Button>
+      </DialogActions>
+    </TakePictureDialog>
+  );
+}

package/src/components/toolbar/main/confirm-popup.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import styled from 'styled-components';
+import Dialog from '@material-ui/core/Dialog';
+import {
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_1,
+  SECONDARY_PURPLE_COLOR,
+  BG_COLOR_HOVER
+} from '../../../constants';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+  }
+`;
+
+const StyledDialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 25px 30px;
+  padding-bottom: 10px;
+`;
+
+const StyledDialogAction = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  padding: 10px 30px 25px;
+`;
+
+const StyledButton = styled.div`
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-right: 10px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-weight: bold;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  border-radius: 20px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+class ConfirmPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  closePanel() {
+    this.props.handleConfirmLoad();
+  }
+  render() {
+    let { visible } = this.props;
+    return (
+      <StyledDialog open={visible} onClose={() => this.closePanel()}>
+        <StyledDialogContent>
+          All items will be removed from the canvas.
+          <br />
+          Are you sure?
+        </StyledDialogContent>
+        <StyledDialogAction>
+          <StyledButton onClick={() => this.props.submit()}>OK</StyledButton>
+          <StyledButton onClick={() => this.closePanel()}>Cancel</StyledButton>
+        </StyledDialogAction>
+      </StyledDialog>
+      // <div style={{ width: '100%', height: '100%', display: visible ? 'block' : 'none', userSelect: 'none' }}>
+      //   <S.Div>
+      //     <div style={{ backgroundColor: '#1183B7', height: '30px', paddingRight: '6px' }}>
+      //       <div style={{ float: 'right', marginTop: '4px' }} onClick={() => this.closePanel()}>
+      //         <S.IconButton><FaTimes /></S.IconButton>
+      //       </div>
+      //     </div>
+      //     <div style={{ fontSize: 14, marginTop: 20, marginLeft: 40 }}>
+      //       All items will be removed from the canvas.<br/>
+      //       Are you sure?
+      //     </div>
+      //     <div style={{ fontSize: 12, display: 'flex', flexDirection: 'column', position: 'relative' }}>
+      //     </div>
+      //     <div style={{ display: 'flex', position: 'relative'}}>
+      //       <div style={{ width: '70px', marginLeft: '90px', marginTop: '15px', cursor: 'pointer' }} onClick={() => { this.props.submit()}}>
+      //         <img width={'80px'} style={{ float: 'right' }} src={'/assets/img/svg/toolbar/use_button.svg'} />
+      //         <S.ButtonTitle1>
+      //           {'Yes'}
+      //         </S.ButtonTitle1>
+      //       </div>
+      //       <div style={{ width: '70px', marginLeft: '40px', marginTop: '15px', cursor: 'pointer' }} onClick={() => this.closePanel()}>
+      //         <img width={'80px'} style={{ float: 'right' }} src={'/assets/img/svg/toolbar/cancel_button.svg'} />
+      //         <S.ButtonTitle2>
+      //           {'No'}
+      //         </S.ButtonTitle2>
+      //       </div>
+      //     </div>
+      //   </S.Div>
+      // </div>
+    );
+  }
+}
+
+export default ConfirmPopup;