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

WIP add horizontal items into the cart

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-11-01 17:32:20 +08:00
parent 66bb5b25d8
commit 608f253684
9 changed files with 262 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,8 +32,6 @@ export function Cart({crate_index}) {
<ProductCartItem
card_index={index}
crate_index={crate_index}
first={index === 0}
last={index === crate.items.length - 1 && nbrOccupied >= nbrSlots}
key={item.id}/>
);
});

59
static/js/shop/CartHorizontal.jsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react'
import {Droppable} from "@hello-pangea/dnd";
import {cartStyle, compareArraysWithIds} from "./utils";
import {ProductCartItemHorizontal} from "./ProductCartItemHorizontal";
import {HORIZONTAL_CART_MARKER, useShopStore} from "./shop_store";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Component that displays a list of <ProductCartItem>
*/
export function CartHorizontal({crate_index}) {
// #!render_count
const renderCount = useRenderCount();
const crate = useShopStore((state) => state.crates[crate_index], (a, b) => {
return compareArraysWithIds(a.h_items, b.h_items)
});
// #!render_count
console.log("CartHorizontal renders: ", renderCount)
const products = crate.h_items.map((item, index) => {
return (
<ProductCartItemHorizontal
card_index={index}
crate_index={crate_index}
key={item.id}/>
);
});
return (
<Droppable droppableId={crate.id+HORIZONTAL_CART_MARKER} direction="vertical">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
style={cartStyle(
provided.droppableProps.style,
snapshot,
)}
className="items-cart-list horizontal">
{products}
{provided.placeholder && (
<div style={{display: 'none'}}>
{provided.placeholder}
</div>
)}
</div>
)}
</Droppable>
);
}

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

@ -4,6 +4,7 @@ import {CrateMode} from "./CrateMode";
import {CrateWarnings} from "./CrateWarnings";
import {useShopStore} from "./shop_store";
import {CrateOptions} from "./CrateOptions";
import {CartHorizontal} from "./CartHorizontal";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
@ -28,7 +29,7 @@ export function Crate({crate_index}) {
return (
<div className="crate">
{
modes_order.includes(crate.crate_mode) ? (
modes_order.includes(crate.crate_mode) && (
<div className="crate-bar d-inline-flex justify-content-between">
<CrateMode crate_index={crate_index}/>
@ -36,13 +37,15 @@ export function Crate({crate_index}) {
Delete crate <img src="/images/shop/icon-remove.svg" alt="remove"/>
</div>
</div>
) : <></>
)
}
<div className="crate-products">
<Cart crate_index={crate_index}/>
<CartHorizontal crate_index={crate_index}/>
<CrateWarnings crate_index={crate_index} />
<CrateOptions crate_index={crate_index}/>

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

@ -13,7 +13,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
* Component that renders a product.
* Used in the crate
*/
export function ProductCartItem({card_index, crate_index, first, last}) {
export function ProductCartItem({card_index, crate_index}) {
// #!render_count
const renderCount = useRenderCount();
@ -73,8 +73,6 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
<OptionsDialogWrapper
crate_index={crate_index}
card_index={card_index}
first={first}
last={last}
/>
)}
</div>

107
static/js/shop/ProductCartItemHorizontal.jsx Normal file
View File

@ -0,0 +1,107 @@
import React from 'react'
import {Draggable} from "@hello-pangea/dnd";
import {compareObjectsEmptiness, productStyle} from "./utils";
import {Resources} from "./Resources";
import {CardWarnings} from "./CardWarnings";
import {useShopStore} from "./shop_store";
import {OptionsDialogWrapper} from "./OptionsWrapper";
// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Component that renders a product.
* Used in the crate
*/
export function ProductCartItemHorizontal({card_index, crate_index}) {
// #!render_count
const renderCount = useRenderCount();
const card = useShopStore((state) => state.crates[crate_index].h_items[card_index],
(a, b) => a.id === b.id);
const card_show_warnings = useShopStore(state => state.crates[crate_index].h_items[card_index].show_warnings, compareObjectsEmptiness);
const card_counted_resources = useShopStore(state => state.crates[crate_index].h_items[card_index].counted_resources, compareObjectsEmptiness);
const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
const warnings_disabled = useShopStore((state) => !!state.crateParams(state.crates[crate_index].crate_mode).warnings_disabled);
const use_options = useShopStore((state) => state.crateParams(state.crates[crate_index].crate_mode).options);
const crate_id = useShopStore((state) => state.crates[crate_index].id);
const setHighlight = useShopStore((state) => state.highlightCard);
const removeHighlight = useShopStore((state) => state.highlightReset);
const onCardRemove = useShopStore((state) => state.deleteCard);
// #!render_count
console.log("ProductCartItem renders: ", renderCount)
const options = use_options && card && card[use_options] && card[use_options].length > 0;
const warnings = !warnings_disabled && card_show_warnings && card_show_warnings.length > 0;
const resources = !warnings_disabled && card_counted_resources && card_counted_resources.length > 0;
return (
<Draggable draggableId={card.id} index={card_index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...productStyle(
provided.draggableProps.style,
snapshot,
true,
!!highlighted,
false,
true
)
}}
onMouseEnter={() => setHighlight(crate_id, card_index)}
onMouseLeave={removeHighlight}
>
{/* warning container */}
<div className="progress-container warning d-flex justify-content-evenly">
{warnings &&
(<CardWarnings crate_index={crate_index} card_index={card_index} />)
}
{options && (
<OptionsDialogWrapper
crate_index={crate_index}
card_index={card_index}
horizontal={true}
/>
)}
</div>
<h6>{card.name_number}</h6>
<div
onMouseEnter={() => setHighlight(crate_id, card_index)}
onClick={() => setHighlight(crate_id, card_index)}
>
{card.name}
</div>
{/* remove container */}
{/*<div
style={{'display': highlighted ? 'flex' : 'none'}}
className="overlayRemove"
onClick={() => onCardRemove(crate_id, card_index)}>
<img src="/images/shop/icon-remove.svg" alt="rm"/>
<p>Remove</p>
</div>*/}
</div>
)}
</Draggable>
);
}

18
static/js/shop/SummaryCrateCard.jsx
View File

@ -8,7 +8,7 @@ import {OptionsSummaryWrapper} from "./OptionsWrapper";
import {useRenderCount} from "@uidotdev/usehooks";
export function SummaryCrateCard({crate_index, card_index}) {
export function SummaryCrateCard({crate_index, card_index, horizontal}) {
// #!render_count
const renderCount = useRenderCount();
@ -19,10 +19,16 @@ export function SummaryCrateCard({crate_index, card_index}) {
const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
const crate_id = useShopStore((state) => state.crates[crate_index].id);
const card = useShopStore((state) => state.crates[crate_index].items[card_index],
const card = useShopStore((state) =>
horizontal ? state.crates[crate_index].h_items[card_index] : state.crates[crate_index].items[card_index],
(a, b) => a.id === b.id);
const card_show_warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareObjectsEmptiness);
const card_options_data = useShopStore(state => state.crates[crate_index].items[card_index].options_data, compareObjectsEmptiness);
// additional hooks for updating warning and options
const card_show_warnings = useShopStore(state =>
horizontal ? state.crates[crate_index].h_items[card_index].show_warnings : state.crates[crate_index].items[card_index].show_warnings,
compareObjectsEmptiness);
const card_options_data = useShopStore(state =>
horizontal ? state.crates[crate_index].h_items[card_index].options_data : state.crates[crate_index].items[card_index].options_data,
compareObjectsEmptiness);
const warnings_disabled = useShopStore((state) => !!state.crateParams(state.crates[crate_index].crate_mode).warnings_disabled);
const use_options = useShopStore((state) => state.crateParams(state.crates[crate_index].crate_mode).options);
@ -38,8 +44,8 @@ export function SummaryCrateCard({crate_index, card_index}) {
<tr
key={"summary_crate_" + crate_id + "_" + card_index}
className={`hoverable ${highlighted ? 'selected' : ''}`}
onClick={() => setHighlight(crate_id, card_index)}
onMouseEnter={() => setHighlight(crate_id, card_index)}
onClick={() => setHighlight(crate_id, card_index, horizontal)}
onMouseEnter={() => setHighlight(crate_id, card_index, horizontal)}
onMouseLeave={() => resetHighlight()}>
<td className="item-card-name tabbed">
<div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div>

14
static/js/shop/json_porter.js
View File

@ -21,10 +21,13 @@ export function validateJSON(description) {
try {
for (const crate of crates_raw) {
if (!crate.type || !crate.items || !crate.options || !(crate.type in crate_modes)) return false;
if (!crate.type || !crate.items || !crate.h_items || !crate.options || !(crate.type in crate_modes)) return false;
for (const card of crate.items) {
if (!(card.pn in pn_to_card) || card.options === undefined) return false;
}
for (const card of crate.h_items) {
if (!(card.pn in pn_to_card) || card.options === undefined) return false;
}
}
} catch (e) {
return false;
@ -50,6 +53,11 @@ export function JSONToCrates(description) {
id: uuidv4(),
options_data: card.options || {}
}))),
h_items: Array.from(crate.h_items.map((card, _i) => ({
...pn_to_card(card.pn),
id: uuidv4(),
options_data: card.options || {}
}))),
warnings: [],
occupiedHP: 0,
})));
@ -73,6 +81,10 @@ export function CratesToJSON(crates) {
pn: card.name_number,
options: (card.options_data && card[crateParams(crate.crate_mode).options]) ? FilterOptions(card[crateParams(crate.crate_mode).options], card.options_data) : null
}))),
h_items: Array.from(crate.h_items.map((card, _) => ({
pn: card.name_number,
options: (card.options_data && card[crateParams(crate.crate_mode).options]) ? FilterOptions(card[crateParams(crate.crate_mode).options], card.options_data) : null
}))),
type: crate.crate_mode,
options: FilterOptions(crateOptions, crate.options_data)
}))),

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

@ -13,6 +13,8 @@ import {ProcessOptionsToData} from "./options/Options";
import {DomainedRFQMessages} from "./Domained";
export const HORIZONTAL_CART_MARKER = "_h";
const cards_to_pn_map = (cards) => {
let result = {};
Object.entries(cards).forEach(([key, card], _i) => { result[card.name_number] = key})
@ -23,6 +25,12 @@ const toArray = (arg) => {
return Array.isArray(arg) ? arg : [arg];
};
const unwrapCrateId = (crate_id= "") => {
return crate_id.endsWith(HORIZONTAL_CART_MARKER) ? [true, crate_id.substring(0, crate_id.length - HORIZONTAL_CART_MARKER.length)] : [false, crate_id]
}
const whichItems = (horizontal = false) => horizontal ? "h_items" : "items"
const useCatalog = ((set, get) => ({
cards: shared_data.items,
groups: shared_data.columns.catalog,
@ -37,21 +45,24 @@ const useCatalog = ((set, get) => ({
const useOptionsNotification = ((set, get) => ({
notificationCrateId: null,
notificationCardIndex: null,
notificationHorizontal: false,
notificationTimer: null,
_showNotification: (crate_id, card_index) => set(state => ({
_showNotification: (crate_id, card_index, horizontal) => set(state => ({
notificationCrateId: crate_id,
notificationCardIndex: card_index,
notificationHorizontal: horizontal,
notificationTimer: setTimeout(() => {
state.hideNotification()
}, 5000)
})),
showNotification: (crate_id, card_index) => {
showNotification: (crate_id, card_index, horizontal) => {
get().hideNotification()
setTimeout(() => get()._showNotification(crate_id, card_index), 100);
setTimeout(() => get()._showNotification(crate_id, card_index, horizontal), 100);
},
hideNotification: () => set(state => ({
notificationCrateId: null,
notificationCardIndex: null,
notificationHorizontal: false,
notificationTimer: (state.notificationTimer && clearTimeout(state.notificationTimer)) || null,
}))
}));
@ -215,7 +226,7 @@ const useImportJSON = ((set, get) => ({
get().fillExtCrateData(crate.id);
});
get()._updateTotalOrderPrice();
get().showNotification(get().active_crate, null);
get().showNotification(get().active_crate, null, false);
},
updateImportDescription: (new_description) => set(state => ({
importValue: {
@ -332,15 +343,17 @@ const useSubmitForm = ((set, get) => ({
const useHighlighted = ((set, get) => ({
highlighted: {
crate: "",
card: 0
card: 0,
horizontal: false
},
highlightedTimer: null,
// #!if disable_card_highlight === false
highlightCard: (crate_id, index) => set(state => ({
highlightCard: (crate_id, index, horizontal) => set(state => ({
highlighted: {
crate: crate_id,
card: index
card: index,
horizontal: horizontal
},
highlightedTimer: (!!state.highlightedTimer ? clearTimeout(state.highlightedTimer) : null) || (state.isTouch && setTimeout(() => {
get().highlightReset()
@ -349,7 +362,8 @@ const useHighlighted = ((set, get) => ({
highlightReset: () => set(state => ({
highlighted: {
crate: "",
card: 0
card: 0,
horizontal: false
},
highlightedTimer: !!state.highlightedTimer ? clearTimeout(state.highlightedTimer) : null
})),
@ -388,17 +402,18 @@ const useCart = ((set, get) => ({
})
})),
setActiveCrate: (id) => set(state => ({active_crate: id})),
_addCardFromCatalog: (crate_to, index_from, index_to) => set(state => {
_addCardFromCatalog: (crate_to, index_from, index_to, horizontal) => set(state => {
const whichH = whichItems(horizontal)
const take_from = toArray(index_from).map((item, _i) => (state.cards_list[item]));
const dest = crate_to || state.active_crate;
if (!dest) return {};
return {
crates: state.crates.map((crate, _i) => {
if (dest === crate.id) {
index_to = index_to != null ? index_to : crate.items.length;
index_to = index_to != null ? index_to : crate[whichH].length;
return {
...crate,
items: crate.items.toSpliced(index_to, 0, ...take_from.map((card_name, _) => {
[whichH]: crate[whichH].toSpliced(index_to, 0, ...take_from.map((card_name, _) => {
return {...state.cards[card_name], id: uuidv4()}
}))
}
@ -406,39 +421,41 @@ const useCart = ((set, get) => ({
})
}
}),
_moveCard: (crate_from, index_from, crate_to, index_to) => set(state => {
const the_card = state.crates.find((crate, _) => crate_from === crate.id ).items[index_from];
_moveCard: (crate_from, index_from, crate_to, index_to, horizontal) => set(state => {
const whichH = whichItems(horizontal)
const the_card = state.crates.find((crate, _) => crate_from === crate.id )[whichH][index_from];
return {
crates: state.crates.map((crate, _i) => {
if (crate_to === crate_from && crate_to === crate.id) {
let items_copy = Array.from(crate.items);
let items_copy = Array.from(crate[whichH]);
let item = items_copy.splice(index_from, 1)[0]
items_copy.splice(index_to, 0, item).filter((item, _) => !!item)
return {
...crate,
items: items_copy
[whichH]: items_copy
}
} else if (crate_to === crate.id) {
return {
...crate,
items: crate.items.toSpliced(index_to, 0, the_card)
[whichH]: crate[whichH].toSpliced(index_to, 0, the_card)
}
} else if (crate_from === crate.id) {
return {
...crate,
items: crate.items.toSpliced(index_to, 1)
[whichH]: crate[whichH].toSpliced(index_to, 1)
}
}
else return crate;
})
}
}),
_deleteCard: (crate_id, index) => set(state => ({
_deleteCard: (crate_id, index, horizontal) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (crate_id === crate.id) {
const whichH = whichItems(horizontal)
return {
...crate,
items: crate.items.toSpliced(index, 1)
[whichH]: crate[whichH].toSpliced(index, 1)
}
}
else return crate;
@ -449,7 +466,8 @@ const useCart = ((set, get) => ({
if (id === crate.id) {
return {
...crate,
items: []
items: [],
h_items: []
}
}
else return crate;
@ -458,10 +476,11 @@ const useCart = ((set, get) => ({
clearAll: () => set(state => ({
crates: state._defaultCrates
})),
_updateOptions: (crate_id, index, new_options) => set(state => ({
_updateOptions: (crate_id, index, new_options, horizontal) => set(state => ({
crates: state.crates.map((crate, _i) => {
if (crate_id === crate.id) {
let itemsCopy = Array.from(crate.items);
const whichH = whichItems(horizontal)
let itemsCopy = Array.from(crate[whichH]);
itemsCopy[index] = {
...itemsCopy[index],
options_data: {
@ -470,7 +489,7 @@ const useCart = ((set, get) => ({
}};
return {
...crate,
items: itemsCopy
[whichH]: itemsCopy
}
}
else return crate;
@ -524,7 +543,7 @@ const useCart = ((set, get) => ({
sum += get().crate_modes[crate.crate_mode].price;
const crate_options = ProcessOptionsToData({options: get().crate_prices, data: crate.options_data || {}});
sum += crate_options ? crate_options.reduce((accumulator, currentValue) => accumulator+currentValue.price, 0) : 0;
crate.items.forEach((item, _) => {
crate.items.concat(crate.h_items).forEach((item, _) => {
sum += item.price;
});
});
@ -563,13 +582,14 @@ const useCart = ((set, get) => ({
addCardFromCatalog: (crate_to, index_from, index_to, just_mounted) => {
const isCrateless = toArray(index_from).some(value => get().getCardDescription(value).crateless === true);
const dest = isCrateless ? "spare" : crate_to || get().active_crate;
const isHorizontal = toArray(index_from).some(value => !get().getCardDescription(value).image);
const dest = isCrateless ? "spare" : crate_to || get().active_crate;
if (!dest) {
console.warn("No destination");
get().noDestinationWarning();
return {};
}
get().showNotification(dest, index_to);
get().showNotification(dest, index_to, isHorizontal);
get()._addCardFromCatalog(dest, index_from, index_to)
get().fillExtData(dest);
get().fillWarnings(dest);
@ -581,22 +601,25 @@ const useCart = ((set, get) => ({
},
moveCard: (crate_from, index_from, crate_to, index_to) => {
get()._moveCard(crate_from, index_from, crate_to, index_to);
get().fillExtData(crate_to);
get().fillWarnings(crate_to);
get().setActiveCrate(crate_to);
const [isHorizontal, crateFrom] = unwrapCrateId(crate_from)
const [_, crateTo] = unwrapCrateId(crate_to)
get()._moveCard(crateFrom, index_from, crateTo, index_to, isHorizontal);
get().fillExtData(crateTo);
get().fillWarnings(crateTo);
get().setActiveCrate(crateTo);
get()._updateTotalOrderPrice();
if (crate_from !== crate_to) {
get().fillExtData(crate_from);
get().fillWarnings(crate_from);
if (crateFrom !== crate_to) {
get().fillExtData(crateFrom);
get().fillWarnings(crateFrom);
}
},
deleteCard: (crate_id, index) => {
get()._deleteCard(crate_id, index);
get().fillExtData(crate_id);
get().fillWarnings(crate_id);
const [isHorizontal, crateId] = unwrapCrateId(crate_id);
get()._deleteCard(crateId, index, isHorizontal);
get().fillExtData(crateId);
get().fillWarnings(crateId);
get()._updateTotalOrderPrice();
if (crate_id === get().highlighted.crate && index === get().highlighted.card) get().highlightReset()
if (crateId === get().highlighted.crate && index === get().highlighted.card) get().highlightReset()
},
clearCrate: (id) => {
get()._clearCrate(id);
@ -605,7 +628,8 @@ const useCart = ((set, get) => ({
},
updateOptions: (crate_id, index, new_options) => {
get()._updateOptions(crate_id, index, new_options);
const [isHorizontal, crateId] = unwrapCrateId(crate_id);
get()._updateOptions(crate_id, index, new_options, isHorizontal);
get().fillExtData(crate_id);
get().fillWarnings(crate_id);
},

4
static/js/shop_data.js
View File

@ -1449,7 +1449,7 @@ const shop_data = {
name_number: 'AFWS',
name_codename: '',
price: 800,
image: '/images/shop/graphic-03_AFWS.svg',
image: null,
specs: [
"Artiq Firmware Service for one variant for one year.",
"Includes support at helpdesk.",
@ -1530,6 +1530,7 @@ const shop_data = {
crate_mode: "rack",
fan_tray: false,
items: [],
h_items: [],
warnings: [],
occupiedHP: 0,
},
@ -1538,6 +1539,7 @@ const shop_data = {
name: "Spare items",
crate_mode: "no_crate",
items: [],
h_items: [],
warnings: [],
occupiedHP: 0,
}