diff options
author | Maximilian Hils <git@maximilianhils.com> | 2014-09-15 18:08:26 +0200 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2014-09-15 18:08:26 +0200 |
commit | cbf18320cdbd05197f232da69b3c9a5391735156 (patch) | |
tree | 63b9cf8fd6a8e8fb5be6b2d5a655acf3d33b6229 /web/src/js/components | |
parent | 9f8d2eea64d4611c1e2f7e7043fe6d3ef9a6aa40 (diff) | |
download | mitmproxy-cbf18320cdbd05197f232da69b3c9a5391735156.tar.gz mitmproxy-cbf18320cdbd05197f232da69b3c9a5391735156.tar.bz2 mitmproxy-cbf18320cdbd05197f232da69b3c9a5391735156.zip |
client-side structure
Diffstat (limited to 'web/src/js/components')
-rw-r--r-- | web/src/js/components/EventLog.react.js | 13 | ||||
-rw-r--r-- | web/src/js/components/Footer.react.js | 11 | ||||
-rw-r--r-- | web/src/js/components/Header.react.js | 88 | ||||
-rw-r--r-- | web/src/js/components/ProxyApp.react.js | 35 | ||||
-rw-r--r-- | web/src/js/components/TrafficTable.react.js | 38 |
5 files changed, 185 insertions, 0 deletions
diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/EventLog.react.js new file mode 100644 index 00000000..e710d30c --- /dev/null +++ b/web/src/js/components/EventLog.react.js @@ -0,0 +1,13 @@ +/** @jsx React.DOM */ + +var EventLog = React.createClass({ + render(){ + return ( + <div className="eventlog"> + <pre> + much log. + </pre> + </div> + ); + } +});
\ No newline at end of file diff --git a/web/src/js/components/Footer.react.js b/web/src/js/components/Footer.react.js new file mode 100644 index 00000000..ae0ccbe5 --- /dev/null +++ b/web/src/js/components/Footer.react.js @@ -0,0 +1,11 @@ +/** @jsx React.DOM */ + +var Footer = React.createClass({ + render(){ + return ( + <footer> + <span className="label label-success">transparent mode</span> + </footer> + ); + } +});
\ No newline at end of file diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/Header.react.js new file mode 100644 index 00000000..dc304d81 --- /dev/null +++ b/web/src/js/components/Header.react.js @@ -0,0 +1,88 @@ +/** @jsx React.DOM */ + +var MainMenu = React.createClass({ + mixins: [SettingsMixin], + handleSettingsChange() { + SettingsActions.update({ + showEventLog: this.refs.showEventLogInput.getDOMNode().checked + }); + }, + render(){ + return <div> + <label> + <input type="checkbox" ref="showEventLogInput" checked={this.state.settings.showEventLog} onChange={this.handleSettingsChange}/> + Show Event Log + </label> + </div>; + } +}); +var ToolsMenu = React.createClass({ + render(){ + return (<div>Tools Menu</div>); + } +}); +var ReportsMenu = React.createClass({ + render(){ + 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({ + mixins: [SettingsMixin], + getInitialState(){ + return { + active: "main" + }; + }, + handleClick(active){ + this.setState({active: active}); + ReactRouter.transitionTo(_Header_Entries[active].route); + return false; + }, + handleFileClick(){ + console.log("File click"); + }, + + render(){ + 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.state.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 diff --git a/web/src/js/components/ProxyApp.react.js b/web/src/js/components/ProxyApp.react.js new file mode 100644 index 00000000..7953d938 --- /dev/null +++ b/web/src/js/components/ProxyApp.react.js @@ -0,0 +1,35 @@ +/** @jsx React.DOM */ + +//TODO: Move out of here, just a stub. +var Reports = React.createClass({ + render(){ + return (<div>Report Editor</div>); + } +}); + + + +var ProxyAppMain = React.createClass({ + mixins: [SettingsMixin], + render() { + return ( + <div id="container"> + <Header/> + <div id="main"><this.props.activeRouteHandler/></div> + {this.state.settings.showEventLog ? <EventLog/> : null} + <Footer/> + </div> + ); + } +}); + + +var ProxyApp = ( + <ReactRouter.Routes location="hash"> + <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}> + <ReactRouter.Route name="main" handler={TrafficTable}/> + <ReactRouter.Route name="reports" handler={Reports}/> + <ReactRouter.Redirect to="main"/> + </ReactRouter.Route> + </ReactRouter.Routes> +); diff --git a/web/src/js/components/TrafficTable.react.js b/web/src/js/components/TrafficTable.react.js new file mode 100644 index 00000000..442f8da2 --- /dev/null +++ b/web/src/js/components/TrafficTable.react.js @@ -0,0 +1,38 @@ +/** @jsx React.DOM */ + +var TrafficTable = React.createClass({ + /*getInitialState: function(){ + return { + flows: [] + }; + },*/ + componentDidMount: function () { + /*var flowStore = new DummyFlowStore([]); + this.setState({flowStore: flowStore}); + + flowStore.addChangeListener(this.onFlowsChange); + + $.getJSON("/flows.json").success(function (flows) { + flows.forEach(function (flow, i) { + window.setTimeout(function () { + flowStore.addFlow(flow); + }, _.random(i*400,i*400+1000)); + }); + }.bind(this));*/ + }, + componentWillUnmount: function(){ + //this.state.flowStore.close(); + }, + onFlowsChange: function(event, flows){ + //this.setState({flows: flows.getAll()}); + }, + render: function () { + /*var flows = this.state.flows.map(function(flow){ + return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>; + }); *//**/ + x = "WTF"; + i = 12; + while(i--) x += x; + return <div><pre>{x}</pre></div>; + } +});
\ No newline at end of file |