From de8f12d74faef5fa3f9e38d1340948cab2d06ea3 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Wed, 1 Jul 2020 13:33:31 +0200 Subject: Manually generate IDs --- .../components/app/map/groups/DatacenterGroup.js | 66 +++++++------- .../src/components/app/map/groups/GridGroup.js | 65 +++++++------- .../src/components/app/map/groups/RackGroup.js | 74 +++++++-------- .../src/components/app/map/groups/RoomGroup.js | 100 ++++++++++----------- .../src/components/app/map/groups/TileGroup.js | 69 +++++++------- .../src/components/app/map/groups/WallGroup.js | 34 +++---- 6 files changed, 200 insertions(+), 208 deletions(-) (limited to 'frontend/src/components/app/map/groups') diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js index 51e32db6..3d3b9702 100644 --- a/frontend/src/components/app/map/groups/DatacenterGroup.js +++ b/frontend/src/components/app/map/groups/DatacenterGroup.js @@ -1,40 +1,40 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import RoomContainer from "../../../../containers/app/map/RoomContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import RoomContainer from '../../../../containers/app/map/RoomContainer' +import Shapes from '../../../../shapes/index' const DatacenterGroup = ({ datacenter, interactionLevel }) => { - if (!datacenter) { - return ; - } + if (!datacenter) { + return + } - if (interactionLevel.mode === "BUILDING") { - return ( - - {datacenter.roomIds.map(roomId => ( - - ))} - - ); - } + if (interactionLevel.mode === 'BUILDING') { + return ( + + {datacenter.roomIds.map(roomId => ( + + ))} + + ) + } - return ( - - {datacenter.roomIds - .filter(roomId => roomId !== interactionLevel.roomId) - .map(roomId => )} - {interactionLevel.mode === "ROOM" ? : null} - {datacenter.roomIds - .filter(roomId => roomId === interactionLevel.roomId) - .map(roomId => )} - - ); -}; + return ( + + {datacenter.roomIds + .filter(roomId => roomId !== interactionLevel.roomId) + .map(roomId => )} + {interactionLevel.mode === 'ROOM' ? : null} + {datacenter.roomIds + .filter(roomId => roomId === interactionLevel.roomId) + .map(roomId => )} + + ) +} DatacenterGroup.propTypes = { - datacenter: Shapes.Datacenter, - interactionLevel: Shapes.InteractionLevel -}; + datacenter: Shapes.Datacenter, + interactionLevel: Shapes.InteractionLevel, +} -export default DatacenterGroup; +export default DatacenterGroup diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js index bbb1eb68..10554834 100644 --- a/frontend/src/components/app/map/groups/GridGroup.js +++ b/frontend/src/components/app/map/groups/GridGroup.js @@ -1,41 +1,36 @@ -import React from "react"; -import { Group, Line } from "react-konva"; -import { GRID_COLOR } from "../../../../util/colors"; -import { - GRID_LINE_WIDTH_IN_PIXELS, - MAP_SIZE, - MAP_SIZE_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import React from 'react' +import { Group, Line } from 'react-konva' +import { GRID_COLOR } from '../../../../util/colors' +import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' -const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i); +const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i) const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ - 0, - index * TILE_SIZE_IN_PIXELS, - MAP_SIZE_IN_PIXELS, - index * TILE_SIZE_IN_PIXELS -]); + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, + index * TILE_SIZE_IN_PIXELS, +]) const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ - index * TILE_SIZE_IN_PIXELS, - 0, - index * TILE_SIZE_IN_PIXELS, - MAP_SIZE_IN_PIXELS -]); + index * TILE_SIZE_IN_PIXELS, + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, +]) const GridGroup = () => ( - - {HORIZONTAL_POINT_PAIRS.concat( - VERTICAL_POINT_PAIRS - ).map((points, index) => ( - - ))} - -); + + {HORIZONTAL_POINT_PAIRS.concat( + VERTICAL_POINT_PAIRS, + ).map((points, index) => ( + + ))} + +) -export default GridGroup; +export default GridGroup diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 69d6ac10..708dcf69 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -1,43 +1,43 @@ -import React from "react"; -import { Group } from "react-konva"; -import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer"; -import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer"; -import Shapes from "../../../../shapes/index"; -import { RACK_BACKGROUND_COLOR } from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import TileObject from "../elements/TileObject"; +import React from 'react' +import { Group } from 'react-konva' +import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer' +import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer' +import Shapes from '../../../../shapes/index' +import { RACK_BACKGROUND_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import TileObject from '../elements/TileObject' const RackGroup = ({ tile, inSimulation, rackLoad }) => { - let color = RACK_BACKGROUND_COLOR; - if (inSimulation && rackLoad >= 0) { - color = convertLoadToSimulationColor(rackLoad); - } + let color = RACK_BACKGROUND_COLOR + if (inSimulation && rackLoad >= 0) { + color = convertLoadToSimulationColor(rackLoad) + } - return ( - - - - - - - - ); -}; + return ( + + + + + + + + ) +} RackGroup.propTypes = { - tile: Shapes.Tile -}; + tile: Shapes.Tile, +} -export default RackGroup; +export default RackGroup diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js index c8f0d3db..230e3c9b 100644 --- a/frontend/src/components/app/map/groups/RoomGroup.js +++ b/frontend/src/components/app/map/groups/RoomGroup.js @@ -1,56 +1,56 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import TileContainer from "../../../../containers/app/map/TileContainer"; -import WallContainer from "../../../../containers/app/map/WallContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import TileContainer from '../../../../containers/app/map/TileContainer' +import WallContainer from '../../../../containers/app/map/WallContainer' +import Shapes from '../../../../shapes/index' const RoomGroup = ({ - room, - interactionLevel, - currentRoomInConstruction, - onClick -}) => { - if (currentRoomInConstruction === room.id) { - return ( - - {room.tileIds.map(tileId => ( - - ))} - - ); - } + room, + interactionLevel, + currentRoomInConstruction, + onClick, + }) => { + if (currentRoomInConstruction === room.id) { + return ( + + {room.tileIds.map(tileId => ( + + ))} + + ) + } - return ( - - {(() => { - if ( - (interactionLevel.mode === "RACK" || - interactionLevel.mode === "MACHINE") && - interactionLevel.roomId === room.id - ) { - return [ - room.tileIds - .filter(tileId => tileId !== interactionLevel.tileId) - .map(tileId => ), - , - room.tileIds - .filter(tileId => tileId === interactionLevel.tileId) - .map(tileId => ) - ]; - } else { - return room.tileIds.map(tileId => ( - - )); - } - })()} - - - ); -}; + return ( + + {(() => { + if ( + (interactionLevel.mode === 'RACK' || + interactionLevel.mode === 'MACHINE') && + interactionLevel.roomId === room.id + ) { + return [ + room.tileIds + .filter(tileId => tileId !== interactionLevel.tileId) + .map(tileId => ), + , + room.tileIds + .filter(tileId => tileId === interactionLevel.tileId) + .map(tileId => ), + ] + } else { + return room.tileIds.map(tileId => ( + + )) + } + })()} + + + ) +} RoomGroup.propTypes = { - room: Shapes.Room -}; + room: Shapes.Room, +} -export default RoomGroup; +export default RoomGroup diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index 8f3953d7..49e2e52b 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -1,43 +1,40 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group } from "react-konva"; -import RackContainer from "../../../../containers/app/map/RackContainer"; -import Shapes from "../../../../shapes/index"; -import { - ROOM_DEFAULT_COLOR, - ROOM_IN_CONSTRUCTION_COLOR -} from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import RoomTile from "../elements/RoomTile"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import RackContainer from '../../../../containers/app/map/RackContainer' +import Shapes from '../../../../shapes/index' +import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { - let tileObject; - switch (tile.objectType) { - case "RACK": - tileObject = ; - break; - default: - tileObject = null; - } + let tileObject + switch (tile.objectType) { + case 'RACK': + tileObject = + break + default: + tileObject = null + } - let color = ROOM_DEFAULT_COLOR; - if (newTile) { - color = ROOM_IN_CONSTRUCTION_COLOR; - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad); - } + let color = ROOM_DEFAULT_COLOR + if (newTile) { + color = ROOM_IN_CONSTRUCTION_COLOR + } else if (inSimulation && roomLoad >= 0) { + color = convertLoadToSimulationColor(roomLoad) + } - return ( - onClick(tile)}> - - {tileObject} - - ); -}; + return ( + onClick(tile)}> + + {tileObject} + + ) +} TileGroup.propTypes = { - tile: Shapes.Tile, - newTile: PropTypes.bool -}; + tile: Shapes.Tile, + newTile: PropTypes.bool, +} -export default TileGroup; +export default TileGroup diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js index 43de66e8..81c72d94 100644 --- a/frontend/src/components/app/map/groups/WallGroup.js +++ b/frontend/src/components/app/map/groups/WallGroup.js @@ -1,22 +1,22 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { deriveWallLocations } from "../../../../util/tile-calculations"; -import WallSegment from "../elements/WallSegment"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { deriveWallLocations } from '../../../../util/tile-calculations' +import WallSegment from '../elements/WallSegment' const WallGroup = ({ tiles }) => { - return ( - - {deriveWallLocations(tiles).map((wallSegment, index) => ( - - ))} - - ); -}; + return ( + + {deriveWallLocations(tiles).map((wallSegment, index) => ( + + ))} + + ) +} WallGroup.propTypes = { - tiles: PropTypes.arrayOf(Shapes.Tile).isRequired -}; + tiles: PropTypes.arrayOf(Shapes.Tile).isRequired, +} -export default WallGroup; +export default WallGroup -- cgit v1.2.3