Compare commits
37 Commits
851b9014fb
...
6596ba0f77
Author | SHA1 | Date |
---|---|---|
Egor Savkin | 6596ba0f77 | |
Egor Savkin | a72684332e | |
Egor Savkin | 3d5b2e4439 | |
Egor Savkin | 37ced5ad9c | |
Egor Savkin | 2bef354083 | |
Egor Savkin | f494d4c316 | |
Egor Savkin | 0e490dc196 | |
Egor Savkin | 777ea5b054 | |
Egor Savkin | fe9c70efd3 | |
Egor Savkin | f279bdbc58 | |
Egor Savkin | b3c4110ceb | |
Egor Savkin | e214827c71 | |
Egor Savkin | 5f848e84d3 | |
Egor Savkin | cf8db4726d | |
Egor Savkin | 6af84b3797 | |
Egor Savkin | ca6b1370b4 | |
Egor Savkin | f126430911 | |
Egor Savkin | 844f390b50 | |
Egor Savkin | e32aa93f86 | |
Egor Savkin | 3995cc8b98 | |
Egor Savkin | 2f13b6c295 | |
Egor Savkin | 8352336447 | |
Egor Savkin | f7bb485a86 | |
Egor Savkin | 02de69b6de | |
Egor Savkin | 30e0ef7d04 | |
Egor Savkin | ececcbd3b2 | |
Egor Savkin | 25195ca547 | |
Egor Savkin | c342791a58 | |
Egor Savkin | 3aa2c86b64 | |
Egor Savkin | 3638e9fdcd | |
Egor Savkin | 7ea515edcc | |
Egor Savkin | fac0ae43bb | |
Egor Savkin | 1d43cbc21f | |
Egor Savkin | cea4c74e52 | |
Egor Savkin | 2df40fc222 | |
Egor Savkin | cca2a721ad | |
Egor Savkin | 784cacb1f8 |
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.23.0",
|
"@babel/cli": "^7.22.6",
|
||||||
"@babel/core": "^7.23.2",
|
"@babel/core": "^7.22.8",
|
||||||
"@babel/preset-env": "^7.23.2",
|
"@babel/preset-env": "^7.22.7",
|
||||||
"@babel/preset-react": "^7.22.15",
|
"@babel/preset-react": "^7.22.5",
|
||||||
"axios": "^1.6.0",
|
"axios": "^1.4.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.9.1",
|
"react-bootstrap": "^2.8.0",
|
||||||
"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.1",
|
"uuid": "^9.0.0",
|
||||||
"webpack": "^5.89.0",
|
"webpack": "^5.88.1",
|
||||||
"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.4.1"
|
"@uidotdev/usehooks": "^2.1.1"
|
||||||
},
|
},
|
||||||
"babel": {
|
"babel": {
|
||||||
"presets": [
|
"presets": [
|
||||||
|
|
|
@ -461,6 +461,50 @@ 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 {
|
||||||
|
@ -589,42 +633,3 @@ 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,7 +7,6 @@ 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());
|
||||||
|
@ -534,16 +533,17 @@ 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,10 +555,47 @@ 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) {
|
||||||
|
@ -575,13 +612,6 @@ 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);
|
||||||
|
@ -595,6 +625,7 @@ class ProductCartItem extends React.PureComponent {
|
||||||
data,
|
data,
|
||||||
index,
|
index,
|
||||||
ext_data,
|
ext_data,
|
||||||
|
shouldTooltipWarningClassInverted,
|
||||||
onCardUpdate,
|
onCardUpdate,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
|
@ -617,26 +648,40 @@ class ProductCartItem extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
let render_progress;
|
let render_progress;
|
||||||
if (data) {
|
if (model.showProgress && data) {
|
||||||
switch(model.type) {
|
switch(model.type) {
|
||||||
case 'kasli':
|
case 'kasli':
|
||||||
render_progress = [
|
render_progress = (
|
||||||
(<p key={model.type+model.id+"EEM"}>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>),
|
<div className="k-popup-connectors">
|
||||||
(<p key={model.type+model.id+"CLK"}>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>)
|
<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
|
||||||
];
|
<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'vhdcicarrier':
|
case 'vhdcicarrier':
|
||||||
render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>);
|
render_progress = (
|
||||||
|
<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 = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>);
|
render_progress = (
|
||||||
|
<div className="k-popup-connectors">
|
||||||
|
<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'clocker':
|
case 'clocker':
|
||||||
render_progress = (<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>);
|
render_progress = (
|
||||||
|
<div className="k-popup-connectors">
|
||||||
|
<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
|
@ -665,52 +710,48 @@ class ProductCartItem extends React.PureComponent {
|
||||||
>
|
>
|
||||||
|
|
||||||
{/* warning container */}
|
{/* warning container */}
|
||||||
<OverlayTrigger
|
<div
|
||||||
placement="bottom"
|
className="progress-container warning"
|
||||||
trigger={warning ? ['click', 'hover', 'focus'] : []}
|
onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
|
||||||
overlay={
|
onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>
|
||||||
({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
|
|
||||||
<div className="k-popup-warning" {...props}>
|
{warning ? (
|
||||||
|
<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>
|
||||||
}
|
)}
|
||||||
rootClose
|
</div>
|
||||||
>
|
|
||||||
<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
|
||||||
|
@ -730,30 +771,26 @@ class ProductCartItem extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* progression container */}
|
{/* progression container */}
|
||||||
{render_progress && (
|
<div
|
||||||
<OverlayTrigger
|
className="progress-container"
|
||||||
placement="top"
|
onMouseEnter={this.handleOnMouseEnterItem.bind(this, index)}
|
||||||
trigger={['click', 'hover', 'focus']}
|
onMouseLeave={this.handleOnMouseLeaveItem.bind(this, index)}>
|
||||||
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>
|
||||||
)}
|
)}
|
||||||
|
@ -817,30 +854,34 @@ 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);
|
||||||
|
@ -851,17 +892,18 @@ 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>
|
||||||
);
|
);
|
||||||
|
@ -1260,7 +1302,7 @@ class OrderForm extends React.PureComponent {
|
||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
onChange={handleNote}
|
onChange={handleNote}
|
||||||
defaultValue={note}
|
value={note}
|
||||||
rows="5"
|
rows="5"
|
||||||
placeholder="Additional notes" />
|
placeholder="Additional notes" />
|
||||||
|
|
||||||
|
@ -1268,7 +1310,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'}}
|
||||||
defaultValue="Show JSON"
|
value="Show JSON"
|
||||||
onClick={onClickShow}
|
onClick={onClickShow}
|
||||||
readOnly={true} />
|
readOnly={true} />
|
||||||
|
|
||||||
|
@ -1623,10 +1665,11 @@ 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);
|
||||||
|
@ -1635,7 +1678,6 @@ 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() {
|
||||||
|
@ -1759,6 +1801,50 @@ 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);
|
||||||
|
|
||||||
|
@ -1788,7 +1874,9 @@ 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,
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
}
|
}
|
||||||
|
@ -1796,17 +1884,6 @@ 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: [],
|
||||||
|
@ -2372,7 +2449,6 @@ 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}>
|
||||||
|
@ -2420,11 +2496,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,15 +31,7 @@
|
||||||
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