From 94f321ecf748296d37768d4345fb9961b503623c Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Fri, 8 Dec 2023 16:39:28 +0800 Subject: [PATCH] Minimal summary and crate mode Signed-off-by: Egor Savkin --- static/js/shop/Cart.jsx | 5 +- static/js/shop/Crate.jsx | 18 +++- static/js/shop/CrateList.jsx | 10 +- static/js/shop/CrateMode.jsx | 4 +- static/js/shop/OrderSummary.jsx | 157 +++++++++++++----------------- static/js/shop/Shop.jsx | 26 ++++- static/js/shop/count_resources.js | 11 +++ 7 files changed, 124 insertions(+), 107 deletions(-) diff --git a/static/js/shop/Cart.jsx b/static/js/shop/Cart.jsx index e85bc94d..7e20658c 100644 --- a/static/js/shop/Cart.jsx +++ b/static/js/shop/Cart.jsx @@ -10,8 +10,9 @@ import {crate_type_to_hp, hp_to_slots, resource_counters} from "./count_resource * Component that displays a list of */ export function Cart({isMobile, isTouch, data, onToggleOverlayRemove, onClickRemoveItem, onCardUpdate, onClickItem}) { - const nbrOccupied = resource_counters.hp(data.items); + const nbrOccupied = hp_to_slots(resource_counters.hp(data.items, -1)); const nbrSlots = hp_to_slots(crate_type_to_hp(data.crate_type)); + console.log(nbrOccupied, nbrSlots); const products = data.items.map((item, index) => { let itemData; @@ -62,7 +63,7 @@ export function Cart({isMobile, isTouch, data, onToggleOverlayRemove, onClickRem )} )} diff --git a/static/js/shop/Crate.jsx b/static/js/shop/Crate.jsx index 805c82fd..5f722f05 100644 --- a/static/js/shop/Crate.jsx +++ b/static/js/shop/Crate.jsx @@ -7,16 +7,26 @@ import {CrateWarnings} from "./CrateWarnings.jsx"; * Component that displays the main crate with reminder rules. * It includes and rules */ -export function Crate({data, handleToggleOverlayRemove, handleDeleteItem, handleShowOverlayRemove, handleCardsUpdated, isMobile, isTouch, onDelete}) { +export function Crate({ + data, + handleToggleOverlayRemove, + handleDeleteItem, + handleShowOverlayRemove, + handleCardsUpdated, + isMobile, + isTouch, + onDelete, + onModeChange + }) { return (
- +
Delete crate
@@ -32,7 +42,7 @@ export function Crate({data, handleToggleOverlayRemove, handleDeleteItem, handle onCardUpdate={handleCardsUpdated}> - {1||(rules && rules.length > 0) && ( + {1 || (rules && rules.length > 0) && ( )}
diff --git a/static/js/shop/CrateList.jsx b/static/js/shop/CrateList.jsx index 98d4faad..f559519b 100644 --- a/static/js/shop/CrateList.jsx +++ b/static/js/shop/CrateList.jsx @@ -2,7 +2,7 @@ import React from 'react' import {Accordion} from "react-bootstrap"; import {Crate} from "./Crate.jsx"; -export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate}) { +export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate, onModeChange}) { const onClickAdd = (_) => { onAddCrate("crate" + Object.entries(crates).length); } @@ -13,7 +13,13 @@ export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate} Crate #{`${index}`} - + onModeChange(crate_id, new_mode)} + /> )} diff --git a/static/js/shop/CrateMode.jsx b/static/js/shop/CrateMode.jsx index 953c26f1..8e2aa20e 100644 --- a/static/js/shop/CrateMode.jsx +++ b/static/js/shop/CrateMode.jsx @@ -11,12 +11,10 @@ export function CrateMode({current, onChange}) { onChange(item)} href="#" role="button">{shared_data.crateModes[item].name} ))} ); } - -//onClick={onChange(this, item)} \ No newline at end of file diff --git a/static/js/shop/OrderSummary.jsx b/static/js/shop/OrderSummary.jsx index 9e81175c..aed8ccc1 100644 --- a/static/js/shop/OrderSummary.jsx +++ b/static/js/shop/OrderSummary.jsx @@ -3,7 +3,8 @@ import PropTypes from "prop-types"; import {SummaryPopup} from "./options/SummaryPopup.jsx"; import {formatMoney} from "./utils"; import {WarningIndicator} from "./CardWarnings.jsx"; - +import {total_order_price} from "./count_resources"; +import {data as shared_data} from "./utils"; /** * Components that displays the list of card that are used in the crate. @@ -14,10 +15,7 @@ export class OrderSummary extends PureComponent { static get propTypes() { return { currency: PropTypes.string, - modes: PropTypes.array, - currentMode: PropTypes.string, - summary: PropTypes.array, - itemsData: PropTypes.array, + crates: PropTypes.object, onDeleteItem: PropTypes.func, onDeleteAllItems: PropTypes.func, onMouseEnterItem: PropTypes.func, @@ -75,13 +73,10 @@ export class OrderSummary extends PureComponent { render() { const { currency, - modes, - currentMode, - summary, - itemsData, + crates } = this.props; - const mode = modes.find(elem => elem.id === currentMode); + const total_price = total_order_price(crates); return (
@@ -98,102 +93,82 @@ export class OrderSummary extends PureComponent { - - {mode && ( - - {mode.name} - -
- {`${currency} ${formatMoney(mode.price)}`} - - -
- -   - - - )} - - {[].map((item, index) => { - let alert, warning, options, options_data; - - if (itemsData[index] && itemsData[index].warnings) { - alert = itemsData[index]; - const warningsKeys = Object.keys(alert.warnings); - if (warningsKeys && warningsKeys.length > 0) { - warning = alert.warnings[warningsKeys[0]]; - } - } - options = itemsData[index] && itemsData[index].options; - options_data = itemsData[index] && itemsData[index].options_data; - const warnings = itemsData[index] && itemsData[index].show_warnings; - + {Object.entries(crates).map(([crate_id, crate], _i) => { + let crate_type = shared_data.crateModes[crate.crate_type]; return ( - - - -
{`${item.name_number} ${item.name} ${item.name_codename}`}
- - + + + {crate_type.name} -
- {`${currency} ${formatMoney(item.price)}`} +
+ {`${currency} ${formatMoney(crate_type.price)}`} - - -
- {(warnings && warnings.length > 0 ? ( - - ) : ( -   - ))} - {((options && options_data) ? ( - - ) : ( -   - ))} -
+ +   - - ); - })} - + + {crate.items.map((item, index) => { + let options = item && item.options; + let options_data = item && item.options_data; + const warnings = item && item.show_warnings; + + return ( + +
{`${item.name_number} ${item.name} ${item.name_codename}`}
+ + + +
+ {`${currency} ${formatMoney(item.price)}`} + + + +
+ {(warnings && warnings.length > 0 ? ( + + ) : ( +   + ))} + {((options && options_data) ? ( + + ) : ( +   + ))} +
+
+ + ); + })} + + )})} Price estimate
- {summary.length ? ( - `${currency} ${formatMoney(summary.reduce( - (prev, next) => { - return prev + next.price; - }, 0 - ) + mode.price)}` - ) : ( - `${currency} ${formatMoney(mode.price)}` - )} - + ${currency} ${formatMoney(total_price)} diff --git a/static/js/shop/Shop.jsx b/static/js/shop/Shop.jsx index 4dd5ed31..68614eee 100644 --- a/static/js/shop/Shop.jsx +++ b/static/js/shop/Shop.jsx @@ -50,6 +50,7 @@ export class Shop extends PureComponent { this.handleCardsUpdated = this.handleCardsUpdated.bind(this); this.onAddCrate = this.onAddCrate.bind(this); this.onDeleteCrate = this.onDeleteCrate.bind(this); + this.onCrateModeChange = this.onCrateModeChange.bind(this); this.timer = null; this.timer_remove = null; @@ -68,10 +69,10 @@ export class Shop extends PureComponent { index: 0, }; - /*this.handleOnDragEnd({ + this.handleOnDragEnd({ source, destination - });*/ + }); } componentDidUpdate(prevProps, prevState) { @@ -524,6 +525,22 @@ export class Shop extends PureComponent { this.setState(new_state); } + onCrateModeChange(crate_id, new_mode) { + let new_state = { + ...this.state, + columns: { + ...this.state.columns, + crates: { + ...this.state.columns.crates, + [crate_id]: { + ...this.state.columns.crates[crate_id], + crate_type: new_mode + } + } + }}; + this.setState(new_state); + } + render() { const { @@ -586,14 +603,13 @@ export class Shop extends PureComponent { isMobile={isMobile} onAddCrate={this.onAddCrate} onDeleteCrate={this.onDeleteCrate} + onModeChange={this.onCrateModeChange} /> } summaryPrice={ { + sum += shared_data.crateModes[crate.crate_type].price; + crate.items.forEach((item, _) => { + sum += item.price; + }); + }); + return sum; } \ No newline at end of file