From 2e6f56c4e7de1d375eb91e188c3697383b31638f Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sun, 2 Jul 2017 12:19:32 +0800
Subject: [web] Try toggle options in option modal.

---
 web/src/js/components/Modal/OptionModal.jsx |  6 +++-
 web/src/js/components/Modal/OptionTypes.jsx | 48 +++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 web/src/js/components/Modal/OptionTypes.jsx

(limited to 'web/src/js/components/Modal')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 500495c4..c9a56d09 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as modalAction from '../../ducks/ui/modal'
+import { SettingsToggle } from '../Header/MenuToggle'
+import { OptionsToggle } from './OptionTypes'
 
 class PureOptionModal extends Component {
 
@@ -26,7 +28,9 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-body">
-                    ...
+                    <OptionsToggle option="http2">HTTP/2.0</OptionsToggle>
+                    <OptionsToggle option="anticache">Anticache</OptionsToggle>
+                    <OptionsToggle option="anticomp">Anticomp</OptionsToggle>
                 </div>
 
                 <div className="modal-footer">
diff --git a/web/src/js/components/Modal/OptionTypes.jsx b/web/src/js/components/Modal/OptionTypes.jsx
new file mode 100644
index 00000000..8a9325e1
--- /dev/null
+++ b/web/src/js/components/Modal/OptionTypes.jsx
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { update as updateOptions } from '../../ducks/options'
+
+MenuToggle.propTypes = {
+    value: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+export function MenuToggle({ value, onChange, children }) {
+    return (
+        <div className="menu-entry">
+            <label>
+                <input type="checkbox"
+                        checked={value}
+                        onChange={onChange}/>
+                {children}
+            </label>
+        </div>
+    )
+}
+
+OptionsToggle.propTypes = {
+    option: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+}
+
+export function OptionsToggle({ option, children, options, updateOptions }) {
+    return (
+        <MenuToggle
+            value={ options[option].value }
+            onChange={() => {console.log(options[option]);
+                updateOptions({ [option]: !(options[option].value)}) }}
+        >
+            {children}
+        </MenuToggle>
+    )
+}
+
+OptionsToggle = connect(
+    state => ({
+        options: state.options,
+    }),
+    {
+        updateOptions,
+    }
+)(OptionsToggle)
-- 
cgit v1.2.3


From aa01a62df7ce015ba4bf3c5ba9f3074616530496 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Wed, 5 Jul 2017 08:40:21 +0800
Subject: [web] Add keys argument for dump_dict in optmanager.

---
 web/src/js/components/Modal/OptionMaster.jsx | 138 +++++++++++++++++++++++++++
 web/src/js/components/Modal/OptionTypes.jsx  |  48 ----------
 2 files changed, 138 insertions(+), 48 deletions(-)
 create mode 100644 web/src/js/components/Modal/OptionMaster.jsx
 delete mode 100644 web/src/js/components/Modal/OptionTypes.jsx

(limited to 'web/src/js/components/Modal')

diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
new file mode 100644
index 00000000..e16319fb
--- /dev/null
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -0,0 +1,138 @@
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { update as updateOptions } from '../../ducks/options'
+
+PureBooleanOption.PropTypes = {
+    value: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+function PureBooleanOption({ value, onChange, name, help}) {
+        return (
+            <div className="menu-entry">
+                <label>
+                    <input type="checkbox"
+                            checked={value}
+                            onChange={onChange}
+                            title={help}
+                    />
+                    { name }
+                </label>
+            </div>
+        )
+}
+
+PureStringOption.PropTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+function PureStringOption( { value, onChange, name, help }) {
+    let onKeyDown = (e) => {e.stopPropagation()}
+    return (
+        <div className="menu-entry">
+            <label>
+                { name }
+                <input type="text"
+                        value={value}
+                        onChange={onChange}
+                        title={help}
+                        onKeyDown={onKeyDown}
+                />
+            </label>
+        </div>
+    )
+}
+
+PureNumberOption.PropTypes = {
+    value: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+function PureNumberOption( {value, onChange, name, help }) {
+    let onKeyDown = (e) => {e.stopPropagation()}
+    return (
+        <div className="menu-entry">
+            <label>
+                { name }
+                <input type="number"
+                        value={value}
+                        onChange={onChange}
+                        title={help}
+                        onKeyDown={onKeyDown}
+                />
+            </label>
+        </div>
+    )
+}
+
+PureChoicesOption.PropTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+function PureChoicesOption( { value, onChange, name, help, choices }) {
+    return (
+        <div className="menu-entry">
+            <label htmlFor="">
+                { name }
+                <select name={name} onChange={onChange} title={help} selected={value}>
+                    { choices.map(choice => (
+                        <option value={choice}> {choice} </option>
+                    ))}
+                </select>
+            </label>
+        </div>
+    )
+}
+
+const OptionTypes = {
+    bool: PureBooleanOption,
+    str: PureStringOption,
+    int: PureNumberOption,
+    "optional str": PureStringOption,
+    "sequence of str": PureStringOption,
+}
+
+Wrapper.displayName = 'OptionWrapper'
+
+
+function Wrapper({option, options, updateOptions, ...props}) {
+    let optionObj = options[option],
+        WrappedComponent = null
+    if (optionObj.choices) {
+        WrappedComponent = PureChoicesOption
+    } else {
+        WrappedComponent = OptionTypes[optionObj.type]
+    }
+
+    let onChange = (e) => {
+        switch (optionObj.type) {
+            case 'bool' :
+                updateOptions({[option]: !optionObj.value})
+                break
+            case 'int':
+                updateOptions({[option]: parseInt(e.target.value)})
+                break
+            default:
+                updateOptions({[option]: e.target.value})
+        }
+    }
+    return <WrappedComponent
+        children={props.children}
+        value={optionObj.value}
+        onChange={onChange}
+        name={option}
+        help={optionObj.help}
+        choices={optionObj.choices}
+    />
+}
+
+export default connect(
+    state => ({
+        options: state.options,
+    }),
+    {
+        updateOptions,
+    }
+)(Wrapper)
diff --git a/web/src/js/components/Modal/OptionTypes.jsx b/web/src/js/components/Modal/OptionTypes.jsx
deleted file mode 100644
index 8a9325e1..00000000
--- a/web/src/js/components/Modal/OptionTypes.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { update as updateOptions } from '../../ducks/options'
-
-MenuToggle.propTypes = {
-    value: PropTypes.bool.isRequired,
-    onChange: PropTypes.func.isRequired,
-    children: PropTypes.node.isRequired,
-}
-
-export function MenuToggle({ value, onChange, children }) {
-    return (
-        <div className="menu-entry">
-            <label>
-                <input type="checkbox"
-                        checked={value}
-                        onChange={onChange}/>
-                {children}
-            </label>
-        </div>
-    )
-}
-
-OptionsToggle.propTypes = {
-    option: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-}
-
-export function OptionsToggle({ option, children, options, updateOptions }) {
-    return (
-        <MenuToggle
-            value={ options[option].value }
-            onChange={() => {console.log(options[option]);
-                updateOptions({ [option]: !(options[option].value)}) }}
-        >
-            {children}
-        </MenuToggle>
-    )
-}
-
-OptionsToggle = connect(
-    state => ({
-        options: state.options,
-    }),
-    {
-        updateOptions,
-    }
-)(OptionsToggle)
-- 
cgit v1.2.3


From d889892ba570297047eb4ada342ddf5584b0e43d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Wed, 5 Jul 2017 08:45:31 +0800
Subject: [web] List all options in option modal.

---
 web/src/js/components/Modal/OptionModal.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'web/src/js/components/Modal')

diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index c9a56d09..582ac55f 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,18 +1,17 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as modalAction from '../../ducks/ui/modal'
-import { SettingsToggle } from '../Header/MenuToggle'
-import { OptionsToggle } from './OptionTypes'
+import Option from './OptionMaster'
 
 class PureOptionModal extends Component {
 
     constructor(props, context) {
         super(props, context)
-        this.state = { title: 'Options',  }
+        this.state = { title: 'Options' }
     }
 
     render() {
-        const { hideModal } = this.props
+        const { hideModal, options } = this.props
         const { title } = this.state
         return (
             <div>
@@ -28,9 +27,11 @@ class PureOptionModal extends Component {
                 </div>
 
                 <div className="modal-body">
-                    <OptionsToggle option="http2">HTTP/2.0</OptionsToggle>
-                    <OptionsToggle option="anticache">Anticache</OptionsToggle>
-                    <OptionsToggle option="anticomp">Anticomp</OptionsToggle>
+                    {
+                        Object.keys(options).sort().map((key) => (
+                            <Option option={key}/>
+                        ))
+                    }
                 </div>
 
                 <div className="modal-footer">
@@ -43,7 +44,7 @@ class PureOptionModal extends Component {
 
 export default connect(
     state => ({
-
+        options: state.options
     }),
     { hideModal: modalAction.hideModal }
 )(PureOptionModal)
-- 
cgit v1.2.3


From 7516f706b41de0c10c2bf9b88278afb6e3edcd4a Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Wed, 5 Jul 2017 18:55:56 +0800
Subject: [web] Update Option Modal UI and its tests.

---
 web/src/js/components/Modal/OptionMaster.jsx | 65 ++++++++++------------------
 web/src/js/components/Modal/OptionModal.jsx  | 20 +++++++--
 2 files changed, 39 insertions(+), 46 deletions(-)

(limited to 'web/src/js/components/Modal')

diff --git a/web/src/js/components/Modal/OptionMaster.jsx b/web/src/js/components/Modal/OptionMaster.jsx
index e16319fb..c25dda72 100644
--- a/web/src/js/components/Modal/OptionMaster.jsx
+++ b/web/src/js/components/Modal/OptionMaster.jsx
@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
-import { update as updateOptions } from '../../ducks/options'
 
 PureBooleanOption.PropTypes = {
     value: PropTypes.bool.isRequired,
@@ -9,16 +7,14 @@ PureBooleanOption.PropTypes = {
 
 function PureBooleanOption({ value, onChange, name, help}) {
         return (
-            <div className="menu-entry">
                 <label>
+                    { name }
                     <input type="checkbox"
                             checked={value}
                             onChange={onChange}
                             title={help}
                     />
-                    { name }
                 </label>
-            </div>
         )
 }
 
@@ -30,7 +26,6 @@ PureStringOption.PropTypes = {
 function PureStringOption( { value, onChange, name, help }) {
     let onKeyDown = (e) => {e.stopPropagation()}
     return (
-        <div className="menu-entry">
             <label>
                 { name }
                 <input type="text"
@@ -40,7 +35,6 @@ function PureStringOption( { value, onChange, name, help }) {
                         onKeyDown={onKeyDown}
                 />
             </label>
-        </div>
     )
 }
 
@@ -52,7 +46,6 @@ PureNumberOption.PropTypes = {
 function PureNumberOption( {value, onChange, name, help }) {
     let onKeyDown = (e) => {e.stopPropagation()}
     return (
-        <div className="menu-entry">
             <label>
                 { name }
                 <input type="number"
@@ -62,7 +55,6 @@ function PureNumberOption( {value, onChange, name, help }) {
                         onKeyDown={onKeyDown}
                 />
             </label>
-        </div>
     )
 }
 
@@ -73,16 +65,14 @@ PureChoicesOption.PropTypes = {
 
 function PureChoicesOption( { value, onChange, name, help, choices }) {
     return (
-        <div className="menu-entry">
             <label htmlFor="">
                 { name }
                 <select name={name} onChange={onChange} title={help} selected={value}>
-                    { choices.map(choice => (
-                        <option value={choice}> {choice} </option>
+                    { choices.map((choice, index) => (
+                        <option key={index} value={choice}> {choice} </option>
                     ))}
                 </select>
             </label>
-        </div>
     )
 }
 
@@ -94,45 +84,36 @@ const OptionTypes = {
     "sequence of str": PureStringOption,
 }
 
-Wrapper.displayName = 'OptionWrapper'
-
-
-function Wrapper({option, options, updateOptions, ...props}) {
-    let optionObj = options[option],
-        WrappedComponent = null
-    if (optionObj.choices) {
+export default function OptionMaster({option, name, updateOptions, ...props}) {
+    let WrappedComponent = null
+    if (option.choices) {
         WrappedComponent = PureChoicesOption
     } else {
-        WrappedComponent = OptionTypes[optionObj.type]
+        WrappedComponent = OptionTypes[option.type]
     }
 
     let onChange = (e) => {
-        switch (optionObj.type) {
+        switch (option.type) {
             case 'bool' :
-                updateOptions({[option]: !optionObj.value})
+                updateOptions({[name]: !option.value})
                 break
             case 'int':
-                updateOptions({[option]: parseInt(e.target.value)})
+                updateOptions({[name]: parseInt(e.target.value)})
                 break
             default:
-                updateOptions({[option]: e.target.value})
+                updateOptions({[name]: e.target.value})
         }
     }
-    return <WrappedComponent
-        children={props.children}
-        value={optionObj.value}
-        onChange={onChange}
-        name={option}
-        help={optionObj.help}
-        choices={optionObj.choices}
-    />
+    return (
+        <div className="menu-entry">
+            <WrappedComponent
+                children={props.children}
+                value={option.value}
+                onChange={onChange}
+                name={name}
+                help={option.help}
+                choices={option.choices}
+            />
+        </div>
+    )
 }
-
-export default connect(
-    state => ({
-        options: state.options,
-    }),
-    {
-        updateOptions,
-    }
-)(Wrapper)
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
index 582ac55f..ef3a224a 100644
--- a/web/src/js/components/Modal/OptionModal.jsx
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as modalAction from '../../ducks/ui/modal'
+import { update as updateOptions } from '../../ducks/options'
 import Option from './OptionMaster'
 
 class PureOptionModal extends Component {
@@ -28,9 +29,17 @@ class PureOptionModal extends Component {
 
                 <div className="modal-body">
                     {
-                        Object.keys(options).sort().map((key) => (
-                            <Option option={key}/>
-                        ))
+                        Object.keys(options).sort()
+                            .map((key, index) => {
+                                let option = options[key];
+                                return (
+                                    <Option
+                                        key={index}
+                                        name={key}
+                                        updateOptions={updateOptions}
+                                        option={option}
+                                    />)
+                            })
                     }
                 </div>
 
@@ -46,5 +55,8 @@ export default connect(
     state => ({
         options: state.options
     }),
-    { hideModal: modalAction.hideModal }
+    {
+        hideModal: modalAction.hideModal,
+        updateOptions: updateOptions,
+    }
 )(PureOptionModal)
-- 
cgit v1.2.3