Make overlay appear on button click

And fix options absense for non-carrier cards

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

sass/css/_shop.scss

@@ -255,7 +255,7 @@ button {
 
                 .item-card-name,
                 .price {
-                    > .alert-warning, > .alert-info {
+                    > .alert-warning, .alert-info {
                         background-color: inherit;
                         height: inherit;
                         width: 20px;
@@ -432,7 +432,7 @@ button {
                             height: 24px;
                         }
 
-                        > .alert-warning, > .alert-info {
+                        > .alert-warning, .alert-info {
                             background-color: inherit;
                             height: inherit;
                             width: 20px;
@@ -465,15 +465,15 @@ button {
                     }
 
                     .overlayVariant {
-                        top: 0;
+                        top: 24px;
-                        width: 100%;
+                        width: 132px;
                         min-height: 70px;
                         max-height: 320px;
                         overflow-y: scroll;
                         position: absolute;
                         display: flex;
                         align-items: start;
-                        justify-content: left;
+                        justify-content: center;
                         text-align: left;
                         background-color: white;
                         color: black;
@@ -504,7 +504,13 @@ button {
                             min-height: 1rem;
                         }
                     }
+                }
 
+                .overlay-smallcard {
+                    right: -34.5px;
+                }
+                .overlay-bigcard {
+                    right: -3px;
                 }
 
                 .hovered {

static/images/shop/icon-customize.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Layer_1"
+   style="enable-background:new 0 0 48 48;"
+   version="1.1"
+   viewBox="0 0 48 48"
+   xml:space="preserve"
+   sodipodi:docname="icon-customize.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs13" /><sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="16.6875"
+     inkscape:cx="19.715356"
+     inkscape:cy="28.853933"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer3" /><g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="layer1"><g
+       id="g8"
+       inkscape:label="g8"
+       style="enable-background:new 0 0 48 48;fill:#715ec7;fill-opacity:1"><path
+         d="M 36.9,6 C 36.5,4.3 34.9,3 33,3 31.1,3 29.6,4.3 29.1,6 H 2 v 2 h 27.1 c 0.4,1.7 2,3 3.9,3 1.9,0 3.4,-1.3 3.9,-3 H 46 V 6 Z M 33,9 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
+         id="path2"
+         style="fill:#715ec7;fill-opacity:1" /><path
+         d="m 33,37 c -1.9,0 -3.4,1.3 -3.9,3 H 2 v 2 h 27.1 c 0.4,1.7 2,3 3.9,3 1.9,0 3.4,-1.3 3.9,-3 H 46 v -2 h -9.1 c -0.5,-1.7 -2,-3 -3.9,-3 z m 0,6 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
+         id="path4"
+         style="fill:#715ec7;fill-opacity:1" /><path
+         d="m 15,20 c -1.9,0 -3.4,1.3 -3.9,3 H 2 v 2 h 9.1 c 0.4,1.7 2,3 3.9,3 1.9,0 3.4,-1.3 3.9,-3 H 46 V 23 H 18.9 c -0.5,-1.7 -2,-3 -3.9,-3 z m 0,6 c -1.1,0 -2,-0.9 -2,-2 0,-1.1 0.9,-2 2,-2 1.1,0 2,0.9 2,2 0,1.1 -0.9,2 -2,2 z"
+         id="path6"
+         style="display:inline;fill:#715ec7;fill-opacity:1" /></g></g></svg>

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 ProcessOptions from "./shop_components.jsx";
+import { CustomizeButton } from "./shop_components.jsx";
 import { OverlayTrigger } from "react-bootstrap";
 
 
@@ -699,37 +699,31 @@ class ProductCartItem extends React.PureComponent {
 
               {warning ? (
                 <img className="alert-warning" src={`/images${warning.icon}`} />
-              ) : (options ? <img className="alert-info" src="/images/shop/icon-customize.svg" /> : null) }
+              ) : (options ? (<CustomizeButton
+                  options={options}
+                  data={options_data}
+                  key={"popover" + index}
+                  id={"popover" + index}
+                  big={data.size == "big"}
+                  target={{
+                    construct: ((outvar, value) => {
+                      //console.log("construct", outvar, value, options_data);
+                      options_data[outvar] = value;
+                      this.setState(options_data);
+                    }),
+                    update: ((outvar, value) => {
+                      //console.log("update", outvar, value, options_data);
+                      if (outvar in options_data) options_data[outvar] = value;
+                      this.setState(options_data);
+                    }),
+                    unmount: ((outvar) => {
+                      //console.log("delete", outvar);
+                      delete options_data[outvar];
+                    })
+                  }}
+              />) : null) }
 
-              {options ? (
-                  <div
-                      style={{'display': model.showOverlayRemove ? 'flex' : 'none'}}
-                      className="overlayVariant">
 
-                    <ProcessOptions
-                      options={options}
-                      data={options_data}
-                      key={"processed_options" + index}
-                      id={"processed_options" + index}
-                      target={{
-                        construct: ((outvar, value) => {
-                          //console.log("construct", outvar, value, options_data);
-                          options_data[outvar] = value;
-                          this.setState(options_data);
-                        }),
-                        update: ((outvar, value) => {
-                          //console.log("update", outvar, value, options_data);
-                          if (outvar in options_data) options_data[outvar] = value;
-                          this.setState(options_data);
-                        }),
-                        unmount: ((outvar) => {
-                          //console.log("delete", outvar);
-                          delete options_data[outvar];
-                        })
-                      }}
-                    />
-                  </div>
-              ) : null }
 
               {warning && model.showWarning &&  (
                 <div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
@@ -1428,8 +1422,7 @@ class OrderSumary extends React.PureComponent {
 
           <tbody>
             {summary.map((item, index) => {
-              let alert;
+              let alert, warning, options;
-              let warning;
 
               if (itemsData[index] && itemsData[index].warnings) {
                 alert = itemsData[index];
@@ -1438,6 +1431,7 @@ class OrderSumary extends React.PureComponent {
                   warning = alert.warnings[warningsKeys[0]];
                 }
               }
+              options = itemsData[index] && itemsData[index].options;
 
               return (
                 <tr key={item.id}
@@ -1465,15 +1459,15 @@ class OrderSumary extends React.PureComponent {
                           className="alert-warning"
                           src={`/images/${warning.icon}`}
                       />
-                    ) : (
+                    ) : ( options ?
-                      <img
+                      (<img
                           style={{'marginLeft': '10px'}}
                           className="alert-info"
                           src="/images/shop/icon-customize.svg"
-                      />
+                      />) : null
                     )}
 
-                    {!warning && (
+                    {(!warning && !options) && (
                       <span style={{
                         'display': 'inline-block',
                         'width': '30px',
@@ -2336,14 +2330,13 @@ class Shop extends React.PureComponent {
       }
     }
 
-    itemsCloned.forEach((_elem, idx) => {
+    itemsCloned.forEach((elem, idx) => {
-      if (!(idx in itemsData)) itemsData[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

@@ -2,6 +2,7 @@
 
 import React, {Component} from "react";
 import jsonLogic from 'json-logic-js';
+import { useState } from 'react';
 
 // https://stackoverflow.com/a/70511311
 const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
@@ -263,4 +264,28 @@ export default function ProcessOptions({options, data, target, id}) {
             return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
         }
     }
-}
+}
+
+export function CustomizeButton({options, data, target, id, big}) {
+    const [show, setShow] = useState(false);
+
+    let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard")
+    const handleClick = (event) => {
+        setShow(!show);
+    };
+
+    return (
+        <div>
+            <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"} onClick={handleClick} />
+            <div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
+                <ProcessOptions
+                    options={options}
+                    data={data}
+                    key={"processed_options_" + id}
+                    id={"processed_options_" + id}
+                    target={target}
+                />
+            </div>
+        </div>
+    );
+}

static/js/shop_data.js

@@ -147,6 +147,28 @@ const shop_data = {
       nbrCurrentClock: 0,
       slotOccupied: 1,
       clockOccupied: 0,
+      options: [
+        {type: "Radio", args: {title: "Variant", outvar: "variant", variants: ["standalone", "master", "satellite"]}},
+        {
+          "if": [
+            {
+              "in": [
+                {"var": "variant"}, [
+                  "master", "standalone"
+                ]
+              ]
+            },
+            [
+              {type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24"}},
+              {type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
+              {type: "SwitchLine", args: {title: "MAC", outvar: "mac"}},
+              {type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}},
+            ],
+            null
+          ]
+        },
+        null
+      ],
       rules: {
         maxSlot: {
           type: 'kaslisoc-max-slot',
@@ -262,6 +284,10 @@ const shop_data = {
       nbrClockMax: 0,
       slotOccupied: 1,
       clockOccupied: 0,
+      options: [
+        {type: "Switch", args: {title: "Output upper bank", outvar: "upper_bank"}},
+        {type: "Switch", args: {title: "Output lower bank", outvar: "lower_bank", fallback: true}}
+      ],
       rules: {
         resources: {
           type: 'bnc-dio',
@@ -283,6 +309,10 @@ const shop_data = {
       ],
       datasheet_file: '/docs/sinara-datasheets/2118-2128.pdf',
       datasheet_name: '2118/2128 BNC/SMA-TTL datasheet',
+      options: [
+        {type: "Switch", args: {title: "Output upper bank", outvar: "upper_bank"}},
+        {type: "Switch", args: {title: "Output lower bank", outvar: "lower_bank", fallback: true}}
+      ],
       size: 'small',
       type: null,
       hp: 4,