summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/map/MapStage.js11
-rw-r--r--src/components/map/elements/TilePlusIcon.js29
-rw-r--r--src/components/map/layers/HoverLayerComponent.js (renamed from src/components/map/layers/HoverTileLayerComponent.js)16
-rw-r--r--src/components/map/layers/ObjectHoverLayerComponent.js11
-rw-r--r--src/components/map/layers/RoomHoverLayerComponent.js8
-rw-r--r--src/components/sidebars/topology/room/RackConstructionComponent.js19
-rw-r--r--src/components/sidebars/topology/room/RoomSidebarComponent.js3
7 files changed, 74 insertions, 23 deletions
diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index f3f38917..c4579965 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -2,7 +2,8 @@ import React from "react";
import {Group, Layer, Stage} from "react-konva";
import {Shortcuts} from "react-shortcuts";
import DatacenterContainer from "../../containers/map/DatacenterContainer";
-import HoverTileLayer from "../../containers/map/layers/HoverTileLayer";
+import ObjectHoverLayer from "../../containers/map/layers/ObjectHoverLayer";
+import RoomHoverLayer from "../../containers/map/layers/RoomHoverLayer";
import jQuery from "../../util/jquery";
import {NAVBAR_HEIGHT} from "../navigation/Navbar";
import Backdrop from "./elements/Backdrop";
@@ -90,7 +91,13 @@ class MapStage extends React.Component {
<GridGroup/>
</Group>
</Layer>
- <HoverTileLayer
+ <RoomHoverLayer
+ mainGroupX={this.state.x}
+ mainGroupY={this.state.y}
+ mouseX={this.state.mouseX}
+ mouseY={this.state.mouseY}
+ />
+ <ObjectHoverLayer
mainGroupX={this.state.x}
mainGroupY={this.state.y}
mouseX={this.state.mouseX}
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 3cc3178c..562d7d15 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -1,32 +1,34 @@
+import PropTypes from "prop-types";
import React from "react";
import {Group, Line} from "react-konva";
import {TILE_PLUS_COLOR} from "../../../colors/index";
-import Shapes from "../../../shapes/index";
-import {TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import {OBJECT_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
-const TilePlusIcon = ({positionX, positionY}) => {
+const TilePlusIcon = ({pixelX, pixelY}) => {
const linePoints = [
[
- (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
- positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
- (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
- (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+ pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
+ pixelY + OBJECT_MARGIN_IN_PIXELS,
+ pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
+ pixelY + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
],
[
- positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
- (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
- (positionX + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
- (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
+ pixelX + OBJECT_MARGIN_IN_PIXELS,
+ pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
+ pixelX + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+ pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
],
];
return (
<Group>
- {linePoints.map(points => (
+ {linePoints.map((points, index) => (
<Line
+ key={index}
points={points}
lineCap="round"
stroke={TILE_PLUS_COLOR}
strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS}
+ listening={false}
/>
))}
</Group>
@@ -34,7 +36,8 @@ const TilePlusIcon = ({positionX, positionY}) => {
};
TilePlusIcon.propTypes = {
- wallSegment: Shapes.WallSegment,
+ pixelX: PropTypes.number,
+ pixelY: PropTypes.number,
};
export default TilePlusIcon;
diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js
index bd07596a..861d2b9a 100644
--- a/src/components/map/layers/HoverTileLayerComponent.js
+++ b/src/components/map/layers/HoverLayerComponent.js
@@ -4,14 +4,14 @@ import {Layer} from "react-konva";
import HoverTile from "../elements/HoverTile";
import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
-class HoverTileLayerComponent extends React.Component {
+class HoverLayerComponent extends React.Component {
static propTypes = {
mouseX: PropTypes.number.isRequired,
mouseY: PropTypes.number.isRequired,
mainGroupX: PropTypes.number.isRequired,
mainGroupY: PropTypes.number.isRequired,
+ isEnabled: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
- containsRack: PropTypes.bool,
};
state = {
@@ -21,7 +21,7 @@ class HoverTileLayerComponent extends React.Component {
};
componentDidUpdate() {
- if (this.props.currentRoomInConstruction === -1) {
+ if (!this.props.isEnabled()) {
return;
}
@@ -34,7 +34,7 @@ class HoverTileLayerComponent extends React.Component {
}
render() {
- if (this.props.currentRoomInConstruction === -1) {
+ if (!this.props.isEnabled()) {
return <Layer/>;
}
@@ -44,14 +44,16 @@ class HoverTileLayerComponent extends React.Component {
const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
return (
- <Layer opacity={0.4}>
+ <Layer opacity={0.6}>
<HoverTile
pixelX={pixelX} pixelY={pixelY}
- isValid={this.state.validity} onClick={() => this.props.onClick(positionX, positionY)}
+ isValid={this.state.validity}
+ onClick={() => this.state.validity ? this.props.onClick(positionX, positionY) : undefined}
/>
+ {this.props.children ? React.cloneElement(this.props.children, {pixelX, pixelY}) : undefined}
</Layer>
);
}
}
-export default HoverTileLayerComponent;
+export default HoverLayerComponent;
diff --git a/src/components/map/layers/ObjectHoverLayerComponent.js b/src/components/map/layers/ObjectHoverLayerComponent.js
new file mode 100644
index 00000000..91757cb3
--- /dev/null
+++ b/src/components/map/layers/ObjectHoverLayerComponent.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import TilePlusIcon from "../elements/TilePlusIcon";
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const ObjectHoverLayerComponent = (props) => (
+ <HoverLayerComponent {...props}>
+ <TilePlusIcon/>
+ </HoverLayerComponent>
+);
+
+export default ObjectHoverLayerComponent;
diff --git a/src/components/map/layers/RoomHoverLayerComponent.js b/src/components/map/layers/RoomHoverLayerComponent.js
new file mode 100644
index 00000000..2133c8d8
--- /dev/null
+++ b/src/components/map/layers/RoomHoverLayerComponent.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const RoomHoverLayerComponent = (props) => (
+ <HoverLayerComponent {...props}/>
+);
+
+export default RoomHoverLayerComponent;
diff --git a/src/components/sidebars/topology/room/RackConstructionComponent.js b/src/components/sidebars/topology/room/RackConstructionComponent.js
new file mode 100644
index 00000000..8298eade
--- /dev/null
+++ b/src/components/sidebars/topology/room/RackConstructionComponent.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+const RackConstructionComponent = ({inObjectConstructionMode, onStart, onStop}) => {
+ if (inObjectConstructionMode) {
+ return (
+ <div className="btn btn-primary btn-block" onClick={onStop}>
+ Stop rack construction
+ </div>
+ );
+ }
+
+ return (
+ <div className="btn btn-primary btn-block" onClick={onStart}>
+ Start rack construction
+ </div>
+ );
+};
+
+export default RackConstructionComponent;
diff --git a/src/components/sidebars/topology/room/RoomSidebarComponent.js b/src/components/sidebars/topology/room/RoomSidebarComponent.js
index dc01a301..4c1200c1 100644
--- a/src/components/sidebars/topology/room/RoomSidebarComponent.js
+++ b/src/components/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,11 +1,12 @@
import React from "react";
+import RackConstructionContainer from "../../../../containers/sidebars/topology/room/RackConstructionContainer";
import RoomNameContainer from "../../../../containers/sidebars/topology/room/RoomNameContainer";
import RoomTypeContainer from "../../../../containers/sidebars/topology/room/RoomTypeContainer";
const RoomSidebarComponent = ({roomType}) => {
let allowedObjects;
if (roomType === "SERVER") {
- allowedObjects = "test";
+ allowedObjects = <RackConstructionContainer/>;
}
return (
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 20:58:59 +0000