From 4a92c425175a4e592c8760f028be683f53ab9b90 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 15 Mar 2015 22:05:50 +0100 Subject: web: smaller changes --- web/src/js/actions.js | 5 +++-- web/src/js/app.js | 3 +-- web/src/js/components/common.js | 34 ++++++---------------------------- web/src/js/components/eventlog.js | 1 + web/src/js/components/header.js | 6 +++--- web/src/js/components/mainview.js | 17 +++++++++-------- web/src/js/components/proxyapp.js | 11 ++++++----- web/src/js/store/view.js | 7 +++---- 8 files changed, 32 insertions(+), 52 deletions(-) (limited to 'web') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index 258501a4..64cd68a7 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -106,7 +106,7 @@ var FlowActions = { } }; -Query = { +var Query = { FILTER: "f", HIGHLIGHT: "h", SHOW_EVENTLOG: "e" @@ -116,5 +116,6 @@ module.exports = { ActionTypes: ActionTypes, ConnectionActions: ConnectionActions, FlowActions: FlowActions, - StoreCmds: StoreCmds + StoreCmds: StoreCmds, + Query: Query }; \ No newline at end of file diff --git a/web/src/js/app.js b/web/src/js/app.js index a7f3570e..63d782d4 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -2,14 +2,13 @@ var React = require("react"); var ReactRouter = require("react-router"); var $ = require("jquery"); - var Connection = require("./connection"); var proxyapp = require("./components/proxyapp.js"); $(function () { window.ws = new Connection("/updates"); - ReactRouter.run(proxyapp.routes, function (Handler) { + ReactRouter.run(proxyapp.routes, function (Handler, state) { React.render(, document.body); }); }); diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 96262acc..ffaa717f 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -38,7 +38,7 @@ var Navigation = _.extend({}, ReactRouter.Navigation, { q[i] = dict[i] || undefined; //falsey values shall be removed. } } - q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599 + q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/957 this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q); }, replaceWith: function(routeNameOrPath, params, query) { @@ -48,38 +48,16 @@ var Navigation = _.extend({}, ReactRouter.Navigation, { if(params === undefined){ params = this.context.getCurrentParams(); } - if(query === undefined){ + if(query === undefined) { query = this.context.getCurrentQuery(); } + + // FIXME: react-router is just broken. ReactRouter.Navigation.replaceWith.call(this, routeNameOrPath, params, query); } }); _.extend(Navigation.contextTypes, ReactRouter.State.contextTypes); -var State = _.extend({}, ReactRouter.State, { - getInitialState: function () { - this._query = this.context.getCurrentQuery(); - this._queryWatches = []; - return null; - }, - onQueryChange: function (key, callback) { - this._queryWatches.push({ - key: key, - callback: callback - }); - }, - componentWillReceiveProps: function (nextProps, nextState) { - var q = this.context.getCurrentQuery(); - for (var i = 0; i < this._queryWatches.length; i++) { - var watch = this._queryWatches[i]; - if (this._query[watch.key] !== q[watch.key]) { - watch.callback(this._query[watch.key], q[watch.key], watch.key); - } - } - this._query = q; - } -}); - var Splitter = React.createClass({ getDefaultProps: function () { return { @@ -186,9 +164,9 @@ var Splitter = React.createClass({ }); module.exports = { - State: State, + State: ReactRouter.State, // keep here - react-router is pretty buggy, we may need workarounds in the future. Navigation: Navigation, StickyHeadMixin: StickyHeadMixin, AutoScrollMixin: AutoScrollMixin, Splitter: Splitter -} \ No newline at end of file +}; \ No newline at end of file diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index ae7cd093..23508275 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -1,5 +1,6 @@ var React = require("react"); var common = require("./common.js"); +var Query = require("../actions.js").Query; var VirtualScrollMixin = require("./virtualscroll.js"); var views = require("../store/view.js"); diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 76a1a5fb..d1684fb2 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -3,9 +3,9 @@ var $ = require("jquery"); var Filt = require("../filt/filt.js"); var utils = require("../utils.js"); - var common = require("./common.js"); var actions = require("../actions.js"); +var Query = require("../actions.js").Query; var FilterDocs = React.createClass({ statics: { @@ -30,12 +30,12 @@ var FilterDocs = React.createClass({ return ; } else { var commands = FilterDocs.doc.commands.map(function (c) { - return + return {c[0].replace(" ", '\u00a0')} {c[1]} ; }); - commands.push( + commands.push( diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 550a61da..18d7318f 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -2,6 +2,7 @@ var React = require("react"); var common = require("./common.js"); var actions = require("../actions.js"); +var Query = require("../actions.js").Query; var toputils = require("../utils.js"); var views = require("../store/view.js"); var Filt = require("../filt/filt.js"); @@ -12,12 +13,6 @@ var flowdetail = require("./flowdetail.js"); var MainView = React.createClass({ mixins: [common.Navigation, common.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: [] }; @@ -46,6 +41,12 @@ var MainView = React.createClass({ this.closeView(); this.openView(nextProps.flowStore); } + + var filterChanged = (this.props.query[Query.FILTER] !== nextProps.query[Query.FILTER]); + var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]); + if (filterChanged || highlightChanged) { + this.state.view.recalculate(this.getViewFilt(), this.getViewSort()); + } }, openView: function (store) { var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort()); @@ -73,7 +74,7 @@ var MainView = React.createClass({ }, 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)]; + var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length - 1)]; this.selectFlow(flow_to_select); } }, @@ -194,7 +195,7 @@ var MainView = React.createClass({ } break; case toputils.Key.V: - if(e.shiftKey && flow && flow.modified) { + if (e.shiftKey && flow && flow.modified) { actions.FlowActions.revert(flow); } break; diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index c5d7491d..863a9f53 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -8,6 +8,7 @@ var Footer = require("./footer.js"); var header = require("./header.js"); var EventLog = require("./eventlog.js"); var store = require("../store/store.js"); +var Query = require("../actions.js").Query; //TODO: Move out of here, just a stub. @@ -47,7 +48,6 @@ var ProxyAppMain = React.createClass({ }); }, render: function () { - var eventlog; if (this.getQuery()[Query.SHOW_EVENTLOG]) { eventlog = [ @@ -57,11 +57,13 @@ var ProxyAppMain = React.createClass({ } else { eventlog = null; } - return (
- + {eventlog}
@@ -88,5 +90,4 @@ var routes = ( module.exports = { routes: routes -}; - +}; \ No newline at end of file diff --git a/web/src/js/store/view.js b/web/src/js/store/view.js index b5db9287..9bf31c52 100644 --- a/web/src/js/store/view.js +++ b/web/src/js/store/view.js @@ -1,4 +1,3 @@ - var EventEmitter = require('events').EventEmitter; var _ = require("lodash"); @@ -10,7 +9,7 @@ function SortByStoreOrder(elem) { } var default_sort = SortByStoreOrder; -var default_filt = function(elem){ +var default_filt = function (elem) { return true; }; @@ -39,8 +38,8 @@ _.extend(StoreView.prototype, EventEmitter.prototype, { this.store.removeListener("update", this.update); this.store.removeListener("remove", this.remove); this.store.removeListener("recalculate", this.recalculate); - }, - recalculate: function (filt, sortfun) { + }, + recalculate: function (filt, sortfun) { if (filt) { this.filt = filt.bind(this); } -- cgit v1.2.3