summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/actions/interaction-level.js15
-rw-r--r--src/actions/simulations.js2
-rw-r--r--src/components/map/MapConstants.js2
-rw-r--r--src/components/map/elements/GrayLayer.js17
-rw-r--r--src/components/map/groups/DatacenterGroup.js37
-rw-r--r--src/components/map/groups/RoomGroup.js6
-rw-r--r--src/containers/map/DatacenterContainer.js4
-rw-r--r--src/containers/map/GrayContainer.js16
-rw-r--r--src/containers/map/RoomContainer.js16
-rw-r--r--src/reducers/index.js2
-rw-r--r--src/reducers/interaction-level.js17
-rw-r--r--src/sagas/topology.js2
-rw-r--r--src/shapes/index.js6
-rw-r--r--src/util/tile-calculations.js75
14 files changed, 169 insertions, 48 deletions
diff --git a/src/actions/interaction-level.js b/src/actions/interaction-level.js
new file mode 100644
index 00000000..916648f0
--- /dev/null
+++ b/src/actions/interaction-level.js
@@ -0,0 +1,15 @@
+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 function goFromBuildingToRoom(roomId) {
+ return {
+ type: GO_FROM_BUILDING_TO_ROOM,
+ roomId
+ };
+}
+
+export function goFromRoomToBuilding() {
+ return {
+ type: GO_FROM_ROOM_TO_BUILDING
+ };
+}
diff --git a/src/actions/simulations.js b/src/actions/simulations.js
index 926c67bc..2e722d16 100644
--- a/src/actions/simulations.js
+++ b/src/actions/simulations.js
@@ -10,7 +10,7 @@ export const OPEN_SIMULATION_SUCCEEDED = "OPEN_SIMULATION_SUCCEEDED";
export function setAuthVisibilityFilter(filter) {
return {
type: SET_AUTH_VISIBILITY_FILTER,
- filter: filter
+ filter
};
}
diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index 7e26ad81..77b1f2cf 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -6,5 +6,5 @@ export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5;
export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2;
export const GRID_LINE_WIDTH_IN_PIXELS = 2;
-export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 7;
+export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8;
export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10;
diff --git a/src/components/map/elements/GrayLayer.js b/src/components/map/elements/GrayLayer.js
new file mode 100644
index 00000000..dfcbe71a
--- /dev/null
+++ b/src/components/map/elements/GrayLayer.js
@@ -0,0 +1,17 @@
+import React from "react";
+import {Rect} from "react-konva";
+import {GRAYED_OUT_AREA_COLOR} from "../../../colors/index";
+import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+
+const GrayLayer = ({onClick}) => (
+ <Rect
+ x={0}
+ y={0}
+ width={MAP_SIZE_IN_PIXELS}
+ height={MAP_SIZE_IN_PIXELS}
+ fill={GRAYED_OUT_AREA_COLOR}
+ onClick={onClick}
+ />
+);
+
+export default GrayLayer;
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}/>
))}
diff --git a/src/containers/map/DatacenterContainer.js b/src/containers/map/DatacenterContainer.js
index 1716f22d..00b6e79f 100644
--- a/src/containers/map/DatacenterContainer.js
+++ b/src/containers/map/DatacenterContainer.js
@@ -8,10 +8,10 @@ const mapStateToProps = state => {
}
const datacenter = denormalize(state, "datacenter", state.currentDatacenterId);
- console.log(datacenter);
return {
- datacenter
+ datacenter,
+ interactionLevel: state.interactionLevel
};
};
diff --git a/src/containers/map/GrayContainer.js b/src/containers/map/GrayContainer.js
new file mode 100644
index 00000000..27024147
--- /dev/null
+++ b/src/containers/map/GrayContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {goFromRoomToBuilding} from "../../actions/interaction-level";
+import GrayLayer from "../../components/map/elements/GrayLayer";
+
+const mapDispatchToProps = dispatch => {
+ return {
+ onClick: () => dispatch(goFromRoomToBuilding())
+ };
+};
+
+const GrayContainer = connect(
+ undefined,
+ mapDispatchToProps
+)(GrayLayer);
+
+export default GrayContainer;
diff --git a/src/containers/map/RoomContainer.js b/src/containers/map/RoomContainer.js
new file mode 100644
index 00000000..d3d9b7e0
--- /dev/null
+++ b/src/containers/map/RoomContainer.js
@@ -0,0 +1,16 @@
+import {connect} from "react-redux";
+import {goFromBuildingToRoom} from "../../actions/interaction-level";
+import RoomGroup from "../../components/map/groups/RoomGroup";
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+ return {
+ onClick: () => dispatch(goFromBuildingToRoom(ownProps.room.id))
+ };
+};
+
+const RoomContainer = connect(
+ undefined,
+ mapDispatchToProps
+)(RoomGroup);
+
+export default RoomContainer;
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 287a9762..4ddaaec9 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,5 +1,6 @@
import {combineReducers} from "redux";
import {auth} from "./auth";
+import {interactionLevel} from "./interaction-level";
import {modals} from "./modals";
import {objects} from "./objects";
import {authorizationsOfCurrentUser, authVisibilityFilter, currentSimulationId} from "./simulations";
@@ -13,6 +14,7 @@ const rootReducer = combineReducers({
authVisibilityFilter,
currentSimulationId,
currentDatacenterId,
+ interactionLevel,
});
export default rootReducer;
diff --git a/src/reducers/interaction-level.js b/src/reducers/interaction-level.js
new file mode 100644
index 00000000..4b0b3641
--- /dev/null
+++ b/src/reducers/interaction-level.js
@@ -0,0 +1,17 @@
+import {GO_FROM_BUILDING_TO_ROOM, GO_FROM_ROOM_TO_BUILDING} from "../actions/interaction-level";
+
+export function interactionLevel(state = {mode: "BUILDING"}, action) {
+ switch (action.type) {
+ case GO_FROM_BUILDING_TO_ROOM:
+ return {
+ mode: "ROOM",
+ roomId: action.roomId
+ };
+ case GO_FROM_ROOM_TO_BUILDING:
+ return {
+ mode: "BUILDING"
+ };
+ default:
+ return state;
+ }
+}
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index 6d359534..a15e6a30 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -51,7 +51,7 @@ function* fetchTile(tile) {
if (!tile.objectType) {
return;
}
- console.log(tile);
+
switch (tile.objectType) {
case "RACK":
const rack = yield fetchAndStoreRackOnTile(tile.objectId, tile.id);
diff --git a/src/shapes/index.js b/src/shapes/index.js
index 7f65982b..07fa512d 100644
--- a/src/shapes/index.js
+++ b/src/shapes/index.js
@@ -143,4 +143,10 @@ Shapes.WallSegment = PropTypes.shape({
length: PropTypes.number.isRequired,
});
+Shapes.InteractionLevel = PropTypes.shape({
+ mode: PropTypes.string.isRequired,
+ roomId: PropTypes.number,
+ rackId: PropTypes.bool
+});
+
export default Shapes;
diff --git a/src/util/tile-calculations.js b/src/util/tile-calculations.js
index f358442f..478c09f9 100644
--- a/src/util/tile-calculations.js
+++ b/src/util/tile-calculations.js
@@ -2,6 +2,8 @@ export function deriveWallLocations(room) {
const verticalWalls = {};
const horizontalWalls = {};
+ // Determine wall segments
+
room.tiles.forEach(tile => {
const x = tile.positionX, y = tile.positionY;
for (let dX = -1; dX <= 1; dX++) {
@@ -11,47 +13,50 @@ export function deriveWallLocations(room) {
}
let doInsert = true;
- room.tiles.forEach((otherTile) => {
+ room.tiles.forEach(otherTile => {
if (otherTile.positionX === x + dX && otherTile.positionY === y + dY) {
doInsert = false;
}
});
+ if (!doInsert) {
+ continue;
+ }
- if (doInsert) {
- if (dX === -1) {
- if (verticalWalls[x] === undefined) {
- verticalWalls[x] = [];
- }
- if (verticalWalls[x].indexOf(y) === -1) {
- verticalWalls[x].push(y);
- }
- } else if (dX === 1) {
- if (verticalWalls[x + 1] === undefined) {
- verticalWalls[x + 1] = [];
- }
- if (verticalWalls[x + 1].indexOf(y) === -1) {
- verticalWalls[x + 1].push(y);
- }
- } else if (dY === -1) {
- if (horizontalWalls[y] === undefined) {
- horizontalWalls[y] = [];
- }
- if (horizontalWalls[y].indexOf(x) === -1) {
- horizontalWalls[y].push(x);
- }
- } else if (dY === 1) {
- if (horizontalWalls[y + 1] === undefined) {
- horizontalWalls[y + 1] = [];
- }
- if (horizontalWalls[y + 1].indexOf(x) === -1) {
- horizontalWalls[y + 1].push(x);
- }
+ if (dX === -1) {
+ if (verticalWalls[x] === undefined) {
+ verticalWalls[x] = [];
+ }
+ if (verticalWalls[x].indexOf(y) === -1) {
+ verticalWalls[x].push(y);
+ }
+ } else if (dX === 1) {
+ if (verticalWalls[x + 1] === undefined) {
+ verticalWalls[x + 1] = [];
+ }
+ if (verticalWalls[x + 1].indexOf(y) === -1) {
+ verticalWalls[x + 1].push(y);
+ }
+ } else if (dY === -1) {
+ if (horizontalWalls[y] === undefined) {
+ horizontalWalls[y] = [];
+ }
+ if (horizontalWalls[y].indexOf(x) === -1) {
+ horizontalWalls[y].push(x);
+ }
+ } else if (dY === 1) {
+ if (horizontalWalls[y + 1] === undefined) {
+ horizontalWalls[y + 1] = [];
+ }
+ if (horizontalWalls[y + 1].indexOf(x) === -1) {
+ horizontalWalls[y + 1].push(x);
}
}
}
}
});
+ // Merge walls into longer segments
+
const result = [];
const walls = [verticalWalls, horizontalWalls];
for (let i = 0; i < 2; i++) {
@@ -65,10 +70,10 @@ export function deriveWallLocations(room) {
let startPos = wallList[a][0];
const isHorizontal = i === 1;
- const startPosX = isHorizontal ? startPos : a;
- const startPosY = isHorizontal ? a : startPos;
if (wallList[a].length === 1) {
+ const startPosX = isHorizontal ? startPos : a;
+ const startPosY = isHorizontal ? a : startPos;
result.push({
startPosX,
startPosY,
@@ -80,6 +85,8 @@ export function deriveWallLocations(room) {
for (let b = 0; b < wallList[a].length - 1; b++) {
if (b + 1 === wallList[a].length - 1) {
if (wallList[a][b + 1] - wallList[a][b] > 1) {
+ const startPosX = isHorizontal ? startPos : a;
+ const startPosY = isHorizontal ? a : startPos;
result.push({
startPosX,
startPosY,
@@ -89,6 +96,8 @@ export function deriveWallLocations(room) {
consecutiveCount = 0;
startPos = wallList[a][b + 1];
}
+ const startPosX = isHorizontal ? startPos : a;
+ const startPosY = isHorizontal ? a : startPos;
result.push({
startPosX,
startPosY,
@@ -97,6 +106,8 @@ export function deriveWallLocations(room) {
});
break;
} else if (wallList[a][b + 1] - wallList[a][b] > 1) {
+ const startPosX = isHorizontal ? startPos : a;
+ const startPosY = isHorizontal ? a : startPos;
result.push({
startPosX,
startPosY,
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 18:04:28 +0000