diff options
Diffstat (limited to 'web/src/js/components')
-rw-r--r-- | web/src/js/components/EventLog.react.js | 21 | ||||
-rw-r--r-- | web/src/js/components/Header.react.js | 14 | ||||
-rw-r--r-- | web/src/js/components/ProxyApp.react.js | 16 | ||||
-rw-r--r-- | web/src/js/components/TrafficTable.react.js | 33 |
4 files changed, 54 insertions, 30 deletions
diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/EventLog.react.js index 0ecf40b1..3a7dedc8 100644 --- a/web/src/js/components/EventLog.react.js +++ b/web/src/js/components/EventLog.react.js @@ -1,17 +1,36 @@ /** @jsx React.DOM */ var EventLog = React.createClass({ + getInitialState(){ + return { + log: [] + }; + }, + componentDidMount(){ + this.log = EventLogStore.getView(); + this.log.addListener("change",this.onEventLogChange); + }, + componentWillUnmount(){ + this.log.removeListener("change",this.onEventLogChange); + this.log.close(); + }, + onEventLogChange(){ + this.setState({ + log: this.log.getAll() + }); + }, close(){ SettingsActions.update({ showEventLog: false }); }, render(){ + var messages = this.state.log.map(row => <div key={row.id}>{row.message}</div>); return ( <div className="eventlog"> <pre> <i className="fa fa-close close-button" onClick={this.close}></i> - much log. + {messages} </pre> </div> ); diff --git a/web/src/js/components/Header.react.js b/web/src/js/components/Header.react.js index d1f18a82..41202463 100644 --- a/web/src/js/components/Header.react.js +++ b/web/src/js/components/Header.react.js @@ -1,15 +1,14 @@ /** @jsx React.DOM */ var MainMenu = React.createClass({ - mixins: [SettingsMixin], - handleSettingsChange() { + toggleEventLog() { SettingsActions.update({ - showEventLog: !this.state.settings.showEventLog + showEventLog: !this.props.settings.showEventLog }); }, render(){ return <div> - <button className={"btn " + (this.state.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.handleSettingsChange}> + <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>; @@ -46,7 +45,6 @@ var _Header_Entries = { }; var Header = React.createClass({ - mixins: [SettingsMixin], getInitialState(){ return { active: "main" @@ -69,11 +67,13 @@ var Header = React.createClass({ onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>); } - var menu = _Header_Entries[this.state.active].menu(); + var menu = _Header_Entries[this.state.active].menu({ + settings: this.props.settings + }); return ( <header> <div className="title-bar"> - mitmproxy { this.state.settings.version } + mitmproxy { this.props.settings.version } </div> <nav> <a href="#" className="special" onClick={this.handleFileClick}> File </a> diff --git a/web/src/js/components/ProxyApp.react.js b/web/src/js/components/ProxyApp.react.js index 7953d938..fc21ecd8 100644 --- a/web/src/js/components/ProxyApp.react.js +++ b/web/src/js/components/ProxyApp.react.js @@ -10,11 +10,23 @@ var Reports = React.createClass({ var ProxyAppMain = React.createClass({ - mixins: [SettingsMixin], + getInitialState(){ + return { settings: SettingsStore.getAll() }; + }, + componentDidMount(){ + SettingsStore.addListener("change", this.onSettingsChange); + }, + componentWillUnmount(){ + SettingsStore.removeListener("change", this.onSettingsChange); + }, + onSettingsChange(){ + console.log("onSettingsChange"); + this.setState({settings: SettingsStore.getAll()}); + }, render() { return ( <div id="container"> - <Header/> + <Header settings={this.state.settings}/> <div id="main"><this.props.activeRouteHandler/></div> {this.state.settings.showEventLog ? <EventLog/> : null} <Footer/> diff --git a/web/src/js/components/TrafficTable.react.js b/web/src/js/components/TrafficTable.react.js index 442f8da2..d6a4f200 100644 --- a/web/src/js/components/TrafficTable.react.js +++ b/web/src/js/components/TrafficTable.react.js @@ -1,36 +1,29 @@ /** @jsx React.DOM */ var TrafficTable = React.createClass({ - /*getInitialState: function(){ + 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(); + componentDidMount(){ + //this.flowStore = FlowStore.getView(); + //this.flowStore.addListener("change",this.onFlowChange); + }, + componentWillUnmount(){ + //this.flowStore.removeListener("change",this.onFlowChange); + //this.flowStore.close(); }, - onFlowsChange: function(event, flows){ - //this.setState({flows: flows.getAll()}); + onFlowChange(){ + this.setState({ + //flows: this.flowStore.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"; + x = "Flow"; i = 12; while(i--) x += x; return <div><pre>{x}</pre></div>; |