refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.

9 files changed, 0 insertions, 285 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
deleted file mode 100644
index 8ccfe584..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/Backdrop.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { Rect } from 'react-konva'
-import { BACKDROP_COLOR } from '../../../../util/colors'
-import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
-
-const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
-
-export default Backdrop
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
deleted file mode 100644
index 35af4d96..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/GrayLayer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors'
-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}
-    />
-)
-
-GrayLayer.propTypes = {
-    onClick: PropTypes.func,
-}
-
-export default GrayLayer
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
deleted file mode 100644
index 0369bb79..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/HoverTile.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-const HoverTile = ({ x, y, isValid, scale = 1, onClick }) => (
-    <Rect
-        x={x}
-        y={y}
-        scaleX={scale}
-        scaleY={scale}
-        width={TILE_SIZE_IN_PIXELS}
-        height={TILE_SIZE_IN_PIXELS}
-        fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
-        onClick={onClick}
-    />
-)
-
-HoverTile.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    isValid: PropTypes.bool.isRequired,
-    scale: PropTypes.number,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default HoverTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
deleted file mode 100644
index 7d304b6b..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/ImageComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
-import { Image } from 'react-konva'
-
-const imageCaches = {}
-
-function ImageComponent({ src, x, y, width, height, opacity }) {
-    const [image, setImage] = useState(null)
-
-    useEffect(() => {
-        if (imageCaches[src]) {
-            setImage(imageCaches[src])
-            return
-        }
-
-        const image = new window.Image()
-        image.src = src
-        image.onload = () => {
-            setImage(image)
-            imageCaches[src] = image
-        }
-    }, [src])
-
-    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
-}
-
-ImageComponent.propTypes = {
-    src: PropTypes.string.isRequired,
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    opacity: PropTypes.number.isRequired,
-}
-
-export default ImageComponent
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
deleted file mode 100644
index aa284944..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RackFillBar.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group, Rect } from 'react-konva'
-import {
-    RACK_ENERGY_BAR_BACKGROUND_COLOR,
-    RACK_ENERGY_BAR_FILL_COLOR,
-    RACK_SPACE_BAR_BACKGROUND_COLOR,
-    RACK_SPACE_BAR_FILL_COLOR,
-} from '../../../../util/colors'
-import {
-    OBJECT_BORDER_WIDTH_IN_PIXELS,
-    OBJECT_MARGIN_IN_PIXELS,
-    RACK_FILL_ICON_OPACITY,
-    RACK_FILL_ICON_WIDTH,
-    TILE_SIZE_IN_PIXELS,
-} from '../MapConstants'
-import ImageComponent from './ImageComponent'
-
-function RackFillBar({ positionX, positionY, type, fillFraction }) {
-    const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2
-    const x =
-        positionX * TILE_SIZE_IN_PIXELS +
-        OBJECT_MARGIN_IN_PIXELS +
-        (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
-    const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
-    const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
-    const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
-
-    const fractionHeight = fillFraction * fullHeight
-    const fractionY =
-        (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
-
-    return (
-        <Group>
-            <Rect
-                x={x}
-                y={startY}
-                width={width}
-                height={fullHeight}
-                fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
-            />
-            <Rect
-                x={x}
-                y={fractionY}
-                width={width}
-                height={fractionHeight}
-                fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
-            />
-            <ImageComponent
-                src={'/img/topology/rack-' + type + '-icon.png'}
-                x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-                y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
-                width={RACK_FILL_ICON_WIDTH}
-                height={RACK_FILL_ICON_WIDTH}
-                opacity={RACK_FILL_ICON_OPACITY}
-            />
-        </Group>
-    )
-}
-
-RackFillBar.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    type: PropTypes.string.isRequired,
-    fillFraction: PropTypes.number.isRequired,
-}
-
-export default RackFillBar
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
deleted file mode 100644
index ed718601..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/RoomTile.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { Tile } from '../../../../shapes'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-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={color}
-    />
-)
-
-RoomTile.propTypes = {
-    tile: Tile,
-    color: PropTypes.string,
-}
-
-export default RoomTile
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
deleted file mode 100644
index 9e87cc82..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TileObject.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Rect } from 'react-konva'
-import { OBJECT_BORDER_COLOR } from '../../../../util/colors'
-import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-const TileObject = ({ positionX, positionY, color }) => (
-    <Rect
-        x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
-        width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
-        fill={color}
-        stroke={OBJECT_BORDER_COLOR}
-        strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
-    />
-)
-
-TileObject.propTypes = {
-    positionX: PropTypes.number.isRequired,
-    positionY: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
-}
-
-export default TileObject
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
deleted file mode 100644
index 186c2b3a..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/TilePlusIcon.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Group, Line } from 'react-konva'
-import { TILE_PLUS_COLOR } from '../../../../util/colors'
-import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-
-function TilePlusIcon({ x, y, scale = 1 }) {
-    const linePoints = [
-        [
-            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            y + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            x + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            y + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-        ],
-        [
-            x + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            x + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            y + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-        ],
-    ]
-    return (
-        <Group>
-            {linePoints.map((points, index) => (
-                <Line
-                    key={index}
-                    points={points}
-                    lineCap="round"
-                    stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
-                    listening={false}
-                />
-            ))}
-        </Group>
-    )
-}
-
-TilePlusIcon.propTypes = {
-    x: PropTypes.number,
-    y: PropTypes.number,
-    scale: PropTypes.number,
-}
-
-export default TilePlusIcon
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js b/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
deleted file mode 100644
index ad6412c3..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/elements/WallSegment.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { Line } from 'react-konva'
-import { WallSegment as WallSegmentShape } from '../../../../shapes'
-import { WALL_COLOR } from '../../../../util/colors'
-import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants'
-
-const WallSegment = ({ wallSegment }) => {
-    let points
-    if (wallSegment.isHorizontal) {
-        points = [
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-            (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-        ]
-    } else {
-        points = [
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
-            wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
-            (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
-        ]
-    }
-
-    return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
-}
-
-WallSegment.propTypes = {
-    wallSegment: WallSegmentShape,
-}
-
-export default WallSegment