Enable going from room to tile and back

3 files changed, 49 insertions, 30 deletions

diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index cd4baaa5..2f4dc2eb 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -9,21 +9,7 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
         return <Group/>;
     }
 
-    if (interactionLevel.mode === "ROOM") {
-        return (
-            <Group>
-                {datacenter.rooms
-                    .filter(room => room.id !== interactionLevel.roomId)
-                    .map(room => <RoomContainer key={room.id} room={room}/>)
-                }
-                <GrayContainer/>
-                {datacenter.rooms
-                    .filter(room => room.id === interactionLevel.roomId)
-                    .map(room => <RoomContainer key={room.id} room={room}/>)
-                }
-            </Group>
-        );
-    } else {
+    if (interactionLevel.mode === "BUILDING") {
         return (
             <Group>
                 {datacenter.rooms.map(room => (
@@ -32,6 +18,20 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
             </Group>
         );
     }
+
+    return (
+        <Group>
+            {datacenter.rooms
+                .filter(room => room.id !== interactionLevel.roomId)
+                .map(room => <RoomContainer key={room.id} room={room}/>)
+            }
+            {interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
+            {datacenter.rooms
+                .filter(room => room.id === interactionLevel.roomId)
+                .map(room => <RoomContainer key={room.id} room={room}/>)
+            }
+        </Group>
+    );
 };
 
 DatacenterGroup.propTypes = {
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 179a24a2..b6c285e9 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -1,22 +1,39 @@
 import React from "react";
 import {Group} from "react-konva";
+import GrayContainer from "../../../containers/map/GrayContainer";
+import TileContainer from "../../../containers/map/TileContainer";
 import Shapes from "../../../shapes/index";
 import {deriveWallLocations} from "../../../util/tile-calculations";
 import WallSegment from "../elements/WallSegment";
-import TileGroup from "./TileGroup";
 
-const RoomGroup = ({room, onClick}) => (
-    <Group
-        onClick={onClick}
-    >
-        {room.tiles.map(tile => (
-            <TileGroup key={tile.id} tile={tile}/>
-        ))}
-        {deriveWallLocations(room).map((wallSegment, index) => (
-            <WallSegment key={index} wallSegment={wallSegment}/>
-        ))}
-    </Group>
-);
+const RoomGroup = ({room, interactionLevel, onClick}) => {
+    return (
+        <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}/>),
+                        <GrayContainer key={-1}/>,
+                        room.tiles
+                            .filter(tile => tile.id === interactionLevel.tileId)
+                            .map(tile => <TileContainer key={tile.id} tile={tile}/>)
+                    ];
+                } else {
+                    return room.tiles.map(tile => (
+                        <TileContainer key={tile.id} tile={tile}/>
+                    ));
+                }
+            })()}
+            {deriveWallLocations(room).map((wallSegment, index) => (
+                <WallSegment key={index} wallSegment={wallSegment}/>
+            ))}
+        </Group>
+    );
+};
 
 RoomGroup.propTypes = {
     room: Shapes.Room,
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
index 7493f953..5920a2b6 100644
--- a/src/components/map/groups/TileGroup.js
+++ b/src/components/map/groups/TileGroup.js
@@ -4,7 +4,7 @@ import Shapes from "../../../shapes/index";
 import RoomTile from "../elements/RoomTile";
 import RackGroup from "./RackGroup";
 
-const TileGroup = ({tile}) => {
+const TileGroup = ({tile, onClick}) => {
     let tileObject;
     switch (tile.objectType) {
         case "RACK":
@@ -15,7 +15,9 @@ const TileGroup = ({tile}) => {
     }
 
     return (
-        <Group>
+        <Group
+            onClick={onClick}
+        >
             <RoomTile tile={tile}/>
             {tileObject}
         </Group>