From d2475e6a146534b5e7aaf2cc7b0b9a75e418415e Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Sat, 13 Sep 2014 23:05:12 +0200
Subject: web: start gui

---
 web/src/js/header.react.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 web/src/js/header.react.js

(limited to 'web/src/js/header.react.js')

diff --git a/web/src/js/header.react.js b/web/src/js/header.react.js
new file mode 100644
index 00000000..b204eeb8
--- /dev/null
+++ b/web/src/js/header.react.js
@@ -0,0 +1,73 @@
+/** @jsx React.DOM */
+
+var MainMenu = React.createClass({
+    render : function(){
+        return (<div>Main Menu</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();
+        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
-- 
cgit v1.2.3