We're not ready for ES6

Lets re-evaluate in June next year when it's actually released

1 files changed, 89 insertions, 0 deletions

diff --git a/web/src/js/components/header.jsx b/web/src/js/components/header.jsx
new file mode 100644
index 00000000..e6350171
--- /dev/null
+++ b/web/src/js/components/header.jsx
@@ -0,0 +1,89 @@
+/** @jsx React.DOM */
+
+var MainMenu = React.createClass({
+    toggleEventLog: function() {
+        SettingsActions.update({
+            showEventLog: !this.props.settings.showEventLog
+        });
+    },
+    render: function(){
+        return (
+            <div>
+                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
+                <i className="fa fa-database"></i> Display Event Log
+                </button>
+            </div>
+        );
+    }
+});
+var ToolsMenu = React.createClass({
+    render: function(){
+        return <div>Tools Menu</div>;
+    }
+});
+var ReportsMenu = React.createClass({
+    render: function(){
+        return <div>Reports Menu</div>;
+    }
+});
+
+
+var _Header_Entries = {
+    main: {
+        title: "Traffic",
+        route: "main",
+        menu: MainMenu
+    },
+    tools: {
+        title: "Tools",
+        route: "main",
+        menu: ToolsMenu
+    },
+    reports: {
+        title: "Visualization",
+        route: "reports",
+        menu: ReportsMenu
+    }
+};
+
+var Header = React.createClass({
+    getInitialState: function(){
+        return {
+            active: "main"
+        };
+    },
+    handleClick: function(active){
+        this.setState({active: active});
+        ReactRouter.transitionTo(_Header_Entries[active].route);
+        return false;
+    },
+    handleFileClick: function(){
+        console.log("File click");
+    },
+    render: function(){
+        var header = [];
+        for(var item in _Header_Entries){
+            var classes = this.state.active == item ? "active" : "";
+            header.push(<a key={item} href="#" className={classes}
+                onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>);
+        }
+
+        var menu = _Header_Entries[this.state.active].menu({
+            settings: this.props.settings
+        });
+        return (
+            <header>
+                <div className="title-bar">
+                    mitmproxy { this.props.settings.version }
+                </div>
+                <nav>
+                    <a href="#" className="special" onClick={this.handleFileClick}> File </a>
+                    {header}
+                </nav>
+                <div className="menu">
+                    { menu }
+                </div>
+            </header>
+        );
+    }
+});