M-Labs
/
web2019
5
0
Fork 2
Code Issues 16 Pull Requests Releases Wiki Activity

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

Signed-off-by: Egor Savkin <es@m-labs.hk>
Egor Savkin 2023-09-11 17:38:40 +08:00
parent 4ff436dfe4
commit c4dd9c49fb
3 changed files with 111 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/css/_shop.scss
View File

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

13
static/js/shop_components.jsx
View File

@ -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);
}
};

106
static/js/shop_data.js
View File

@ -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,