-
-
-
- {mobileSideMenuShouldOpen ? (
- {main}
- ) : (
- {main}
- )}
-
- {isMobile && newCardJustAdded ? (
-
- );
- }
-}
-
-
-/**
- * Component that renders a product.
- * Used in the aside (e.g backlog of product)
- */
-class ProductItem extends React.PureComponent {
-
- static get propTypes() {
- return {
- id: PropTypes.string.isRequired,
- index: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- name_codename: PropTypes.string,
- price: PropTypes.number.isRequired,
- currency: PropTypes.string.isRequired,
- image: PropTypes.string.isRequired,
- specs: PropTypes.array,
- datasheet_file: PropTypes.string,
- datasheet_name: PropTypes.string,
- onClickAddItem: PropTypes.func,
- };
- }
-
- constructor(props) {
- super(props);
- this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
- }
-
- handleOnClickAddItem(id, tap, e) {
- if (this.props.onClickAddItem) {
- this.props.onClickAddItem(id, tap);
- }
- e.preventDefault();
- }
-
- render() {
- const {
- id,
- index,
- name,
- name_codename,
- price,
- currency,
- image,
- specs,
- datasheet_file,
- datasheet_name,
- } = this.props;
-
- const render_specs = (specs && specs.length > 0 && (
-
- ✓ added
-
- ) : null}
-
-
-
-
-
-
- 
- -
- {specs.map((spec, index) =>
-
- {spec} - )} -
-
-
- {datasheet_name}
-
-
- ));
-
- return (
-
-
-
- {name}
- {name_codename ? ( -{name_codename}
- ) : null } - -{`${currency} ${formatMoney(price)}`}
-
- {render_specs}
-
- {render_datasheet_link}
-
-
-
-
-
- {(provided, snapshot) => (
-
- 
-
- {/* Allows to simulate a clone */}
- {snapshot.isDragging && (
-
- )}
-
- )}
-
-
-
-
- {`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}
), - ({`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}
) - ]; - break; - - case 'vhdcicarrier': - render_progress = ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}
); - break; - - case 'zotino': - case 'hd68': - render_progress = ({`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}
); - break; - - case 'clocker': - render_progress = ({`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}
); - break; - - default: - break; - } - } - - return ( -
-
- {/* warning container */}
-
- (
- )}
-
-
-
- )}
-
-
- {warning &&
- ( (
- 
- )
- }
-
- {options && (
- {
- // 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();
- })
- }}
- />
- )}
-
-
-
-
)
- }
- rootClose
- >
- - {warning.message} -
-{model.name_number}
- -
-
- 
-
-
- {/* remove container */}
-
-
- 
-
-
-
- {/* progression container */}
- {render_progress && (
-
-
- Remove
-{render_progress}
)}
- rootClose
- >
-
-
- {model.nbrSlotMax > 0 && (
-
-
-
-
- )}
-
- {model.nbrClockMax > 0 && (
-
-
-
- )}
-
-
- {products}
-
- {provided.placeholder && (
-
- )}
-
-
- {provided.placeholder}
-
- )}
-
-
- {items.map(item => (
- {item.name}
- ))}
-
- );
- }
-}
-
-
-/**
- * Component that displays the main crate with reminder rules.
- * It includes
-
-
- );
- }
-}
-
-
-/**
- * Component that renders all things for order.
- * It acts like-a layout, this component do nothing more.
- */
-class OrderPanel extends React.PureComponent {
-
- static get propTypes() {
- return {
- title: PropTypes.string,
- description: PropTypes.element,
- crateMode: PropTypes.element,
- crate: PropTypes.element,
- summaryPrice: PropTypes.element,
- form: PropTypes.element,
- isMobile: PropTypes.bool,
- onClickToggleMobileSideMenu: PropTypes.func,
- onClickOpenImport: PropTypes.func,
- };
- }
-
- render() {
- const {
- title,
- description,
- crateMode,
- crate,
- summaryPrice,
- form,
- isMobile,
- onClickToggleMobileSideMenu,
- onClickOpenImport,
- } = this.props;
-
- return (
-
-
- {cart}
-
- {rules && rules.length > 0 && (
-
-
-
- {rules.map((rule, index) => (
-
- )}
-
- {rule.name}: {rule.message}
-
{title}
- -
-
-
- {description}
- - {crateMode} -
-
-
-
- {isMobile ? (
-
-
-
- ) : null}
-
- {crate}
-
-
-
-
-
-
- );
- }
-}
-
-
-/**
- * Components that displays the list of card that are used in the crate.
- * It is a summary of purchase
- */
-class OrderSumary extends React.PureComponent {
-
- static get propTypes() {
- return {
- currency: PropTypes.string,
- modes: PropTypes.array,
- currentMode: PropTypes.string,
- summary: PropTypes.array,
- itemsData: PropTypes.array,
- onDeleteItem: PropTypes.func,
- onDeleteAllItems: PropTypes.func,
- onMouseEnterItem: PropTypes.func,
- onMouseLeaveItem: PropTypes.func,
- onClickSelectItem: PropTypes.func,
- };
- }
-
- constructor(props) {
- super(props);
- this.handleOnDeleteItem = this.handleOnDeleteItem.bind(this);
- this.handleOnDeleteAllItems = this.handleOnDeleteAllItems.bind(this);
- this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
- this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
- this.handleOnClickSelectItem = this.handleOnClickSelectItem.bind(this);
- }
-
- handleOnDeleteItem(index, e) {
- if (this.props.onDeleteItem) {
- this.props.onDeleteItem(index);
- }
- e.preventDefault();
- }
-
- handleOnDeleteAllItems(e) {
- if (this.props.onDeleteAllItems) {
- this.props.onDeleteAllItems();
- }
- e.preventDefault();
- }
-
- handleOnMouseEnterItem(id, e) {
- if (this.props.onMouseEnterItem) {
- this.props.onMouseEnterItem(id);
- }
- e.preventDefault();
- }
-
- handleOnMouseLeaveItem(e) {
- if (this.props.onMouseLeaveItem) {
- this.props.onMouseLeaveItem();
- }
- e.preventDefault();
- }
-
- handleOnClickSelectItem(index, e) {
- if (e.target.tagName !== 'IMG') {
- if (this.props.onClickSelectItem) {
- this.props.onClickSelectItem(index);
- }
- }
- return e.preventDefault();
- }
-
- render() {
- const {
- currency,
- modes,
- currentMode,
- summary,
- itemsData,
- } = this.props;
-
- const mode = modes.find(elem => elem.id === currentMode);
-
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-
-/**
- * Component that renders the backlog in the aside
- */
-class Backlog extends React.PureComponent {
-
- static get propTypes() {
- return {
- currency: PropTypes.string,
- data: PropTypes.object.isRequired,
- items: PropTypes.object,
- isMobile: PropTypes.bool,
- onClickAddItem: PropTypes.func,
- onClickToggleMobileSideMenu: PropTypes.func,
- };
- }
-
- static get defaultProps() {
- return {
- items: {},
- };
- }
-
- render() {
- const {
- currency,
- data,
- items,
- onClickAddItem,
- onClickToggleMobileSideMenu,
- isMobile,
- } = this.props;
-
-
- const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
- items: groupItem.itemIds.map(itemId => items[itemId])
- }));
- let item_index = -1;
- const groups = ordered_groups.map((group, g_index) => {
- return (
- | - Remove all cards - - - | -|
| {mode.name} | -
-
- {`${currency} ${formatMoney(mode.price)}`}
-
-
-
-
-
- |
-
|
- {`${item.name_number} ${item.name} ${item.name_codename}`}
- |
-
-
-
- {`${currency} ${formatMoney(item.price)}`}
-
-
-
-
-
- {(warning ? (
-
- 
- ) : (
-
- ))}
- {((options && options_data) ? (
- |
-
| Price estimate | -
-
- {summary.length ? (
- `${currency} ${formatMoney(summary.reduce(
- (prev, next) => {
- return prev + next.price;
- }, 0
- ) + mode.price)}`
- ) : (
- `${currency} ${formatMoney(mode.price)}`
- )}
-
-
-
-
-
- |
-
-
- );
- }
- );
-
- return (
- - -
-
-
-
- {group.items.map(item => {
- item_index++;
- return (
-
-
-
- {isMobile ? (
-
- )}
-
-
-
-
- ) : null}
-
-
- {groups}
-
-
- {provided.placeholder && (
-
- {provided.placeholder}
-
- )}
-
+
+ );
+ }
+ );
+
+ return (
+ + +
+
+
+
+ {group.items.map(item => {
+ item_index++;
+ return (
+
+
+
+ {isMobile ? (
+
+ )}
+
+
+
+
+ ) : null}
+
+
+ {groups}
+
+
+ {provided.placeholder && (
+
+ {provided.placeholder}
+
+ )}
+
+ {warnings.map((warning, _i) => {
+ return (
+
)
+ }
+ rootClose
+ >
+ + {warning.message} +
+ ) + })} +
+
+ {products}
+
+ {provided.placeholder && (
+
+
+ )}
+
+
+ {provided.placeholder}
+
+ )}
+
+
+ {
+ modes_order.includes(crate.crate_mode) ? (
+
+ );
+
+}
\ No newline at end of file
diff --git a/static/js/shop/CrateList.jsx b/static/js/shop/CrateList.jsx
new file mode 100644
index 0000000..a382351
--- /dev/null
+++ b/static/js/shop/CrateList.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import {Accordion} from "react-bootstrap";
+import {Crate} from "./Crate";
+import {useShopStore} from "./shop_store";
+
+// #!render_count
+import {useRenderCount} from "@uidotdev/usehooks";
+
+export function CrateList() {
+ // #!render_count
+ const renderCount = useRenderCount();
+
+ const crates = useShopStore((state) => state.crates,
+ (a, b) => a.length === b.length);
+ const active_crate = useShopStore((state) => state.active_crate);
+ const onAddCrate = useShopStore((state) => state.newCrate);
+ const setActiveCrate = useShopStore((state) => state.setActiveCrate);
+
+ const onSelectHandler = (e) => {
+ // if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
+ if (e !== null)
+ setActiveCrate(e);
+ else
+ setActiveCrate("")
+ };
+
+ // #!render_count
+ console.log("CrateList renders: ", renderCount)
+ return (
+
+
+
+
+ ) : <>
+ }
+
+ onDeleteCrate(crate.id)}>
+ Delete crate
+
+
+
+
+
+
+
+
+ {modes_order.map((mode_name, _) => (
+ setMode(crate.id, mode_name)}
+ href="#"
+ role="button">{crate_modes[mode_name].name}
+ ))}
+
+ );
+}
\ No newline at end of file
diff --git a/static/js/shop/CrateWarnings.jsx b/static/js/shop/CrateWarnings.jsx
new file mode 100644
index 0000000..3c8e3fb
--- /dev/null
+++ b/static/js/shop/CrateWarnings.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import {LevelUI} from "./warnings";
+import {useShopStore} from "./shop_store";
+import {compareArraysWithIds} from "./utils";
+
+// #!render_count
+import {useRenderCount} from "@uidotdev/usehooks";
+
+
+export function CrateWarnings({crate_index}) {
+ // #!render_count
+ const renderCount = useRenderCount();
+
+ const crate_warnings = useShopStore(state => (state.crates[crate_index].warnings), compareArraysWithIds)
+
+ // #!render_count
+ console.log("CrateWarnings renders: ", renderCount)
+ return (
+
+ {crate_warnings.map((rule, index) => (
+
+ )
+}
\ No newline at end of file
diff --git a/static/js/shop/FakePlaceholder.jsx b/static/js/shop/FakePlaceholder.jsx
new file mode 100644
index 0000000..00f1a34
--- /dev/null
+++ b/static/js/shop/FakePlaceholder.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+/**
+ * Component that displays a placeholder inside crate.
+ * Allows to display how it remains space for the current crate.
+ */
+export function FakePlaceholder({isDraggingOver, nToDraw}) {
+ const fakePlaceholder = [];
+
+ for (let i = nToDraw; i > 0; i--) {
+ fakePlaceholder.push(
+
+ );
+ }
+
+ return (
+
+ {rule.message}
+
+
+
+
+ Input the JSON description below. Should be something like:
+
+ {JSONExample}
+
+