diff options
Diffstat (limited to 'web/src/js/header.react.js')
-rw-r--r-- | web/src/js/header.react.js | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/web/src/js/header.react.js b/web/src/js/header.react.js new file mode 100644 index 00000000..b204eeb8 --- /dev/null +++ b/web/src/js/header.react.js @@ -0,0 +1,73 @@ +/** @jsx React.DOM */ + +var MainMenu = React.createClass({ + render : function(){ + return (<div>Main Menu</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(); + 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>); + } +});
\ No newline at end of file |