Enable going from building to room and back

2 files changed, 32 insertions, 11 deletions

diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index d7e349be..cd4baaa5 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -1,23 +1,42 @@
 import React from "react";
 import {Group} from "react-konva";
+import GrayContainer from "../../../containers/map/GrayContainer";
+import RoomContainer from "../../../containers/map/RoomContainer";
 import Shapes from "../../../shapes/index";
-import RoomGroup from "./RoomGroup";
 
-const DatacenterGroup = ({datacenter}) => {
+const DatacenterGroup = ({datacenter, interactionLevel}) => {
     if (!datacenter) {
         return <Group/>;
     }
-    return (
-        <Group>
-            {datacenter.rooms.map(room => (
-                <RoomGroup key={room.id} room={room}/>
-            ))}
-        </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 {
+        return (
+            <Group>
+                {datacenter.rooms.map(room => (
+                    <RoomContainer key={room.id} room={room}/>
+                ))}
+            </Group>
+        );
+    }
 };
 
 DatacenterGroup.propTypes = {
     datacenter: Shapes.Datacenter,
+    interactionLevel: Shapes.InteractionLevel,
 };
 
 export default DatacenterGroup;
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 5f349e3c..179a24a2 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -5,8 +5,10 @@ import {deriveWallLocations} from "../../../util/tile-calculations";
 import WallSegment from "../elements/WallSegment";
 import TileGroup from "./TileGroup";
 
-const RoomGroup = ({room}) => (
-    <Group>
+const RoomGroup = ({room, onClick}) => (
+    <Group
+        onClick={onClick}
+    >
         {room.tiles.map(tile => (
             <TileGroup key={tile.id} tile={tile}/>
         ))}