Implement room editing

Allows for rooms to be edited from the room context menu.

Fixes #24

4 files changed, 40 insertions, 4 deletions

diff --git a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
index 5df484b5..3e3b3b36 100644
--- a/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
+++ b/src/components/app/sidebars/topology/room/DeleteRoomComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const DeleteRoomComponent = ({ onClick }) => (
-  <div className="btn btn-danger btn-block" onClick={onClick}>
+  <div className="btn btn-outline-danger btn-block" onClick={onClick}>
     <span className="fa fa-trash mr-2" />
     Delete this room
   </div>
diff --git a/src/components/app/sidebars/topology/room/EditRoomComponent.js b/src/components/app/sidebars/topology/room/EditRoomComponent.js
new file mode 100644
index 00000000..c3b9f0ad
--- /dev/null
+++ b/src/components/app/sidebars/topology/room/EditRoomComponent.js
@@ -0,0 +1,27 @@
+import classNames from "classnames";
+import React from "react";
+
+const EditRoomComponent = ({
+  onEdit,
+  onFinish,
+  isEditing,
+  isInRackConstructionMode
+}) =>
+  isEditing ? (
+    <div className="btn btn-info btn-block" onClick={onFinish}>
+      <span className="fa fa-check mr-2" />
+      Finish editing room
+    </div>
+  ) : (
+    <div
+      className={classNames("btn btn-outline-info btn-block", {
+        disabled: isInRackConstructionMode
+      })}
+      onClick={() => (isInRackConstructionMode ? undefined : onEdit())}
+    >
+      <span className="fa fa-pencil mr-2" />
+      Edit the tiles of this room
+    </div>
+  );
+
+export default EditRoomComponent;
diff --git a/src/components/app/sidebars/topology/room/RackConstructionComponent.js b/src/components/app/sidebars/topology/room/RackConstructionComponent.js
index 0982e403..06b8a2aa 100644
--- a/src/components/app/sidebars/topology/room/RackConstructionComponent.js
+++ b/src/components/app/sidebars/topology/room/RackConstructionComponent.js
@@ -1,9 +1,11 @@
+import classNames from "classnames";
 import React from "react";
 
 const RackConstructionComponent = ({
-  inRackConstructionMode,
   onStart,
-  onStop
+  onStop,
+  inRackConstructionMode,
+  isEditingRoom
 }) => {
   if (inRackConstructionMode) {
     return (
@@ -15,7 +17,12 @@ const RackConstructionComponent = ({
   }
 
   return (
-    <div className="btn btn-primary btn-block" onClick={onStart}>
+    <div
+      className={classNames("btn btn-outline-primary btn-block", {
+        disabled: isEditingRoom
+      })}
+      onClick={() => (isEditingRoom ? undefined : onStart())}
+    >
       <span className="fa fa-plus mr-2" />
       Start rack construction
     </div>
diff --git a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
index 727c3f43..275f9624 100644
--- a/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
+++ b/src/components/app/sidebars/topology/room/RoomSidebarComponent.js
@@ -3,6 +3,7 @@ import LoadBarContainer from "../../../../../containers/app/sidebars/elements/Lo
 import LoadChartContainer from "../../../../../containers/app/sidebars/elements/LoadChartContainer";
 import BackToBuildingContainer from "../../../../../containers/app/sidebars/topology/room/BackToBuildingContainer";
 import DeleteRoomContainer from "../../../../../containers/app/sidebars/topology/room/DeleteRoomContainer";
+import EditRoomContainer from "../../../../../containers/app/sidebars/topology/room/EditRoomContainer";
 import RackConstructionContainer from "../../../../../containers/app/sidebars/topology/room/RackConstructionContainer";
 import RoomNameContainer from "../../../../../containers/app/sidebars/topology/room/RoomNameContainer";
 import RoomTypeContainer from "../../../../../containers/app/sidebars/topology/room/RoomTypeContainer";
@@ -26,6 +27,7 @@ const RoomSidebarComponent = ({ roomId, roomType, inSimulation }) => {
       ) : (
         <div>
           {allowedObjects}
+          <EditRoomContainer />
           <DeleteRoomContainer />
         </div>
       )}