kitchen-simulator 5.0.0-test.5 → 5.0.0-test.7

package/src/components/button/ToggleMeasureButton.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Toggle = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 36px;
+  margin-left: 20px;
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  :hover {
+    box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+      0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+      0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+    border-radius: 18px;
+  }
+`;
+
+const ToggleIcon = styled.div`
+  ${'' /* transition-duration: .3s; */}
+  position: absolute;
+  top: 0px;
+  img {
+    font-size: 1.4rem;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+`;
+
+export default class ToggleMeasureButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    let { props } = this;
+    let activeStyle = props.showMeasure === 0 ? { left: 0 } : { right: 0 };
+    return (
+      <Toggle onClick={props.onClick} style={{ ...props.style }}>
+        {props.backgroundImage}
+        {[
+          props.icon !== undefined ? (
+            <ToggleIcon style={{ ...activeStyle }} key={props.icon}>
+              {props.icon}
+            </ToggleIcon>
+          ) : null
+        ]}
+      </Toggle>
+    );
+  }
+}
+
+ToggleMeasureButton.propTypes = {
+  title: PropTypes.string,
+  hover: PropTypes.bool,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func
+};

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MdArrowBack as Arrow } from 'react-icons/md';
+import * as SharedStyle from '../../shared-style';
+
+const breadcrumbStyle = {
+  margin: '1.5em',
+  display: 'flex'
+};
+
+const breadcrumbTextStyle = {
+  fontSize: '20px',
+  cursor: 'pointer'
+};
+
+const breadcrumbLastTextStyle = {
+  ...breadcrumbTextStyle,
+  fontWeight: 'bolder',
+  color: SharedStyle.SECONDARY_COLOR.main
+};
+
+const breadcrumbTabStyle = {
+  fill: SharedStyle.COLORS.black,
+  fontSize: '24px',
+  marginLeft: '10px',
+  marginRight: '10px'
+};
+
+const CatalogBreadcrumb = ({ names }) => {
+  let labelNames = names.map((name, ind) => {
+    let lastElement = ind === names.length - 1;
+
+    return (
+      <div key={ind} style={{ display: 'flex' }}>
+        <div
+          style={!lastElement ? breadcrumbTextStyle : breadcrumbLastTextStyle}
+          onClick={name.action || null}
+        >
+          {name.name}
+        </div>
+        {!lastElement ? <Arrow style={breadcrumbTabStyle} /> : null}
+      </div>
+    );
+  });
+
+  return <div style={breadcrumbStyle}>{labelNames}</div>;
+};
+
+CatalogBreadcrumb.propTypes = {
+  names: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default CatalogBreadcrumb;

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
+};