Compare commits
38 Commits
6596ba0f77
...
851b9014fb
Author | SHA1 | Date |
---|---|---|
Egor Savkin | 851b9014fb | |
Egor Savkin | db8897e5ad | |
Egor Savkin | 5a8df32e14 | |
Egor Savkin | 324dc98c15 | |
Egor Savkin | 4477cbfcac | |
Egor Savkin | c9786dc8cb | |
Egor Savkin | a06a8623c0 | |
Egor Savkin | 41ba846ac7 | |
Egor Savkin | 06498beaf1 | |
Egor Savkin | f43a59fbcc | |
Egor Savkin | 6e7248d83b | |
Egor Savkin | 7c7d3b4e42 | |
Egor Savkin | ab42fc4a31 | |
Egor Savkin | 5e500d397a | |
Egor Savkin | fe66ff3fa1 | |
Egor Savkin | 0eb24c181a | |
Egor Savkin | 9474c9a583 | |
Egor Savkin | 27aab21dd5 | |
Egor Savkin | f0cc548f28 | |
Egor Savkin | 714e2e14f7 | |
Egor Savkin | 6dd2eaf94c | |
Egor Savkin | 6ff3c2c6e7 | |
Egor Savkin | fb71584692 | |
Egor Savkin | 23d73286fa | |
Egor Savkin | 9779313524 | |
Egor Savkin | 02bdad3436 | |
Egor Savkin | 56f0241549 | |
Egor Savkin | d54d3b79e5 | |
Egor Savkin | 6ba388428d | |
Egor Savkin | e9236dac36 | |
Egor Savkin | e7107b02e8 | |
Egor Savkin | e13bcc7a86 | |
Egor Savkin | fe76d6d4e6 | |
Egor Savkin | 262eefc3a4 | |
Egor Savkin | 7fadbd7cdf | |
Egor Savkin | 00f2449167 | |
Egor Savkin | 1c6f5eb5fa | |
Egor Savkin | a5b217c183 |
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
|
@ -12,25 +12,25 @@
|
||||||
"url": "https://git.m-labs.hk/M-Labs/web2019.git"
|
"url": "https://git.m-labs.hk/M-Labs/web2019.git"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.22.6",
|
"@babel/cli": "^7.23.0",
|
||||||
"@babel/core": "^7.22.8",
|
"@babel/core": "^7.23.2",
|
||||||
"@babel/preset-env": "^7.22.7",
|
"@babel/preset-env": "^7.23.2",
|
||||||
"@babel/preset-react": "^7.22.5",
|
"@babel/preset-react": "^7.22.15",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.6.0",
|
||||||
"babel-loader": "^9.1.3",
|
"babel-loader": "^9.1.3",
|
||||||
"babel-preset-minify": "^0.5.2",
|
"babel-preset-minify": "^0.5.2",
|
||||||
"bootstrap": "^5.3.0",
|
"bootstrap": "^5.3.0",
|
||||||
"jquery": "^3.7.0",
|
"jquery": "^3.7.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-bootstrap": "^2.8.0",
|
"react-bootstrap": "^2.9.1",
|
||||||
"react-beautiful-dnd": "^13.1.1",
|
"react-beautiful-dnd": "^13.1.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"uuid": "^9.0.0",
|
"uuid": "^9.0.1",
|
||||||
"webpack": "^5.88.1",
|
"webpack": "^5.89.0",
|
||||||
"webpack-cli": "^5.1.4",
|
"webpack-cli": "^5.1.4",
|
||||||
"json-logic-js": "^2.0.2",
|
"json-logic-js": "^2.0.2",
|
||||||
"@uidotdev/usehooks": "^2.1.1"
|
"@uidotdev/usehooks": "^2.4.1"
|
||||||
},
|
},
|
||||||
"babel": {
|
"babel": {
|
||||||
"presets": [
|
"presets": [
|
||||||
|
|
|
@ -461,50 +461,6 @@ button {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-popup-connectors,
|
|
||||||
.k-popup-warning {
|
|
||||||
position: absolute;
|
|
||||||
background-color: $color-primary;
|
|
||||||
color: white;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: .6rem;
|
|
||||||
padding: .8rem 1rem;
|
|
||||||
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p + p {
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-popup-connectors {
|
|
||||||
min-width: 200px;
|
|
||||||
bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-popup-warning {
|
|
||||||
background-color: #c75e5e;
|
|
||||||
min-width: 350px;
|
|
||||||
|
|
||||||
.rule.warning {
|
|
||||||
display: flex;
|
|
||||||
font-size: .75rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 10px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-popup-warning.inverted {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlayRemove {
|
.overlayRemove {
|
||||||
|
@ -633,3 +589,42 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.k-popup-connectors,
|
||||||
|
.k-popup-warning {
|
||||||
|
background-color: $color-primary;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: .6rem;
|
||||||
|
padding: .8rem 1rem;
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p + p {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.k-popup-connectors {
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.k-popup-warning {
|
||||||
|
background-color: #c75e5e;
|
||||||
|
min-width: 300px;
|
||||||
|
|
||||||
|
.rule.warning {
|
||||||
|
display: flex;
|
||||||
|
font-size: .75rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 10px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,6 +7,7 @@ import PropTypes from "prop-types";
|
||||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||||
import { v4 as uuidv4 } from 'uuid';
|
import { v4 as uuidv4 } from 'uuid';
|
||||||
import { OptionsDialogPopup, OptionsSummaryPopup, FilterOptions, FillExtData } from "./shop_components.jsx";
|
import { OptionsDialogPopup, OptionsSummaryPopup, FilterOptions, FillExtData } from "./shop_components.jsx";
|
||||||
|
import { OverlayTrigger } from "react-bootstrap";
|
||||||
|
|
||||||
const data = window.shop_data;
|
const data = window.shop_data;
|
||||||
const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
|
const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
|
||||||
|
@ -533,17 +534,16 @@ class ProductCartItem extends React.PureComponent {
|
||||||
static get propTypes() {
|
static get propTypes() {
|
||||||
return {
|
return {
|
||||||
isMobile: PropTypes.bool,
|
isMobile: PropTypes.bool,
|
||||||
|
isTouch: PropTypes.bool,
|
||||||
hovered: PropTypes.bool,
|
hovered: PropTypes.bool,
|
||||||
index: PropTypes.number.isRequired,
|
index: PropTypes.number.isRequired,
|
||||||
model: PropTypes.object.isRequired,
|
model: PropTypes.object.isRequired,
|
||||||
data: PropTypes.object,
|
data: PropTypes.object,
|
||||||
ext_data: PropTypes.object,
|
ext_data: PropTypes.object,
|
||||||
onToggleProgress: PropTypes.func,
|
|
||||||
onToggleWarning: PropTypes.func,
|
|
||||||
onToggleOverlayRemove: PropTypes.func,
|
onToggleOverlayRemove: PropTypes.func,
|
||||||
onClickRemoveItem: PropTypes.func,
|
onClickRemoveItem: PropTypes.func,
|
||||||
|
onClickItem: PropTypes.func,
|
||||||
onCardUpdate: PropTypes.func,
|
onCardUpdate: PropTypes.func,
|
||||||
shouldTooltipWarningClassInverted: PropTypes.bool,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -555,47 +555,10 @@ class ProductCartItem extends React.PureComponent {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
|
|
||||||
this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
|
|
||||||
this.handleOnMouseEnterWarningItem = this.handleOnMouseEnterWarningItem.bind(this);
|
|
||||||
this.handleOnMouseLeaveWarningItem = this.handleOnMouseLeaveWarningItem.bind(this);
|
|
||||||
this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
|
this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
|
||||||
this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
|
this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
|
||||||
this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
|
this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
|
||||||
}
|
this.handleOnClickItem = this.handleOnClickItem.bind(this);
|
||||||
|
|
||||||
handleOnMouseEnterItem(index, e) {
|
|
||||||
if (this.props.onToggleProgress) {
|
|
||||||
this.props.onToggleProgress(index, true);
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOnMouseLeaveItem(index, e) {
|
|
||||||
if (this.props.onToggleProgress) {
|
|
||||||
this.props.onToggleProgress(index, false);
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOnMouseEnterWarningItem(index, isWarning, e) {
|
|
||||||
if (!isWarning) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.props.onToggleWarning) {
|
|
||||||
this.props.onToggleWarning(index, true);
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOnMouseLeaveWarningItem(index, isWarning, e) {
|
|
||||||
if (!isWarning) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.props.onToggleWarning) {
|
|
||||||
this.props.onToggleWarning(index, false);
|
|
||||||
}
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOnMouseEnterRemoveItem(index, e) {
|
handleOnMouseEnterRemoveItem(index, e) {
|
||||||
|
@ -612,6 +575,13 @@ class ProductCartItem extends React.PureComponent {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleOnClickItem(index, e) {
|
||||||
|
if (this.props.onClickItem && this.props.isTouch) {
|
||||||
|
this.props.onClickItem(index);
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
handleOnClickRemoveItem(index, e) {
|
handleOnClickRemoveItem(index, e) {
|
||||||
if (this.props.onClickRemoveItem) {
|
if (this.props.onClickRemoveItem) {
|
||||||
this.props.onClickRemoveItem(index);
|
this.props.onClickRemoveItem(index);
|
||||||
|
@ -625,7 +595,6 @@ class ProductCartItem extends React.PureComponent {
|
||||||
data,
|
data,
|
||||||
index,
|
index,
|
||||||
ext_data,
|
ext_data,
|
||||||
shouldTooltipWarningClassInverted,
|
|
||||||
onCardUpdate,
|
onCardUpdate,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
@ -648,40 +617,26 @@ class ProductCartItem extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
let render_progress;
|
let render_progress;
|
||||||
if (model.showProgress && data) {
|
if (data) {
|
||||||
switch(model.type) {
|
switch(model.type) {
|
||||||
case 'kasli':
|
case 'kasli':
|
||||||
render_progress = (
|
render_progress = [
|
||||||
<div className="k-popup-connectors">
|
(<p key={model.type+model.id+"EEM"}>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>),
|
||||||
<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
|
(<p key={model.type+model.id+"CLK"}>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>)
|
||||||
<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
|
];
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'vhdcicarrier':
|
case 'vhdcicarrier':
|
||||||
render_progress = (
|
render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>);
|
||||||
<div className="k-popup-connectors">
|
|
||||||
<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'zotino':
|
case 'zotino':
|
||||||
case 'hd68':
|
case 'hd68':
|
||||||
render_progress = (
|
render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>);
|
||||||
<div className="k-popup-connectors">
|
|
||||||
<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'clocker':
|
case 'clocker':
|
||||||
render_progress = (
|
render_progress = (<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>);
|
||||||
<div className="k-popup-connectors">
|
|
||||||
<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
|
@ -710,48 +665,52 @@ class ProductCartItem extends React.PureComponent {
|
||||||
>
|
>
|
||||||
|
|
||||||
{/* warning container */}
|
{/* warning container */}
|
||||||
<div
|
<OverlayTrigger
|
||||||
className="progress-container warning"
|
placement="bottom"
|
||||||
onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
|
trigger={warning ? ['click', 'hover', 'focus'] : []}
|
||||||
onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>
|
overlay={
|
||||||
|
({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
|
||||||
{warning ? (
|
<div className="k-popup-warning" {...props}>
|
||||||
<img className="alert-warning" src={`/images${warning.icon}`} />
|
|
||||||
) : (options ? (<OptionsDialogPopup
|
|
||||||
options={options}
|
|
||||||
data={options_data}
|
|
||||||
options_class={model.options_class}
|
|
||||||
key={"popover" + index}
|
|
||||||
id={"popover" + index}
|
|
||||||
big={model.size === "big"}
|
|
||||||
target={{
|
|
||||||
construct: ((outvar, value) => {
|
|
||||||
// console.log("construct", outvar, value, options_data);
|
|
||||||
options_data[outvar] = value;
|
|
||||||
}),
|
|
||||||
update: ((outvar, value) => {
|
|
||||||
// console.log("update", outvar, value, options_data);
|
|
||||||
if (outvar in options_data) options_data[outvar] = value;
|
|
||||||
onCardUpdate();
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>) : null) }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{warning && model.showWarning && (
|
|
||||||
<div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
|
|
||||||
<p className="rule warning">
|
<p className="rule warning">
|
||||||
<i>{warning.message}</i>
|
<i>{warning.message}</i>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>)
|
||||||
)}
|
}
|
||||||
</div>
|
rootClose
|
||||||
|
>
|
||||||
|
<div className="progress-container warning">
|
||||||
|
{warning ?
|
||||||
|
(<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>) :
|
||||||
|
(options && (
|
||||||
|
<OptionsDialogPopup
|
||||||
|
options={options}
|
||||||
|
data={options_data}
|
||||||
|
options_class={model.options_class}
|
||||||
|
key={"popover" + index}
|
||||||
|
id={"popover" + index}
|
||||||
|
big={model.size === "big"}
|
||||||
|
target={{
|
||||||
|
construct: ((outvar, value) => {
|
||||||
|
// console.log("construct", outvar, value, options_data);
|
||||||
|
options_data[outvar] = value;
|
||||||
|
}),
|
||||||
|
update: ((outvar, value) => {
|
||||||
|
// console.log("update", outvar, value, options_data);
|
||||||
|
if (outvar in options_data) options_data[outvar] = value;
|
||||||
|
onCardUpdate();
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</OverlayTrigger>
|
||||||
|
|
||||||
<h6>{model.name_number}</h6>
|
<h6>{model.name_number}</h6>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
|
onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
|
||||||
|
onClick={this.handleOnClickItem.bind(this, index)}
|
||||||
>
|
>
|
||||||
|
|
||||||
<img
|
<img
|
||||||
|
@ -771,26 +730,30 @@ class ProductCartItem extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* progression container */}
|
{/* progression container */}
|
||||||
<div
|
{render_progress && (
|
||||||
className="progress-container"
|
<OverlayTrigger
|
||||||
onMouseEnter={this.handleOnMouseEnterItem.bind(this, index)}
|
placement="top"
|
||||||
onMouseLeave={this.handleOnMouseLeaveItem.bind(this, index)}>
|
trigger={['click', 'hover', 'focus']}
|
||||||
|
overlay={({arrowProps, hasDoneInitialMeasure, show, ...props}) => (<div className="k-popup-connectors" {...props}>{render_progress}</div>)}
|
||||||
|
rootClose
|
||||||
|
>
|
||||||
|
<div className="progress-container">
|
||||||
|
|
||||||
{model.nbrSlotMax > 0 && (
|
{model.nbrSlotMax > 0 && (
|
||||||
<div className="nbr-connectors">
|
<div className="nbr-connectors">
|
||||||
<div style={{ ...nbrConnectorsStyle(data)}}></div>
|
<div style={{ ...nbrConnectorsStyle(data)}}></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{model.nbrClockMax > 0 && (
|
||||||
|
<div className="nbr-clocks">
|
||||||
|
<div style={{ ...nbrClocksStyle(data)}}></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</OverlayTrigger>
|
||||||
|
)}
|
||||||
|
|
||||||
{model.nbrClockMax > 0 && (
|
|
||||||
<div className="nbr-clocks">
|
|
||||||
<div style={{ ...nbrClocksStyle(data)}}></div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* progress info when mouse over */}
|
|
||||||
{render_progress}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -854,34 +817,30 @@ class Cart extends React.PureComponent {
|
||||||
static get propTypes() {
|
static get propTypes() {
|
||||||
return {
|
return {
|
||||||
isMobile: PropTypes.bool,
|
isMobile: PropTypes.bool,
|
||||||
|
isTouch: PropTypes.bool,
|
||||||
nbrSlots: PropTypes.number,
|
nbrSlots: PropTypes.number,
|
||||||
itemHovered: PropTypes.string,
|
itemHovered: PropTypes.string,
|
||||||
data: PropTypes.object.isRequired,
|
data: PropTypes.object.isRequired,
|
||||||
onToggleProgress: PropTypes.func,
|
|
||||||
onToggleWarning: PropTypes.func,
|
|
||||||
onToggleOverlayRemove: PropTypes.func,
|
onToggleOverlayRemove: PropTypes.func,
|
||||||
onClickRemoveItem: PropTypes.func,
|
onClickRemoveItem: PropTypes.func,
|
||||||
onCardUpdate: PropTypes.func,
|
onCardUpdate: PropTypes.func,
|
||||||
|
onClickItem: PropTypes.func,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
isMobile,
|
isMobile,
|
||||||
|
isTouch,
|
||||||
nbrSlots,
|
nbrSlots,
|
||||||
itemHovered,
|
itemHovered,
|
||||||
data,
|
data,
|
||||||
onToggleProgress,
|
|
||||||
onToggleWarning,
|
|
||||||
onToggleOverlayRemove,
|
onToggleOverlayRemove,
|
||||||
onClickRemoveItem,
|
onClickRemoveItem,
|
||||||
|
onClickItem,
|
||||||
onCardUpdate,
|
onCardUpdate,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
|
|
||||||
|
|
||||||
const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
|
|
||||||
|
|
||||||
const products = data.items.map((item, index) => {
|
const products = data.items.map((item, index) => {
|
||||||
let itemData;
|
let itemData;
|
||||||
let ext_data = FillExtData(data.itemsData, index);
|
let ext_data = FillExtData(data.itemsData, index);
|
||||||
|
@ -892,18 +851,17 @@ class Cart extends React.PureComponent {
|
||||||
return (
|
return (
|
||||||
<ProductCartItem
|
<ProductCartItem
|
||||||
isMobile={isMobile}
|
isMobile={isMobile}
|
||||||
|
isTouch={isTouch}
|
||||||
hovered={item.id === itemHovered}
|
hovered={item.id === itemHovered}
|
||||||
key={item.id}
|
key={item.id}
|
||||||
id={item.id}
|
id={item.id}
|
||||||
index={index}
|
index={index}
|
||||||
data={itemData}
|
data={itemData}
|
||||||
ext_data={ext_data}
|
ext_data={ext_data}
|
||||||
shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
|
|
||||||
onToggleProgress={onToggleProgress}
|
|
||||||
onToggleWarning={onToggleWarning}
|
|
||||||
onToggleOverlayRemove={onToggleOverlayRemove}
|
onToggleOverlayRemove={onToggleOverlayRemove}
|
||||||
onClickRemoveItem={onClickRemoveItem}
|
onClickRemoveItem={onClickRemoveItem}
|
||||||
onCardUpdate={onCardUpdate}
|
onCardUpdate={onCardUpdate}
|
||||||
|
onClickItem={onClickItem}
|
||||||
model={item}>
|
model={item}>
|
||||||
</ProductCartItem>
|
</ProductCartItem>
|
||||||
);
|
);
|
||||||
|
@ -1302,7 +1260,7 @@ class OrderForm extends React.PureComponent {
|
||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
onChange={handleNote}
|
onChange={handleNote}
|
||||||
value={note}
|
defaultValue={note}
|
||||||
rows="5"
|
rows="5"
|
||||||
placeholder="Additional notes" />
|
placeholder="Additional notes" />
|
||||||
|
|
||||||
|
@ -1310,7 +1268,7 @@ class OrderForm extends React.PureComponent {
|
||||||
<input
|
<input
|
||||||
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
|
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
|
||||||
style={{'cursor': 'pointer', 'fontWeight': '700'}}
|
style={{'cursor': 'pointer', 'fontWeight': '700'}}
|
||||||
value="Show JSON"
|
defaultValue="Show JSON"
|
||||||
onClick={onClickShow}
|
onClick={onClickShow}
|
||||||
readOnly={true} />
|
readOnly={true} />
|
||||||
|
|
||||||
|
@ -1665,11 +1623,10 @@ class Shop extends React.PureComponent {
|
||||||
this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
|
this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
|
||||||
this.handleClickAddItem = this.handleClickAddItem.bind(this);
|
this.handleClickAddItem = this.handleClickAddItem.bind(this);
|
||||||
this.checkAlerts = this.checkAlerts.bind(this);
|
this.checkAlerts = this.checkAlerts.bind(this);
|
||||||
this.handleToggleItemProgress = this.handleToggleItemProgress.bind(this);
|
|
||||||
this.handleToggleItemWarning = this.handleToggleItemWarning.bind(this);
|
|
||||||
this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
|
this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
|
||||||
this.handleClickSubmit = this.handleClickSubmit.bind(this);
|
this.handleClickSubmit = this.handleClickSubmit.bind(this);
|
||||||
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
|
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
|
||||||
|
this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
|
||||||
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
|
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
|
||||||
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
|
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
|
||||||
this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
|
this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
|
||||||
|
@ -1678,6 +1635,7 @@ class Shop extends React.PureComponent {
|
||||||
this.handleCardsUpdated = this.handleCardsUpdated.bind(this);
|
this.handleCardsUpdated = this.handleCardsUpdated.bind(this);
|
||||||
|
|
||||||
this.timer = null;
|
this.timer = null;
|
||||||
|
this.timer_remove = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -1801,50 +1759,6 @@ class Shop extends React.PureComponent {
|
||||||
}, tap);
|
}, tap);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleToggleItemProgress(index, show) {
|
|
||||||
const itemsCloned = Array.from(this.state.columns.cart.items);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: itemsCloned.map((item, i) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
showProgress: i === index ? show : false,
|
|
||||||
showOverlayRemove: false,
|
|
||||||
showWarning: false,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleToggleItemWarning(index, show) {
|
|
||||||
const itemsCloned = Array.from(this.state.columns.cart.items);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
...this.state,
|
|
||||||
columns: {
|
|
||||||
...this.state.columns,
|
|
||||||
cart: {
|
|
||||||
...this.state.columns.cart,
|
|
||||||
items: itemsCloned.map((item, i) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
showWarning: i === index ? show : false,
|
|
||||||
showProgress: false,
|
|
||||||
showOverlayRemove: false,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClickSelectItem(index) {
|
handleClickSelectItem(index) {
|
||||||
const itemsCloned = Array.from(this.state.columns.cart.items);
|
const itemsCloned = Array.from(this.state.columns.cart.items);
|
||||||
|
|
||||||
|
@ -1874,9 +1788,7 @@ class Shop extends React.PureComponent {
|
||||||
items: itemsCloned.map((item, id) => {
|
items: itemsCloned.map((item, id) => {
|
||||||
return {
|
return {
|
||||||
...item,
|
...item,
|
||||||
showOverlayRemove: id === index ? show : false,
|
showOverlayRemove: id === index ? show : false
|
||||||
showProgress: false,
|
|
||||||
showWarning: false,
|
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
|
@ -1884,6 +1796,17 @@ class Shop extends React.PureComponent {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleShowOverlayRemove(index) {
|
||||||
|
if (this.timer_remove)
|
||||||
|
clearTimeout(this.timer_remove);
|
||||||
|
|
||||||
|
this.handleToggleOverlayRemove(index, true);
|
||||||
|
|
||||||
|
this.timer_remove = setTimeout(() => {
|
||||||
|
this.handleToggleOverlayRemove(index, false);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
handleClickShowOrder() {
|
handleClickShowOrder() {
|
||||||
const crate = {
|
const crate = {
|
||||||
items: [],
|
items: [],
|
||||||
|
@ -2449,6 +2372,7 @@ class Shop extends React.PureComponent {
|
||||||
} = this.state;
|
} = this.state;
|
||||||
|
|
||||||
const isMobile = window.deviceIsMobile();
|
const isMobile = window.deviceIsMobile();
|
||||||
|
const isTouch = window.isTouchEnabled();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DragDropContext onDragEnd={this.handleOnDragEnd}>
|
<DragDropContext onDragEnd={this.handleOnDragEnd}>
|
||||||
|
@ -2496,11 +2420,11 @@ class Shop extends React.PureComponent {
|
||||||
nbrSlots={crateModeSlots[currentMode]}
|
nbrSlots={crateModeSlots[currentMode]}
|
||||||
data={columns['cart']}
|
data={columns['cart']}
|
||||||
isMobile={isMobile}
|
isMobile={isMobile}
|
||||||
|
isTouch={isTouch}
|
||||||
itemHovered={currentItemHovered}
|
itemHovered={currentItemHovered}
|
||||||
onToggleProgress={this.handleToggleItemProgress}
|
|
||||||
onToggleWarning={this.handleToggleItemWarning}
|
|
||||||
onToggleOverlayRemove={this.handleToggleOverlayRemove}
|
onToggleOverlayRemove={this.handleToggleOverlayRemove}
|
||||||
onClickRemoveItem={this.handleDeleteItem}
|
onClickRemoveItem={this.handleDeleteItem}
|
||||||
|
onClickItem={this.handleShowOverlayRemove}
|
||||||
onCardUpdate={this.handleCardsUpdated}>
|
onCardUpdate={this.handleCardsUpdated}>
|
||||||
</Cart>
|
</Cart>
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,7 +31,15 @@
|
||||||
return window.innerWidth < 768;
|
return window.innerWidth < 768;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isTouchEnabled() {
|
||||||
|
return ('ontouchstart' in window) ||
|
||||||
|
(navigator.maxTouchPoints > 0) ||
|
||||||
|
(navigator.msMaxTouchPoints > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
window.deviceIsMobile = deviceIsMobile;
|
window.deviceIsMobile = deviceIsMobile;
|
||||||
|
window.isTouchEnabled = isTouchEnabled;
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue