M-Labs
/
web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Add options for the cards #93

Merged
sb10q merged 42 commits from esavkin/web2019:85-variants into master 2023-11-28 15:32:34 +08:00
Conversation 24 Commits 42 Files Changed 9 +465 -469
4 changed files with 465 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a4ff9f7057 - Show all commits

792
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@ -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": [

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

122
static/js/shop.jsx
View File

@ -6,7 +6,8 @@ import { createRoot } from "react-dom/client";
import PropTypes from "prop-types"; 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 { OverlayTrigger } from "react-bootstrap"; 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());
@ -619,37 +620,23 @@ class ProductCartItem extends React.PureComponent {
if (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:
@ -679,59 +666,45 @@ class ProductCartItem extends React.PureComponent {
{/* warning container */} {/* warning container */}
<OverlayTrigger <OverlayTrigger
placement="bottom" placement="bottom"
trigger={warning ? ['click', 'hover', 'focus'] : []} trigger={warning ? ['click', 'hover', 'focus'] : []}
overlay={ overlay={
warning ? (<div className="k-popup-warning"> ({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
<p className="rule warning"> <div className="k-popup-warning" {...props}>
<i>{warning.message}</i>
</p>
</div>) : null
}
rootClose
>
<div className="progress-container warning">
{warning && (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>)}
</div>
</OverlayTrigger>
<div
className="progress-container warning"
onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>
{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>)
)} }
</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>
@ -761,7 +734,7 @@ class ProductCartItem extends React.PureComponent {
<OverlayTrigger <OverlayTrigger
placement="top" placement="top"
trigger={['click', 'hover', 'focus']} trigger={['click', 'hover', 'focus']}
overlay={render_progress} overlay={({arrowProps, hasDoneInitialMeasure, show, ...props}) => (<div className="k-popup-connectors" {...props}>{render_progress}</div>)}
rootClose rootClose
> >
<div className="progress-container"> <div className="progress-container">
@ -2451,8 +2424,7 @@ class Shop extends React.PureComponent {
itemHovered={currentItemHovered} itemHovered={currentItemHovered}
onToggleOverlayRemove={this.handleToggleOverlayRemove} onToggleOverlayRemove={this.handleToggleOverlayRemove}
onClickRemoveItem={this.handleDeleteItem} onClickRemoveItem={this.handleDeleteItem}
onClickItem={this.handleShowOverlayRemove}> onClickItem={this.handleShowOverlayRemove}
onClickRemoveItem={this.handleDeleteItem}
onCardUpdate={this.handleCardsUpdated}> onCardUpdate={this.handleCardsUpdated}>
</Cart> </Cart>
} }