Convert map movement to keyboard-based navigation

4 files changed, 38 insertions, 8 deletions

diff --git a/src/components/sidebars/topology/NameComponent.js b/src/components/sidebars/topology/NameComponent.js
new file mode 100644
index 00000000..d663f4ae
--- /dev/null
+++ b/src/components/sidebars/topology/NameComponent.js
@@ -0,0 +1,13 @@
+import React from "react";
+import FontAwesome from "react-fontawesome";
+
+const NameComponent = ({name, onEdit}) => (
+    <h2>
+        {name}
+        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
+            <FontAwesome name="pencil"/>
+        </button>
+    </h2>
+);
+
+export default NameComponent;
diff --git a/src/components/sidebars/topology/room/RoomNameComponent.js b/src/components/sidebars/topology/room/RoomNameComponent.js
index 4a8de76d..4d3e41cc 100644
--- a/src/components/sidebars/topology/room/RoomNameComponent.js
+++ b/src/components/sidebars/topology/room/RoomNameComponent.js
@@ -1,13 +1,8 @@
 import React from "react";
-import FontAwesome from "react-fontawesome";
+import NameComponent from "../NameComponent";
 
 const RoomNameComponent = ({roomName, onEdit}) => (
-    <h2>
-        {roomName}
-        <button className="btn btn-outline-secondary float-right" onClick={onEdit}>
-            <FontAwesome name="pencil"/>
-        </button>
-    </h2>
+    <NameComponent name={roomName} onEdit={onEdit}/>
 );
 
 export default RoomNameComponent;
diff --git a/src/components/sidebars/topology/room/RoomSidebarComponent.js b/src/components/sidebars/topology/room/RoomSidebarComponent.js
index 5ee9821a..dc01a301 100644
--- a/src/components/sidebars/topology/room/RoomSidebarComponent.js
+++ b/src/components/sidebars/topology/room/RoomSidebarComponent.js
@@ -1,8 +1,20 @@
 import React from "react";
 import RoomNameContainer from "../../../../containers/sidebars/topology/room/RoomNameContainer";
+import RoomTypeContainer from "../../../../containers/sidebars/topology/room/RoomTypeContainer";
 
 const RoomSidebarComponent = ({roomType}) => {
-    return <RoomNameContainer/>
+    let allowedObjects;
+    if (roomType === "SERVER") {
+        allowedObjects = "test";
+    }
+
+    return (
+        <div>
+            <RoomNameContainer/>
+            <RoomTypeContainer/>
+            {allowedObjects}
+        </div>
+    );
 };
 
 export default RoomSidebarComponent;
diff --git a/src/components/sidebars/topology/room/RoomTypeComponent.js b/src/components/sidebars/topology/room/RoomTypeComponent.js
new file mode 100644
index 00000000..c48c185a
--- /dev/null
+++ b/src/components/sidebars/topology/room/RoomTypeComponent.js
@@ -0,0 +1,10 @@
+import React from "react";
+import {ROOM_TYPE_TO_NAME_MAP} from "../../../../util/room-types";
+
+const RoomTypeComponent = ({roomType}) => (
+    <p className="lead">
+        {ROOM_TYPE_TO_NAME_MAP[roomType]}
+    </p>
+);
+
+export default RoomTypeComponent;