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

package/src/components/myprojects/styles.js

@@ -0,0 +1,241 @@
+import {
+  BG_COLOR_0,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_1,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../constants';
+import styled from 'styled-components';
+import MyProjects from './index';
+
+export const DialogWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 60px;
+  width: 100%;
+  height: calc(100% - 60px);
+  display: flex;
+`;
+
+export const Dialog = styled.div`
+  position: relative;
+  margin: auto;
+  width: 600px;
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  user-select: none;
+  text-align: center;
+  border-radius: 10px;
+  z-index: 10;
+  background-color: rgb(255, 255, 255);
+  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);
+`;
+
+export const DialogTitle = styled.span`
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 30px;
+  text-align: left;
+`;
+
+export const DialogContent = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  padding: 10px 0px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: left;
+  width: 100%;
+`;
+
+export const DialogContentSelection = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0px;
+  max-height: calc(100vh - 300px);
+  overflow-y: scroll;
+`;
+
+export 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;
+`;
+
+export const SelectWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`;
+
+export const Select = styled.div`
+  border-bottom: 2px solid ${TEXT_COLOR_NEUTRAL_1};
+  width: 150px;
+  text-align: left;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  cursor: pointer;
+  :hover {
+    border-bottom-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const ArrowIcon = styled.img`
+  position: absolute;
+  width: 15px;
+  height: 9px;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  top: 10px;
+  right: 10px;
+  -webkit-mask-image: url(${props => props.maskImage});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const SelectOption = styled.span`
+  font-size: 13px;
+  padding: 12px 20px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const SearchInput = styled.input`
+  outline: 0;
+  border: 2px solid ${TEXT_COLOR_NEUTRAL_3};
+  height: 35px;
+  padding: 5px;
+  padding-left: 35px;
+  border-radius: 7px;
+`;
+
+export const MyProjectsTable = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MyProjectsThead = styled.div`
+  background-color: ${BG_COLOR_0};
+  display: flex;
+  align-items: center;
+  background-color: #fafaff;
+`;
+
+export const MyProjectsTh = styled.div`
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @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;
+  }
+  line-height: 13px;
+  text-align: left;
+  font-weight: 600;
+  margin: 5px;
+  line-height: normal;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+`;
+
+export const ActionButton = styled.div`
+  border-radius: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: ${SECONDARY_PURPLE_COLOR};
+  width: 35px;
+  height: 35px;
+  padding: 10px;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const TileItem = styled.div`
+  width: 150px;
+  display: flex;
+  flex-direction: column;
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @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;
+  }
+  line-height: 13px;
+  text-align: left;
+  font-weight: 600;
+  line-height: normal;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+  border-radius: 10px;
+  border: 2px solid #fafaff;
+  padding: 15px;
+  cursor: pointer;
+  margin: 10px;
+  :hover {
+    background-color: #fafaff;
+  }
+`;

package/src/components/sidebar/custom-accordion.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {},
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem'
+  }
+});
+
+const CustomAccordion = ({ icon, title, children, defaultExpanded }) => {
+  const classes = useStyles();
+
+  return (
+    <Accordion
+      style={{
+        boxShadow: 'none',
+        marginTop: '1rem'
+      }}
+      defaultExpanded={defaultExpanded}
+    >
+      <AccordionSummary
+        classes={{ content: classes.content, root: classes.root }}
+        expandIcon={<ExpandMoreIcon />}
+      >
+        {icon && icon}
+        {title && title}
+      </AccordionSummary>
+      <AccordionDetails
+        style={{
+          display: 'inherit'
+        }}
+      >
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default CustomAccordion;

package/src/components/sidebar/export.js

@@ -0,0 +1,15 @@
+import Sidebar from './sidebar';
+import Panel from './panel';
+import PanelLayers from './panel-layers';
+import PanelLayerElement from './panel-layer-elements';
+import PanelGuides from './panel-guides';
+
+export { Sidebar, Panel, PanelLayers, PanelLayerElement, PanelGuides };
+
+export default {
+  Sidebar,
+  Panel,
+  PanelLayers,
+  PanelLayerElement,
+  PanelGuides
+};

package/src/components/sidebar/panel-element-editor/attributes-editor/attributes-editor.jsx

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ItemAttributesEditor from './item-attributes-editor';
+import LineAttributesEditor from './line-attributes-editor';
+import HoleAttributesEditor from './hole-attributes-editor';
+
+export default function AttributesEditor({
+  element,
+  onUpdate,
+  onValid,
+  propertiesFormData,
+  catalog,
+  attributeFormData,
+  onConfigUpdate,
+  state,
+  internalState,
+  ...rest
+}) {
+  switch (element.prototype) {
+    case 'items':
+      return (
+        <ItemAttributesEditor
+          element={element}
+          onUpdate={onUpdate}
+          onValid={onValid}
+          propertiesFormData={propertiesFormData}
+          catalog={catalog}
+          attributeFormData={attributeFormData}
+          onConfigUpdate={onConfigUpdate}
+          state={state}
+          internalState={internalState}
+          {...rest}
+        />
+      );
+    case 'lines':
+      return (
+        <LineAttributesEditor
+          element={element}
+          onUpdate={onUpdate}
+          onValid={onValid}
+          attributeFormData={attributeFormData}
+          state={state}
+          {...rest}
+        />
+      );
+    case 'holes':
+      return (
+        <HoleAttributesEditor
+          element={element}
+          onUpdate={onUpdate}
+          propertiesFormData={propertiesFormData}
+          catalog={catalog}
+          onConfigUpdate={onConfigUpdate}
+          onValid={onValid}
+          attributeFormData={attributeFormData}
+          state={state}
+          {...rest}
+        />
+      );
+    case 'areas':
+      return null;
+  }
+
+  return null;
+}
+
+AttributesEditor.propTypes = {
+  element: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  attributeFormData: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired
+};

package/src/components/sidebar/panel-element-editor/attributes-editor/confirm-popup.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import * as S from '../../../toolbar/popup/floorplan/choose-floor/styles';
+import * as PS from '../../../toolbar/popup/styles';
+import { FaTimes } from 'react-icons/fa';
+
+class ConfirmPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  _submit() {
+    this.props.ok();
+    this.closePanel();
+  }
+  closePanel() {
+    this.props.handleConfirmLoad(false);
+  }
+  render() {
+    let { visible } = this.props;
+    return (
+      <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()}
+            >
+              <PS.IconButton>
+                <FaTimes />
+              </PS.IconButton>
+            </div>
+          </div>
+          <div style={{ fontSize: 14, marginTop: 20, marginLeft: 40 }}>
+            The item will be placed outside the floor plan
+            <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._submit();
+              }}
+            >
+              <img
+                width={'80px'}
+                style={{ float: 'right' }}
+                src={'/assets/img/svg/toolbar/cancel_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/use_button.svg'}
+              />
+              <S.ButtonTitle2>{'No'}</S.ButtonTitle2>
+            </div>
+          </div>
+        </S.Div>
+      </div>
+    );
+  }
+}
+
+export default ConfirmPopup;

package/src/components/sidebar/panel-element-editor/attributes-editor/hole-attributes-editor.jsx

@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { PropertyLengthMeasure } from '../../../../catalog/properties/export';
+import PropertyString from '../../../../catalog/properties/property-string';
+import {
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../../../constants';
+import styled from 'styled-components';
+
+const NumberInputMeasure = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 17px;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+  position: absolute;
+  right: 10px;
+  bottom: 12px;
+`;
+
+export default function HoleAttributesEditor(
+  {
+    element,
+    onUpdate,
+    propertiesFormData,
+    catalog,
+    attributeFormData,
+    onConfigUpdate,
+    state,
+    internalState,
+    filteredProperties,
+    shouldOnlyShowEditorOptions = false,
+    ...rest
+  },
+  { translator }
+) {
+  // let name = attributeFormData.has('name') ? attributeFormData.get('name') : element.name;
+  let offsetA = attributeFormData.has('offsetA')
+    ? attributeFormData.get('offsetA')
+    : element.offsetA;
+  let offsetB = attributeFormData.has('offsetB')
+    ? attributeFormData.get('offsetB')
+    : element.offsetA;
+  let unit = state.getIn([
+    'scene',
+    'layers',
+    state.scene.selectedLayer,
+    'unit'
+  ]);
+  const EditorOptions = () => {
+    return propertiesFormData.entrySeq().map(([propertyName, data]) => {
+      if (catalog.categoryHasElement('Windows', element.type)) {
+        if (['thickness', 'width', 'height'].includes(propertyName)) {
+          return null;
+        }
+      }
+      if (catalog.categoryHasElement('Doors', element.type)) {
+        if (
+          ['altitude', 'thickness', 'width', 'height'].includes(propertyName)
+        ) {
+          return null;
+        }
+      }
+      if (filteredProperties) {
+        if (filteredProperties.includes(propertyName)) return null;
+      }
+
+      let catalogElement = catalog.getElement(element.type);
+      // if ((catalogElement.info.has_single_door === undefined || catalogElement.info.has_single_door == false) && propertyName == 'flip_doorhandle') {
+      //   return null;
+      // }
+
+      let currentValue = data.get('currentValue'),
+        configs = data.get('configs');
+      let { Editor } = catalog.getPropertyType(configs.type);
+      return (
+        configs.type === 'length-measure' && (
+          <div style={{ position: 'relative' }} key={propertyName}>
+            <Editor
+              propertyName={propertyName}
+              value={currentValue}
+              configs={configs}
+              onUpdate={value => onConfigUpdate(propertyName, value)}
+              state={state}
+              sourceElement={element}
+              internalState={internalState}
+            />
+            <NumberInputMeasure>{unit}</NumberInputMeasure>
+          </div>
+        )
+      );
+    });
+  };
+
+  return (
+    <div>
+      {/* <PropertyString
+      value={name}
+      onUpdate={mapped => onUpdate('name', mapped)}
+      configs={{label: 'Name'}}
+      state={state}
+      {...rest}
+    /> */}
+      {EditorOptions()}
+      <div style={{ position: 'relative' }}>
+        <PropertyLengthMeasure
+          value={offsetA}
+          onUpdate={mapped => onUpdate('offsetA', mapped)}
+          configs={{
+            label: 'Offset Left',
+            min: 0,
+            max: Infinity,
+            precision: 2
+          }}
+          state={state}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </div>
+      <div style={{ position: 'relative' }}>
+        <PropertyLengthMeasure
+          value={offsetB}
+          onUpdate={mapped => onUpdate('offsetB', mapped)}
+          configs={{
+            label: 'Offset Right',
+            min: 0,
+            max: Infinity,
+            precision: 2
+          }}
+          state={state}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </div>
+    </div>
+  );
+}
+
+HoleAttributesEditor.propTypes = {
+  element: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  attributeFormData: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+HoleAttributesEditor.contextTypes = {
+  translator: PropTypes.object.isRequired
+};