1 files changed, 50 insertions, 34 deletions

diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 21ca454f..87c34ffc 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -1,33 +1,8 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import {Key} from "../utils.js";
 import _ from "lodash"
 
-export var Router = {
-    contextTypes: {
-        location: React.PropTypes.object,
-        router: React.PropTypes.object.isRequired
-    },
-    updateLocation: function (pathname, queryUpdate) {
-        if (pathname === undefined) {
-            pathname = this.context.location.pathname;
-        }
-        var query = this.context.location.query;
-        if (queryUpdate !== undefined) {
-            for (var i in queryUpdate) {
-                if (queryUpdate.hasOwnProperty(i)) {
-                    query[i] = queryUpdate[i] || undefined; //falsey values shall be removed.
-                }
-            }
-        }
-        this.context.router.replace({pathname, query});
-    },
-    getQuery: function () {
-        // For whatever reason, react-router always returns the same object, which makes comparing
-        // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.context.location.query);
-    }
-};
-
 export var Splitter = React.createClass({
     getDefaultProps: function () {
         return {
@@ -133,14 +108,55 @@ export var Splitter = React.createClass({
     }
 });
 
-export const ToggleComponent = (props) =>
-    <div
-      className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
-      onClick={props.onToggleChanged}>
-      <span><i className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}></i> {props.name}</span>
-    </div>
+export const ToggleButton = (props) =>
+    <div className="input-group toggle-btn">
+        <div
+        className={"btn " + (props.checked ? "btn-primary" : "btn-default")}
+        onClick={props.onToggleChanged}>
+        <span className={"fa " + (props.checked ? "fa-check-square-o" : "fa-square-o")}>&nbsp;{props.name}</span>
+        </div>
+    </div>;
+
+ToggleButton.propTypes = {
+    name: React.PropTypes.string.isRequired,
+    onToggleChanged: React.PropTypes.func.isRequired
+};
+
+export class ToggleInputButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {txt: props.txt};
+    }
 
-ToggleComponent.propTypes = {
+    render() {
+        return (
+            <div className="input-group toggle-input-btn">
+                <span
+                    className="input-group-btn"
+                    onClick={() => this.props.onToggleChanged(this.state.txt)}>
+                    <div className={"btn  " + (this.props.checked ? "btn-primary" : "btn-default")}>
+                        <span className={"fa " + (this.props.checked ? "fa-check-square-o" : "fa-square-o")}/>
+                        &nbsp;{this.props.name}
+                    </div>
+                </span>
+                <input
+                    className="form-control"
+                    placeholder={this.props.placeholder}
+                    disabled={this.props.checked}
+                    value={this.state.txt}
+                    type={this.props.inputType}
+                    onChange={e => this.setState({txt: e.target.value})}
+                    onKeyDown={e => {if (e.keyCode === Key.ENTER) this.props.onToggleChanged(this.state.txt); e.stopPropagation()}}/>
+            </div>
+        );
+    }
+}
+
+ToggleInputButton.propTypes = {
     name: React.PropTypes.string.isRequired,
+    txt: React.PropTypes.string.isRequired,
     onToggleChanged: React.PropTypes.func.isRequired
-}
\ No newline at end of file
+};
+
+
+