From ce31357802d4201921b3bca8942f7b1367f5c2e3 Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Tue, 19 Sep 2023 10:59:34 +0800 Subject: [PATCH] Integrate clock/slots configuration into the calculator Also adjust sizes Signed-off-by: Egor Savkin --- sass/css/_shop.scss | 12 +++++---- static/js/shop.jsx | 47 +++++++++++++++++++++++------------ static/js/shop_components.jsx | 6 +---- static/js/shop_data.js | 3 ++- 4 files changed, 41 insertions(+), 27 deletions(-) diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index 9a02dea..3de09b5 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -268,7 +268,8 @@ button { .overlayVariant { min-width: 100px; - height: 150px; + max-height: 150px; + min-height: 50px; overflow-y: scroll; position: absolute; display: flex; @@ -488,8 +489,8 @@ button { .overlayVariant { top: 24px; - width: 132px; - min-height: 70px; + width: 140px; + min-height: 40px; max-height: 320px; overflow-y: scroll; position: absolute; @@ -500,6 +501,7 @@ button { color: black; flex-direction: column; cursor: pointer; + padding: 0.2rem 0; p { font-size: .65rem; @@ -535,10 +537,10 @@ button { } .overlay-smallcard { - right: -34.5px; + right: -38.5px; // (card width (63) - overlay width (140)) / 2 } .overlay-bigcard { - right: -3px; + right: -7px; // (card width (126) - overlay width (140)) / 2 } .hovered { diff --git a/static/js/shop.jsx b/static/js/shop.jsx index 013451a..bf60b5b 100644 --- a/static/js/shop.jsx +++ b/static/js/shop.jsx @@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client"; import PropTypes from "prop-types"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { v4 as uuidv4 } from 'uuid'; -import { OptionsDialogPopup, OptionsSummaryPopup, FilterOptions, fill_ext_data } 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 itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat()); @@ -866,7 +866,7 @@ class Cart extends React.PureComponent { const products = data.items.map((item, index) => { let itemData; - let ext_data = fill_ext_data(data.itemsData, index); + let ext_data = FillExtData(data.itemsData, index); if (data.itemsData && index in data.itemsData) { itemData = data.itemsData[index]; } @@ -1846,7 +1846,7 @@ class Shop extends React.PureComponent { isProcessing: false, shouldShowRFQFeedback: true, RFQBodyType: 'show', - RFQBodyOrder: JSON.stringify(crate), + RFQBodyOrder: JSON.stringify(crate, null, 2), }); } @@ -1862,8 +1862,6 @@ class Shop extends React.PureComponent { if (!customconf) {return; } const items = this.props.data.items; - console.trace(customconf); - const self = this; let new_items = []; let new_items_data = []; @@ -1889,7 +1887,7 @@ class Shop extends React.PureComponent { id: uuidv4(), options_data: item.options ? item.options : null, })); - new_items_data.push({options_data: item.options? item.options : null}); + new_items_data.push({options_data: item.options ? item.options : null}); } }); @@ -2067,6 +2065,13 @@ class Shop extends React.PureComponent { const itemsData = []; const rules = {}; + itemsCloned.forEach((elem, idx) => { + if (!(idx in itemsData)) itemsData[idx] = elem; + if (idx in this.state.columns.cart.itemsData && this.state.columns.cart.itemsData[idx].options_data) { + itemsCloned[idx].options_data = this.state.columns.cart.itemsData[idx].options_data; + } + }); + // check number of slot in crate const nbrOccupied = nbrOccupiedSlotsInCrate(newItems); @@ -2116,14 +2121,31 @@ class Shop extends React.PureComponent { } } + const process_slots = (item) => { + if (!item.options_data + || item.options_data.ext_pwr === false + || item.options_data.mono_eem === false + ) + return item.slotOccupied; + else if (item.options_data.ext_pwr === true) + return 0; + else if (item.options_data.mono_eem === true || item.options_data.n_eem === "1 EEM") + return 1; + else if (item.options_data.n_eem === "3 EEM") + return 3; + + return item.slotOccupied; + } + nbUsedSlot = slots .filter(item => item.type !== 'idc-bnc') .reduce((prev, next) => { - return prev + next.slotOccupied; + return prev + process_slots(next); }, 0); + nbrCurrentClock = slots .reduce((prev, next) => { - return next.type === 'clocker' ? prev + next.clockOccupied : prev; + return next.type === 'clocker' ? prev + ((next.options_data && next.options_data.ext_clk === true) ? 0 : next.clockOccupied) : prev; }, 0); if (idx in itemsData) { @@ -2199,7 +2221,7 @@ class Shop extends React.PureComponent { } nbrCurrentClock = slots.reduce((prev, next) => { - return prev + next.clockOccupied; + return prev + ((next.options_data && next.options_data.ext_clk && next.options_data.ext_clk.checked) ? 0 : next.clockOccupied); }, 0); if (idx in itemsData) { @@ -2340,13 +2362,6 @@ class Shop extends React.PureComponent { } } - itemsCloned.forEach((elem, idx) => { - if (!(idx in itemsData)) itemsData[idx] = elem; - if (idx in this.state.columns.cart.itemsData && this.state.columns.cart.itemsData[idx].options_data) { - itemsData[idx].options_data = this.state.columns.cart.itemsData[idx].options_data; - } - }); - // update state with rules this.setState({ ...this.state, diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx index 18b48ce..8826632 100644 --- a/static/js/shop_components.jsx +++ b/static/js/shop_components.jsx @@ -23,10 +23,6 @@ class Radio extends Component { this.props.target.construct(this.props.outvar, this.state.variant); } - componentWillUnmount() { - this.props.target.unmount(this.props.outvar); - } - handleClick(variant) { // Update the state object with the new value for outvar this.setState({ @@ -481,7 +477,7 @@ export function OptionsSummaryPopup({id, options, data}) { ); } -export function fill_ext_data(data, index) { +export function FillExtData(data, index) { return { has_other_dio: data.filter((value, item_index) => index !== item_index && value.name.endsWith("-TTL")).length > 0, has_dds: data.filter(((value, _) => value.name === "DDS")).length > 0, diff --git a/static/js/shop_data.js b/static/js/shop_data.js index 6ffe8b4..900a143 100644 --- a/static/js/shop_data.js +++ b/static/js/shop_data.js @@ -552,6 +552,7 @@ const shop_data = { datasheet_name: '4410/4412 Urukul datasheet', options: [ {type: "Switch", args: {title: "AD9912", outvar: "ad9912", tip: "AD9912 chip instead of AD9910"}}, + {type: "Switch", args: {title: "Use 1 EEM", outvar: "mono_eem", tip: "Use one EEM port setup. RF switch and synchronization will be unavailable."}}, { "if": [ {"var": "ad9912"}, @@ -559,7 +560,7 @@ const shop_data = { {type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}}, ], [ - {type: "Switch", args: {title: "Synchronization", outvar: "sync"}}, + {type: "Switch", args: {title: "Synchronization", outvar: "sync", tip: "Synchronize phases across Urukuls"}}, { "if": [ {"var": "sync"},