From ed8249023fb7c0d429b9278c63b51ac071700987 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 26 Nov 2014 04:18:21 +0100 Subject: introduce revised views, port over changes from multiple_views branch --- web/src/js/components/mainview.jsx.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index 795b8136..f0dfb59a 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -7,8 +7,14 @@ var MainView = React.createClass({ }; }, componentDidMount: function () { - this.flowStore = FlowStore.getView(); - this.flowStore.addListener("change",this.onFlowChange); + //FIXME: The store should be global, move out of here. + window.flowstore = new LiveFlowStore(); + + this.flowStore = window.flowstore.open_view(); + this.flowStore.addListener("add",this.onFlowChange); + this.flowStore.addListener("update",this.onFlowChange); + this.flowStore.addListener("remove",this.onFlowChange); + this.flowStore.addListener("recalculate",this.onFlowChange); }, componentWillUnmount: function () { this.flowStore.removeListener("change",this.onFlowChange); @@ -16,7 +22,7 @@ var MainView = React.createClass({ }, onFlowChange: function () { this.setState({ - flows: this.flowStore.getAll() + flows: this.flowStore.flows }); }, selectDetailTab: function(panel) { -- cgit v1.2.3 From 38bf34ebd9826c6f69d97906282632fbd5cff06b Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 27 Nov 2014 01:38:30 +0100 Subject: web++ --- web/src/js/components/mainview.jsx.js | 120 ++++++++++++++++++---------------- 1 file changed, 65 insertions(+), 55 deletions(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index f0dfb59a..799bd0d2 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -1,71 +1,82 @@ -/** @jsx React.DOM */ - var MainView = React.createClass({ - getInitialState: function() { + mixins: [ReactRouter.Navigation, ReactRouter.State], + getInitialState: function () { return { - flows: [], + flows: [] }; }, + componentWillReceiveProps: function (nextProps) { + if (nextProps.flowStore !== this.props.flowStore) { + this.closeView(); + this.openView(nextProps.flowStore); + } + }, + openView: function (store) { + var view = new FlowView(store); + this.setState({ + view: view + }); + view.addListener("add", this.onFlowChange); + view.addListener("update", this.onFlowChange); + view.addListener("remove", this.onFlowChange); + view.addListener("recalculate", this.onFlowChange); + }, + closeView: function () { + this.state.view.close(); + }, componentDidMount: function () { - //FIXME: The store should be global, move out of here. - window.flowstore = new LiveFlowStore(); - - this.flowStore = window.flowstore.open_view(); - this.flowStore.addListener("add",this.onFlowChange); - this.flowStore.addListener("update",this.onFlowChange); - this.flowStore.addListener("remove",this.onFlowChange); - this.flowStore.addListener("recalculate",this.onFlowChange); + this.openView(this.props.flowStore); }, componentWillUnmount: function () { - this.flowStore.removeListener("change",this.onFlowChange); - this.flowStore.close(); + this.closeView(); }, onFlowChange: function () { + console.warn("onFlowChange is deprecated"); this.setState({ - flows: this.flowStore.flows + flows: this.state.view.flows }); }, - selectDetailTab: function(panel) { - ReactRouter.replaceWith( - "flow", - { - flowId: this.props.params.flowId, - detailTab: panel - } - ); - }, - selectFlow: function(flow) { - if(flow){ - ReactRouter.replaceWith( - "flow", + selectFlow: function (flow) { + if (flow) { + this.replaceWith( + "flow", { flowId: flow.id, - detailTab: this.props.params.detailTab || "request" + detailTab: this.getParams().detailTab || "request" } ); - this.refs.flowTable.scrollIntoView(flow); + console.log("TODO: Scroll into view"); + //this.refs.flowTable.scrollIntoView(flow); } else { - ReactRouter.replaceWith("flows"); + this.replaceWith("flows"); } }, - selectFlowRelative: function(i){ + selectFlowRelative: function (i) { + var flows = this.state.view.flows; var index; - if(!this.props.params.flowId){ - if(i > 0){ - index = this.state.flows.length-1; + if (!this.getParams().flowId) { + if (i > 0) { + index = flows.length - 1; } else { index = 0; } } else { - index = _.findIndex(this.state.flows, function(f){ - return f.id === this.props.params.flowId; - }.bind(this)); - index = Math.min(Math.max(0, index+i), this.state.flows.length-1); + i = flows.length; + var currFlowId = this.getParams().flowId; + while (i--) { + if (flows[i].id === currFlowId) { + index = i; + break; + } + } + index = Math.min( + Math.max(0, index + i), + flows.length - 1); } - this.selectFlow(this.state.flows[index]); + this.selectFlow(flows[index]); }, - onKeyDown: function(e){ - switch(e.keyCode){ + onKeyDown: function (e) { + switch (e.keyCode) { case Key.K: case Key.UP: this.selectFlowRelative(-1); @@ -86,14 +97,14 @@ var MainView = React.createClass({ break; case Key.H: case Key.LEFT: - if(this.refs.flowDetails){ + if (this.refs.flowDetails) { this.refs.flowDetails.nextTab(-1); } break; case Key.L: case Key.TAB: case Key.RIGHT: - if(this.refs.flowDetails){ + if (this.refs.flowDetails) { this.refs.flowDetails.nextTab(+1); } break; @@ -101,18 +112,17 @@ var MainView = React.createClass({ console.debug("keydown", e.keyCode); return; } - return false; + e.preventDefault(); }, - render: function() { - var selected = _.find(this.state.flows, { id: this.props.params.flowId }); + render: function () { + var selected = this.props.flowStore.get(this.getParams().flowId); var details; - if(selected){ + if (selected) { details = ( - + ); } else { details = null; @@ -121,9 +131,9 @@ var MainView = React.createClass({ return (
+ flows={this.state.view ? this.state.view.flows : []} + selectFlow={this.selectFlow} + selected={selected} /> { details ? : null } {details}
-- cgit v1.2.3 From 9eecc8d6e237022b328f6eaee48b64287336b258 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 27 Nov 2014 02:34:03 +0100 Subject: web: fixes --- web/src/js/components/mainview.jsx.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index 799bd0d2..a1c9772e 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -51,18 +51,18 @@ var MainView = React.createClass({ this.replaceWith("flows"); } }, - selectFlowRelative: function (i) { + selectFlowRelative: function (shift) { var flows = this.state.view.flows; var index; if (!this.getParams().flowId) { - if (i > 0) { + if (shift > 0) { index = flows.length - 1; } else { index = 0; } } else { - i = flows.length; var currFlowId = this.getParams().flowId; + var i = flows.length; while (i--) { if (flows[i].id === currFlowId) { index = i; @@ -70,7 +70,7 @@ var MainView = React.createClass({ } } index = Math.min( - Math.max(0, index + i), + Math.max(0, index + shift), flows.length - 1); } this.selectFlow(flows[index]); -- cgit v1.2.3 From 7ca1ac0f3b7856c0ae44bfbf3b27ae4a424a1cc2 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 28 Nov 2014 16:03:56 +0100 Subject: web: virtual scrolling --- web/src/js/components/mainview.jsx.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index a1c9772e..fd9fdb8d 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -16,26 +16,16 @@ var MainView = React.createClass({ this.setState({ view: view }); - view.addListener("add", this.onFlowChange); - view.addListener("update", this.onFlowChange); - view.addListener("remove", this.onFlowChange); - view.addListener("recalculate", this.onFlowChange); }, closeView: function () { this.state.view.close(); }, - componentDidMount: function () { + componentWillMount: function () { this.openView(this.props.flowStore); }, componentWillUnmount: function () { this.closeView(); }, - onFlowChange: function () { - console.warn("onFlowChange is deprecated"); - this.setState({ - flows: this.state.view.flows - }); - }, selectFlow: function (flow) { if (flow) { this.replaceWith( @@ -131,7 +121,7 @@ var MainView = React.createClass({ return (
{ details ? : null } -- cgit v1.2.3 From c39b6e4277357c9da1dfd5e3e8c41b5b3427e0ce Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Fri, 28 Nov 2014 19:16:47 +0100 Subject: web: various fixes, add clear button --- web/src/js/components/mainview.jsx.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index fd9fdb8d..fe5d1c7c 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -35,8 +35,7 @@ var MainView = React.createClass({ detailTab: this.getParams().detailTab || "request" } ); - console.log("TODO: Scroll into view"); - //this.refs.flowTable.scrollIntoView(flow); + this.refs.flowTable.scrollIntoView(flow); } else { this.replaceWith("flows"); } -- cgit v1.2.3 From 096a3af273ccb309820351b466e62382f62a2c36 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sat, 29 Nov 2014 03:25:07 +0100 Subject: web: various improvements --- web/src/js/components/mainview.jsx.js | 30 +++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index fe5d1c7c..d5066b1a 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -16,6 +16,21 @@ var MainView = React.createClass({ this.setState({ view: view }); + + view.addListener("recalculate", this.onRecalculate); + view.addListener("add update remove", this.onUpdate); + }, + onRecalculate: function(){ + this.forceUpdate(); + var selected = this.getSelected(); + if(selected){ + this.refs.flowTable.scrollIntoView(); + } + }, + onUpdate: function (flow) { + if (flow.id === this.getParams().flowId) { + this.forceUpdate(); + } }, closeView: function () { this.state.view.close(); @@ -103,16 +118,18 @@ var MainView = React.createClass({ } e.preventDefault(); }, + getSelected: function(){ + return this.props.flowStore.get(this.getParams().flowId); + }, render: function () { - var selected = this.props.flowStore.get(this.getParams().flowId); + var selected = this.getSelected(); var details; if (selected) { - details = ( - - ); + details = [ + , + + ]; } else { details = null; } @@ -123,7 +140,6 @@ var MainView = React.createClass({ view={this.state.view} selectFlow={this.selectFlow} selected={selected} /> - { details ? : null } {details}
); -- cgit v1.2.3 From 14a8d2f5b83a1ea28abbb490f6c94c43b4e1f960 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 9 Dec 2014 18:18:14 +0100 Subject: always use the app dispatcher --- web/src/js/components/mainview.jsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index d5066b1a..c7c9ee9b 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -24,7 +24,7 @@ var MainView = React.createClass({ this.forceUpdate(); var selected = this.getSelected(); if(selected){ - this.refs.flowTable.scrollIntoView(); + this.refs.flowTable.scrollIntoView(selected); } }, onUpdate: function (flow) { -- cgit v1.2.3 From e12bf19e35867f3ea69f45054decb024a75fc2b4 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 10 Dec 2014 00:47:05 +0100 Subject: web: add event store, fix all those bugs --- web/src/js/components/mainview.jsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index c7c9ee9b..570962e0 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -12,7 +12,7 @@ var MainView = React.createClass({ } }, openView: function (store) { - var view = new FlowView(store); + var view = new StoreView(store); this.setState({ view: view }); -- cgit v1.2.3 From 7e40b8ab09d6d605307342fbfa21129ca15ff055 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 10 Dec 2014 15:25:40 +0100 Subject: web: implement settings store, modularize store --- web/src/js/components/mainview.jsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src/js/components/mainview.jsx.js') diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js index 570962e0..17a024ee 100644 --- a/web/src/js/components/mainview.jsx.js +++ b/web/src/js/components/mainview.jsx.js @@ -56,7 +56,7 @@ var MainView = React.createClass({ } }, selectFlowRelative: function (shift) { - var flows = this.state.view.flows; + var flows = this.state.view.list; var index; if (!this.getParams().flowId) { if (shift > 0) { -- cgit v1.2.3