occheung/web2019
1
0
Fork 0
forked from M-Labs/web2019
Code Issues Pull Requests Projects Releases Wiki Activity

Make cards behavior working somewhat properly

Browse Source
This commit is contained in:
火焚 富良 2023-12-12 16:09:29 +08:00 committed by Egor Savkin
parent ec2c0a3b80
commit 6b92bf9145
13 changed files with 356 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/js/shop/Backlog.jsx
View File

@ -9,17 +9,13 @@ import {useShopStore} from "./shop_store";
*/
export function Backlog() {
const {
currency,
data,
items,
onClickAddItem,
onClickToggleMobileSideMenu,
isMobile,
} = useShopStore(state=> ({
currency: state.currency,
data: state.groups,
items: state.cards,
onClickAddItem: state.addCardFromBacklog,
onClickToggleMobileSideMenu: state.switchSideMenu,
isMobile: state.isMobile
}));
@ -46,20 +42,7 @@ export function Backlog() {
{group.items.map(item => {
item_index++;
return (
<ProductItem
key={item.id}
id={uuidv4()}
index={item_index}
name={`${item.name_number} ${item.name}`}
name_codename={item.name_codename}
price={item.price}
currency={currency}
image={`/images/${item.image}`}
specs={item.specs}
datasheet_file={item.datasheet_file}
datasheet_name={item.datasheet_name}
onClickAddItem={onClickAddItem}
></ProductItem>
<ProductItem card_index={item_index}/>
)
})}
</div>

20
static/js/shop/Cart.jsx
View File

@ -4,29 +4,23 @@ import {cartStyle} from "./utils";
import {ProductCartItem} from "./ProductCartItem.jsx";
import {FakePlaceholder} from "./FakePlaceholder.jsx";
import {FillExtData} from "./options/utils";
import {CountResources, crate_type_to_hp, hp_to_slots, resource_counters} from "./count_resources";
import {hp_to_slots, resource_counters} from "./count_resources";
import {useShopStore} from "./shop_store";
import {TriggerCardWarnings} from "./warnings";
/**
* Component that displays a list of <ProductCartItem>
*/
export function Cart({crate_index}) {
// isMobile, isTouch, crate, onToggleOverlayRemove, onClickRemoveItem, onCardUpdate, onClickItem
const {crate} = useShopStore(state => ({
crate: state.crates[crate_index]
const {crate, crateParams} = useShopStore(state => ({
crate: state.crates[crate_index],
crateParams: state.crateParams
}));
console.log(resource_counters, crate)
const nbrOccupied = hp_to_slots(resource_counters.hp(crate.items, -1));
const nbrSlots = hp_to_slots(crate_type_to_hp(crate.crate_mode));
console.log(nbrOccupied, nbrSlots);
const nbrOccupied = hp_to_slots(crate.occupiedHP);
const nbrSlots = hp_to_slots(crateParams(crate.crate_mode).hp);
const products = crate.items.map((item, index) => {
const ext_data = FillExtData(crate.items, index);
const resources = CountResources(crate.items, index);
const warnings = TriggerCardWarnings(crate.items, index, resources);
return (
<ProductCartItem
card_index={index}
@ -34,8 +28,6 @@ export function Cart({crate_index}) {
ext_data={ext_data}
first={index === 0}
last={index === crate.items.length - 1 && nbrOccupied >= nbrSlots}
resources={resources}
warnings={warnings}
key={item.id}/>
);
});

4
static/js/shop/Crate.jsx
View File

@ -34,9 +34,7 @@ export function Crate({crate_index}) {
<Cart crate_index={crate_index}/>
{1 || (rules && rules.length > 0) && (
<CrateWarnings crate_index={crate_index} />
)}
<CrateWarnings crate_index={crate_index} />
</div>
</div>
);

2
static/js/shop/CrateMode.jsx
View File

@ -8,7 +8,7 @@ export function CrateMode({crate_index}) {
const {modes_order, crate_modes, crate, setMode} = useShopStore(state => ({
modes_order: state.modes_order,
crate_modes: state.crate_modes,
crate: state.crates[crate_index].crate_mode,
crate: state.crates[crate_index],
setMode: state.setCrateMode
}))
return (

8
static/js/shop/CrateWarnings.jsx
View File

@ -1,16 +1,16 @@
import React from "react";
import {TriggerCrateWarnings} from "./warnings";
import {LevelUI} from "./warnings";
import {useShopStore} from "./shop_store";
export function CrateWarnings({crate_index}) {
const crate = useShopStore(state => (state.crates[crate_index]))
const crate_warnings = TriggerCrateWarnings(crate);
const crate_warnings = crate.warnings;
// TODO UI/colors
return (
<div className="crate-info">
{crate_warnings.map((rule, index) => (
<p key={index} className="rule" style={{'color': "red"}}>
<img src={`/images${rule.icon}`} /> <i><strong>{rule.name}:</strong> {rule.message}</i>
<p key={index} className="rule" style={{'color': LevelUI(rule.level).color}}>
<img src={LevelUI(rule.level).icon} /> <i>{rule.message}</i>
</p>
))}
</div>

2
static/js/shop/OrderPanel.jsx
View File

@ -40,7 +40,7 @@ export function OrderPanel({title, description}) {
<CrateList/>
<section className="summary">
<OrderSummary/>
<OrderForm/>
</section>

287
static/js/shop/OrderSummary.jsx
View File

@ -1,190 +1,149 @@
import React, {PureComponent} from 'react';
import PropTypes from "prop-types";
import React from 'react';
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";
import {useShopStore} from "./shop_store";
/**
* Components that displays the list of card that are used in the crate.
* It is a summary of purchase
*/
export class OrderSummary extends PureComponent {
export function OrderSummary() {
static get propTypes() {
return {
currency: PropTypes.string,
crates: PropTypes.object,
onDeleteItem: PropTypes.func,
onDeleteAllItems: PropTypes.func,
onMouseEnterItem: PropTypes.func,
onMouseLeaveItem: PropTypes.func,
onClickSelectItem: PropTypes.func,
};
}
const {
currency,
crates,
total_price,
crateParams,
deleteCard,
setHighlight,
resetHighlight,
highlighted,
clearCrate,
clearAll
} = useShopStore(state =>({
currency: state.currency,
crates: state.crates,
total_price: state.totalOrderPrice(),
crateParams: state.crateParams,
deleteCard: state.deleteCard,
setHighlight: state.highlightCard,
resetHighlight: state.highlightReset,
highlighted: state.highlighted,
clearAll: state.clearAll,
clearCrate: state.clearCrate
}));
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);
}
return (
<div className="summary-price">
handleOnDeleteItem(index, e) {
if (this.props.onDeleteItem) {
this.props.onDeleteItem(index);
}
e.preventDefault();
}
<table>
handleOnDeleteAllItems(e) {
if (this.props.onDeleteAllItems) {
this.props.onDeleteAllItems();
}
e.preventDefault();
}
<thead>
<tr>
<td colSpan="2" className="summary-remove-all">
<span className="item-card-name">Remove all cards</span>
handleOnMouseEnterItem(id, e) {
if (this.props.onMouseEnterItem) {
this.props.onMouseEnterItem(id);
}
e.preventDefault();
}
<button onClick={clearAll}>
<img src="/images/shop/icon-remove.svg"/>
</button>
</td>
</tr>
</thead>
handleOnMouseLeaveItem(e) {
if (this.props.onMouseLeaveItem) {
this.props.onMouseLeaveItem();
}
e.preventDefault();
}
{crates.map((crate, _i) => {
let crate_type = crateParams(crate.crate_mode);
return (
<tbody key={"summary_crate_body" + crate.id}>
<tr key={"summary_crate_" + crate.id}>
<td className="item-card-name">{crate_type.name}</td>
<td className="price">
<div>
{`${currency} ${formatMoney(crate_type.price)}`}
handleOnClickSelectItem(index, e) {
if (e.target.tagName !== 'IMG') {
if (this.props.onClickSelectItem) {
this.props.onClickSelectItem(index);
}
}
return e.preventDefault();
}
<button style={{'opacity': '0', 'cursor': 'initial'}}>
<img src="/images/shop/icon-remove.svg"/>
</button>
</div>
render() {
const {
currency,
crates
} = this.props;
<span style={{
'display': 'inline-block',
'width': '30px',
}}>&nbsp;</span>
</td>
</tr>
{crate.items.map((item, index) => {
const options = item && item.options;
const options_data = item && item.options_data;
const warnings = item && item.show_warnings;
const selected = crate.id === highlighted.crate && index === highlighted.card;
const total_price = total_order_price(crates);
return (
<div className="summary-price">
<table>
<thead>
<tr>
<td colSpan="2" className="summary-remove-all">
<span className="item-card-name">Remove all cards</span>
<button onClick={this.handleOnDeleteAllItems}>
<img src="/images/shop/icon-remove.svg" />
</button>
</td>
</tr>
</thead>
{Object.entries(crates).map(([crate_id, crate], _i) => {
let crate_type = shared_data.crateModes[crate.crate_type];
return (
<tbody key={"summary_crate_body"+crate_id}>
<tr key={"summary_crate_"+crate_id}>
<td className="item-card-name">{crate_type.name}</td>
<td className="price">
<div>
{`${currency} ${formatMoney(crate_type.price)}`}
<button style={{'opacity': '0', 'cursor': 'initial'}}>
<img src="/images/shop/icon-remove.svg" />
</button>
</div>
<span style={{
'display': 'inline-block',
'width': '30px',
}}>&nbsp;</span>
return (<tr key={"summary_crate_" + crate.id + item.id}
className={`hoverable ${selected ? 'selected' : ''}`}
onClick={() => setHighlight(crate.id, index)}
onMouseEnter={() => setHighlight(crate.id, index)}
onMouseLeave={() => resetHighlight()}>
<td className="item-card-name">
<div>{`${item.name_number} ${item.name} ${item.name_codename}`}</div>
</td>
</tr>
{crate.items.map((item, index) => {
let options = item && item.options;
let options_data = item && item.options_data;
const warnings = item && item.show_warnings;
return (<tr key={"summary_crate_" + crate_id+item.id}
className={`hoverable ${item.selected ? 'selected' : ''}`}
onClick={this.handleOnClickSelectItem.bind(this, index)}
onMouseEnter={this.handleOnMouseEnterItem.bind(this, item.id)}
onMouseLeave={this.handleOnMouseLeaveItem}>
<td className="item-card-name">
<div>{`${item.name_number} ${item.name} ${item.name_codename}`}</div>
</td>
<td className="price">
<div className="d-inline-flex align-content-center">
{`${currency} ${formatMoney(item.price)}`}
<td className="price">
<div className="d-inline-flex align-content-center">
{`${currency} ${formatMoney(item.price)}`}
<button onClick={() => deleteCard(crate.id, index)}>
<img src="/images/shop/icon-remove.svg"/>
</button>
<button onClick={this.handleOnDeleteItem.bind(this, index)}>
<img src="/images/shop/icon-remove.svg" />
</button>
<div style={{'width': '45px', 'height': '20px'}}
className="d-inline-flex align-content-center align-self-center justify-content-evenly">
{(warnings && warnings.length > 0 ? (
<WarningIndicator warnings={warnings}/>
) : (
<span style={{
'display': 'inline-block',
'width': '20px',
}}>&nbsp;</span>
))}
{((options && options_data) ? (
<SummaryPopup id={item.id + "options"} options={options}
data={options_data}/>
) : (
<span style={{
'display': 'inline-block',
'width': '20px',
}}>&nbsp;</span>
))}
</div>
</div>
</td>
</tr>);
})}
</tbody>
)
})}
<div style={{'width': '45px', 'height': '20px'}} className="d-inline-flex align-content-center align-self-center justify-content-evenly">
{(warnings && warnings.length > 0 ? (
<WarningIndicator warnings={warnings}/>
) : (
<span style={{
'display': 'inline-block',
'width': '20px',
}}>&nbsp;</span>
))}
{((options && options_data) ? (
<SummaryPopup id={item.id + "options"} options={options} data={options_data} />
) : (
<span style={{
'display': 'inline-block',
'width': '20px',
}}>&nbsp;</span>
))}
</div>
</div>
</td>
</tr>);
})}
</tbody>
)})}
<tfoot>
<tr>
<td className="item-card-name">Price estimate</td>
<td className="price">
<div>
{currency} {formatMoney(total_price)}
<button style={{'opacity': '0', 'cursor': 'initial'}}>
<img src="/images/shop/icon-remove.svg" alt="icon remove"/>
</button>
</div>
<tfoot>
<tr>
<td className="item-card-name">Price estimate</td>
<td className="price">
<div>
${currency} ${formatMoney(total_price)}
<button style={{'opacity': '0', 'cursor': 'initial'}}>
<img src="/images/shop/icon-remove.svg" alt="icon remove"/>
</button>
</div>
<span style={{
'display': 'inline-block',
'width': '30px',
}}>&nbsp;</span>
</td>
</tr>
</tfoot>
<span style={{
'display': 'inline-block',
'width': '30px',
}}>&nbsp;</span>
</td>
</tr>
</tfoot>
</table>
</table>
</div>
);
}
</div>
);
}

7
static/js/shop/ProductCartItem.jsx
View File

@ -10,7 +10,7 @@ import {useShopStore} from "./shop_store";
* Component that renders a product.
* Used in the crate
*/
export function ProductCartItem({card_index, crate_index, ext_data, first, last, resources, warnings}) {
export function ProductCartItem({card_index, crate_index, ext_data, first, last}) {
const {card, crate, highlighted, setHighlight, removeHighlight, onCardUpdate, onCardRemove} = useShopStore(state => ({
card: state.crates[crate_index].items[card_index],
highlighted: state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card,
@ -22,7 +22,8 @@ export function ProductCartItem({card_index, crate_index, ext_data, first, last,
}))
let options, options_data;
//const warnings = data && data.show_warnings;
const warnings = card && card.show_warnings;
const resources = card && card.counted_resources;
if (card && card.options) {
options = card.options;
@ -94,7 +95,7 @@ export function ProductCartItem({card_index, crate_index, ext_data, first, last,
<img
className='item-cart'
src={`/images${card.image}`}/>
src={card.image}/>
</div>
{/* remove container */}

162
static/js/shop/ProductItem.jsx
View File

@ -1,120 +1,84 @@
import React, {PureComponent} from 'react';
import PropTypes from "prop-types";
import React from 'react';
import {Draggable} from "@hello-pangea/dnd";
import {formatMoney, productStyle} from "./utils";
import {useShopStore} from "./shop_store";
/**
* Component that renders a product.
* Used in the aside (e.g backlog of product)
*/
export class ProductItem extends PureComponent {
export function ProductItem({card_index}) {
const {card, currency, onAddCard} = useShopStore(state => ({
card: state.getCardDescription(card_index),
currency: state.currency,
onAddCard: state.addCardFromBacklog
}));
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);
}
const render_specs = (card.specs && card.specs.length > 0 && (
<ul>
{card.specs.map((spec, index) =>
<li key={index}>{spec}</li>
)}
</ul>
));
handleOnClickAddItem(id, tap, e) {
if (this.props.onClickAddItem) {
this.props.onClickAddItem(id, tap);
}
e.preventDefault();
}
const render_datasheet_link = (card.datasheet_file && card.datasheet_name && (
<div className="ds">
<span className='doc-icon'></span>
<a href={card.datasheet_file} target="_blank" rel="noopener noreferrer">
{card.datasheet_name}
</a>
</div>
));
render() {
const {
id,
index,
name,
name_codename,
price,
currency,
image,
specs,
datasheet_file,
datasheet_name,
} = this.props;
return (
<section className="productItem">
const render_specs = (specs && specs.length > 0 && (
<ul>
{specs.map((spec, index) =>
<li key={index}>{spec}</li>
)}
</ul>
));
<div className="content">
<h3 style={{'marginBottom': card.name_codename ? '5px' : '20px'}}>{card.name}</h3>
{card.name_codename ? (
<p>{card.name_codename}</p>
) : null}
const render_datasheet_link = (datasheet_file && datasheet_name && (
<div className="ds">
<span className='doc-icon'></span>
<a href={datasheet_file} target="_blank" rel="noopener noreferrer">
{datasheet_name}
</a>
<div className="price">{`${currency} ${formatMoney(card.price)}`}</div>
{render_specs}
{render_datasheet_link}
</div>
));
return (
<section className="productItem">
<div className="content">
<div className="content">
<h3 style={{ 'marginBottom': name_codename ? '5px' : '20px'}}>{name}</h3>
{name_codename ? (
<p>{name_codename}</p>
) : null }
<button onClick={() => onAddCard(null, card_index, null)}>
<img src="/images/shop/icon-add.svg" alt="add"/>
</button>
<div className="price">{`${currency} ${formatMoney(price)}`}</div>
{render_specs}
{render_datasheet_link}
</div>
<div className="content">
<button onClick={this.handleOnClickAddItem.bind(this, index, true)}>
<img src="/images/shop/icon-add.svg" alt="add" />
</button>
<Draggable draggableId={id} index={index}>
{(provided, snapshot) => (
<React.Fragment>
<img
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={productStyle(
provided.draggableProps.style,
snapshot,
true, // hack: remove weird animation after a drop
)}
src={image} />
{/* Allows to simulate a clone */}
{snapshot.isDragging && (
<img className="simclone" src={image} />
<Draggable draggableId={card.id} index={card_index}>
{(provided, snapshot) => (
<React.Fragment>
<img
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={productStyle(
provided.draggableProps.style,
snapshot,
true, // hack: remove weird animation after a drop
)}
</React.Fragment>
)}
</Draggable>
src={card.image}/>
</div>
{/* Allows to simulate a clone */}
{snapshot.isDragging && (
<img className="simclone" src={card.image}/>
)}
</React.Fragment>
)}
</Draggable>
</div>
</section>
);
</section>
);
}
}

27
static/js/shop/Shop.jsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, {useEffect} from 'react';
import {DragDropContext} from "@hello-pangea/dnd";
@ -12,28 +12,13 @@ import {useShopStore} from "./shop_store";
*/
export function Shop() {
const {addCardFromBacklog, moveCard, deleteCard} = useShopStore(state => ({
const {addCardFromBacklog, moveCard, deleteCard, cardIndexById} = useShopStore(state => ({
addCardFromBacklog: state.addCardFromBacklog,
moveCard: state.moveCard,
deleteCard: state.deleteCard
deleteCard: state.deleteCard,
cardIndexById: state.cardIndexById
}));
const handleOnDragEnd = (drop_result, provided) => {
console.log(drop_result, provided)
//{
// "draggableId": "42dc17e9-9e75-45ee-ad27-2233b6f07a5e",
// "type": "DEFAULT",
// "source": {
// "index": 17,
// "droppableId": "backlog"
// },
// "reason": "DROP",
// "mode": "FLUID",
// "destination": {
// "droppableId": "crate0",
// "index": 0
// },
// "combine": null
// }
if (drop_result.source.droppableId === "backlog")
addCardFromBacklog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
else if(drop_result.destination.droppableId === "backlog")
@ -42,6 +27,10 @@ export function Shop() {
moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index)
}
useEffect(() => {
addCardFromBacklog(null, [cardIndexById("kasli"), cardIndexById("eem_pwr_mod")], -1);
}, []);
return (
<DragDropContext onDragEnd={handleOnDragEnd}>
<Layout

146
static/js/shop/shop_store.js
View File

@ -1,7 +1,7 @@
'use strict';
import {create} from "zustand";
import {data, itemsUnfoldedList} from "./utils";
import {data as shared_data, itemsUnfoldedList} from "./utils";
import {true_type_of} from "./options/utils";
import {v4 as uuidv4} from "uuid";
import {FillResources} from "./count_resources";
@ -9,15 +9,18 @@ import {TriggerCrateWarnings, TriggerWarnings} from "./warnings";
const useBacklog = ((set, get) => ({
cards: data.items,
groups: data.columns.backlog,
cards: shared_data.items,
groups: shared_data.columns.backlog,
cards_list: itemsUnfoldedList,
currency: data.currency
currency: shared_data.currency,
getCardDescription: index => get().cards[get().cards_list[index]],
cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element))
}));
const useCrateModes = ((set, get) => ({
crate_modes: data.crateModes,
modes_order: data.crateModeOrder
crate_modes: shared_data.crateModes,
modes_order: shared_data.crateModeOrder,
crateParams: mode => get().crate_modes[mode],
}));
const useLayout = ((set, get) => ({
@ -47,25 +50,41 @@ const useSubmitForm = ((set, get) => ({
isProcessingComplete: true,
}));
const useCart = ((set, get) => ({
crates: data.columns.crates,
active_crate: "crate0",
const useHighlighted = ((set, get) => ({
highlighted: {
crate: "",
card: 0
},
highlightCard: (crate_id, index) => set(state => ({
highlighted: {
crate: crate_id,
card: index
}
})),
highlightReset: () => set(state => ({
highlighted: {
crate: "",
card: 0
}
})),
}));
newCrate: () => set((state) => ({crates: state.crates.concat({
id: "crate"+state.crates.length,
const useCart = ((set, get) => ({
crates: shared_data.columns.crates,
active_crate: "crate0",
_newCrate: (crate_id) => set((state) => ({crates: state.crates.concat({
id: crate_id || "crate" + state.crates.length,
crate_mode: "rack",
items: [],
warnings: []
warnings: [],
occupiedHP: 0
})})),
delCrate: (id) => set(state => ({
crates: state.crates.filter((crate => crate.id !== id))
})),
setCrateMode: (id, mode) => set(state => ({
_setCrateMode: (id, mode) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (crate.id === id) {
return {
@ -76,12 +95,13 @@ const useCart = ((set, get) => ({
})
})),
setActiveCrate: (id) => set(state => ({active_crate: id})),
addCardFromBacklog: (crate_to, index_from, index_to) => set(state => {
_addCardFromBacklog: (crate_to, index_from, index_to) => set(state => {
const take_from = (true_type_of(index_from) === "array" ? index_from : [index_from]).map((item, _i) => (state.cards_list[item]));
const dest = crate_to || state.active_crate;
return {
crates: state.crates.map((crate, _i) => {
if (dest === crate.id) {
index_to = index_to != null ? index_to : crate.items.length;
return {
...crate,
items: crate.items.toSpliced(index_to, 0, ...take_from.map((card_name, _) => {
@ -92,7 +112,8 @@ const useCart = ((set, get) => ({
})
}
}),
moveCard: (crate_from, index_from, crate_to, index_to) => set(state => {
_moveCard: (crate_from, index_from, crate_to, index_to) => set(state => {
console.log(crate_from, index_from, crate_to, index_to)
const the_card = state.crates.find((crate, _) => crate_from === crate.id ).items[index_from];
return {
crates: state.crates.map((crate, _i) => {
@ -102,7 +123,7 @@ const useCart = ((set, get) => ({
delete items_copy[index_from];
return {
...crate,
items: items_copy.toSpliced(index_to, 0, the_card).filter((item, _) => !!item)
items: items_copy.toSpliced(index_to+1, 0, the_card).filter((item, _) => !!item)
}
} else if (crate_to === crate.id) {
return {
@ -119,18 +140,18 @@ const useCart = ((set, get) => ({
})
}
}),
deleteCard: (crate, index) => set(state => ({
_deleteCard: (crate_id, index) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (crate === crate.id) {
if (crate_id === crate.id) {
return {
...crate,
items: crate.items.splice(index, 1)
items: crate.items.toSpliced(index, 1)
}
}
else return crate;
})
})),
clearCrate: (id) => set(state => ({
_clearCrate: (id) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (id === crate.id) {
return {
@ -141,9 +162,12 @@ const useCart = ((set, get) => ({
else return crate;
})
})),
updateOptions: (crate, index, new_options) => set(state => ({
clearAll: () => set(state => ({
crates: []
})),
_updateOptions: (crate_id, index, new_options) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (crate === crate.id) {
if (crate_id === crate.id) {
let itemsCopy = Array.from(crate.items);
itemsCopy[index].options_data = {...itemsCopy[index].options_data, ...new_options};
return {
@ -154,37 +178,74 @@ const useCart = ((set, get) => ({
else return crate;
})
})),
highlightCard: (crate, index) => set(state => ({
highlighted: {
crate: crate,
card: index
}
})),
highlightReset: () => set(state => ({
highlighted: {
crate: "",
card: 0
}
})),
fillWarnings: (crate) => set(state => ({
// actually seems to be just render-time action, no need to put data in it,
// though needs to be optimized to be done only on real crate updates
fillWarnings: (crate_id) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (crate === crate.id) {
if (crate_id === crate.id) {
let itemsCopy = Array.from(crate.items);
itemsCopy = FillResources(itemsCopy);
itemsCopy = TriggerWarnings(itemsCopy);
const crate_warnings = TriggerCrateWarnings(crate);
const [crate_warnings, occupied] = TriggerCrateWarnings(crate);
return {
...crate,
items: itemsCopy,
warnings: crate_warnings
warnings: crate_warnings,
occupiedHP: occupied
}
}
else return crate;
})
}))
})),
totalOrderPrice: () => {
let sum = 0;
get().crates.forEach( (crate, _i) => {
sum += get().crate_modes[crate.crate_mode].price;
crate.items.forEach((item, _) => {
sum += item.price;
});
});
return sum;
},
// Composite actions that require warnings recalculation:
newCrate: () => {
const crate_id = "crate" + get().crates.length;
get()._newCrate(crate_id)
get().fillWarnings(crate_id);
},
setCrateMode: (id, mode) => {
console.log("setCrateMode", id, mode)
get()._setCrateMode(id, mode)
get().fillWarnings(id);
},
addCardFromBacklog: (crate_to, index_from, index_to) => {
const dest = crate_to || get().active_crate;
get()._addCardFromBacklog(dest, index_from, index_to)
get().fillWarnings(dest);
},
moveCard: (crate_from, index_from, crate_to, index_to) => {
get()._moveCard(crate_from, index_from, crate_to, index_to);
get().fillWarnings(crate_to);
if (crate_from !== crate_to) get().fillWarnings(crate_from);
},
deleteCard: (crate_id, index) => {
get()._deleteCard(crate_id, index);
get().fillWarnings(crate_id);
},
clearCrate: (id) => {
get()._clearCrate(id);
get().fillWarnings(id);
},
updateOptions: (crate_id, index, new_options) => {
get()._updateOptions(crate_id, index, new_options);
get().fillWarnings(crate_id);
}
// TODO load and save jsons?
}))
@ -195,5 +256,6 @@ export const useShopStore = create((...params) => ({
...useCrateModes(...params),
...useCart(...params),
...useSubmitForm(...params),
...useLayout(...params)
...useLayout(...params),
...useHighlighted(...params),
}))

35
static/js/shop/warnings.js
View File

@ -7,10 +7,11 @@
import {crate_type_to_hp, item_occupied_counters, resource_counters} from "./count_resources";
import {data as shared_data} from "./utils";
import {useShopStore} from "./shop_store";
const Levels = {
"reminder": {priority: 1, icon: '/images/shop/icon-reminder.svg'},
"warning": {priority: 2, icon: '/images/shop/icon-warning.svg'},
"reminder": {priority: 1, icon: '/images/shop/icon-reminder.svg', color: "black"},
"warning": {priority: 2, icon: '/images/shop/icon-warning.svg', color: "#c75e5e"},
}
const find_in_counters = (counters, name) => {
@ -97,21 +98,6 @@ const Types = {
}
}
export function TriggerCardWarnings(data, index, precounted) {
const element = data[index];
return (element.warnings && element.warnings
.map((warning, _) => {
if (!!Types[warning])
return Types[warning].trigger(data, index, precounted) ? {trigger: undefined, name: warning, ...Types[warning]} : null;
else
return Types.default;
})
.filter((warning, _) => {
return !!warning
}));
}
export function TriggerWarnings(data) {
return data.map((element, index) => {
if (!element.warnings) return element;
@ -137,23 +123,26 @@ export function MaxLevel(warnings) {
return mx;
}
export function LevelUI(warning_level) {
const warning_t = Levels[warning_level];
return {icon: warning_t.icon, color: warning_t.color};
}
const crate_warnings = {
"overfit": {
message: "You have reached the maximum number of slots allowed for this crate. Consider removing cards.",
level: "warning",
trigger: (crate, occupied) => {
const nbrHP = crate_type_to_hp(crate.crate_type);
return occupied > nbrHP;
const nbrHP = useShopStore.getState().crateParams(crate.crate_mode).hp;
return occupied > nbrHP && nbrHP > 0;
}
},
"underfit_rack": {
message: "The selected cards fit in a 42hp desktop crate, consider switching to it for a more compact system",
level: "reminder",
trigger: (crate, occupied) => {
const nbrHPDesktop = shared_data.crateModes.desktop.hp;
return crate.crate_type === shared_data.crateModes.rack.id && occupied < nbrHPDesktop;
const nbrHPDesktop = useShopStore.getState().crate_modes.desktop.hp;
return crate.crate_mode === useShopStore.getState().crate_modes.rack.id && occupied < nbrHPDesktop;
}
}
}
@ -164,5 +153,5 @@ export function TriggerCrateWarnings(crate) {
Object.entries(crate_warnings).forEach(([id, warning], _) => {
if (warning.trigger(crate, nbrOccupied)) warnings.push({...warning, id: id, trigger: undefined});
})
return warnings;
return [warnings, nbrOccupied];
}

55
static/js/shop_data.js
View File

@ -70,7 +70,7 @@ const shop_data = {
name_number: '1124',
name_codename: 'Kasli 2.0',
price: 3600,
image: '/shop/graphic-03_kasli.svg',
image: '/images/shop/graphic-03_kasli.svg',
specs: [
'FPGA core device, runs ARTIQ kernels, controls the EEMs.',
'4 SFP 6Gb/s slots for Ethernet or DRTIO.',
@ -126,7 +126,7 @@ const shop_data = {
name_number: '1125',
name_codename: 'Kasli-SoC',
price: 5100,
image: '/shop/graphic-03_kaslisoc.svg',
image: '/images/shop/graphic-03_kaslisoc.svg',
specs: [
'Core device based on Zynq-7000 CPU+FPGA system-on-chip.',
'Runs ARTIQ kernels on 1GHz Cortex-A9 CPU with hardware FPU.',
@ -194,7 +194,7 @@ const shop_data = {
name_number: '1008',
name_codename: '',
price: 400,
image: '/shop/graphic-03_VHDCI_carrier.svg',
image: '/images/shop/graphic-03_VHDCI_carrier.svg',
specs: [
'Passive adapter between VHDCI and EEMs.',
'VHDCI (SCSI-3) cables can carry EEM signals over short distances between crates.',
@ -221,7 +221,7 @@ const shop_data = {
name_number: '2118',
name_codename: '',
price: 450,
image: '/shop/graphic-03_BNC-TTL.svg',
image: '/images/shop/graphic-03_BNC-TTL.svg',
specs: [
'Two banks of four digital channels each, with BNC connectors.',
'Each bank with individual ground isolation.',
@ -293,7 +293,7 @@ const shop_data = {
name_number: '2128',
name_codename: '',
price: 400,
image: '/shop/graphic-03_SMA-TTL.svg',
image: '/images/shop/graphic-03_SMA-TTL.svg',
specs: [
'Same as above, but with SMA connectors.'
],
@ -359,7 +359,7 @@ const shop_data = {
name_number: '2238',
name_codename: '',
price: 600,
image: '/shop/graphic-03_MCX-TTL.svg',
image: '/images/shop/graphic-03_MCX-TTL.svg',
specs: [
'16 single-ended digital signals on MCX connectors.',
'Direction selectable in banks of four signals.',
@ -451,7 +451,7 @@ const shop_data = {
name_number: '2245',
name_codename: '',
price: 390,
image: '/shop/graphic-03_LVDS.svg',
image: '/images/shop/graphic-03_LVDS.svg',
specs: [
'Supplies 16 LVDS pairs via 4 front-panel RJ45 connectors.',
'Each RJ45 supplies 4 LVDS DIOs.',
@ -538,7 +538,7 @@ const shop_data = {
name_number: '4410',
name_codename: 'Urukul',
price: 2350,
image: '/shop/graphic-03_Urukul.svg',
image: '/images/shop/graphic-03_Urukul.svg',
specs: [
'4 channel 1GS/s DDS.',
'Output frequency (-3 dB): <1 to >400 MHz.',
@ -599,7 +599,7 @@ const shop_data = {
name_number: '4412',
name_codename: 'Urukul',
price: 2350,
image: '/shop/graphic-03_Urukul-4412.svg',
image: '/images/shop/graphic-03_Urukul-4412.svg',
specs: [
'4 channel 1GS/s DDS.',
'Higher frequency resolution ~8 µHz (47 bit)',
@ -635,7 +635,7 @@ const shop_data = {
name_number: '4624',
name_codename: 'Phaser',
price: 4260,
image: '/shop/graphic-03_Phaser.svg',
image: '/images/shop/graphic-03_Phaser.svg',
specs: [
'2x 1.25 GS/s IQ upconverters.',
'dual IQ mixer + 0.3 GHz to 4.8 GHz VCO + PLL.',
@ -667,7 +667,7 @@ const shop_data = {
name_number: '5432',
name_codename: 'Zotino',
price: 1600,
image: '/shop/graphic-03_Zotino.svg',
image: '/images/shop/graphic-03_Zotino.svg',
specs: [
'32-channel DAC.',
'16-bit resolution.',
@ -702,7 +702,7 @@ const shop_data = {
name_number: '5632',
name_codename: 'Fastino',
price: 3390,
image: '/shop/graphic-03_Fastino.svg',
image: '/images/shop/graphic-03_Fastino.svg',
specs: [
'32-channel DAC.',
'16-bit resolution.',
@ -731,7 +731,7 @@ const shop_data = {
name_number: '5518',
name_codename: '',
price: 160,
image: '/shop/graphic-03_IDC-BNC-adapter.svg',
image: '/images/shop/graphic-03_IDC-BNC-adapter.svg',
specs: [
'Breaks out analog signals from Zotino or HD68-IDC to BNC connectors.',
'Each card provides 8 channels.',
@ -753,7 +753,7 @@ const shop_data = {
name_number: '5528',
name_codename: '',
price: 160,
image: '/shop/graphic-03_SMA-IDC.svg',
image: '/images/shop/graphic-03_SMA-IDC.svg',
specs: [
'Breaks out analog signals from Zotino or HD68-IDC to SMA connectors.',
'Each card provides 8 channels.',
@ -775,7 +775,7 @@ const shop_data = {
name_number: '5538',
name_codename: '',
price: 160,
image: '/shop/graphic-03_MCX-IDC.svg',
image: '/images/shop/graphic-03_MCX-IDC.svg',
specs: [
'Breaks out analog signals from Zotino or HD68-IDC to MCX connectors.',
'Each card provides 8 channels.',
@ -797,7 +797,7 @@ const shop_data = {
name_number: '5568',
name_codename: '',
price: 150,
image: '/shop/graphic-03_HD68.svg',
image: '/images/shop/graphic-03_HD68.svg',
specs: [
'Connects an external HD68 cable to IDC-BNC, IDC-SMA or IDC-MCX cards.',
],
@ -823,7 +823,7 @@ const shop_data = {
name_number: '5108',
name_codename: '',
price: 1600,
image: '/shop/graphic-03_Sampler.svg',
image: '/images/shop/graphic-03_Sampler.svg',
specs: [
'8-channel ADC.',
'16-bit resolution.',
@ -874,7 +874,7 @@ const shop_data = {
name_number: '6302',
name_codename: '',
price: 550,
image: '/shop/graphic-03_Grabber.svg',
image: '/images/shop/graphic-03_Grabber.svg',
specs: [
'Camera input interface card.',
'Supports some EMCCD cameras.',
@ -901,7 +901,7 @@ const shop_data = {
name_number: '7210',
name_codename: '',
price: 525,
image: '/shop/graphic-03_Clocker.svg',
image: '/images/shop/graphic-03_Clocker.svg',
specs: [
'Distribute a low jitter clock signal among cards.',
'2 inputs.',
@ -936,7 +936,7 @@ const shop_data = {
name_number: '8452',
name_codename: 'Stabilizer',
price: 2000,
image: '/shop/graphic-03_Stabilizer.svg',
image: '/images/shop/graphic-03_Stabilizer.svg',
specs: [
'CPU-based dual-channel fast servo.',
'400MHz STM32H743ZIT6.',
@ -968,7 +968,7 @@ const shop_data = {
name_number: '4456',
name_codename: 'Mirny',
price: 2660,
image: '/shop/graphic-03_Mirny.svg',
image: '/images/shop/graphic-03_Mirny.svg',
specs: [
'4-channel Wide-band PLL/VCO-based microwave frequency synthesiser.',
'53 MHz to >4 GHz.',
@ -998,7 +998,7 @@ const shop_data = {
name_number: '4457',
name_codename: 'Mirny + Almazny',
price: 3660,
image: '/shop/graphic-03_Almazny.svg',
image: '/images/shop/graphic-03_Almazny.svg',
specs: [
'Mirny with high frequency mezzanine.',
'Additional 4 channels up to 12 GHz.',
@ -1025,7 +1025,7 @@ const shop_data = {
name_number: '8453',
name_codename: '',
price: 2600,
image: '/shop/graphic-03_Thermostat-EEM.svg',
image: '/images/shop/graphic-03_Thermostat-EEM.svg',
specs: [
'4 TEC channels.',
'Sensor channel count: 8 differential, 16 single-ended.',
@ -1053,7 +1053,7 @@ const shop_data = {
name_number: '5716',
name_codename: 'Shuttler',
price: 8500,
image: '/shop/graphic-03_Shuttler.svg',
image: '/images/shop/graphic-03_Shuttler.svg',
specs: [
'16-ch, 125 MSPS DAC EEM with remote analog front end board.',
'High DC resolution (up to ~18 bits with sigma-delta modulation) for trap electrode bias.',
@ -1080,7 +1080,7 @@ const shop_data = {
name_number: '4459',
name_codename: 'Stabilizer + Pounder',
price: 4460,
image: '/shop/graphic-03_Pounder.svg',
image: '/images/shop/graphic-03_Pounder.svg',
specs: [
'Stabilizer with Pounder daughter card.',
'2-channel Pound Drever Hall (PDH) lock generator.',
@ -1111,7 +1111,7 @@ const shop_data = {
name_number: '1106',
name_codename: '',
price: 750,
image: '/shop/graphic-03_eem_pwr_mod.svg',
image: '/images/shop/graphic-03_eem_pwr_mod.svg',
specs: [
"EEM AC power module.",
"400W with forced cooling (25CFM), 200W with free air convection.",
@ -1189,7 +1189,8 @@ const shop_data = {
id: "crate0",
crate_mode: "rack",
items: [],
warnings: []
warnings: [],
occupiedHP: 0,
}]
},