Add groups of options and some fixes for long lists of options

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

sass/css/_shop.scss

@@ -273,7 +273,6 @@ button {
                     position: absolute;
                     display: flex;
                     align-items: start;
-                    justify-content: center;
                     text-align: left;
                     background-color: white;
                     color: black;
@@ -496,7 +495,6 @@ button {
                         position: absolute;
                         display: flex;
                         align-items: start;
-                        justify-content: center;
                         text-align: left;
                         background-color: white;
                         color: black;

static/js/shop_components.jsx

@@ -322,10 +322,15 @@ export function ProcessOptions({options, data, target, id}) {
     } else if (options_t === "object") {
         if (
             trueTypeOf(options.type) === "string" &&
-            trueTypeOf(options.args) === "object"
+            (trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
         ) {
             if (options.type in componentsList) {
                 return componentsList[options.type](target, id + options.type, data, options.args);
+            } else if (options.type === "Group") {
+                return (
+                    <div className="border rounded" key={id + "group"}>
+                        { ProcessOptions({options: jsonLogic.apply(options.items, data), data: data, target: target, id: id}) }
+                    </div>);
             } else {
                 return componentsList["Default"](options.type, id + "missing");
             }
@@ -371,16 +376,18 @@ export function OptionsSummaryPopup({id, data}) {
     const [size, setSize] = useState({w: 0, h: 0});
     const close = () => {
         setShow(false);
-        document.removeEventListener("scroll", close, true);
+        document.removeEventListener("scroll", reposition, true);
     }
 
     const ref = useClickAway(close);
 
     const reposition = () => {
+        console.trace("reposition")
         let popup_button = document.getElementById(id + "img");
         let rect = popup_button.getBoundingClientRect()
         let pos_x = (rect.left + rect.right) / 2;
         let pos_y = (rect.top + rect.bottom) / 2;
+        console.trace("reposition", pos_x, pos_y)
         if (pos_x + size.w > window.innerWidth) {
             setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2});
         } else {
@@ -408,7 +415,7 @@ export function OptionsSummaryPopup({id, data}) {
     const handleClick = (event) => {
         setShow(!show);
         if (!show) {
-            document.addEventListener("scroll", close, true);
+            document.addEventListener("scroll", reposition, true);
         }
     };
 

static/js/shop_data.js

@@ -79,7 +79,7 @@ const shop_data = {
                   {type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24", tip: "Set up IPv4 address used by core device"}},
                   {type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
                   {type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}, tip: "Use external clock reference: 10, 80 (beta), 100 or 125 MHz. Other variants may be provided if needed."}},
-                  {type: "Switch", args: {title: "Email device_db", outvar: "out", icon: "/shop/icon-leaf.svg", tip: "Send the device_db.py file by email instead of USB-drive"}},
+                  {type: "Switch", args: {title: "Email device_db", outvar: "email_ddb", icon: "/shop/icon-leaf.svg", tip: "Send the device_db.py file by email instead of USB-drive"}},
               ],
               [
                 {type: "Switch", args: {title: "Optic fiber", outvar: "optics", tip: "Use optic fiber instead of direct attach copper cable"}}
@@ -163,7 +163,7 @@ const shop_data = {
               {type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24", tip: "Set up IPv4 address used by core device"}},
               {type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}},
               {type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}, tip: "Use external clock reference: 10, 80 (beta), 100 or 125 MHz. Other variants may be provided if needed."}},
-              {type: "Switch", args: {title: "Email device_db", outvar: "out", icon: "/shop/icon-leaf.svg", tip: "Send the device_db.py file by email instead of USB-drive"}},
+              {type: "Switch", args: {title: "Email device_db", outvar: "email_ddb", icon: "/shop/icon-leaf.svg", tip: "Send the device_db.py file by email instead of USB-drive"}},
             ],
             [
               {type: "Switch", args: {title: "Optic fiber", outvar: "optics", tip: "Use optic fiber instead of direct attach copper cable"}}
@@ -298,7 +298,31 @@ const shop_data = {
             ]
           ]
         },
-        {type: "Switch", args: {title: "Output second group", outvar: "out_second_group", fallback: true, tip: "Switch connectors 4-7 to output"}}
+        {
+          "if": [
+            {"!": {"var": "out_first_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #0", fallback: true, outvar: "term_0", tip: "Enable termination on channel #0"}},
+              {type: "Switch", args: {title: "Termination #1", fallback: true, outvar: "term_1", tip: "Enable termination on channel #1"}},
+              {type: "Switch", args: {title: "Termination #2", fallback: true, outvar: "term_2", tip: "Enable termination on channel #2"}},
+              {type: "Switch", args: {title: "Termination #3", fallback: true, outvar: "term_3", tip: "Enable termination on channel #3"}},
+            ]},
+            null
+          ]
+        },
+        {type: "Switch", args: {title: "Output second group", outvar: "out_second_group", fallback: true, tip: "Switch connectors 4-7 to output"}},
+        {
+          "if": [
+            {"!": {"var": "out_second_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #4", fallback: true, outvar: "term_4", tip: "Enable termination on channel #4"}},
+              {type: "Switch", args: {title: "Termination #5", fallback: true, outvar: "term_5", tip: "Enable termination on channel #5"}},
+              {type: "Switch", args: {title: "Termination #6", fallback: true, outvar: "term_6", tip: "Enable termination on channel #6"}},
+              {type: "Switch", args: {title: "Termination #7", fallback: true, outvar: "term_7", tip: "Enable termination on channel #7"}},
+            ]},
+            null
+          ]
+        }
       ],
       rules: {
         resources: {
@@ -333,7 +357,31 @@ const shop_data = {
             ]
           ]
         },
-        {type: "Switch", args: {title: "Output second group", outvar: "out_second_group", fallback: true, tip: "Switch connectors 4-7 to output"}}
+        {
+          "if": [
+            {"!": {"var": "out_first_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #0", fallback: true, outvar: "term_0", tip: "Enable termination on channel #0"}},
+              {type: "Switch", args: {title: "Termination #1", fallback: true, outvar: "term_1", tip: "Enable termination on channel #1"}},
+              {type: "Switch", args: {title: "Termination #2", fallback: true, outvar: "term_2", tip: "Enable termination on channel #2"}},
+              {type: "Switch", args: {title: "Termination #3", fallback: true, outvar: "term_3", tip: "Enable termination on channel #3"}},
+            ]},
+            null
+          ]
+        },
+        {type: "Switch", args: {title: "Output second group", outvar: "out_second_group", fallback: true, tip: "Switch connectors 4-7 to output"}},
+        {
+          "if": [
+            {"!": {"var": "out_second_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #4", fallback: true, outvar: "term_4", tip: "Enable termination on channel #4"}},
+              {type: "Switch", args: {title: "Termination #5", fallback: true, outvar: "term_5", tip: "Enable termination on channel #5"}},
+              {type: "Switch", args: {title: "Termination #6", fallback: true, outvar: "term_6", tip: "Enable termination on channel #6"}},
+              {type: "Switch", args: {title: "Termination #7", fallback: true, outvar: "term_7", tip: "Enable termination on channel #7"}},
+            ]},
+            null
+          ]
+        }
       ],
       size: 'small',
       type: null,
@@ -380,9 +428,57 @@ const shop_data = {
             ]
           ]
         },
+        {
+          "if": [
+            {"!": {"var": "out_first_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #0", fallback: true, outvar: "term_0", tip: "Enable termination on channel #0"}},
+              {type: "Switch", args: {title: "Termination #1", fallback: true, outvar: "term_1", tip: "Enable termination on channel #1"}},
+              {type: "Switch", args: {title: "Termination #2", fallback: true, outvar: "term_2", tip: "Enable termination on channel #2"}},
+              {type: "Switch", args: {title: "Termination #3", fallback: true, outvar: "term_3", tip: "Enable termination on channel #3"}},
+            ]},
+            null
+          ]
+        },
         {type: "Switch", args: {title: "Output second group", outvar: "out_second_group", fallback: true, tip: "Switch connectors 4-7 to output"}},
+        {
+          "if": [
+            {"!": {"var": "out_second_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #4", fallback: true, outvar: "term_4", tip: "Enable termination on channel #4"}},
+              {type: "Switch", args: {title: "Termination #5", fallback: true, outvar: "term_5", tip: "Enable termination on channel #5"}},
+              {type: "Switch", args: {title: "Termination #6", fallback: true, outvar: "term_6", tip: "Enable termination on channel #6"}},
+              {type: "Switch", args: {title: "Termination #7", fallback: true, outvar: "term_7", tip: "Enable termination on channel #7"}},
+            ]},
+            null
+          ]
+        },
         {type: "Switch", args: {title: "Output third group", outvar: "out_third_group", fallback: true, tip: "Switch connectors 8-11 to output"}},
-        {type: "Switch", args: {title: "Output fourth group", outvar: "out_fourth_group", fallback: true, tip: "Switch connectors 12-15 to output"}}
+        {
+          "if": [
+            {"!": {"var": "out_third_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #8", fallback: true, outvar: "term_8", tip: "Enable termination on channel #8"}},
+              {type: "Switch", args: {title: "Termination #9", fallback: true, outvar: "term_9", tip: "Enable termination on channel #9"}},
+              {type: "Switch", args: {title: "Termination #10", fallback: true, outvar: "term_10", tip: "Enable termination on channel #10"}},
+              {type: "Switch", args: {title: "Termination #11", fallback: true, outvar: "term_11", tip: "Enable termination on channel #11"}},
+            ]},
+            null
+          ]
+        },
+        {type: "Switch", args: {title: "Output fourth group", outvar: "out_fourth_group", fallback: true, tip: "Switch connectors 12-15 to output"}},
+        {
+          "if": [
+            {"!": {"var": "out_fourth_group"}},
+            {type: "Group", items: [
+              {type: "Switch", args: {title: "Termination #12", fallback: true, outvar: "term_12", tip: "Enable termination on channel #12"}},
+              {type: "Switch", args: {title: "Termination #13", fallback: true, outvar: "term_13", tip: "Enable termination on channel #13"}},
+              {type: "Switch", args: {title: "Termination #14", fallback: true, outvar: "term_14", tip: "Enable termination on channel #14"}},
+              {type: "Switch", args: {title: "Termination #15", fallback: true, outvar: "term_15", tip: "Enable termination on channel #15"}},
+            ]},
+            null
+          ]
+        }
       ],
       size: 'small',
       type: null,