From cbf18320cdbd05197f232da69b3c9a5391735156 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Mon, 15 Sep 2014 18:08:26 +0200
Subject: client-side structure

---
 web/src/js/components/EventLog.react.js     | 13 +++++
 web/src/js/components/Footer.react.js       | 11 ++++
 web/src/js/components/Header.react.js       | 88 +++++++++++++++++++++++++++++
 web/src/js/components/ProxyApp.react.js     | 35 ++++++++++++
 web/src/js/components/TrafficTable.react.js | 38 +++++++++++++
 5 files changed, 185 insertions(+)
 create mode 100644 web/src/js/components/EventLog.react.js
 create mode 100644 web/src/js/components/Footer.react.js
 create mode 100644 web/src/js/components/Header.react.js
 create mode 100644 web/src/js/components/ProxyApp.react.js
 create mode 100644 web/src/js/components/TrafficTable.react.js

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

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