Merge

src/App.js

@@ -9,6 +9,9 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import TextField from '@mui/material/TextField';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -20,6 +23,32 @@ import './App.css'
 import Map from './Map.js';
 import Rooms from './Rooms.js';
 
+function ChangeFloor({ currentFloor, callbackFloorChanged }) {
+  const handleFloorChanged = (event) => {
+    callbackFloorChanged(event.target.value);
+  };
+
+  return <>
+    <div style={{ padding: '24px' }}>
+      <Typography component="h2" variant="h5" gutterBottom>
+        Changer d'étage
+      </Typography>
+
+      <Select
+        id="demo-simple-select"
+        value={currentFloor}
+        label="Étage"
+        onChange={handleFloorChanged}
+        fullWidth
+      >
+        <MenuItem value={1}>Monod - Premier étage</MenuItem>
+        <MenuItem value={2}>Monod - Troisième étage</MenuItem>
+        <MenuItem value={3}>Monod - Quatrième étage</MenuItem>
+      </Select>
+    </div>
+  </>
+}
+
 function RoomResearch({ callbackRoomSelected }) {
   return <>
     <div style={{ padding: '24px' }}>
@@ -86,14 +115,19 @@ function TopBar() {
 
 
 export default function App() {
+  const [currentFloor, setCurrentFloor] = React.useState(1);
   const [selectedRoom, setSelectedRoom] = React.useState(null);
 
   return <>
     <TopBar />
     <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
       <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom} floorID={69}/>
+      <div>
+        <ChangeFloor currentFloor={currentFloor} callbackFloorChanged={setCurrentFloor} />
+        <Divider />
         <RoomResearch callbackRoomSelected={setSelectedRoom} />
       </div>
+    </div>
   </>
 }