From 02a61ea45dc1ca6d0c88b44adf83f68b791130e7 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sat, 21 Mar 2015 22:49:51 +0100 Subject: structure components --- web/src/js/components/flowview/index.js | 74 +++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 web/src/js/components/flowview/index.js (limited to 'web/src/js/components/flowview/index.js') diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js new file mode 100644 index 00000000..0c31aca5 --- /dev/null +++ b/web/src/js/components/flowview/index.js @@ -0,0 +1,74 @@ +var React = require("react"); +var _ = require("lodash"); + +var common = require("../common.js"); +var Nav = require("./nav.js"); +var Messages = require("./messages.js"); +var Details = require("./details.js"); + +var allTabs = { + request: Messages.Request, + response: Messages.Response, + error: Messages.Error, + details: Details +}; + +var FlowView = React.createClass({ + mixins: [common.StickyHeadMixin, common.Navigation, common.State], + getTabs: function (flow) { + var tabs = []; + ["request", "response", "error"].forEach(function (e) { + if (flow[e]) { + tabs.push(e); + } + }); + tabs.push("details"); + return tabs; + }, + nextTab: function (i) { + var tabs = this.getTabs(this.props.flow); + var currentIndex = tabs.indexOf(this.getParams().detailTab); + // JS modulo operator doesn't correct negative numbers, make sure that we are positive. + var nextIndex = (currentIndex + i + tabs.length) % tabs.length; + this.selectTab(tabs[nextIndex]); + }, + selectTab: function (panel) { + this.replaceWith( + "flow", + { + flowId: this.getParams().flowId, + detailTab: panel + } + ); + }, + render: function () { + var flow = this.props.flow; + var tabs = this.getTabs(flow); + var active = this.getParams().detailTab; + + if (!_.contains(tabs, active)) { + if (active === "response" && flow.error) { + active = "error"; + } else if (active === "error" && flow.response) { + active = "response"; + } else { + active = tabs[0]; + } + this.selectTab(active); + } + + var Tab = allTabs[active]; + return ( +
+
+ ); + } +}); + +module.exports = FlowView; \ No newline at end of file -- cgit v1.2.3 From 1913975fa60c76bfb7e79a908b18e7e93793f71f Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 27 Mar 2015 21:58:04 +0100 Subject: web: use contexts to pass down stores. Using contexts frees us from the contracts we have using props - namely, we can assume them to be constant for the lifetime of the object. --- web/src/js/components/flowview/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src/js/components/flowview/index.js') diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js index 0c31aca5..4214714e 100644 --- a/web/src/js/components/flowview/index.js +++ b/web/src/js/components/flowview/index.js @@ -14,7 +14,7 @@ var allTabs = { }; var FlowView = React.createClass({ - mixins: [common.StickyHeadMixin, common.Navigation, common.State], + mixins: [common.StickyHeadMixin, common.Navigation, common.RouterState], getTabs: function (flow) { var tabs = []; ["request", "response", "error"].forEach(function (e) { -- cgit v1.2.3 From 6d29f93e9eaaabe20c0d46887048f2367bfbb3cf Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 30 Mar 2015 03:49:50 +0200 Subject: web: add prompt for keyboard navigation --- web/src/js/components/flowview/index.js | 59 +++++++++++++++++++++++++++++++-- 1 file changed, 56 insertions(+), 3 deletions(-) (limited to 'web/src/js/components/flowview/index.js') diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js index 4214714e..739a46dc 100644 --- a/web/src/js/components/flowview/index.js +++ b/web/src/js/components/flowview/index.js @@ -5,6 +5,8 @@ var common = require("../common.js"); var Nav = require("./nav.js"); var Messages = require("./messages.js"); var Details = require("./details.js"); +var Prompt = require("../prompt.js"); + var allTabs = { request: Messages.Request, @@ -15,6 +17,11 @@ var allTabs = { var FlowView = React.createClass({ mixins: [common.StickyHeadMixin, common.Navigation, common.RouterState], + getInitialState: function () { + return { + prompt: false + }; + }, getTabs: function (flow) { var tabs = []; ["request", "response", "error"].forEach(function (e) { @@ -27,7 +34,7 @@ var FlowView = React.createClass({ }, nextTab: function (i) { var tabs = this.getTabs(this.props.flow); - var currentIndex = tabs.indexOf(this.getParams().detailTab); + var currentIndex = tabs.indexOf(this.getActive()); // JS modulo operator doesn't correct negative numbers, make sure that we are positive. var nextIndex = (currentIndex + i + tabs.length) % tabs.length; this.selectTab(tabs[nextIndex]); @@ -41,10 +48,50 @@ var FlowView = React.createClass({ } ); }, + getActive: function(){ + return this.getParams().detailTab; + }, + promptEdit: function () { + var options; + switch(this.getActive()){ + case "request": + options = [ + "method", + "url", + {text:"http version", key:"v"}, + "header" + /*, "content"*/]; + break; + case "response": + options = [ + {text:"http version", key:"v"}, + "code", + "message", + "header" + /*, "content"*/]; + break; + case "details": + return; + default: + throw "Unknown tab for edit: " + this.getActive(); + } + + this.setState({ + prompt: { + done: function (k) { + this.setState({prompt: false}); + if(k){ + this.refs.tab.edit(k); + } + }.bind(this), + options: options + } + }); + }, render: function () { var flow = this.props.flow; var tabs = this.getTabs(flow); - var active = this.getParams().detailTab; + var active = this.getActive(); if (!_.contains(tabs, active)) { if (active === "response" && flow.error) { @@ -57,6 +104,11 @@ var FlowView = React.createClass({ this.selectTab(active); } + var prompt = null; + if (this.state.prompt) { + prompt = ; + } + var Tab = allTabs[active]; return (
@@ -65,7 +117,8 @@ var FlowView = React.createClass({ tabs={tabs} active={active} selectTab={this.selectTab}/> - + + {prompt}
); } -- cgit v1.2.3