#630 and #652 click shows popover, alt+click multiple selection

collectivemedia · Sep 29, 2015 · b60825e · b60825e
1 parent 18e627f
commit b60825e
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 10 deletions.
diff --git a/celos-ui/src/main/webapp/static/css/style.css b/celos-ui/src/main/webapp/static/css/style.css
@@ -49,7 +49,35 @@
     font-size: large;
 }
 
-.RUNNING, .READY { background-color: #ffc; }
-.SUCCESS { background-color: #cfc; }
-.WAITING { background-color: #ccf; }
-.FAILURE, .WAIT_TIMEOUT { background-color: #fcc; }
+.RUNNING, .READY {
+    background-color: #ffc;
+}
+.SUCCESS {
+    background-color: #cfc;
+}
+.WAITING {
+    background-color: #ccf;
+}
+.FAILURE, .WAIT_TIMEOUT {
+    background-color: #fcc;
+}
+
+
+.selected {
+    background-color: #aaaaaa;
+}
+
+
+.cell-hover {
+    display: block;
+    position: absolute;
+    /*top: 5px;*/
+    /*left: 0;*/
+    border: 1px solid #000;
+    background: #fff;
+    width: 300px;
+    text-align: center;
+}
+
+/*.anchor:hover > .profile-hover { display: block; }*/
+
diff --git a/celos-ui/src/main/webapp/static/js/app.js b/celos-ui/src/main/webapp/static/js/app.js
@@ -115,14 +115,51 @@ var ProductRow = React.createClass({
 var TimeSlot = React.createClass({
     displayName: "TimeSlot",
 
+    getInitialState: function getInitialState() {
+        return {
+            isSelected: false,
+            showPopup: false
+        }
+    },
+    handleClick: function () {
+        if (KEYBOARD.altPressed) {
+            this.setState({
+                isSelected: !this.state.isSelected
+            });
+        } else {
+            this.setState({
+                showPopup: !this.state.showPopup
+            })
+        }
+    },
+    handleOnMouseLeave: function () {
+        this.setState({
+            showPopup: false
+        })
+    },
     render: function render() {
-        return React.DOM.td({ className: "slot " + this.props.data.status },
-            React.DOM.a({ href: this.props.data.url },
-                !this.props.data.quantity
-                    ? React.DOM.div(null)
-                    : React.DOM.div(null, this.props.data.quantity)
-            )
+        var selectedClass = this.state.isSelected ? "selected" : "";
+        var cellConfig = {};
+        cellConfig.className = ["slot", this.props.data.status, selectedClass].join(" ");
+        cellConfig.onClick = this.handleClick;
+        if (this.state.showPopup) {
+            cellConfig.onMouseLeave = this.handleOnMouseLeave
+        }
+        var popupElement = (
+                React.DOM.div({className: "cell-hover"},
+                    React.DOM.a({ href: this.props.data.url }, "click me!"),
+                    "Slot info")
         );
+        return (
+            React.DOM.td(cellConfig,
+                this.props.data.quantity
+                    ? React.DOM.div(null, this.props.data.quantity)
+                    : React.DOM.div(null),
+                this.state.showPopup
+                    ? popupElement
+                    : React.DOM.div(null)
+            )
+        )
     }
 });
 

diff --git a/celos-ui/src/main/webapp/static/js/lib.js b/celos-ui/src/main/webapp/static/js/lib.js
@@ -59,6 +59,8 @@ var makeCelosHref = function makeCelosHref(zoom, time, groups) {
     return url0.substring(0, url0.length - 1);
 };
 
+
+
 var parseParams = function parseParams(paramsList) {
     var res = {};
     paramsList.forEach(function (parameter) {
@@ -84,3 +86,28 @@ var parseParams = function parseParams(paramsList) {
     });
     return res;
 };
+
+var addOrRemoveClass = function(elem, className) {
+    if (elem.className.indexOf(className) == -1) {
+        elem.className += " " + className;
+    } else {
+        elem.className = elem.className.replace(" " + className, "");
+    }
+};
+
+var KEYBOARD = {
+    altPressed: false
+};
+
+window.onkeydown = function (e) {
+    if (e.key == "Alt") {
+        KEYBOARD.altPressed = true;
+    }
+};
+
+window.onkeyup = function (e) {
+    console.log(e);
+    if (e.key == "Alt") {
+        KEYBOARD.altPressed = false;
+    }
+};