added UI for options menu (#1130)

* added UI for options menu

* update UI for options menu

* update UI for options v2

* update UI for options v2

* added new btn class

* little changes

* little changes

* merge

* deleted branch

* change menu button class

3 files changed, 71 insertions, 17 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index 8fa5e37f..065471d1 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -30,4 +30,8 @@ header {
         max-height: 500px;
         overflow-y: auto;
     }
+}
+
+.menu .btn {
+    margin: 2px 2px 2px 2px;
 }
\ No newline at end of file
diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index ad97ab38..21ca454f 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -131,4 +131,16 @@ export var Splitter = React.createClass({
             </div>
         );
     }
-});
\ No newline at end of file
+});
+
+export const ToggleComponent = (props) =>
+    <div
+      className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
+      onClick={props.onToggleChanged}>
+      <span><i className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}></i> {props.name}</span>
+    </div>
+
+ToggleComponent.propTypes = {
+    name: React.PropTypes.string.isRequired,
+    onToggleChanged: React.PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index b4110851..226cb61f 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -4,7 +4,7 @@ import $ from "jquery";
 
 import Filt from "../filt/filt.js";
 import {Key} from "../utils.js";
-import {Router} from "./common.js";
+import {Router, ToggleComponent} from "./common.js";
 import {SettingsActions, FlowActions} from "../actions.js";
 import {Query} from "../actions.js";
 
@@ -227,7 +227,6 @@ var ViewMenu = React.createClass({
     mixins: [Router],
     toggleEventLog: function () {
         var d = {};
-
         if (this.getQuery()[Query.SHOW_EVENTLOG]) {
             d[Query.SHOW_EVENTLOG] = undefined;
         } else {
@@ -235,24 +234,63 @@ var ViewMenu = React.createClass({
         }
 
         this.updateLocation(undefined, d);
+        console.log('toggleevent');
     },
     render: function () {
-        var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG];
-        return (
-            <div>
-                <button
-                    className={"btn " + (showEventLog ? "btn-primary" : "btn-default")}
-                    onClick={this.toggleEventLog}>
-                    <i className="fa fa-database"></i>
-                &nbsp;Show Eventlog
-                </button>
-                <span> </span>
-            </div>
-        );
+      var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG];
+      return (
+        <div>
+          <ToggleComponent
+            checked={showEventLog}
+            name = "Show Eventlog"
+            onToggleChanged={this.toggleEventLog}/>
+        </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 (
+        <div>
+          {this.state.options.map((entry, i) => {
+            return (
+              <ToggleComponent
+                key={i}
+                checked={entry.checked}
+                name = {entry.name}
+                onToggleChanged={() => this.setOption(entry)}/>
+            );
+          })}
+        </div>
+      );
+    }
+}
+
+
 var ReportsMenu = React.createClass({
     statics: {
         title: "Visualization",
@@ -349,7 +387,7 @@ var FileMenu = React.createClass({
 });
 
 
-var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */];
+var header_entries = [MainMenu, ViewMenu, OptionMenu /*, ReportsMenu */];
 
 
 export var Header = React.createClass({
@@ -380,7 +418,7 @@ export var Header = React.createClass({
                     href="#"
                     className={className}
                     onClick={this.handleClick.bind(this, entry)}>
-                    { entry.title}
+                    {entry.title}
                 </a>
             );
         }.bind(this));