web: detailpane impl

1 files changed, 62 insertions, 0 deletions

diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
new file mode 100644
index 00000000..253084c2
--- /dev/null
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -0,0 +1,62 @@
+/** @jsx React.DOM */
+
+var FlowDetailNav = React.createClass({
+    render: function(){
+
+        var items = ["request", "response", "details"].map(function(e){
+            var str = e.charAt(0).toUpperCase() + e.slice(1);
+            var className = this.props.active === e ? "active" : "";
+            var onClick = function(){
+                this.props.selectTab(e);
+                return false;
+            }.bind(this);
+            return <a key={e}
+                      href="#" 
+                      className={className}
+                      onClick={onClick}>{str}</a>;
+        }.bind(this));
+        return (
+            <nav ref="head" className="nav-tabs nav-tabs-sm">
+                {items}
+            </nav>
+        );
+    } 
+});
+
+var FlowDetailRequest = React.createClass({
+    render: function(){
+        return <div>request</div>;
+    }
+});
+
+var FlowDetailResponse = React.createClass({
+    render: function(){
+        return <div>response</div>;
+    }
+});
+
+var FlowDetailConnectionInfo = React.createClass({
+    render: function(){
+        return <div>details</div>;
+    }
+})
+
+var tabs = {
+    request: FlowDetailRequest,
+    response: FlowDetailResponse,
+    details: FlowDetailConnectionInfo
+}
+
+var FlowDetail = React.createClass({
+    mixins: [StickyHeadMixin],
+    render: function(){
+        var flow = JSON.stringify(this.props.flow, null, 2);
+        var Tab = tabs[this.props.active];
+        return (
+            <div className="flow-detail" onScroll={this.adjustHead}>
+                <FlowDetailNav active={this.props.active} selectTab={this.props.selectTab}/>
+                <Tab/>
+            </div>
+            );
+    } 
+});
\ No newline at end of file