Integrate clock/slots configuration into the calculator

Also adjust sizes

Signed-off-by: Egor Savkin <es@m-labs.hk>

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 {

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,

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,

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"},