Implement room creation

14 files changed, 188 insertions, 46 deletions

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index 644b4c54..541df1d6 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {Group, Layer, Stage} from "react-konva";
 import DatacenterContainer from "../../containers/map/DatacenterContainer";
+import HoverTileLayer from "../../containers/map/layers/HoverTileLayer";
 import jQuery from "../../util/jquery";
 import {NAVBAR_HEIGHT} from "../navigation/Navbar";
 import Backdrop from "./elements/Backdrop";
@@ -10,7 +11,11 @@ import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
 class MapStage extends React.Component {
     state = {
         width: 600,
-        height: 400
+        height: 400,
+        x: 0,
+        y: 0,
+        mouseX: 0,
+        mouseY: 0
     };
 
     componentWillMount() {
@@ -29,18 +34,30 @@ class MapStage extends React.Component {
         this.setState({width: jQuery(window).width(), height: jQuery(window).height() - NAVBAR_HEIGHT});
     }
 
+    updateMousePosition() {
+        const mousePos = this.stage.getStage().getPointerPosition();
+        this.setState({mouseX: mousePos.x, mouseY: mousePos.y});
+    }
+
     dragBoundFunc(pos) {
-        return {
+        const updatedPosition = {
             x: pos.x > 0 ? 0 :
                 (pos.x < -MAP_SIZE_IN_PIXELS + this.state.width ? -MAP_SIZE_IN_PIXELS + this.state.width : pos.x),
             y: pos.y > 0 ? 0 :
                 (pos.y < -MAP_SIZE_IN_PIXELS + this.state.height ? -MAP_SIZE_IN_PIXELS + this.state.height : pos.y)
-        }
+        };
+
+        this.setState(updatedPosition);
+
+        return updatedPosition;
     }
 
     render() {
         return (
-            <Stage width={this.state.width} height={this.state.height}>
+            <Stage ref={(stage) => {this.stage = stage;}}
+                   width={this.state.width}
+                   height={this.state.height}
+                   onMouseMove={this.updateMousePosition.bind(this)}>
                 <Layer>
                     <Group draggable={true} dragBoundFunc={this.dragBoundFunc.bind(this)}>
                         <Backdrop/>
@@ -48,6 +65,12 @@ class MapStage extends React.Component {
                         <GridGroup/>
                     </Group>
                 </Layer>
+                <HoverTileLayer
+                    mainGroupX={this.state.x}
+                    mainGroupY={this.state.y}
+                    mouseX={this.state.mouseX}
+                    mouseY={this.state.mouseY}
+                />
             </Stage>
         )
     }
diff --git a/src/components/map/elements/HoverTile.js b/src/components/map/elements/HoverTile.js
new file mode 100644
index 00000000..a8bb2085
--- /dev/null
+++ b/src/components/map/elements/HoverTile.js
@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Rect} from "react-konva";
+import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../colors/index";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const HoverTile = ({pixelX, pixelY, isValid, onClick}) => (
+    <Rect
+        x={pixelX}
+        y={pixelY}
+        width={TILE_SIZE_IN_PIXELS}
+        height={TILE_SIZE_IN_PIXELS}
+        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+        onClick={onClick}
+    />
+);
+
+HoverTile.propTypes = {
+    pixelX: PropTypes.number.isRequired,
+    pixelY: PropTypes.number.isRequired,
+    isValid: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default HoverTile;
diff --git a/src/components/map/elements/RoomTile.js b/src/components/map/elements/RoomTile.js
index 759dcf35..4d5e50fc 100644
--- a/src/components/map/elements/RoomTile.js
+++ b/src/components/map/elements/RoomTile.js
@@ -1,16 +1,16 @@
 import React from "react";
 import {Rect} from "react-konva";
-import {ROOM_DEFAULT_COLOR} from "../../../colors/index";
+import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../colors/index";
 import Shapes from "../../../shapes/index";
 import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const RoomTile = ({tile}) => (
+const RoomTile = ({tile, newTile}) => (
     <Rect
         x={tile.positionX * TILE_SIZE_IN_PIXELS}
         y={tile.positionY * TILE_SIZE_IN_PIXELS}
         width={TILE_SIZE_IN_PIXELS}
         height={TILE_SIZE_IN_PIXELS}
-        fill={ROOM_DEFAULT_COLOR}
+        fill={newTile ? ROOM_IN_CONSTRUCTION_COLOR : ROOM_DEFAULT_COLOR}
     />
 );
 
diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index 2f4dc2eb..0830ac4e 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -12,8 +12,8 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
     if (interactionLevel.mode === "BUILDING") {
         return (
             <Group>
-                {datacenter.rooms.map(room => (
-                    <RoomContainer key={room.id} room={room}/>
+                {datacenter.roomIds.map(roomId => (
+                    <RoomContainer key={roomId} roomId={roomId}/>
                 ))}
             </Group>
         );
@@ -21,14 +21,14 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
 
     return (
         <Group>
-            {datacenter.rooms
-                .filter(room => room.id !== interactionLevel.roomId)
-                .map(room => <RoomContainer key={room.id} room={room}/>)
+            {datacenter.roomIds
+                .filter(roomId => roomId !== interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
             }
             {interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
-            {datacenter.rooms
-                .filter(room => room.id === interactionLevel.roomId)
-                .map(room => <RoomContainer key={room.id} room={room}/>)
+            {datacenter.roomIds
+                .filter(roomId => roomId === interactionLevel.roomId)
+                .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
             }
         </Group>
     );
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index b6c285e9..85d3c7c9 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -2,35 +2,40 @@ import React from "react";
 import {Group} from "react-konva";
 import GrayContainer from "../../../containers/map/GrayContainer";
 import TileContainer from "../../../containers/map/TileContainer";
+import WallContainer from "../../../containers/map/WallContainer";
 import Shapes from "../../../shapes/index";
-import {deriveWallLocations} from "../../../util/tile-calculations";
-import WallSegment from "../elements/WallSegment";
 
-const RoomGroup = ({room, interactionLevel, onClick}) => {
+const RoomGroup = ({room, interactionLevel, currentRoomInConstruction, onClick}) => {
+    if (currentRoomInConstruction === room.id) {
+        return (
+            <Group onClick={onClick}>
+                {room.tileIds.map(tileId => (
+                    <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+                ))}
+            </Group>
+        );
+    }
+
     return (
-        <Group
-            onClick={onClick}
-        >
+        <Group onClick={onClick}>
             {(() => {
                 if (interactionLevel.mode === "OBJECT" && interactionLevel.roomId === room.id) {
                     return [
-                        room.tiles
-                            .filter(tile => tile.id !== interactionLevel.tileId)
-                            .map(tile => <TileContainer key={tile.id} tile={tile}/>),
+                        room.tileIds
+                            .filter(tileId => tileId !== interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
                         <GrayContainer key={-1}/>,
-                        room.tiles
-                            .filter(tile => tile.id === interactionLevel.tileId)
-                            .map(tile => <TileContainer key={tile.id} tile={tile}/>)
+                        room.tileIds
+                            .filter(tileId => tileId === interactionLevel.tileId)
+                            .map(tileId => <TileContainer key={tileId} tileId={tileId}/>)
                     ];
                 } else {
-                    return room.tiles.map(tile => (
-                        <TileContainer key={tile.id} tile={tile}/>
+                    return room.tileIds.map(tileId => (
+                        <TileContainer key={tileId} tileId={tileId}/>
                     ));
                 }
             })()}
-            {deriveWallLocations(room).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment}/>
-            ))}
+            <WallContainer roomId={room.id}/>
         </Group>
     );
 };
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
index 5920a2b6..8fbdeb31 100644
--- a/src/components/map/groups/TileGroup.js
+++ b/src/components/map/groups/TileGroup.js
@@ -1,10 +1,11 @@
+import PropTypes from "prop-types";
 import React from "react";
 import {Group} from "react-konva";
 import Shapes from "../../../shapes/index";
 import RoomTile from "../elements/RoomTile";
 import RackGroup from "./RackGroup";
 
-const TileGroup = ({tile, onClick}) => {
+const TileGroup = ({tile, newTile, onClick}) => {
     let tileObject;
     switch (tile.objectType) {
         case "RACK":
@@ -16,9 +17,9 @@ const TileGroup = ({tile, onClick}) => {
 
     return (
         <Group
-            onClick={onClick}
+            onClick={() => onClick(tile)}
         >
-            <RoomTile tile={tile}/>
+            <RoomTile tile={tile} newTile={newTile}/>
             {tileObject}
         </Group>
     );
@@ -26,6 +27,7 @@ const TileGroup = ({tile, onClick}) => {
 
 TileGroup.propTypes = {
     tile: Shapes.Tile,
+    newTile: PropTypes.bool,
 };
 
 export default TileGroup;
diff --git a/src/components/map/groups/WallGroup.js b/src/components/map/groups/WallGroup.js
new file mode 100644
index 00000000..f21d91a5
--- /dev/null
+++ b/src/components/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
+import {deriveWallLocations} from "../../../util/tile-calculations";
+import WallSegment from "../elements/WallSegment";
+
+const WallGroup = ({tiles}) => {
+    return (
+        <Group>
+            {deriveWallLocations(tiles).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment}/>
+            ))}
+        </Group>
+    );
+};
+
+WallGroup.propTypes = {
+    tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
+};
+
+export default WallGroup;
diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverTileLayerComponent.js
new file mode 100644
index 00000000..691b9733
--- /dev/null
+++ b/src/components/map/layers/HoverTileLayerComponent.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import {Layer} from "react-konva";
+import HoverTile from "../elements/HoverTile";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const HoverTileLayerComponent = ({mainGroupX, mainGroupY, mouseX, mouseY, currentRoomInConstruction, isValid, onClick}) => {
+    if (currentRoomInConstruction === -1) {
+        return <Layer/>
+    }
+
+    const positionX = Math.floor((mouseX - mainGroupX) / TILE_SIZE_IN_PIXELS);
+    const positionY = Math.floor((mouseY - mainGroupY) / TILE_SIZE_IN_PIXELS);
+    const pixelX = positionX * TILE_SIZE_IN_PIXELS + mainGroupX;
+    const pixelY = positionY * TILE_SIZE_IN_PIXELS + mainGroupY;
+    const validity = isValid(positionX, positionY);
+
+    return (
+        <Layer>
+            <HoverTile
+                pixelX={pixelX} pixelY={pixelY}
+                isValid={validity} onClick={() => onClick(positionX, positionY)}
+            />
+        </Layer>
+    );
+};
+
+export default HoverTileLayerComponent;
diff --git a/src/components/sidebars/BuildingSidebarContent.js b/src/components/sidebars/BuildingSidebarContent.js
deleted file mode 100644
index 44688bb8..00000000
--- a/src/components/sidebars/BuildingSidebarContent.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-const BuildingSidebarContent = () => {
-    return (
-        <p>Test</p>
-    );
-};
-
-export default BuildingSidebarContent;
diff --git a/src/components/sidebars/TopologySidebarComponent.js b/src/components/sidebars/topology/TopologySidebarComponent.js
index 371463d1..932d2ecf 100644
--- a/src/components/sidebars/TopologySidebarComponent.js
+++ b/src/components/sidebars/topology/TopologySidebarComponent.js
@@ -1,6 +1,6 @@
 import React from "react";
-import BuildingSidebarContent from "./BuildingSidebarContent";
-import Sidebar from "./Sidebar";
+import BuildingSidebarContent from "../../../containers/sidebars/topology/building/BuildingSidebarContent";
+import Sidebar from "../Sidebar";
 
 const TopologySidebarComponent = ({interactionLevel}) => {
     let sidebarHeading;
diff --git a/src/components/sidebars/topology/building/BuildingSidebarContentComponent.js b/src/components/sidebars/topology/building/BuildingSidebarContentComponent.js
new file mode 100644
index 00000000..b88b23b7
--- /dev/null
+++ b/src/components/sidebars/topology/building/BuildingSidebarContentComponent.js
@@ -0,0 +1,20 @@
+import React from "react";
+import CancelNewRoomConstructionButton from "../../../../containers/sidebars/topology/building/CancelNewRoomConstructionButton";
+import FinishNewRoomConstructionButton from "../../../../containers/sidebars/topology/building/FinishNewRoomConstructionButton";
+import StartNewRoomConstructionButton from "../../../../containers/sidebars/topology/building/StartNewRoomConstructionButton";
+
+const BuildingSidebarContentComponent = ({currentRoomInConstruction}) => {
+    if (currentRoomInConstruction !== -1) {
+        return (
+            <div>
+                <FinishNewRoomConstructionButton/>
+                <CancelNewRoomConstructionButton/>
+            </div>
+        );
+    }
+    return (
+        <StartNewRoomConstructionButton/>
+    );
+};
+
+export default BuildingSidebarContentComponent;
diff --git a/src/components/sidebars/topology/building/CancelNewRoomConstructionComponent.js b/src/components/sidebars/topology/building/CancelNewRoomConstructionComponent.js
new file mode 100644
index 00000000..15f199a6
--- /dev/null
+++ b/src/components/sidebars/topology/building/CancelNewRoomConstructionComponent.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const CancelNewRoomConstructionComponent = ({onClick}) => (
+    <div className="btn btn-default btn-block" onClick={onClick}>
+        Cancel construction
+    </div>
+);
+
+export default CancelNewRoomConstructionComponent;
diff --git a/src/components/sidebars/topology/building/FinishNewRoomConstructionComponent.js b/src/components/sidebars/topology/building/FinishNewRoomConstructionComponent.js
new file mode 100644
index 00000000..d9edbb61
--- /dev/null
+++ b/src/components/sidebars/topology/building/FinishNewRoomConstructionComponent.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const FinishNewRoomConstructionComponent = ({onClick}) => (
+    <div className="btn btn-primary btn-block" onClick={onClick}>
+        Finalize new room
+    </div>
+);
+
+export default FinishNewRoomConstructionComponent;
diff --git a/src/components/sidebars/topology/building/StartNewRoomConstructionComponent.js b/src/components/sidebars/topology/building/StartNewRoomConstructionComponent.js
new file mode 100644
index 00000000..60573532
--- /dev/null
+++ b/src/components/sidebars/topology/building/StartNewRoomConstructionComponent.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const StartNewRoomConstructionComponent = ({onClick}) => (
+    <div className="btn btn-primary btn-block" onClick={onClick}>
+        Construct a new room
+    </div>
+);
+
+export default StartNewRoomConstructionComponent;