From c9ce5094c810b551de3cddebf14f277a61657e16 Mon Sep 17 00:00:00 2001 From: Aldo Cortesi Date: Thu, 1 Jan 2015 15:37:42 +1300 Subject: All files and only files in in js/components are jsx So remove the redundant naming --- web/src/js/components/mainview.js | 232 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 web/src/js/components/mainview.js (limited to 'web/src/js/components/mainview.js') diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js new file mode 100644 index 00000000..b9836c64 --- /dev/null +++ b/web/src/js/components/mainview.js @@ -0,0 +1,232 @@ +var React = require("react"); + +var utils = require("./utils.js"); +var toputils = require("../utils.js"); +var views = require("../store/view.js"); +var Filt = require("../filt/filt.js"); +FlowTable = require("./flowtable.js"); +var flowdetail = require("./flowdetail.js"); + + +var MainView = React.createClass({ + mixins: [utils.Navigation, utils.State], + getInitialState: function () { + this.onQueryChange(Query.FILTER, function () { + this.state.view.recalculate(this.getViewFilt(), this.getViewSort()); + }.bind(this)); + this.onQueryChange(Query.HIGHLIGHT, function () { + this.state.view.recalculate(this.getViewFilt(), this.getViewSort()); + }.bind(this)); + return { + flows: [] + }; + }, + getViewFilt: function () { + try { + var filt = Filt.parse(this.getQuery()[Query.FILTER] || ""); + var highlightStr = this.getQuery()[Query.HIGHLIGHT]; + var highlight = highlightStr ? Filt.parse(highlightStr) : false; + } catch (e) { + console.error("Error when processing filter: " + e); + } + + return function filter_and_highlight(flow) { + if (!this._highlight) { + this._highlight = {}; + } + this._highlight[flow.id] = highlight && highlight(flow); + return filt(flow); + }; + }, + getViewSort: function () { + }, + componentWillReceiveProps: function (nextProps) { + if (nextProps.flowStore !== this.props.flowStore) { + this.closeView(); + this.openView(nextProps.flowStore); + } + }, + openView: function (store) { + var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort()); + this.setState({ + view: view + }); + + view.addListener("recalculate", this.onRecalculate); + view.addListener("add update remove", this.onUpdate); + view.addListener("remove", this.onRemove); + }, + onRecalculate: function () { + this.forceUpdate(); + var selected = this.getSelected(); + if (selected) { + this.refs.flowTable.scrollIntoView(selected); + } + }, + onUpdate: function (flow) { + if (flow.id === this.getParams().flowId) { + this.forceUpdate(); + } + }, + onRemove: function (flow_id, index) { + if (flow_id === this.getParams().flowId) { + var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length -1)]; + this.selectFlow(flow_to_select); + } + }, + closeView: function () { + this.state.view.close(); + }, + componentWillMount: function () { + this.openView(this.props.flowStore); + }, + componentWillUnmount: function () { + this.closeView(); + }, + selectFlow: function (flow) { + if (flow) { + this.replaceWith( + "flow", + { + flowId: flow.id, + detailTab: this.getParams().detailTab || "request" + } + ); + this.refs.flowTable.scrollIntoView(flow); + } else { + this.replaceWith("flows", {}); + } + }, + selectFlowRelative: function (shift) { + var flows = this.state.view.list; + var index; + if (!this.getParams().flowId) { + if (shift > 0) { + index = flows.length - 1; + } else { + index = 0; + } + } else { + var currFlowId = this.getParams().flowId; + var i = flows.length; + while (i--) { + if (flows[i].id === currFlowId) { + index = i; + break; + } + } + index = Math.min( + Math.max(0, index + shift), + flows.length - 1); + } + this.selectFlow(flows[index]); + }, + onKeyDown: function (e) { + var flow = this.getSelected(); + if (e.ctrlKey) { + return; + } + switch (e.keyCode) { + case toputils.Key.K: + case toputils.Key.UP: + this.selectFlowRelative(-1); + break; + case toputils.Key.J: + case toputils.Key.DOWN: + this.selectFlowRelative(+1); + break; + case toputils.Key.SPACE: + case toputils.Key.PAGE_DOWN: + this.selectFlowRelative(+10); + break; + case toputils.Key.PAGE_UP: + this.selectFlowRelative(-10); + break; + case toputils.Key.END: + this.selectFlowRelative(+1e10); + break; + case toputils.Key.HOME: + this.selectFlowRelative(-1e10); + break; + case toputils.Key.ESC: + this.selectFlow(null); + break; + case toputils.Key.H: + case toputils.Key.LEFT: + if (this.refs.flowDetails) { + this.refs.flowDetails.nextTab(-1); + } + break; + case toputils.Key.L: + case toputils.Key.TAB: + case toputils.Key.RIGHT: + if (this.refs.flowDetails) { + this.refs.flowDetails.nextTab(+1); + } + break; + case toputils.Key.C: + if (e.shiftKey) { + FlowActions.clear(); + } + break; + case toputils.Key.D: + if (flow) { + if (e.shiftKey) { + FlowActions.duplicate(flow); + } else { + FlowActions.delete(flow); + } + } + break; + case toputils.Key.A: + if (e.shiftKey) { + FlowActions.accept_all(); + } else if (flow && flow.intercepted) { + FlowActions.accept(flow); + } + break; + case toputils.Key.R: + if (!e.shiftKey && flow) { + FlowActions.replay(flow); + } + break; + case toputils.Key.V: + if(e.shiftKey && flow && flow.modified) { + FlowActions.revert(flow); + } + break; + default: + console.debug("keydown", e.keyCode); + return; + } + e.preventDefault(); + }, + getSelected: function () { + return this.props.flowStore.get(this.getParams().flowId); + }, + render: function () { + var selected = this.getSelected(); + + var details; + if (selected) { + details = [ + , + + ]; + } else { + details = null; + } + + return ( +
+ + {details} +
+ ); + } +}); + +module.exports = MainView; -- cgit v1.2.3