diff options
author | Maximilian Hils <git@maximilianhils.com> | 2014-09-18 00:01:45 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2014-09-18 00:01:45 +0200 |
commit | 6a161be6b4c526fcc5f6581c7faff00a2c976f37 (patch) | |
tree | 6b99c30538a57e096c4fd01a923fc8542e90e6e4 /web/src/js/components/header.jsx.js | |
parent | b99de36b24e4687e35069fbfa18727519f23ea35 (diff) | |
download | mitmproxy-6a161be6b4c526fcc5f6581c7faff00a2c976f37.tar.gz mitmproxy-6a161be6b4c526fcc5f6581c7faff00a2c976f37.tar.bz2 mitmproxy-6a161be6b4c526fcc5f6581c7faff00a2c976f37.zip |
.jsx -> .jsx.js
Rename jsx files to be compatible with Chrome Dev Tools and
Workspace Mapping.
Diffstat (limited to 'web/src/js/components/header.jsx.js')
-rw-r--r-- | web/src/js/components/header.jsx.js | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js new file mode 100644 index 00000000..8f613ff1 --- /dev/null +++ b/web/src/js/components/header.jsx.js @@ -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> + ); + } +}); |