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

package/src/components/toolbar/plugin-item.jsx

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+import { FaFolderOpen } from 'react-icons/fa';
+import { MdSettings, MdUndo, MdDirectionsRun } from 'react-icons/md';
+
+//http://www.cssportal.com/css-tooltip-generator/
+
+const STYLE = {
+  width: '30px',
+  height: '30px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginBottom: '5px',
+  fontSize: '25px',
+  position: 'relative',
+  cursor: 'pointer'
+};
+
+const STYLE_TOOLTIP = {
+  position: 'absolute',
+  width: '140px',
+  color: SharedStyle.COLORS.white,
+  background: SharedStyle.COLORS.black,
+  height: '30px',
+  lineHeight: '30px',
+  textAlign: 'center',
+  visibility: 'visible',
+  borderRadius: '6px',
+  opacity: '0.8',
+  left: '100%',
+  top: '50%',
+  marginTop: '-15px',
+  marginLeft: '15px',
+  zIndex: '999',
+  fontSize: '12px'
+};
+
+const STYLE_TOOLTIP_PIN = {
+  position: 'absolute',
+  top: '50%',
+  right: '100%',
+  marginTop: '-8px',
+  width: '0',
+  height: '0',
+  borderRight: '8px solid #000000',
+  borderTop: '8px solid transparent',
+  borderBottom: '8px solid transparent'
+};
+
+const itemBtnStyle = {
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  float: 'left',
+  cursor: 'pointer',
+  margin: '5px',
+  padding: '4px',
+  borderColor: 'black'
+};
+
+const iconHoverStyle = {
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  float: 'left',
+  cursor: 'pointer',
+  margin: '5px',
+  padding: '4px',
+  borderColor: SharedStyle.MATERIAL_COLORS['500'].cyan
+};
+
+export default class PluginItem extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { active: false };
+  }
+
+  render() {
+    let { state, props } = this;
+    let placeholder;
+    let url = this.props.url;
+    let pname;
+    if (props.name.length > 8) {
+      pname = props.name.slice(0, 5);
+      pname += '...';
+    } else {
+      pname = props.name;
+    }
+    if (url == 'before')
+      placeholder = (
+        <MdUndo
+          style={{ fontSize: '50px', color: SharedStyle.PRIMARY_COLOR.icon }}
+        />
+      );
+    if (url == 'dir')
+      placeholder = (
+        <FaFolderOpen
+          style={{ fontSize: '50px', color: SharedStyle.PRIMARY_COLOR.icon }}
+        />
+      );
+    if (url !== 'before' && url !== 'dir')
+      placeholder = (
+        <img
+          src={this.props.url}
+          style={{ width: '50px', height: '50px' }}
+        ></img>
+      );
+    return (
+      <div
+        title={props.name}
+        onClick={props.onClick.bind(this, props.url, props.name, props.gltfUrl)}
+        onMouseOut={event => this.setState({ active: false })}
+        onMouseOver={event => this.setState({ active: true })}
+        style={this.state.active ? iconHoverStyle : itemBtnStyle}
+      >
+        {placeholder}
+        <p style={{ margin: 0, textAlign: 'center', fontSize: '70%' }}>
+          {pname}
+        </p>
+      </div>
+    );
+  }
+}

package/src/components/toolbar/popup/appliance/appliance-category/index.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import ToolbarPanel from '../../../../sidebar/toolbar-panel';
+import * as S from '../../styles';
+
+export const ApplianceCategory = ({
+  setStep,
+  action,
+  pData,
+  bFlag,
+  props,
+  doorExpand,
+  search,
+  onSearch,
+  mode
+}) => {
+  let result = [];
+  const [lastActiveName, setLastActiveName] = useState('');
+
+  for (let i = 0; i < pData.length; i++) {
+    let temp = [];
+    for (let j = 0; j < pData[i].items.length; j++) {
+      if (pData[i].items[j].type !== 'cabinet') {
+        var title = pData[i].items[j].name;
+        title = title.charAt(0).toUpperCase() + title.substr(1);
+
+        temp.push(
+          <S.ProductsRow
+            key={i.toString() + '-' + j.toString()}
+            style={{ width: '100%', padding: '8px 10px 8px' }}
+          >
+            <a
+              onClick={() => {
+                action(pData[i].items[j].name);
+              }}
+            >
+              <span>{title} </span>
+            </a>
+          </S.ProductsRow>
+        );
+      }
+    }
+    result.push(
+      <S.ItemWrapper key={i.toString()}>
+        <ToolbarPanel
+          lastActiveName={lastActiveName}
+          setLastActiveName={setLastActiveName}
+          onClose={() => {
+            action(-1);
+          }}
+          onOpen={() => {
+            action(pData[i].name);
+          }}
+          isUrl={true}
+          key={i.toString()}
+          name={pData[i].name}
+          url={pData[i].thumbnail}
+        >
+          {temp}
+        </ToolbarPanel>
+      </S.ItemWrapper>
+    );
+  }
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  return (
+    <S.CategoryContentWrapper
+      style={{ height: doorExpand ? height : nonHeight }}
+    >
+      {result}
+    </S.CategoryContentWrapper>
+  );
+};

package/src/components/toolbar/popup/appliance/choose-appliance/index.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { FaSearch, FaPlus, FaAngleLeft } from 'react-icons/fa';
+import * as S from '../../styles';
+
+import Appliance from '../../product/appliance';
+import {
+  API_SERVER,
+  MODE_IDLE,
+  MODE_3D_VIEW,
+  MODE_3D_FIRST_PERSON,
+  MODE_VIEWING_CATALOG,
+  MODE_CONFIGURING_PROJECT,
+  MODE_IDLE_3D,
+  MODE_ROTATING_ITEM_3D,
+  MODE_DRAGGING_ITEM_3D,
+  MODE_2D_PAN,
+  MODE_DRAWING_ITEM_3D
+} from '../../../../../constants';
+
+export const ApplianceChooseProduct = ({
+  setStep,
+  action,
+  pData,
+  bFlag,
+  props,
+  doorExpand,
+  search,
+  dData,
+  onSearch,
+  mode,
+  isExpand,
+  closeAction
+}) => {
+  let applianceselect = name => {
+    select(props.catalog.elements[name]);
+  };
+
+  let select = element => {
+    props.projectActions.unselectAll();
+    switch (element.prototype) {
+      case 'lines':
+        props.linesActions.selectToolDrawingLine(element.name);
+        break;
+      case 'items':
+        [
+          MODE_IDLE_3D,
+          MODE_DRAWING_ITEM_3D,
+          MODE_DRAGGING_ITEM_3D,
+          MODE_ROTATING_ITEM_3D
+        ].includes(mode)
+          ? props.itemsActions.selectToolDrawingItem3D(element.name)
+          : props.itemsActions.selectToolDrawingItem(element.name);
+        break;
+      case 'holes':
+        props.holesActions.selectToolDrawingHole(element.name);
+        break;
+    }
+    props.itemsActions.updatePopupOpen(3);
+    props.projectActions.pushLastSelectedCatalogElementToHistory(element);
+    closeAction && closeAction();
+  };
+
+  let products = [];
+
+  if (pData.length > 0) {
+    for (let i = 0; i < pData.length; i++) {
+      products.push(
+        <S.ItemWrapper key={i.toString()} style={{ justifyContent: 'center' }}>
+          <Appliance
+            name={'appliance'}
+            onClick={() => {
+              applianceselect(pData[i].name);
+            }}
+            url={pData[i].thumbnail}
+            title={pData[i].name}
+            selected={pData[i].selected ? pData[i].selected : null}
+          />
+        </S.ItemWrapper>
+      );
+    }
+  }
+  let miHeight = bFlag ? 28 : 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  return (
+    <S.ProductsContentWrapper
+      style={{
+        width: isExpand === 1 ? 400 : 220,
+        height: doorExpand ? height : nonHeight
+      }}
+    >
+      {isExpand === 1 ? (
+        <S.ItemWrapper style={{ flexWrap: 'wrap', border: 'none' }}>
+          {products}
+        </S.ItemWrapper>
+      ) : (
+        products
+      )}
+    </S.ProductsContentWrapper>
+  );
+};

package/src/components/toolbar/popup/appliance/index.jsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+
+import { DoubleToolbarButtonWithPopup } from '../';
+
+import { ApplianceChooseProduct } from './choose-appliance/';
+import { ApplianceCategory } from './appliance-category';
+
+import { STEP_CABINET_CHOOSE_PRODUCT } from '../../../../constants';
+
+const ApplianceToolbarButton = ({
+  trigger,
+  action,
+  dataSource,
+  subData,
+  bFlag,
+  props,
+  dData,
+  isExpand,
+  expandAction,
+  closeAction,
+  cabinetCollapse,
+  doorCollapse,
+  doorExpand,
+  collapseAction,
+  searchCabinet,
+  search,
+  mode,
+  isOpen
+}) => {
+  const [step, setStep] = useState(STEP_CABINET_CHOOSE_PRODUCT);
+  let content = <div />;
+  let content1 = <div />;
+  content1 = (
+    <ApplianceChooseProduct
+      action={action}
+      pData={subData}
+      dData={dData}
+      bFlag={0}
+      doorExpand={doorExpand}
+      props={props}
+      setStep={setStep}
+      search={searchCabinet}
+      onSearch={search}
+      mode={mode}
+      isExpand={isExpand}
+      closeAction={closeAction}
+    ></ApplianceChooseProduct>
+  );
+  content = (
+    <ApplianceCategory
+      action={action}
+      pData={dataSource}
+      bFlag={bFlag}
+      doorExpand={doorExpand}
+      props={props}
+      setStep={setStep}
+      search={searchCabinet}
+      onSearch={search}
+      mode={mode}
+    ></ApplianceCategory>
+  );
+  return (
+    <DoubleToolbarButtonWithPopup
+      closeAction={closeAction}
+      isOpen={isOpen}
+      mode={mode}
+      isExpand={isExpand}
+      expandAction={expandAction}
+      style={{ minWidth: step >= 1 && isExpand == 1 ? '800px' : '600px' }}
+      order={3}
+      isDouble={subData.length}
+      collapse1={cabinetCollapse}
+      collapse2={doorCollapse}
+      collapseAction={collapseAction}
+      trigger={trigger}
+      children1={content1}
+    >
+      {content}
+    </DoubleToolbarButtonWithPopup>
+  );
+};
+
+export default ApplianceToolbarButton;

package/src/components/toolbar/popup/autosaveprompt/index.jsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import * as S from './styles';
+import Dialog from '@material-ui/core/Dialog';
+import { withStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+import {
+  TEXT_COLOR_NEUTRAL_2,
+  SECONDARY_PURPLE_COLOR,
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_1
+} from '../../../../constants';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+
+const StyledDialog = styled(Dialog)`
+  .MuiDialog-paperWidthSm {
+    border-radius: 10px;
+    padding: 32px;
+    width: 480px;
+  }
+`;
+
+const StyledMuiCheckbox = withStyles({
+  root: {
+    color: TEXT_COLOR_NEUTRAL_2,
+    '&$checked': {
+      color: SECONDARY_PURPLE_COLOR
+    }
+  },
+  checked: {}
+})(props => <Checkbox color="default" {...props} />);
+
+const DialogContents = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+`;
+class AutosavePromptPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { visible, isLeaving } = this.props;
+    if (isLeaving) {
+      return (
+        <StyledDialog open={visible} onClose={() => this.props.handleClose()}>
+          <S.DialogTitle>Leaving already?</S.DialogTitle>
+          <S.DialogContent>
+            <div>
+              <span>
+                <b>Let’s save your work so it’s here when you return.</b>
+              </span>
+            </div>
+            <br />
+            <div>
+              <span>
+                We’ll email you a link so you can easily pick up where you left
+                off.
+              </span>
+            </div>
+          </S.DialogContent>
+          <S.DialogAction>
+            <S.Button
+              onClick={() => {
+                this.props.handleClose();
+              }}
+            >
+              Cancel
+            </S.Button>
+            <S.Button
+              onClick={() => {
+                this.props.handleOk(true);
+              }}
+            >
+              Save
+            </S.Button>
+          </S.DialogAction>
+        </StyledDialog>
+      );
+    }
+
+    return (
+      <StyledDialog open={visible} onClose={() => this.props.handleClose()}>
+        <S.DialogTitle>Save Now?</S.DialogTitle>
+        <S.DialogContent>
+          <div>
+            <span>
+              <b>Looks like you’re making great progress!</b>
+            </span>
+          </div>
+          <br />
+          <div
+            style={{
+              marginBottom: '0.5rem'
+            }}
+          >
+            <span>Want to save your design so far?</span>
+          </div>
+          <div>
+            <span>
+              We’ll email you a link so you can easily pick up where you left
+              off.
+            </span>
+          </div>
+        </S.DialogContent>
+        <S.DialogAction>
+          <S.Button
+            onClick={() => {
+              this.props.handleClose();
+            }}
+          >
+            Cancel
+          </S.Button>
+          <S.Button
+            onClick={() => {
+              this.props.handleOk(true);
+            }}
+          >
+            Save
+          </S.Button>
+        </S.DialogAction>
+      </StyledDialog>
+    );
+  }
+}
+
+export default AutosavePromptPopup;

package/src/components/toolbar/popup/autosaveprompt/styles.css

@@ -0,0 +1,64 @@
+.container {
+  width: 60px;
+  position: relative;
+  padding-left: 20px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 13px;
+  width: 13px;
+  background-color: #eee;
+}
+
+/* On mouse-over, add a grey background color */
+.container:hover input ~ .checkmark {
+  background-color: #ccc;
+}
+
+/* When the checkbox is checked, add a blue background */
+.container input:checked ~ .checkmark {
+  background-color: #2196f3;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark:after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.container input:checked ~ .checkmark:after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.container .checkmark:after {
+  left: 4px;
+  top: 1px;
+  width: 3px;
+  height: 7px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}

package/src/components/toolbar/popup/autosaveprompt/styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import {
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_1
+} from '../../../../constants';
+
+export const DialogTitle = styled.span`
+  font-weight: bold;
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 26px;
+  margin-bottom: 1rem;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  margin-bottom: 32px;
+`;
+
+export const DialogAction = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const Button = 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};
+  }
+`;

package/src/components/toolbar/popup/cabinet/cabinet-category/index.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import ToolbarPanel from '../../../../sidebar/toolbar-panel';
+import * as S from '../../styles';
+
+export const CabinetCategory = ({
+  setStep,
+  action,
+  pData,
+  bFlag,
+  props,
+  doorExpand,
+  search,
+  onSearch,
+  mode
+}) => {
+  let result = [];
+  const [lastActiveName, setLastActiveName] = useState('');
+
+  for (let i = 0; i < pData.length; i++) {
+    let temp = [];
+    for (let j = 0; j < pData[i].items.length; j++) {
+      if (pData[i].items[j].type !== 'cabinet') {
+        var title = pData[i].items[j].name;
+        title = title.charAt(0).toUpperCase() + title.substr(1);
+
+        temp.push(
+          <S.ProductsRow
+            key={i.toString() + '-' + j.toString()}
+            style={{ width: '100%', padding: '8px 10px 8px' }}
+          >
+            <a
+              onClick={() => {
+                action(pData[i].items[j].name);
+              }}
+            >
+              <span>{title} </span>
+            </a>
+          </S.ProductsRow>
+        );
+      }
+    }
+    result.push(
+      <S.ItemWrapper key={i.toString()}>
+        <ToolbarPanel
+          lastActiveName={lastActiveName}
+          setLastActiveName={setLastActiveName}
+          onClose={() => {
+            action(-1);
+          }}
+          onOpen={() => {
+            action(pData[i].name);
+          }}
+          isUrl={true}
+          key={i.toString()}
+          name={pData[i].name}
+          url={pData[i].thumbnail}
+        >
+          {temp}
+        </ToolbarPanel>
+      </S.ItemWrapper>
+    );
+  }
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  return (
+    <S.CategoryContentWrapper
+      style={{ height: doorExpand ? height : nonHeight }}
+    >
+      {result}
+    </S.CategoryContentWrapper>
+  );
+};