From 1c4f4c2494a97d0088e48405c1f8f4f48846f180 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Wed, 24 Dec 2014 01:07:57 +0100
Subject: web: duplicate, delete, replay flows

---
 web/src/js/components/mainview.jsx.js | 29 ++++++++++-
 web/src/js/components/utils.jsx.js    | 95 ++++++++++++++++++++++++++++-------
 2 files changed, 105 insertions(+), 19 deletions(-)

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index f0e50176..78415ad0 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -105,6 +105,10 @@ var MainView = React.createClass({
         this.selectFlow(flows[index]);
     },
     onKeyDown: function (e) {
+        var flow = this.getSelected();
+        if(e.ctrlKey){
+            return;
+        }
         switch (e.keyCode) {
             case Key.K:
             case Key.UP:
@@ -143,11 +147,32 @@ var MainView = React.createClass({
                     this.refs.flowDetails.nextTab(+1);
                 }
                 break;
+            case Key.C:
+                if (e.shiftKey) {
+                    FlowActions.clear();
+                }
+                break;
+            case Key.D:
+                if (flow) {
+                    if (e.shiftKey) {
+                        FlowActions.duplicate(flow);
+                    } else {
+                        var last_flow = this.state.view.index(flow) === this.state.view.list.length - 1;
+                        this.selectFlowRelative(last_flow ? -1 : +1);
+                        FlowActions.delete(flow);
+                    }
+                }
+                break;
             case Key.A:
                 if (e.shiftKey) {
                     FlowActions.accept_all();
-                } else if(this.getSelected()) {
-                    FlowActions.accept(this.getSelected());
+                } else if (flow) {
+                    FlowActions.accept(flow);
+                }
+                break;
+            case Key.R:
+                if(!e.shiftKey && flow){
+                    FlowActions.replay(flow);
                 }
                 break;
             default:
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index 20dbda94..1714bfa9 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -1,5 +1,83 @@
 //React utils. For other utilities, see ../utils.js
 
+// http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example)
+var AutoScrollMixin = {
+    componentWillUpdate: function () {
+        var node = this.getDOMNode();
+        this._shouldScrollBottom = (
+            node.scrollTop !== 0 &&
+            node.scrollTop + node.clientHeight === node.scrollHeight
+        );
+    },
+    componentDidUpdate: function () {
+        if (this._shouldScrollBottom) {
+            var node = this.getDOMNode();
+            node.scrollTop = node.scrollHeight;
+        }
+    },
+};
+
+
+var StickyHeadMixin = {
+    adjustHead: function () {
+        // Abusing CSS transforms to set the element
+        // referenced as head into some kind of position:sticky.
+        var head = this.refs.head.getDOMNode();
+        head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)";
+    }
+};
+
+
+var Navigation = _.extend({}, ReactRouter.Navigation, {
+    setQuery: function (dict) {
+        var q = this.context.getCurrentQuery();
+        for(var i in dict){
+            if(dict.hasOwnProperty(i)){
+                q[i] = dict[i] || undefined; //falsey values shall be removed.
+            }
+        }
+        q._ = "_"; // workaround for https://github.com/rackt/react-router/pull/599
+        this.replaceWith(this.context.getCurrentPath(), this.context.getCurrentParams(), q);
+    },
+    replaceWith: function(routeNameOrPath, params, query) {
+        if(routeNameOrPath === undefined){
+            routeNameOrPath = this.context.getCurrentPath();
+        }
+        if(params === undefined){
+            params = this.context.getCurrentParams();
+        }
+        if(query === undefined){
+            query = this.context.getCurrentQuery();
+        }
+        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 {
@@ -103,21 +181,4 @@ var Splitter = React.createClass({
             </div>
         );
     }
-});
-
-function getCookie(name) {
-    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
-    return r ? r[1] : undefined;
-}
-var xsrf = $.param({_xsrf: getCookie("_xsrf")});
-
-//Tornado XSRF Protection.
-$.ajaxPrefilter(function (options) {
-    if (["post","put","delete"].indexOf(options.type.toLowerCase()) >= 0 && options.url[0] === "/") {
-        if (options.data) {
-            options.data += ("&" + xsrf);
-        } else {
-            options.data = xsrf;
-        }
-    }
 });
\ No newline at end of file
-- 
cgit v1.2.3