From ff8a6d54bc38757bea2d041966fc46c92fe917bc Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Fri, 18 Aug 2023 15:51:00 +0800
Subject: [PATCH] Add switch and line

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 static/js/shop.jsx            |   2 -
 static/js/shop_components.jsx | 108 ++++++++++++++++++++++++++++++----
 static/js/shop_data.js        |  17 +++---
 3 files changed, 104 insertions(+), 23 deletions(-)

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 {
                   </div>
               ) : null }
 
-
-
               {warning && model.showWarning &&  (
                 <div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
                   <p className="rule warning">
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 (
-            <div className="shop-radio" key={this.state.id}>
+            <div className="shop-radio" key={this.props.id}>
                 {this.props.title}
                 {this.props.variants.map((variant, _) => (
                     <div className="form-check" key={key + variant}>
@@ -60,18 +55,105 @@ class Radio extends Component {
 }
 
 function RadioWrapper(target, id, data, {title, variants, outvar}) {
-    return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id} data={data} />;
+    return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id} data={data}/>;
+}
+
+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 (
+            <div className="shop-switch" key={this.props.id}>
+                <div className="form-check form-switch" key={key}>
+                    <input
+                        className="form-check-input"
+                        type="checkbox"
+                        role="switch"
+                        id={key}
+                        checked={this.state.checked}
+                        onClick={this.handleClick}
+                        onChange={this.handleClick}
+                    />
+                    <label className="form-check-label" htmlFor={key}>
+                        {this.props.title}
+                    </label>
+                </div>
+            </div>
+        );
+    }
+}
+
+function SwitchWrapper(target, id, data, {title, fallback, outvar}) {
+    return <Switch target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
 }
 
 
-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 (
+            <div className="shop-switch" key={this.props.id}>
+                <label htmlFor={key} className="form-label">{this.props.title}: </label>
+                <input type="email" className="form-control" id={key} onChange={this.handleClick} value={this.state.text} />
+            </div>
+        );
+    }
+}
+
+function LineWrapper(target, id, data, {title, fallback, outvar}) {
+    return <Line target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
+}
+
+
+function UnimplementedComponent(type, id) {
     //console.error("Missing component with type:", type)
-    return <div key={type + id} style={{background: "red"}}>MISSING</div>
+    return <div key={type + id} style={{background: "red"}}>UNIMPLEMENTED</div>
 }
 
 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: {