Merge pull request #55 from atlarge-research/feature/24/room-edit

Implement room editing

13 files changed, 105 insertions, 18 deletions

diff --git a/src/actions/topology/building.js b/src/actions/topology/building.js
index 5aef2932..c6381a07 100644
--- a/src/actions/topology/building.js
+++ b/src/actions/topology/building.js
@@ -7,6 +7,8 @@ export const FINISH_NEW_ROOM_CONSTRUCTION = "FINISH_NEW_ROOM_CONSTRUCTION";
 export const CANCEL_NEW_ROOM_CONSTRUCTION = "CANCEL_NEW_ROOM_CONSTRUCTION";
 export const CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED =
   "CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED";
+export const START_ROOM_EDIT = "START_ROOM_EDIT";
+export const FINISH_ROOM_EDIT = "FINISH_ROOM_EDIT";
 export const ADD_TILE = "ADD_TILE";
 export const DELETE_TILE = "DELETE_TILE";
 
@@ -64,6 +66,22 @@ export function cancelNewRoomConstructionSucceeded() {
   };
 }
 
+export function startRoomEdit() {
+  return (dispatch, getState) => {
+    const { interactionLevel } = getState();
+    dispatch({
+      type: START_ROOM_EDIT,
+      roomId: interactionLevel.roomId
+    });
+  };
+}
+
+export function finishRoomEdit() {
+  return {
+    type: FINISH_ROOM_EDIT
+  };
+}
+
 export function toggleTileAtLocation(positionX, positionY) {
   return (dispatch, getState) => {
     const { objects, construction } = getState();
diff --git a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
index a559c8dd..7b049642 100644
--- a/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
+++ b/src/components/app/sidebars/topology/building/NewRoomConstructionComponent.js
@@ -8,7 +8,7 @@ const NewRoomConstructionComponent = ({
 }) => {
   if (currentRoomInConstruction === -1) {
     return (
-      <div className="btn btn-primary btn-block" onClick={onStart}>
+      <div className="btn btn-outline-primary btn-block" onClick={onStart}>
         <span className="fa fa-plus mr-2" />
         Construct a new room
       </div>
diff --git a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
index 8da39b30..d8774bf9 100644
--- a/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
+++ b/src/components/app/sidebars/topology/machine/DeleteMachineComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const DeleteMachineComponent = ({ 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 machine
   </div>
diff --git a/src/components/app/sidebars/topology/machine/UnitAddComponent.js b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
index d0082a72..584a4360 100644
--- a/src/components/app/sidebars/topology/machine/UnitAddComponent.js
+++ b/src/components/app/sidebars/topology/machine/UnitAddComponent.js
@@ -29,7 +29,7 @@ class UnitAddComponent extends React.Component {
           </select>
           <button
             type="submit"
-            className="btn btn-primary"
+            className="btn btn-outline-primary"
             onClick={() =>
               this.props.onAdd(parseInt(this.unitSelect.value, 10))}
           >
diff --git a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
index f0bad0ed..d8aa7634 100644
--- a/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
+++ b/src/components/app/sidebars/topology/rack/DeleteRackComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 const DeleteRackComponent = ({ 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 rack
   </div>
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>
       )}
diff --git a/src/containers/app/map/layers/RoomHoverLayer.js b/src/containers/app/map/layers/RoomHoverLayer.js
index 910d47fb..020102bf 100644
--- a/src/containers/app/map/layers/RoomHoverLayer.js
+++ b/src/containers/app/map/layers/RoomHoverLayer.js
@@ -13,10 +13,6 @@ const mapStateToProps = state => {
     mapScale: state.map.scale,
     isEnabled: () => state.construction.currentRoomInConstruction !== -1,
     isValid: (x, y) => {
-      if (state.interactionLevel.mode !== "BUILDING") {
-        return false;
-      }
-
       const newRoom = Object.assign(
         {},
         state.objects.room[state.construction.currentRoomInConstruction]
diff --git a/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/src/containers/app/sidebars/topology/room/EditRoomContainer.js
new file mode 100644
index 00000000..81052f54
--- /dev/null
+++ b/src/containers/app/sidebars/topology/room/EditRoomContainer.js
@@ -0,0 +1,26 @@
+import { connect } from "react-redux";
+import {
+  finishRoomEdit,
+  startRoomEdit
+} from "../../../../../actions/topology/building";
+import EditRoomComponent from "../../../../../components/app/sidebars/topology/room/EditRoomComponent";
+
+const mapStateToProps = state => {
+  return {
+    isEditing: state.construction.currentRoomInConstruction !== -1,
+    isInRackConstructionMode: state.construction.inRackConstructionMode
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onEdit: () => dispatch(startRoomEdit()),
+    onFinish: () => dispatch(finishRoomEdit())
+  };
+};
+
+const EditRoomContainer = connect(mapStateToProps, mapDispatchToProps)(
+  EditRoomComponent
+);
+
+export default EditRoomContainer;
diff --git a/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
index 0fc22b09..c784d3ae 100644
--- a/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
+++ b/src/containers/app/sidebars/topology/room/RackConstructionContainer.js
@@ -7,7 +7,8 @@ import RackConstructionComponent from "../../../../../components/app/sidebars/to
 
 const mapStateToProps = state => {
   return {
-    inRackConstructionMode: state.construction.inRackConstructionMode
+    inRackConstructionMode: state.construction.inRackConstructionMode,
+    isEditingRoom: state.construction.currentRoomInConstruction !== -1
   };
 };
 
diff --git a/src/reducers/construction-mode.js b/src/reducers/construction-mode.js
index c4c0c010..b5e6e781 100644
--- a/src/reducers/construction-mode.js
+++ b/src/reducers/construction-mode.js
@@ -1,20 +1,30 @@
-import {combineReducers} from "redux";
-import {OPEN_EXPERIMENT_SUCCEEDED} from "../actions/experiments";
-import {GO_DOWN_ONE_INTERACTION_LEVEL} from "../actions/interaction-level";
+import { combineReducers } from "redux";
+import { OPEN_EXPERIMENT_SUCCEEDED } from "../actions/experiments";
+import { GO_DOWN_ONE_INTERACTION_LEVEL } from "../actions/interaction-level";
 import {
   CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED,
   FINISH_NEW_ROOM_CONSTRUCTION,
-  START_NEW_ROOM_CONSTRUCTION_SUCCEEDED
+  FINISH_ROOM_EDIT,
+  START_NEW_ROOM_CONSTRUCTION_SUCCEEDED,
+  START_ROOM_EDIT
 } from "../actions/topology/building";
-import {START_RACK_CONSTRUCTION, STOP_RACK_CONSTRUCTION} from "../actions/topology/room";
+import {
+  DELETE_ROOM,
+  START_RACK_CONSTRUCTION,
+  STOP_RACK_CONSTRUCTION
+} from "../actions/topology/room";
 
 export function currentRoomInConstruction(state = -1, action) {
   switch (action.type) {
     case START_NEW_ROOM_CONSTRUCTION_SUCCEEDED:
       return action.roomId;
+    case START_ROOM_EDIT:
+      return action.roomId;
     case CANCEL_NEW_ROOM_CONSTRUCTION_SUCCEEDED:
     case FINISH_NEW_ROOM_CONSTRUCTION:
     case OPEN_EXPERIMENT_SUCCEEDED:
+    case FINISH_ROOM_EDIT:
+    case DELETE_ROOM:
       return -1;
     default:
       return state;