1 files changed, 76 insertions, 57 deletions

diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 226cb61f..643659c3 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -4,9 +4,10 @@ import $ from "jquery";
 
 import Filt from "../filt/filt.js";
 import {Key} from "../utils.js";
-import {Router, ToggleComponent} from "./common.js";
+import {ToggleInputButton, ToggleButton} from "./common.js";
 import {SettingsActions, FlowActions} from "../actions.js";
 import {Query} from "../actions.js";
+import {SettingsState} from "./common.js";
 
 var FilterDocs = React.createClass({
     statics: {
@@ -161,7 +162,6 @@ var FilterInput = React.createClass({
 });
 
 export var MainMenu = React.createClass({
-    mixins: [Router],
     propTypes: {
         settings: React.PropTypes.object.isRequired,
     },
@@ -172,19 +172,19 @@ export var MainMenu = React.createClass({
     onSearchChange: function (val) {
         var d = {};
         d[Query.SEARCH] = val;
-        this.updateLocation(undefined, d);
+        this.props.updateLocation(undefined, d);
     },
     onHighlightChange: function (val) {
         var d = {};
         d[Query.HIGHLIGHT] = val;
-        this.updateLocation(undefined, d);
+        this.props.updateLocation(undefined, d);
     },
     onInterceptChange: function (val) {
         SettingsActions.update({intercept: val});
     },
     render: function () {
-        var search = this.getQuery()[Query.SEARCH] || "";
-        var highlight = this.getQuery()[Query.HIGHLIGHT] || "";
+        var search = this.props.query[Query.SEARCH] || "";
+        var highlight = this.props.query[Query.HIGHLIGHT] || "";
         var intercept = this.props.settings.intercept || "";
 
         return (
@@ -224,72 +224,88 @@ var ViewMenu = React.createClass({
         title: "View",
         route: "flows"
     },
-    mixins: [Router],
     toggleEventLog: function () {
         var d = {};
-        if (this.getQuery()[Query.SHOW_EVENTLOG]) {
+        if (this.props.query[Query.SHOW_EVENTLOG]) {
             d[Query.SHOW_EVENTLOG] = undefined;
         } else {
             d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short
         }
 
-        this.updateLocation(undefined, d);
+        this.props.updateLocation(undefined, d);
         console.log('toggleevent');
     },
     render: function () {
-      var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG];
+      var showEventLog = this.props.query[Query.SHOW_EVENTLOG];
       return (
-        <div>
-          <ToggleComponent
-            checked={showEventLog}
-            name = "Show Eventlog"
-            onToggleChanged={this.toggleEventLog}/>
-        </div>
+          <div>
+            <div className="menu-row">
+              <ToggleButton
+                checked={showEventLog}
+                name = "Show Eventlog"
+                onToggleChanged={this.toggleEventLog}/>
+            </div>
+            <div className="clearfix"></div>
+          </div>
       );
     }
 });
 
-
-class OptionMenu extends React.Component{
-    static title = "Options";
-    constructor(props){
-      super(props);
-      this.state = {
-        options :
-        [
-          {name: "--host", checked: true},
-          {name: "--no-upstream-cert", checked: false},
-          {name: "--http2", checked: false},
-          {name: "--anticache", checked: false},
-          {name: "--anticomp", checked: false},
-          {name: "--stickycookie", checked: true},
-          {name: "--stickyauth", checked: false},
-          {name: "--stream", checked: false}
-        ]
-      }
-    }
-    setOption(entry){
-      console.log(entry.name);//TODO: get options from outside and remove state
-      entry.checked = !entry.checked;
-      this.setState({options: this.state.options});
-    }
-    render() {
-      return (
+export const OptionMenu = (props) => {
+    const {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickycookie, stickyauth, stream} = props.settings;
+    return (
         <div>
-          {this.state.options.map((entry, i) => {
-            return (
-              <ToggleComponent
-                key={i}
-                checked={entry.checked}
-                name = {entry.name}
-                onToggleChanged={() => this.setOption(entry)}/>
-            );
-          })}
+            <div className="menu-row">
+                <ToggleButton name="showhost"
+                              checked={showhost}
+                              onToggleChanged={() => SettingsActions.update({showhost: !showhost})}
+                />
+                <ToggleButton name="no_upstream_cert"
+                              checked={no_upstream_cert}
+                              onToggleChanged={() => SettingsActions.update({no_upstream_cert: !no_upstream_cert})}
+                />
+                <ToggleButton name="rawtcp"
+                              checked={rawtcp}
+                              onToggleChanged={() => SettingsActions.update({rawtcp: !rawtcp})}
+                />
+                <ToggleButton name="http2"
+                              checked={http2}
+                              onToggleChanged={() => SettingsActions.update({http2: !http2})}
+                />
+                <ToggleButton name="anticache"
+                              checked={anticache}
+                              onToggleChanged={() => SettingsActions.update({anticache: !anticache})}
+                />
+                <ToggleButton name="anticomp"
+                              checked={anticomp}
+                              onToggleChanged={() => SettingsActions.update({anticomp: !anticomp})}
+                />
+                <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
+                    checked={Boolean(stickyauth)}
+                    txt={stickyauth || ""}
+                    onToggleChanged={txt => SettingsActions.update({stickyauth: (!stickyauth ? txt : null)})}
+                />
+                <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
+                    checked={Boolean(stickycookie)}
+                    txt={stickycookie || ""}
+                    onToggleChanged={txt => SettingsActions.update({stickycookie: (!stickycookie ? txt : null)})}
+                />
+                <ToggleInputButton name="stream" placeholder="stream..."
+                    checked={Boolean(stream)}
+                    txt={stream || ""}
+                    inputType = "number"
+                    onToggleChanged={txt => SettingsActions.update({stream: (!stream ? txt : null)})}
+                />
+            </div>
+            <div className="clearfix"/>
         </div>
-      );
-    }
-}
+    );
+};
+OptionMenu.title = "Options";
 
+OptionMenu.propTypes = {
+    settings: React.PropTypes.object.isRequired
+};
 
 var ReportsMenu = React.createClass({
     statics: {
@@ -391,7 +407,6 @@ var header_entries = [MainMenu, ViewMenu, OptionMenu /*, ReportsMenu */];
 
 
 export var Header = React.createClass({
-    mixins: [Router],
     propTypes: {
         settings: React.PropTypes.object.isRequired,
     },
@@ -402,7 +417,7 @@ export var Header = React.createClass({
     },
     handleClick: function (active, e) {
         e.preventDefault();
-        this.updateLocation(active.route);
+        this.props.updateLocation(active.route);
         this.setState({active: active});
     },
     render: function () {
@@ -430,7 +445,11 @@ export var Header = React.createClass({
                     {header}
                 </nav>
                 <div className="menu">
-                    <this.state.active ref="active" settings={this.props.settings}/>
+                    <this.state.active
+                        settings={this.props.settings}
+                        updateLocation={this.props.updateLocation}
+                        query={this.props.query}
+                    />
                 </div>
             </header>
         );