Display rack space and energy fill on overlay

1 files changed, 67 insertions, 0 deletions

diff --git a/src/components/map/elements/RackFillBar.js b/src/components/map/elements/RackFillBar.js
new file mode 100644
index 00000000..7b1351a5
--- /dev/null
+++ b/src/components/map/elements/RackFillBar.js
@@ -0,0 +1,67 @@
+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 "../../../colors/index";
+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";
+
+const 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;