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,13 +23,39 @@ import './App.css'
 import Map from './Map.js';
 import Rooms from './Rooms.js';
 
-function RoomResearch({callbackRoomSelected}) {
+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' }}>
       <Typography component="h2" variant="h5" gutterBottom>
         Rechercher une salle
       </Typography>
-      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth/>
+      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth />
       <Box
         marginTop={1}
         display="flex"
@@ -35,7 +64,7 @@ function RoomResearch({callbackRoomSelected}) {
       >
         <Button variant="contained">Rechercher</Button>
       </Box>
-      <Rooms callbackRoomSelected={callbackRoomSelected}/>
+      <Rooms callbackRoomSelected={callbackRoomSelected} />
     </div>
   </>
 }
@@ -86,13 +115,18 @@ 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}/>
-      <RoomResearch callbackRoomSelected={setSelectedRoom}/>
+      <div>
+        <ChangeFloor currentFloor={currentFloor} callbackFloorChanged={setCurrentFloor} />
+        <Divider />
+        <RoomResearch callbackRoomSelected={setSelectedRoom} />
+      </div>
     </div>
   </>
 }
@@ -107,7 +141,7 @@ function ThemedApp() {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-      <App/>
+      <App />
     </ThemeProvider>
   );
 }