diff --git a/static/js/shop.jsx b/static/js/shop.jsx index a2c7f46..1b812c0 100644 --- a/static/js/shop.jsx +++ b/static/js/shop.jsx @@ -719,8 +719,6 @@ class ProductCartItem extends React.PureComponent { ) : null } - - {warning && model.showWarning && (

diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx index 3575a38..be43d9f 100644 --- a/static/js/shop_components.jsx +++ b/static/js/shop_components.jsx @@ -11,32 +11,27 @@ class Radio extends Component { super(props); // Initialize the state object with the initial values from the props this.state = { - target: props.target, - outvar: props.outvar, - variants: props.variants, variant: props.outvar in props.data ? props.data[props.outvar] : props.variants[0], - id: props.id }; // Bind the event handler to this this.handleClick = this.handleClick.bind(this); - this.state.target(this.state.outvar, this.state.variant); + this.props.target(this.props.outvar, this.state.variant); } handleClick(variant) { - console.log(variant); // Update the state object with the new value for outvar this.setState({ ...this.state, variant: variant }); - this.state.target(this.state.outvar, variant); + this.props.target(this.props.outvar, variant); } render() { - let key = this.state.id + this.state.outvar; + let key = this.props.id + this.props.outvar; return ( -

+
{this.props.title} {this.props.variants.map((variant, _) => (
@@ -60,18 +55,105 @@ class Radio extends Component { } function RadioWrapper(target, id, data, {title, variants, outvar}) { - return ; + return ; +} + +class Switch extends Component { + constructor(props) { + super(props); + // Initialize the state object with the initial values from the props + this.state = { + checked: props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback) + }; + + // Bind the event handler to this + this.handleClick = this.handleClick.bind(this); + this.props.target(this.props.outvar, this.state.checked); + } + + handleClick() { + // Update the state object with the new value for outvar + let new_checked = !this.state.checked; + this.setState({ + checked: new_checked + }); + this.props.target(this.props.outvar, new_checked); + } + + render() { + let key = this.props.id + this.props.outvar; + return ( +
+
+ + +
+
+ ); + } +} + +function SwitchWrapper(target, id, data, {title, fallback, outvar}) { + return ; } -function MissingComponent(type, id) { +class Line extends Component { + constructor(props) { + super(props); + // Initialize the state object with the initial values from the props + this.state = { + text: props.outvar in props.data ? props.data[props.outvar] : (props.fallback ? props.fallback : "") + }; + // Bind the event handler to this + this.handleClick = this.handleClick.bind(this); + this.props.target(this.props.outvar, this.state.text); + } + + handleClick(element) { + let text = element.target.value; + this.setState({ + text: text + }); + this.props.target(this.props.outvar, text); + } + + render() { + let key = this.props.id + this.props.outvar; + return ( +
+ + +
+ ); + } +} + +function LineWrapper(target, id, data, {title, fallback, outvar}) { + return ; +} + + +function UnimplementedComponent(type, id) { //console.error("Missing component with type:", type) - return
MISSING
+ return
UNIMPLEMENTED
} const componentsList = { "Radio": RadioWrapper, - "Default": MissingComponent, + "Switch": SwitchWrapper, + "Line": LineWrapper, + "Default": UnimplementedComponent, }; diff --git a/static/js/shop_data.js b/static/js/shop_data.js index 0c380af..6da3d7b 100644 --- a/static/js/shop_data.js +++ b/static/js/shop_data.js @@ -76,21 +76,22 @@ const shop_data = { ] }, [ - {type: "LineIPv4", args: {title: "IPv4", outvar: "ipv4", default: "192.168.1.75/24"}}, + {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: "Switch", args: {title: "Ext CLK", outvar: "ext_clk"}}, + { + "if": [ + {"===": [{"var": "ext_clk"}, true]}, + {type: "Line", args: {title: "Frequency", outvar: "ext_clk_freq", fallback: "125 MHz"}}, + null + ] + } ], null ] }, - { - "if": [ - {"===": [{"var": "ext_clk"}, true]}, - {type: "line", args: {title: "Frequency", outvar: "ext_clk"}}, - null - ] - } + null ], rules: { maxSlot: {