From 42778e8be409b97059fa519b53c303cdba502e01 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Tue, 5 Sep 2017 09:30:42 +0200
Subject: Implement rack creation

---
 src/components/map/MapStage.js                     | 11 +++-
 src/components/map/elements/TilePlusIcon.js        | 29 ++++++-----
 src/components/map/layers/HoverLayerComponent.js   | 59 ++++++++++++++++++++++
 .../map/layers/HoverTileLayerComponent.js          | 57 ---------------------
 .../map/layers/ObjectHoverLayerComponent.js        | 11 ++++
 .../map/layers/RoomHoverLayerComponent.js          |  8 +++
 .../topology/room/RackConstructionComponent.js     | 19 +++++++
 .../sidebars/topology/room/RoomSidebarComponent.js |  3 +-
 8 files changed, 124 insertions(+), 73 deletions(-)
 create mode 100644 src/components/map/layers/HoverLayerComponent.js
 delete mode 100644 src/components/map/layers/HoverTileLayerComponent.js
 create mode 100644 src/components/map/layers/ObjectHoverLayerComponent.js
 create mode 100644 src/components/map/layers/RoomHoverLayerComponent.js
 create mode 100644 src/components/sidebars/topology/room/RackConstructionComponent.js

(limited to 'src/components')

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index f3f38917..c4579965 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -2,7 +2,8 @@ import React from "react";
 import {Group, Layer, Stage} from "react-konva";
 import {Shortcuts} from "react-shortcuts";
 import DatacenterContainer from "../../containers/map/DatacenterContainer";
-import HoverTileLayer from "../../containers/map/layers/HoverTileLayer";
+import ObjectHoverLayer from "../../containers/map/layers/ObjectHoverLayer";
+import RoomHoverLayer from "../../containers/map/layers/RoomHoverLayer";
 import jQuery from "../../util/jquery";
 import {NAVBAR_HEIGHT} from "../navigation/Navbar";
 import Backdrop from "./elements/Backdrop";
@@ -90,7 +91,13 @@ class MapStage extends React.Component {
                             <GridGroup/>
                         </Group>
                     </Layer>
-                    <HoverTileLayer
+                    <RoomHoverLayer
+                        mainGroupX={this.state.x}
+                        mainGroupY={this.state.y}
+                        mouseX={this.state.mouseX}
+                        mouseY={this.state.mouseY}
+                    />
+                    <ObjectHoverLayer
                         mainGroupX={this.state.x}
                         mainGroupY={this.state.y}
                         mouseX={this.state.mouseX}
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 3cc3178c..562d7d15 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -1,32 +1,34 @@
+import PropTypes from "prop-types";
 import React from "react";
 import {Group, Line} from "react-konva";
 import {TILE_PLUS_COLOR} from "../../../colors/index";
-import Shapes from "../../../shapes/index";
-import {TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import {OBJECT_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const TilePlusIcon = ({positionX, positionY}) => {
+const TilePlusIcon = ({pixelX, pixelY}) => {
     const linePoints = [
         [
-            (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
-            positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
-            (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
-            (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelY + OBJECT_MARGIN_IN_PIXELS,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelY + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
         ],
         [
-            positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
-            (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
-            (positionX + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
-            (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
+            pixelX + OBJECT_MARGIN_IN_PIXELS,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelX + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
         ],
     ];
     return (
         <Group>
-            {linePoints.map(points => (
+            {linePoints.map((points, index) => (
                 <Line
+                    key={index}
                     points={points}
                     lineCap="round"
                     stroke={TILE_PLUS_COLOR}
                     strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS}
+                    listening={false}
                 />
             ))}
         </Group>
@@ -34,7 +36,8 @@ const TilePlusIcon = ({positionX, positionY}) => {
 };
 
 TilePlusIcon.propTypes = {
-    wallSegment: Shapes.WallSegment,
+    pixelX: PropTypes.number,
+    pixelY: PropTypes.number,
 };
 
 export default TilePlusIcon;
diff --git a/src/components/map/layers/HoverLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js
new file mode 100644
index 00000000..861d2b9a
--- /dev/null
+++ b/src/components/map/layers/HoverLayerComponent.js
@@ -0,0 +1,59 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import {Layer} from "react-konva";
+import HoverTile from "../elements/HoverTile";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+class HoverLayerComponent extends React.Component {
+    static propTypes = {
+        mouseX: PropTypes.number.isRequired,
+        mouseY: PropTypes.number.isRequired,
+        mainGroupX: PropTypes.number.isRequired,
+        mainGroupY: PropTypes.number.isRequired,
+        isEnabled: PropTypes.func.isRequired,
+        onClick: PropTypes.func.isRequired,
+    };
+
+    state = {
+        positionX: -1,
+        positionY: -1,
+        validity: false,
+    };
+
+    componentDidUpdate() {
+        if (!this.props.isEnabled()) {
+            return;
+        }
+
+        const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS);
+        const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / TILE_SIZE_IN_PIXELS);
+
+        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
+            this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)});
+        }
+    }
+
+    render() {
+        if (!this.props.isEnabled()) {
+            return <Layer/>;
+        }
+
+        const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS);
+        const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / TILE_SIZE_IN_PIXELS);
+        const pixelX = positionX * TILE_SIZE_IN_PIXELS + this.props.mainGroupX;
+        const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
+
+        return (
+            <Layer opacity={0.6}>
+                <HoverTile
+                    pixelX={pixelX} pixelY={pixelY}
+                    isValid={this.state.validity}
+                    onClick={() => this.state.validity ? this.props.onClick(positionX, positionY) : undefined}
+                />
+                {this.props.children ? React.cloneElement(this.props.children, {pixelX, pixelY}) : undefined}
+            </Layer>
+        );
+    }
+}
+
+export default HoverLayerComponent;
diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverTileLayerComponent.js
deleted file mode 100644
index bd07596a..00000000
--- a/src/components/map/layers/HoverTileLayerComponent.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import PropTypes from "prop-types";
-import React from 'react';
-import {Layer} from "react-konva";
-import HoverTile from "../elements/HoverTile";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
-
-class HoverTileLayerComponent extends React.Component {
-    static propTypes = {
-        mouseX: PropTypes.number.isRequired,
-        mouseY: PropTypes.number.isRequired,
-        mainGroupX: PropTypes.number.isRequired,
-        mainGroupY: PropTypes.number.isRequired,
-        onClick: PropTypes.func.isRequired,
-        containsRack: PropTypes.bool,
-    };
-
-    state = {
-        positionX: -1,
-        positionY: -1,
-        validity: false,
-    };
-
-    componentDidUpdate() {
-        if (this.props.currentRoomInConstruction === -1) {
-            return;
-        }
-
-        const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS);
-        const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / TILE_SIZE_IN_PIXELS);
-
-        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
-            this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)});
-        }
-    }
-
-    render() {
-        if (this.props.currentRoomInConstruction === -1) {
-            return <Layer/>;
-        }
-
-        const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS);
-        const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / TILE_SIZE_IN_PIXELS);
-        const pixelX = positionX * TILE_SIZE_IN_PIXELS + this.props.mainGroupX;
-        const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
-
-        return (
-            <Layer opacity={0.4}>
-                <HoverTile
-                    pixelX={pixelX} pixelY={pixelY}
-                    isValid={this.state.validity} onClick={() => this.props.onClick(positionX, positionY)}
-                />
-            </Layer>
-        );
-    }
-}
-
-export default HoverTileLayerComponent;
diff --git a/src/components/map/layers/ObjectHoverLayerComponent.js b/src/components/map/layers/ObjectHoverLayerComponent.js
new file mode 100644
index 00000000..91757cb3
--- /dev/null
+++ b/src/components/map/layers/ObjectHoverLayerComponent.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import TilePlusIcon from "../elements/TilePlusIcon";
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const ObjectHoverLayerComponent = (props) => (
+    <HoverLayerComponent {...props}>
+        <TilePlusIcon/>
+    </HoverLayerComponent>
+);
+
+export default ObjectHoverLayerComponent;
diff --git a/src/components/map/layers/RoomHoverLayerComponent.js b/src/components/map/layers/RoomHoverLayerComponent.js
new file mode 100644
index 00000000..2133c8d8
--- /dev/null
+++ b/src/components/map/layers/RoomHoverLayerComponent.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const RoomHoverLayerComponent = (props) => (
+    <HoverLayerComponent {...props}/>
+);
+
+export default RoomHoverLayerComponent;
diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js
new file mode 100644
index 00000000..8298eade
--- /dev/null
+++ b/src/components/sidebars/topology/room/RackConstructionComponent.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+const RackConstructionComponent = ({inObjectConstructionMode, onStart, onStop}) => {
+    if (inObjectConstructionMode) {
+        return (
+            <div className="btn btn-primary btn-block" onClick={onStop}>
+                Stop rack construction
+            </div>
+        );
+    }
+
+    return (
+        <div className="btn btn-primary btn-block" onClick={onStart}>
+            Start rack construction
+        </div>
+    );
+};
+
+export default RackConstructionComponent;
diff --git a/src/components/sidebars/topology/room/RoomSidebarComponent.js b/src/components/sidebars/topology/room/RoomSidebarComponent.js
index dc01a301..4c1200c1 100644
--- a/src/components/sidebars/topology/room/RoomSidebarComponent.js
+++ b/src/components/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,11 +1,12 @@
 import React from "react";
+import RackConstructionContainer from "../../../../containers/sidebars/topology/room/RackConstructionContainer";
 import RoomNameContainer from "../../../../containers/sidebars/topology/room/RoomNameContainer";
 import RoomTypeContainer from "../../../../containers/sidebars/topology/room/RoomTypeContainer";
 
 const RoomSidebarComponent = ({roomType}) => {
     let allowedObjects;
     if (roomType === "SERVER") {
-        allowedObjects = "test";
+        allowedObjects = <RackConstructionContainer/>;
     }
 
     return (
-- 
cgit v1.2.3