diff options
Diffstat (limited to 'src/components/map')
| -rw-r--r-- | src/components/map/elements/RoomTile.js | 5 | ||||
| -rw-r--r-- | src/components/map/groups/RackGroup.js | 27 | ||||
| -rw-r--r-- | src/components/map/groups/TileGroup.js | 17 |
3 files changed, 35 insertions, 14 deletions
diff --git a/src/components/map/elements/RoomTile.js b/src/components/map/elements/RoomTile.js index 4d5e50fc..87dd2f03 100644 --- a/src/components/map/elements/RoomTile.js +++ b/src/components/map/elements/RoomTile.js @@ -1,16 +1,15 @@ import React from "react"; import {Rect} from "react-konva"; -import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../colors/index"; import Shapes from "../../../shapes/index"; import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; -const RoomTile = ({tile, newTile}) => ( +const RoomTile = ({tile, color}) => ( <Rect x={tile.positionX * TILE_SIZE_IN_PIXELS} y={tile.positionY * TILE_SIZE_IN_PIXELS} width={TILE_SIZE_IN_PIXELS} height={TILE_SIZE_IN_PIXELS} - fill={newTile ? ROOM_IN_CONSTRUCTION_COLOR : ROOM_DEFAULT_COLOR} + fill={color} /> ); diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js index 5dd470de..648c74d7 100644 --- a/src/components/map/groups/RackGroup.js +++ b/src/components/map/groups/RackGroup.js @@ -4,15 +4,28 @@ import {RACK_BACKGROUND_COLOR} from "../../../colors/index"; import RackEnergyFillContainer from "../../../containers/map/RackEnergyFillContainer"; import RackSpaceFillContainer from "../../../containers/map/RackSpaceFillContainer"; import Shapes from "../../../shapes/index"; +import {convertLoadToSimulationColor} from "../../../util/simulation-load"; import TileObject from "../elements/TileObject"; -const RackGroup = ({tile}) => ( - <Group> - <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR}/> - <RackSpaceFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/> - <RackEnergyFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/> - </Group> -); +const RackGroup = ({tile, inSimulation, rackLoad}) => { + let color = RACK_BACKGROUND_COLOR; + if (inSimulation) { + color = convertLoadToSimulationColor(rackLoad); + } + + return ( + <Group> + <TileObject positionX={tile.positionX} positionY={tile.positionY} color={color}/> + {inSimulation ? + undefined : + <Group> + <RackSpaceFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/> + <RackEnergyFillContainer tileId={tile.id} positionX={tile.positionX} positionY={tile.positionY}/> + </Group> + } + </Group> + ); +}; RackGroup.propTypes = { tile: Shapes.Tile, diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js index 8fbdeb31..3de712d1 100644 --- a/src/components/map/groups/TileGroup.js +++ b/src/components/map/groups/TileGroup.js @@ -1,25 +1,34 @@ import PropTypes from "prop-types"; import React from "react"; import {Group} from "react-konva"; +import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../colors/index"; +import RackContainer from "../../../containers/map/RackContainer"; import Shapes from "../../../shapes/index"; +import {convertLoadToSimulationColor} from "../../../util/simulation-load"; import RoomTile from "../elements/RoomTile"; -import RackGroup from "./RackGroup"; -const TileGroup = ({tile, newTile, onClick}) => { +const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => { let tileObject; switch (tile.objectType) { case "RACK": - tileObject = <RackGroup tile={tile}/>; + tileObject = <RackContainer tile={tile}/>; break; default: tileObject = null; } + let color = ROOM_DEFAULT_COLOR; + if (newTile) { + color = ROOM_IN_CONSTRUCTION_COLOR; + } else if (inSimulation) { + color = convertLoadToSimulationColor(roomLoad); + } + return ( <Group onClick={() => onClick(tile)} > - <RoomTile tile={tile} newTile={newTile}/> + <RoomTile tile={tile} color={color}/> {tileObject} </Group> ); |
