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

Add options for the cards #93

Merged
sb10q merged 42 commits from esavkin/web2019:85-variants into master 2023-11-28 15:32:34 +08:00
Conversation 24 Commits 42 Files Changed 9 +111 -10
3 changed files with 111 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c55687e05a - Show all commits

2
sass/css/_shop.scss
View File

@ -273,7 +273,6 @@ button {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: start; align-items: start;
justify-content: center;
text-align: left; text-align: left;
background-color: white; background-color: white;
color: black; color: black;
@ -496,7 +495,6 @@ button {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: start; align-items: start;
justify-content: center;
text-align: left; text-align: left;
background-color: white; background-color: white;
color: black; 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") { } else if (options_t === "object") {
if ( if (
trueTypeOf(options.type) === "string" && trueTypeOf(options.type) === "string" &&
trueTypeOf(options.args) === "object" (trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
) { ) {
if (options.type in componentsList) { if (options.type in componentsList) {
return componentsList[options.type](target, id + options.type, data, options.args); 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 { } else {
return componentsList["Default"](options.type, id + "missing"); 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 [size, setSize] = useState({w: 0, h: 0});
const close = () => { const close = () => {
setShow(false); setShow(false);
document.removeEventListener("scroll", close, true); document.removeEventListener("scroll", reposition, true);
} }
const ref = useClickAway(close); const ref = useClickAway(close);
const reposition = () => { const reposition = () => {
console.trace("reposition")
let popup_button = document.getElementById(id + "img"); let popup_button = document.getElementById(id + "img");
let rect = popup_button.getBoundingClientRect() let rect = popup_button.getBoundingClientRect()
let pos_x = (rect.left + rect.right) / 2; let pos_x = (rect.left + rect.right) / 2;
let pos_y = (rect.top + rect.bottom) / 2; let pos_y = (rect.top + rect.bottom) / 2;
console.trace("reposition", pos_x, pos_y)
if (pos_x + size.w > window.innerWidth) { if (pos_x + size.w > window.innerWidth) {
setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2}); setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2});
} else { } else {
@ -408,7 +415,7 @@ export function OptionsSummaryPopup({id, data}) {
const handleClick = (event) => { const handleClick = (event) => {
setShow(!show); setShow(!show);
if (!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: "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: "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: "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"}} {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: "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: "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: "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"}} {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: { rules: {
resources: { 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', size: 'small',
type: null, 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"}}, {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 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', size: 'small',
type: null, type: null,