From 6efe1aa6a92ce7f9f264903e9d27fb5cf6c32bfe Mon Sep 17 00:00:00 2001
From: Aldo Cortesi <aldo@nullcube.com>
Date: Tue, 16 Sep 2014 16:26:16 +1200
Subject: We're not ready for ES6

Lets re-evaluate in June next year when it's actually released
---
 web/src/js/components/EventLog.react.js     | 38 ------------
 web/src/js/components/Footer.react.js       | 12 ----
 web/src/js/components/Header.react.js       | 89 -----------------------------
 web/src/js/components/ProxyApp.react.js     | 46 ---------------
 web/src/js/components/TrafficTable.react.js | 34 -----------
 web/src/js/components/eventlog.jsx          | 39 +++++++++++++
 web/src/js/components/footer.jsx            | 12 ++++
 web/src/js/components/header.jsx            | 89 +++++++++++++++++++++++++++++
 web/src/js/components/proxyapp.jsx          | 46 +++++++++++++++
 web/src/js/components/traffictable.jsx      | 34 +++++++++++
 10 files changed, 220 insertions(+), 219 deletions(-)
 delete mode 100644 web/src/js/components/EventLog.react.js
 delete mode 100644 web/src/js/components/Footer.react.js
 delete mode 100644 web/src/js/components/Header.react.js
 delete mode 100644 web/src/js/components/ProxyApp.react.js
 delete mode 100644 web/src/js/components/TrafficTable.react.js
 create mode 100644 web/src/js/components/eventlog.jsx
 create mode 100644 web/src/js/components/footer.jsx
 create mode 100644 web/src/js/components/header.jsx
 create mode 100644 web/src/js/components/proxyapp.jsx
 create mode 100644 web/src/js/components/traffictable.jsx

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

diff --git a/web/src/js/components/EventLog.react.js b/web/src/js/components/EventLog.react.js
deleted file mode 100644
index 6c7a7c58..00000000
--- a/web/src/js/components/EventLog.react.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/** @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>
-                    {messages}
-                </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
deleted file mode 100644
index 20a4abfb..00000000
--- a/web/src/js/components/Footer.react.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @jsx React.DOM */
-
-var Footer = React.createClass({
-    render(){
-        var mode = this.props.settings.mode;
-        return (
-            <footer>
-                {mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
-            </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
deleted file mode 100644
index 0131d350..00000000
--- a/web/src/js/components/Header.react.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/** @jsx React.DOM */
-
-var MainMenu = React.createClass({
-    toggleEventLog() {
-        SettingsActions.update({
-            showEventLog: !this.props.settings.showEventLog
-        });
-    },
-    render(){
-        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(){
-        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({
-    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({
-            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>
-        );
-    }
-});
\ No newline at end of file
diff --git a/web/src/js/components/ProxyApp.react.js b/web/src/js/components/ProxyApp.react.js
deleted file mode 100644
index 07d66440..00000000
--- a/web/src/js/components/ProxyApp.react.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/** @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({
-    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 settings={this.state.settings}/>
-            <div id="main"><this.props.activeRouteHandler/></div>
-            {this.state.settings.showEventLog ? <EventLog/> : null}
-            <Footer settings={this.state.settings}/>
-            </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
deleted file mode 100644
index 7e9e26e3..00000000
--- a/web/src/js/components/TrafficTable.react.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/** @jsx React.DOM */
-
-var TrafficTable = React.createClass({
-    getInitialState() {
-        return {
-            flows: []
-        };
-    },
-    componentDidMount() {
-        //this.flowStore = FlowStore.getView();
-        //this.flowStore.addListener("change",this.onFlowChange);
-    },
-    componentWillUnmount() {
-        //this.flowStore.removeListener("change",this.onFlowChange);
-        //this.flowStore.close();
-    },
-    onFlowChange() {
-        this.setState({
-            //flows: this.flowStore.getAll()
-        });
-    },
-    render() {
-        /*var flows = this.state.flows.map(function(flow){
-        return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
-        }); */
-        //Dummy Text for layout testing
-        x = "Flow";
-        i = 12;
-        while (i--) x += x;
-        return ( 
-            <div><pre> { x } </pre></div> 
-        );
-    }
-});
\ No newline at end of file
diff --git a/web/src/js/components/eventlog.jsx b/web/src/js/components/eventlog.jsx
new file mode 100644
index 00000000..530e9f4f
--- /dev/null
+++ b/web/src/js/components/eventlog.jsx
@@ -0,0 +1,39 @@
+/** @jsx React.DOM */
+
+var EventLog = React.createClass({
+    getInitialState: function() {
+        return {
+            log: []
+        };
+    },
+    componentDidMount: function() {
+        this.log = EventLogStore.getView();
+        this.log.addListener("change", this.onEventLogChange);
+    },
+    componentWillUnmount: function() {
+        this.log.removeListener("change", this.onEventLogChange);
+        this.log.close();
+    },
+    onEventLogChange: function() {
+        this.setState({
+            log: this.log.getAll()
+        });
+    },
+    close: function() {
+        SettingsActions.update({
+            showEventLog: false
+        });
+    },
+    render: function() {
+        //var messages = this.state.log.map(row => (<div key={row.id}>{row.message}</div>));
+        var messages = [];
+        return (
+            <div className="eventlog">
+                <pre>
+                    <i className="fa fa-close close-button" onClick={this.close}></i>
+                    {messages}
+                </pre>
+            </div>
+        );
+    }
+});
diff --git a/web/src/js/components/footer.jsx b/web/src/js/components/footer.jsx
new file mode 100644
index 00000000..6d5b75a1
--- /dev/null
+++ b/web/src/js/components/footer.jsx
@@ -0,0 +1,12 @@
+/** @jsx React.DOM */
+
+var Footer = React.createClass({
+    render: function(){
+        var mode = this.props.settings.mode;
+        return (
+            <footer>
+                {mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
+            </footer>
+        );
+    }
+});
diff --git a/web/src/js/components/header.jsx b/web/src/js/components/header.jsx
new file mode 100644
index 00000000..e6350171
--- /dev/null
+++ b/web/src/js/components/header.jsx
@@ -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>
+        );
+    }
+});
diff --git a/web/src/js/components/proxyapp.jsx b/web/src/js/components/proxyapp.jsx
new file mode 100644
index 00000000..c0196461
--- /dev/null
+++ b/web/src/js/components/proxyapp.jsx
@@ -0,0 +1,46 @@
+/** @jsx React.DOM */
+
+//TODO: Move out of here, just a stub.
+var Reports = React.createClass({
+    render: function(){
+        return <div>Report Editor</div>;
+    }
+});
+
+
+var ProxyAppMain = React.createClass({
+    getInitialState: function(){
+        return { settings: SettingsStore.getAll() };
+    },
+    componentDidMount: function(){
+        SettingsStore.addListener("change", this.onSettingsChange);
+    },
+    componentWillUnmount: function(){
+        SettingsStore.removeListener("change", this.onSettingsChange);
+    },
+    onSettingsChange: function(){
+        console.log("onSettingsChange");
+        this.setState({settings: SettingsStore.getAll()});
+    },
+    render: function() {
+        return (
+            <div id="container">
+                <Header settings={this.state.settings}/>
+                <div id="main"><this.props.activeRouteHandler/></div>
+                    {this.state.settings.showEventLog ? <EventLog/> : null}
+                <Footer settings={this.state.settings}/>
+            </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.jsx b/web/src/js/components/traffictable.jsx
new file mode 100644
index 00000000..1ed6fbc8
--- /dev/null
+++ b/web/src/js/components/traffictable.jsx
@@ -0,0 +1,34 @@
+/** @jsx React.DOM */
+
+var TrafficTable = React.createClass({
+    getInitialState: function() {
+        return {
+            flows: []
+        };
+    },
+    componentDidMount: function() {
+        //this.flowStore = FlowStore.getView();
+        //this.flowStore.addListener("change",this.onFlowChange);
+    },
+    componentWillUnmount: function() {
+        //this.flowStore.removeListener("change",this.onFlowChange);
+        //this.flowStore.close();
+    },
+    onFlowChange: function() {
+        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>;
+        }); */
+        //Dummy Text for layout testing
+        x = "Flow";
+        i = 12;
+        while (i--) x += x;
+        return ( 
+            <div><pre> { x } </pre></div> 
+        );
+    }
+});
-- 
cgit v1.2.3