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

package/src/components/catalog-view/catalog-item.jsx

@@ -0,0 +1,229 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FaPlusCircle as IconAdd } from 'react-icons/fa';
+import * as SharedStyle from '../../shared-style';
+import { API_SERVER_URL, MODE, MODE_IDLE } from '../../constants';
+import browserHistory from '../../@history';
+import axios from 'axios';
+import SnackBar from '../atoms/Snackbar/index';
+const AWS = require('aws-sdk');
+
+const s3 = new AWS.S3({
+  accessKeyId: process.env.REACT_APP_AWS_ID,
+  secretAccessKey: process.env.REACT_APP_AWS_SECRET
+});
+
+const STYLE_BOX = {
+  width: '14em',
+  height: '14em',
+  padding: '0.625em',
+  background: '#f7f7f9',
+  border: '1px solid #e1e1e8',
+  cursor: 'pointer',
+  position: 'relative',
+  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
+  borderRadius: '2px',
+  transition: 'all .15s ease-in-out',
+  WebkitTransition: 'all .15s ease-in-out',
+  alignSelf: 'center',
+  justifySelf: 'center'
+};
+
+const STYLE_BOX_HOVER = {
+  ...STYLE_BOX,
+  background: SharedStyle.SECONDARY_COLOR.main
+};
+
+const STYLE_TITLE = {
+  width: '100%',
+  textAlign: 'center',
+  display: 'block',
+  marginBottom: '.5em',
+  textTransform: 'capitalize'
+};
+
+const STYLE_TITLE_HOVER = {
+  ...STYLE_TITLE,
+  color: SharedStyle.COLORS.white
+};
+
+const STYLE_IMAGE_CONTAINER = {
+  width: '100%',
+  height: '8em',
+  position: 'relative',
+  overflow: 'hidden',
+  border: 'solid 1px #e6e6e6',
+  padding: 0,
+  margin: 0,
+  marginBottom: '5px'
+};
+
+const STYLE_IMAGE = {
+  position: 'absolute',
+  background: '#222',
+  width: '100%',
+  height: '100%',
+  backgroundSize: 'contain',
+  backgroundPosition: '50% 50%',
+  backgroundColor: SharedStyle.COLORS.white,
+  backgroundRepeat: 'no-repeat',
+  transition: 'all .2s ease-in-out'
+};
+
+const STYLE_IMAGE_HOVER = {
+  ...STYLE_IMAGE,
+  transform: 'scale(1.2)'
+};
+
+const STYLE_PLUS_HOVER = {
+  marginTop: '1.5em',
+  color: SharedStyle.SECONDARY_COLOR.main,
+  fontSize: '2em',
+  opacity: '0.7',
+  width: '100%'
+};
+
+const STYLE_DESCRIPTION = {
+  display: 'block',
+  display: '-webkit-box',
+  height: '2em',
+  margin: '0 auto',
+  fontSize: '0.75em',
+  fontStyle: 'italic',
+  lineHeight: '1em',
+  WebkitLineClamp: '2',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
+
+const STYLE_TAGS = {
+  listStyle: 'none',
+  margin: '0px',
+  padding: '0px',
+  fontSize: '11px',
+  marginBottom: '3px'
+};
+
+const STYLE_TAG = {
+  display: 'inline-block',
+  background: '#337ab7',
+  color: SharedStyle.COLORS.white,
+  padding: '1px 4px',
+  marginRight: '3px',
+  borderRadius: '3px'
+};
+
+const STYLE_ASSIGN_TAG = {
+  display: 'inline-block',
+  background: '#33b768',
+  color: SharedStyle.COLORS.white,
+  padding: '1px 4px',
+  marginRight: '3px',
+  borderRadius: '3px'
+};
+
+export default class CatalogItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hover: false, snackBarMessage: '', isSnackBarOpen: '' };
+  }
+
+  select(element) {
+    sessionStorage.setItem('projectTitle', element.title);
+    this.context.projectActions.rename(element.title);
+    sessionStorage.setItem('projectId', element.id);
+    sessionStorage.setItem('email', element.email);
+    const _self = this;
+    if (MODE === 'production') {
+      s3.getObject(
+        {
+          Bucket: process.env.REACT_APP_AWS_BUCKET_NAME,
+          Key: element.data
+        },
+        function (err, data) {
+          if (err !== null) {
+            console.log(err);
+            this.setState({
+              snackBarMessage: 'Something went wrong.',
+              isSnackBarOpen: true
+            });
+            return;
+          }
+          var fileData = data.Body.toString('utf-8');
+          const jsonData = JSON.parse(fileData);
+          _self.context.projectActions.loadProject(
+            jsonData,
+            this.props.categoryData
+          );
+        }
+      );
+    } else {
+      axios
+        .post(`${API_SERVER_URL}/api/project/loadPidData`, {
+          pid: element.id
+        })
+        .then(response => {
+          const jsonData = JSON.parse(response.data.data);
+          this.context.projectActions.loadProject(
+            jsonData,
+            this.props.categoryData
+          );
+        });
+    }
+    this.context.projectActions.setMode(MODE_IDLE);
+    const visualizerName = sessionStorage.getItem('visualizerName');
+    browserHistory.push({
+      pathname: `/${visualizerName}/project/${
+        element.role
+      }/${sessionStorage.getItem('jwt_access_token')}/${element.id}`
+    });
+  }
+
+  render() {
+    let element = this.props.element;
+    let hover = this.state.hover;
+    return (
+      <div
+        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
+        onClick={e => {
+          e.preventDefault(), this.select(element);
+        }}
+        onMouseEnter={e => this.setState({ hover: true })}
+        onMouseLeave={e => this.setState({ hover: false })}
+      >
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+        />
+        <b style={STYLE_TITLE}>{element.title}</b>
+        <div style={STYLE_IMAGE_CONTAINER}>
+          <div style={{ ...STYLE_IMAGE }}>
+            {hover ? <IconAdd style={STYLE_PLUS_HOVER} /> : null}
+          </div>
+        </div>
+        <ul style={STYLE_TAGS}>
+          {element.is_assistance_requested === 1 ? (
+            <li style={STYLE_ASSIGN_TAG}>Assign</li>
+          ) : null}
+          <li style={STYLE_TAG}>{element.saved_at}</li>
+        </ul>
+        {/* <div style={STYLE_DESCRIPTION}>{element.info.description}</div> */}
+      </div>
+    );
+  }
+}
+
+CatalogItem.propTypes = {
+  element: PropTypes.object.isRequired
+};
+
+CatalogItem.contextTypes = {
+  itemsActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired
+};

package/src/components/catalog-view/catalog-list.jsx

@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CatalogItem from './catalog-item';
+import CatalogBreadcrumb from './catalog-breadcrumb';
+import CatalogPageItem from './catalog-page-item';
+import CatalogTurnBackPageItem from './catalog-turn-back-page-item';
+import ContentContainer from '../style/content-container';
+import { API_SERVER_URL } from '../../constants';
+import ContentTitle from '../style/content-title';
+import * as SharedStyle from '../../shared-style';
+import axios from 'axios';
+import SnackBar from '../atoms/Snackbar/index';
+
+const containerStyle = {
+  position: 'fixed',
+  width: 'calc( 100% - 94px)',
+  height: 'calc( 100% - 71px)',
+  backgroundColor: '#FFF',
+  padding: '1em',
+  left: 90,
+  top: 70,
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  zIndex: 10
+};
+
+const itemsStyle = {
+  display: 'flex',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(14em, 1fr))',
+  gridGap: '10px',
+  marginTop: '1em'
+};
+
+const searchContainer = {
+  width: '100%',
+  height: '3em',
+  padding: '0.625em',
+  background: '#f7f7f9',
+  border: '1px solid #e1e1e8',
+  cursor: 'pointer',
+  position: 'relative',
+  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
+  borderRadius: '2px',
+  transition: 'all .2s ease-in-out',
+  WebkitTransition: 'all .2s ease-in-out',
+  marginBottom: '1em'
+};
+
+const searchText = {
+  width: '8em',
+  display: 'inline-block'
+};
+
+const searchInput = {
+  width: 'calc( 100% - 10em )',
+  height: '2em',
+  margin: '0',
+  padding: '0 1em',
+  border: '1px solid #EEE'
+};
+
+const historyContainer = {
+  ...searchContainer,
+  padding: '0.2em 0.625em'
+};
+
+const historyElementStyle = {
+  width: 'auto',
+  height: '2em',
+  lineHeight: '2em',
+  textAlign: 'center',
+  borderRadius: '1em',
+  display: 'inline-block',
+  cursor: 'pointer',
+  backgroundColor: SharedStyle.PRIMARY_COLOR.alt,
+  color: SharedStyle.PRIMARY_COLOR.text_main,
+  textTransform: 'capitalize',
+  margin: '0.25em',
+  padding: '0 1em'
+};
+
+export default class CatalogList extends Component {
+  constructor(props, context) {
+    super(props);
+
+    this.state = {
+      elementsToDisplay: [],
+      matchString: '',
+      matchedElements: [],
+      snackBarMessage: '',
+      isSnackBarOpen: false
+    };
+  }
+
+  componentDidMount() {
+    const self = this;
+    const user = self.props.param.params;
+    axios
+      .post(`${API_SERVER_URL}/api/project/loadProject`, {
+        userrole: user.role,
+        access_token: user.token,
+        env: 'front'
+      })
+      .then(response => {
+        const { success } = response.data;
+        if (success === true) {
+          const { projectElement } = response.data;
+          self.setState({ elementsToDisplay: projectElement });
+        } else
+          this.setState({
+            snackBarMessage: 'Loading project failed.',
+            isSnackBarOpen: true
+          });
+      });
+  }
+
+  render() {
+    let turnBackButton = <CatalogTurnBackPageItem key="back" />;
+    return (
+      <ContentContainer
+        width={this.props.width}
+        height={this.props.height}
+        style={{ ...containerStyle, ...this.props.style }}
+      >
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+        />
+        <ContentTitle>My Project Library</ContentTitle>
+        <div style={itemsStyle}>
+          {this.state.matchString === ''
+            ? [
+                turnBackButton,
+                // categoriesToDisplay.map(cat => <CatalogPageItem key={cat.name} page={cat} oldPage={currentCategory}/>),
+                this.state.elementsToDisplay.map(elem => (
+                  <CatalogItem
+                    key={elem.id}
+                    element={elem}
+                    categoryData={this.props.categoryData}
+                  />
+                ))
+              ]
+            : this.state.matchedElements.map(elem => (
+                <CatalogItem
+                  key={elem.id}
+                  element={elem}
+                  categoryData={this.props.categoryData}
+                />
+              ))}
+        </div>
+      </ContentContainer>
+    );
+  }
+}
+
+CatalogList.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  style: PropTypes.object
+};
+
+CatalogList.contextTypes = {
+  catalog: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired
+};

package/src/components/catalog-view/catalog-page-item.jsx

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MdNavigateNext } from 'react-icons/md';
+import * as SharedStyle from '../../shared-style';
+
+const STYLE_BOX = {
+  width: '14em',
+  height: '14em',
+  padding: '0.625em',
+  background: '#f7f7f9',
+  border: '1px solid #e1e1e8',
+  cursor: 'pointer',
+  position: 'relative',
+  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
+  borderRadius: '2px',
+  transition: 'all .2s ease-in-out',
+  WebkitTransition: 'all .2s ease-in-out',
+  alignSelf: 'center',
+  justifySelf: 'center'
+};
+
+const STYLE_BOX_HOVER = {
+  ...STYLE_BOX,
+  background: SharedStyle.SECONDARY_COLOR.main
+};
+
+const STYLE_TITLE = {
+  width: '100%',
+  position: 'absolute',
+  textAlign: 'center',
+  display: 'block',
+  marginBottom: '.5em',
+  padding: '1em',
+  textTransform: 'capitalize',
+  WebkitTransition: 'all .15s ease-in-out'
+};
+
+const STYLE_TITLE_HOVERED = {
+  ...STYLE_TITLE,
+  fontSize: '1.4em',
+  transform: 'translateY(-60px)',
+  color: 'rgb(28, 166, 252)',
+  marginTop: '0.5em'
+};
+
+const STYLE_NEXT_HOVER = {
+  position: 'absolute',
+  color: SharedStyle.SECONDARY_COLOR.main,
+  fontSize: '5em',
+  width: '100%'
+};
+
+const CONTAINER_DIV = {
+  background: SharedStyle.COLORS.white,
+  marginBottom: '5px',
+  border: 'solid 1px #EEE',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+
+export default class CatalogPageItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hover: false };
+  }
+
+  changePage(newPage) {
+    this.context.projectActions.changeCatalogPage(
+      newPage,
+      this.props.oldPage.name
+    );
+  }
+
+  render() {
+    let page = this.props.page;
+    let hover = this.state.hover;
+
+    return (
+      <div
+        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
+        onClick={e => this.changePage(page.name)}
+        onMouseEnter={e => this.setState({ hover: true })}
+        onMouseLeave={e => this.setState({ hover: false })}
+      >
+        {hover ? (
+          <div style={CONTAINER_DIV}>
+            <b style={STYLE_TITLE_HOVERED}>{page.label}</b>
+            <MdNavigateNext style={STYLE_NEXT_HOVER} />
+          </div>
+        ) : (
+          <div style={CONTAINER_DIV}>
+            <b style={STYLE_TITLE}>{page.label}</b>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+CatalogPageItem.propTypes = {
+  page: PropTypes.object.isRequired,
+  oldPage: PropTypes.object.isRequired
+};
+
+CatalogPageItem.contextTypes = {
+  projectActions: PropTypes.object.isRequired
+};

package/src/components/catalog-view/catalog-turn-back-page-item.jsx

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MdNavigateBefore } from 'react-icons/md';
+import * as SharedStyle from '../../shared-style';
+import { MODE_IDLE } from '../../constants';
+
+const STYLE_BOX = {
+  width: '14em',
+  height: '14em',
+  padding: '0.625em',
+  background: '#f7f7f9',
+  border: '1px solid #e1e1e8',
+  margin: '0.3em',
+  cursor: 'pointer',
+  position: 'relative',
+  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
+  borderRadius: '2px',
+  transition: 'all .2s ease-in-out',
+  WebkitTransition: 'all .2s ease-in-out'
+};
+
+const STYLE_BOX_HOVER = {
+  ...STYLE_BOX,
+  background: SharedStyle.SECONDARY_COLOR.main
+};
+
+const STYLE_BACK = {
+  position: 'absolute',
+  color: SharedStyle.COLORS.black,
+  fontSize: '5em',
+  width: '100%'
+};
+
+const STYLE_BACK_HOVER = {
+  ...STYLE_BACK,
+  color: SharedStyle.SECONDARY_COLOR.main
+};
+
+const CONTAINER_DIV = {
+  background: SharedStyle.COLORS.white,
+  marginBottom: '5px',
+  border: 'solid 1px #e6e6e6',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+};
+
+export default class CatalogTurnBackPageItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hover: false };
+  }
+
+  changePage() {
+    this.context.projectActions.setMode(MODE_IDLE);
+  }
+
+  render() {
+    let hover = this.state.hover;
+
+    return (
+      <div
+        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
+        onClick={e => this.changePage()}
+        onMouseEnter={e => this.setState({ hover: true })}
+        onMouseLeave={e => this.setState({ hover: false })}
+      >
+        <div style={CONTAINER_DIV}>
+          <MdNavigateBefore style={!hover ? STYLE_BACK : STYLE_BACK_HOVER} />
+        </div>
+      </div>
+    );
+  }
+}
+
+CatalogTurnBackPageItem.contextTypes = {
+  projectActions: PropTypes.object.isRequired
+};

package/src/components/configurator/custom-configurator.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  ContentTitle,
+  ContentContainer,
+  FormLabel,
+  FormBlock,
+  FormNumberInput,
+  FormSubmitButton,
+  CancelButton
+} from '../style/export';
+import SnackBar from '../atoms/Snackbar/index';
+
+export default class CustomConfigurator extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    let scene = props.state.scene;
+
+    this.state = {
+      dataWidth: scene.width,
+      dataHeight: scene.height,
+      isSnackBarOpen: false,
+      message: ''
+    };
+  }
+
+  onSubmit(event) {
+    event.preventDefault();
+
+    let { projectActions } = this.context;
+
+    let { dataWidth, dataHeight } = this.state;
+    dataWidth = parseInt(dataWidth);
+    dataHeight = parseInt(dataHeight);
+    if (dataWidth <= 100 || dataHeight <= 100) {
+      this.setState({
+        isSnackBarOpen: true,
+        snackBarMessage: 'Scene size too small'
+      });
+    } else {
+      projectActions.setProjectProperties({
+        width: dataWidth,
+        height: dataHeight
+      });
+    }
+  }
+
+  render() {
+    let { width, height } = this.props;
+    let { dataWidth, dataHeight } = this.state;
+    let { projectActions, translator } = this.context;
+
+    return (
+      <ContentContainer width={width} height={height}>
+        <SnackBar
+          isOpen={this.state.isSnackBarOpen}
+          message={this.state.snackBarMessage}
+          handleClose={() =>
+            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
+          }
+        />
+      </ContentContainer>
+    );
+  }
+}
+
+CustomConfigurator.propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+CustomConfigurator.contextTypes = {
+  projectActions: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired
+};