From c55687e05a0077cef036a627a8bd6f8f7f43df4d Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Mon, 11 Sep 2023 17:38:40 +0800 Subject: [PATCH] Add groups of options and some fixes for long lists of options Signed-off-by: Egor Savkin --- sass/css/_shop.scss | 2 - static/js/shop_components.jsx | 13 ++++- static/js/shop_data.js | 106 ++++++++++++++++++++++++++++++++-- 3 files changed, 111 insertions(+), 10 deletions(-) diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index 97c475b..9a02dea 100644 --- a/sass/css/_shop.scss +++ b/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; diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx index c0d1224..b074edc 100644 --- a/static/js/shop_components.jsx +++ b/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 ( +
+ { ProcessOptions({options: jsonLogic.apply(options.items, data), data: data, target: target, id: id}) } +
); } 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); } }; diff --git a/static/js/shop_data.js b/static/js/shop_data.js index 0e4c44e..eebe791 100644 --- a/static/js/shop_data.js +++ b/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,