Enable going from room to tile and back

8 files changed, 133 insertions, 42 deletions

diff --git a/src/actions/interaction-level.js b/src/actions/interaction-level.js
index 916648f0..884f1988 100644
--- a/src/actions/interaction-level.js
+++ b/src/actions/interaction-level.js
@@ -1,15 +1,36 @@
 export const GO_FROM_BUILDING_TO_ROOM = "GO_FROM_BUILDING_TO_ROOM";
-export const GO_FROM_ROOM_TO_BUILDING = "GO_FROM_ROOM_TO_BUILDING";
+export const GO_FROM_ROOM_TO_OBJECT = "GO_FROM_ROOM_TO_OBJECT";
+export const GO_DOWN_ONE_INTERACTION_LEVEL = "GO_DOWN_ONE_INTERACTION_LEVEL";
 
 export function goFromBuildingToRoom(roomId) {
-    return {
-        type: GO_FROM_BUILDING_TO_ROOM,
-        roomId
+    return (dispatch, getState) => {
+        const {interactionLevel} = getState();
+        if (interactionLevel.mode !== "BUILDING") {
+            return;
+        }
+
+        dispatch({
+            type: GO_FROM_BUILDING_TO_ROOM,
+            roomId
+        });
+    };
+}
+
+export function goFromRoomToObject(tileId) {
+    return (dispatch, getState) => {
+        const {interactionLevel} = getState();
+        if (interactionLevel.mode !== "ROOM") {
+            return;
+        }
+        dispatch({
+            type: GO_FROM_ROOM_TO_OBJECT,
+            tileId
+        });
     };
 }
 
-export function goFromRoomToBuilding() {
+export function goDownOneInteractionLevel() {
     return {
-        type: GO_FROM_ROOM_TO_BUILDING
+        type: GO_DOWN_ONE_INTERACTION_LEVEL
     };
 }
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>
diff --git a/src/containers/map/GrayContainer.js b/src/containers/map/GrayContainer.js
index 27024147..bc1dcc59 100644
--- a/src/containers/map/GrayContainer.js
+++ b/src/containers/map/GrayContainer.js
@@ -1,10 +1,10 @@
 import {connect} from "react-redux";
-import {goFromRoomToBuilding} from "../../actions/interaction-level";
+import {goDownOneInteractionLevel} from "../../actions/interaction-level";
 import GrayLayer from "../../components/map/elements/GrayLayer";
 
 const mapDispatchToProps = dispatch => {
     return {
-        onClick: () => dispatch(goFromRoomToBuilding())
+        onClick: () => dispatch(goDownOneInteractionLevel())
     };
 };
 
diff --git a/src/containers/map/RoomContainer.js b/src/containers/map/RoomContainer.js
index d3d9b7e0..d46324b2 100644
--- a/src/containers/map/RoomContainer.js
+++ b/src/containers/map/RoomContainer.js
@@ -2,6 +2,12 @@ import {connect} from "react-redux";
 import {goFromBuildingToRoom} from "../../actions/interaction-level";
 import RoomGroup from "../../components/map/groups/RoomGroup";
 
+const mapStateToProps = state => {
+    return {
+        interactionLevel: state.interactionLevel
+    };
+};
+
 const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         onClick: () => dispatch(goFromBuildingToRoom(ownProps.room.id))
@@ -9,7 +15,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 };
 
 const RoomContainer = connect(
-    undefined,
+    mapStateToProps,
     mapDispatchToProps
 )(RoomGroup);
 
diff --git a/src/containers/map/TileContainer.js b/src/containers/map/TileContainer.js
new file mode 100644
index 00000000..0456c423
--- /dev/null
+++ b/src/containers/map/TileContainer.js
@@ -0,0 +1,26 @@
+import {connect} from "react-redux";
+import {goFromRoomToObject} from "../../actions/interaction-level";
+import TileGroup from "../../components/map/groups/TileGroup";
+
+const mapStateToProps = state => {
+    return {
+        interactionLevel: state.interactionLevel
+    };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+    return {
+        onClick: () => {
+            if (ownProps.tile.objectType) {
+                dispatch(goFromRoomToObject(ownProps.tile.id))
+            }
+        }
+    };
+};
+
+const TileContainer = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(TileGroup);
+
+export default TileContainer;
diff --git a/src/reducers/interaction-level.js b/src/reducers/interaction-level.js
index 4b0b3641..5ca917c7 100644
--- a/src/reducers/interaction-level.js
+++ b/src/reducers/interaction-level.js
@@ -1,4 +1,8 @@
-import {GO_FROM_BUILDING_TO_ROOM, GO_FROM_ROOM_TO_BUILDING} from "../actions/interaction-level";
+import {
+    GO_DOWN_ONE_INTERACTION_LEVEL,
+    GO_FROM_BUILDING_TO_ROOM,
+    GO_FROM_ROOM_TO_OBJECT
+} from "../actions/interaction-level";
 
 export function interactionLevel(state = {mode: "BUILDING"}, action) {
     switch (action.type) {
@@ -7,10 +11,25 @@ export function interactionLevel(state = {mode: "BUILDING"}, action) {
                 mode: "ROOM",
                 roomId: action.roomId
             };
-        case GO_FROM_ROOM_TO_BUILDING:
+        case GO_FROM_ROOM_TO_OBJECT:
             return {
-                mode: "BUILDING"
+                mode: "OBJECT",
+                roomId: state.roomId,
+                tileId: action.tileId
             };
+        case GO_DOWN_ONE_INTERACTION_LEVEL:
+            if (state.mode === "ROOM") {
+                return {
+                    mode: "BUILDING"
+                };
+            } else if (state.mode === "OBJECT") {
+                return {
+                    mode: "ROOM",
+                    roomId: state.roomId
+                };
+            } else {
+                return state;
+            }
         default:
             return state;
     }