summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/actions/interaction-level.js33
-rw-r--r--src/components/map/groups/DatacenterGroup.js30
-rw-r--r--src/components/map/groups/RoomGroup.js43
-rw-r--r--src/components/map/groups/TileGroup.js6
-rw-r--r--src/containers/map/GrayContainer.js4
-rw-r--r--src/containers/map/RoomContainer.js8
-rw-r--r--src/containers/map/TileContainer.js26
-rw-r--r--src/reducers/interaction-level.js25
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;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 16:52:21 +0000