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

package/src/components/toolbar/popup/downloadsummary/showCabinetInfo.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import DownloadSummaryTemp from './downloadSummaryTemp';
+import * as constants from '../../../../constants';
+
+const ShowCabinetInfo = ({ productDATA, totalPrice, props }) => {
+  return (
+    <DownloadSummaryTemp config={props}>
+      <div style={{ marginBottom: '32px' }}>
+        <div
+          style={{
+            marginTop: '20px',
+            color: '#000F33',
+            fontSize: '17px',
+            fontFamily: 'Open Sans',
+            fontWeight: '700',
+            lineHeight: '45.9px',
+            wordWrap: 'break-word'
+          }}
+        >
+          {constants.LIST_PARTS}
+        </div>
+        <div
+          style={{
+            marginTop: 7,
+            color: '#434D63',
+            fontSize: '9px',
+            fontFamily: 'Open Sans',
+            fontWeight: '600',
+            lineHeight: '15px',
+            wordWrap: 'break-word'
+          }}
+        >
+          {constants.LIST_QUANTITIES}
+        </div>
+      </div>
+      <div style={{ marginTop: '30px', marginBottom: '30px' }}>
+        <div style={styles.tHeader}>
+          <div>{constants.PRODUCT}</div>
+          <div>{constants.SUBTOTAL}</div>
+        </div>
+        <div>
+          <div style={styles.tBody}>{productDATA}</div>
+          <div style={styles.totalPrice}>
+            <div>Total</div>
+            <div>${totalPrice}</div>
+          </div>
+        </div>
+      </div>
+    </DownloadSummaryTemp>
+  );
+};
+
+const styles = {
+  tHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '25px',
+    backgroundColor: '#FAFlAFF',
+    padding: '0 4px 0 20px',
+    color: '#565F77',
+    fontSize: '9px',
+    fontFamily: 'Open Sans',
+    fontWeight: '600',
+    lineHeight: '12px',
+    wordWrap: 'break-word'
+  },
+  tBody: {
+    color: '#000F33',
+    fontSize: '9px',
+    fontFamily: 'Open Sans',
+    fontWeight: '600',
+    lineHeight: '13px',
+    wordWrap: 'break-word'
+  },
+  totalPrice: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '25px',
+    backgroundColor: '#FAFAFF',
+    padding: '0 0 0 20px',
+    color: '#000F33',
+    marginTop: 12,
+    fontSize: '9px',
+    fontFamily: 'Open Sans',
+    fontWeight: '600',
+    lineHeight: '12px',
+    wordWrap: 'break-word'
+  }
+};
+
+export default ShowCabinetInfo;

package/src/components/toolbar/popup/downloadsummary/showElevation/showElevationView.jsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import DownloadSummaryTemp from '../downloadSummaryTemp';
+import {
+  DEFAULT_FONT_FAMILY,
+  ELEVATION_VIEW_KEYWORD,
+  ELEVATION_VIEW_TITLE,
+  MODE_BACK_ELEVATION_VIEW,
+  MODE_FRONT_ELEVATION_VIEW,
+  MODE_LEFT_ELEVATION_VIEW,
+  MODE_RIGHT_ELEVATION_VIEW,
+  TECHNICAL_VIEW
+} from '../../../../../constants';
+import {
+  almostEqual,
+  isFrontWall,
+  isBackWall,
+  isLeftWall,
+  isRightWall
+} from '../../../../../utils/geometry';
+import ViewerElevationDownLoad from './viewerElevationDownload';
+
+const ShowElevationView = ({ props, mode, setIsLoadingElevation }) => {
+  let newState = props.state.set('mode', mode);
+  const [hasWall, setHasWall] = useState(true);
+  useEffect(() => {
+    let layer = props.state.scene.getIn([
+      'layers',
+      props.state.scene.selectedLayer
+    ]);
+    if (!layer.lines.size) {
+      // alert("You must add a least one wall");
+      // return;
+      setHasWall(false);
+    } else {
+      let directLines = [];
+      layer.lines.toArray().forEach(line => {
+        let vertex0 = layer.vertices.get(line.vertices.get(0));
+        let vertex1 = layer.vertices.get(line.vertices.get(1));
+        let { x: x1, y: y1 } = vertex0;
+        let { x: x2, y: y2 } = vertex1;
+
+        switch (newState.mode) {
+          case MODE_FRONT_ELEVATION_VIEW:
+            if (isFrontWall(vertex0, vertex1)) {
+              directLines.push(line);
+            }
+            break;
+          case MODE_BACK_ELEVATION_VIEW:
+            if (isBackWall(vertex0, vertex1)) {
+              directLines.push(line);
+            }
+            break;
+          case MODE_LEFT_ELEVATION_VIEW:
+            if (isLeftWall(vertex0, vertex1)) {
+              directLines.push(line);
+            }
+            break;
+          case MODE_RIGHT_ELEVATION_VIEW:
+            if (isRightWall(vertex0, vertex1)) {
+              directLines.push(line);
+            }
+            break;
+          default:
+            break;
+        }
+      });
+      if (!directLines.length) {
+        setHasWall(false);
+      }
+    }
+  }, []);
+
+  return (
+    <DownloadSummaryTemp config={props.logoImage}>
+      <div style={{ marginBottom: '32px' }}>
+        <div
+          style={{
+            marginTop: '20px',
+            color: '#000F33',
+            fontSize: '17px',
+            fontFamily: DEFAULT_FONT_FAMILY,
+            fontWeight: '700',
+            lineHeight: '45.9px',
+            wordWrap: 'break-word'
+          }}
+        >
+          {ELEVATION_VIEW_TITLE[mode]}
+        </div>
+        <div
+          style={{
+            marginTop: 7,
+            color: '#434D63',
+            fontSize: '9px',
+            fontFamily: DEFAULT_FONT_FAMILY,
+            fontWeight: '600',
+            lineHeight: '15px',
+            wordWrap: 'break-word'
+          }}
+        >
+          {TECHNICAL_VIEW}
+        </div>
+      </div>
+      {hasWall ? (
+        <div style={{ height: 412 }}>
+          <ViewerElevationDownLoad
+            state={newState}
+            setIsLoadingElevation={setIsLoadingElevation}
+            catalog={props.catalog}
+          />
+        </div>
+      ) : (
+        <div style={Style.noWall}>
+          <h1>No {ELEVATION_VIEW_KEYWORD[mode]} Wall</h1>
+        </div>
+      )}
+    </DownloadSummaryTemp>
+  );
+};
+
+const Style = {
+  noWall: {
+    width: '342px',
+    height: '350px',
+    backgroundColor: 'lightgrey',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: '60px'
+  }
+};
+
+export default ShowElevationView;