From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../src/components/app/map/groups/GridGroup.js     | 34 --------------
 .../src/components/app/map/groups/RackGroup.js     | 25 -----------
 .../src/components/app/map/groups/RoomGroup.js     | 52 ----------------------
 .../src/components/app/map/groups/TileGroup.js     | 36 ---------------
 .../src/components/app/map/groups/TopologyGroup.js | 44 ------------------
 .../src/components/app/map/groups/WallGroup.js     | 22 ---------
 6 files changed, 213 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js

(limited to 'opendc-web/opendc-web-ui/src/components/app/map/groups')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
deleted file mode 100644
index ebc00244..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/GridGroup.js
+++ /dev/null
@@ -1,34 +0,0 @@
-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 HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
-    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,
-])
-
-const GridGroup = () => (
-    <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
-            <Line
-                key={index}
-                points={points}
-                stroke={GRID_COLOR}
-                strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
-                listening={false}
-            />
-        ))}
-    </Group>
-)
-
-export default GridGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
deleted file mode 100644
index 9c4abc4a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RackGroup.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { RACK_BACKGROUND_COLOR } from '../../../../util/colors'
-import TileObject from '../elements/TileObject'
-import RackSpaceFillContainer from '../RackSpaceFillContainer'
-import RackEnergyFillContainer from '../RackEnergyFillContainer'
-
-const RackGroup = ({ tile }) => {
-    return (
-        <Group>
-            <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
-            <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: Tile,
-}
-
-export default RackGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
deleted file mode 100644
index a14f3676..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group } from 'react-konva'
-import { InteractionLevel, Room } from '../../../../shapes'
-import GrayContainer from '../GrayContainer'
-import TileContainer from '../TileContainer'
-import WallContainer from '../WallContainer'
-
-const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
-    if (currentRoomInConstruction === room._id) {
-        return (
-            <Group onClick={onClick}>
-                {room.tiles.map((tileId) => (
-                    <TileContainer key={tileId} tileId={tileId} newTile={true} />
-                ))}
-            </Group>
-        )
-    }
-
-    return (
-        <Group onClick={onClick}>
-            {(() => {
-                if (
-                    (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
-                    interactionLevel.roomId === room._id
-                ) {
-                    return [
-                        room.tiles
-                            .filter((tileId) => tileId !== interactionLevel.tileId)
-                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
-                        <GrayContainer key={-1} />,
-                        room.tiles
-                            .filter((tileId) => tileId === interactionLevel.tileId)
-                            .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
-                    ]
-                } else {
-                    return room.tiles.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
-                }
-            })()}
-            <WallContainer roomId={room._id} />
-        </Group>
-    )
-}
-
-RoomGroup.propTypes = {
-    room: Room,
-    interactionLevel: InteractionLevel,
-    currentRoomInConstruction: PropTypes.string,
-    onClick: PropTypes.func,
-}
-
-export default RoomGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
deleted file mode 100644
index cd36c7e5..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors'
-import RoomTile from '../elements/RoomTile'
-import RackContainer from '../RackContainer'
-
-const TileGroup = ({ tile, newTile, onClick }) => {
-    let tileObject
-    if (tile.rack) {
-        tileObject = <RackContainer tile={tile} />
-    } else {
-        tileObject = null
-    }
-
-    let color = ROOM_DEFAULT_COLOR
-    if (newTile) {
-        color = ROOM_IN_CONSTRUCTION_COLOR
-    }
-
-    return (
-        <Group onClick={() => onClick(tile)}>
-            <RoomTile tile={tile} color={color} />
-            {tileObject}
-        </Group>
-    )
-}
-
-TileGroup.propTypes = {
-    tile: Tile,
-    newTile: PropTypes.bool,
-    onClick: PropTypes.func,
-}
-
-export default TileGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
deleted file mode 100644
index d3bcb279..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { Group } from 'react-konva'
-import { InteractionLevel, Topology } from '../../../../shapes'
-import RoomContainer from '../RoomContainer'
-import GrayContainer from '../GrayContainer'
-
-const TopologyGroup = ({ topology, interactionLevel }) => {
-    if (!topology) {
-        return <Group />
-    }
-
-    if (interactionLevel.mode === 'BUILDING') {
-        return (
-            <Group>
-                {topology.rooms.map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-            </Group>
-        )
-    }
-
-    return (
-        <Group>
-            {topology.rooms
-                .filter((roomId) => roomId !== interactionLevel.roomId)
-                .map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-            {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
-            {topology.rooms
-                .filter((roomId) => roomId === interactionLevel.roomId)
-                .map((roomId) => (
-                    <RoomContainer key={roomId} roomId={roomId} />
-                ))}
-        </Group>
-    )
-}
-
-TopologyGroup.propTypes = {
-    topology: Topology,
-    interactionLevel: InteractionLevel,
-}
-
-export default TopologyGroup
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
deleted file mode 100644
index c73a95a7..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/groups/WallGroup.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { deriveWallLocations } from '../../../../util/tile-calculations'
-import WallSegment from '../elements/WallSegment'
-
-const WallGroup = ({ tiles }) => {
-    return (
-        <Group>
-            {deriveWallLocations(tiles).map((wallSegment, index) => (
-                <WallSegment key={index} wallSegment={wallSegment} />
-            ))}
-        </Group>
-    )
-}
-
-WallGroup.propTypes = {
-    tiles: PropTypes.arrayOf(Tile).isRequired,
-}
-
-export default WallGroup
-- 
cgit v1.2.3