diff options
Diffstat (limited to 'web/src/js/components/header.jsx')
-rw-r--r-- | web/src/js/components/header.jsx | 89 |
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> + ); + } +}); |