web: detailpane impl

1 files changed, 37 insertions, 31 deletions

diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index 8f613ff1..92a58282 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -1,6 +1,10 @@
 /** @jsx React.DOM */
 
 var MainMenu = React.createClass({
+    statics: {
+        title: "Traffic",
+        route: "flows"
+    },
     toggleEventLog: function () {
         SettingsActions.update({
             showEventLog: !this.props.settings.showEventLog
@@ -16,72 +20,74 @@ var MainMenu = React.createClass({
             );
     }
 });
+
+
 var ToolsMenu = React.createClass({
+    statics: {
+        title: "Tools",
+        route: "flows"
+    },
     render: function () {
         return <div>Tools Menu</div>;
     }
 });
+
+
 var ReportsMenu = React.createClass({
+    statics: {
+        title: "Visualization",
+        route: "reports"
+    },
     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_entries = [MainMenu, ToolsMenu, ReportsMenu];
+
 
 var Header = React.createClass({
     getInitialState: function () {
         return {
-            active: "main"
+            active: header_entries[0]
         };
     },
     handleClick: function (active) {
+        ReactRouter.transitionTo(active.route);
         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
-        });
+        var header = header_entries.map(function(entry){
+            var classes = React.addons.classSet({
+                active: entry == this.state.active
+            });
+            return (
+                <a key={entry.title} 
+                   href="#"
+                   className={classes}
+                   onClick={this.handleClick.bind(this, entry)}
+                >
+                    { entry.title}
+                </a>
+                );
+        }.bind(this));
+        
         return (
             <header>
                 <div className="title-bar">
                     mitmproxy { this.props.settings.version }
                 </div>
-                <nav>
+                <nav className="nav-tabs nav-tabs-lg">
                     <a href="#" className="special" onClick={this.handleFileClick}> File </a>
                     {header}
                 </nav>
                 <div className="menu">
-                    { menu }
+                    <this.state.active settings={this.props.settings}/>
                 </div>
             </header>
             );