From acdd182754625fabcfc2c6ed4bdad8a63bce8ad6 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Tue, 16 Sep 2014 00:05:06 +0200
Subject: web: implement EventLogStore

---
 web/src/js/components/EventLog.react.js     | 21 +++++++++++++++++-
 web/src/js/components/Header.react.js       | 14 ++++++------
 web/src/js/components/ProxyApp.react.js     | 16 ++++++++++++--
 web/src/js/components/TrafficTable.react.js | 33 ++++++++++++-----------------
 4 files changed, 54 insertions(+), 30 deletions(-)

(limited to 'web/src/js/components')

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>;
-- 
cgit v1.2.3