ajout de la gestion des changements d'etages depuis la carte via clique sur escalier/ascenseur (pas testé car bug api/bdd?)

src/App.js

@@ -121,7 +121,7 @@ export default function App() {
   return <>
     <TopBar />
     <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
-      <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom} floorID={69}/>
+      <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom} floorID={currentFloor} callbackChangeFloor={setCurrentFloor}/>
       <div>
         <ChangeFloor currentFloor={currentFloor} callbackFloorChanged={setCurrentFloor} />
         <Divider />

src/Map.js

@@ -140,7 +140,17 @@ function min_max(request)
   return [minX, maxX, minY, maxY];
 }
 
-function newPolygon(element, positions, selectedRoom, callback)
+function floorList(connectedFloors, callbackChangeFloor)
+{
+  let htmlFloorList = [];
+  for (const floor in connectedFloors)
+  {
+    htmlFloorList = [...htmlFloorList, <li onClick={() => {callbackChangeFloor(floor["id"]);}}> {floor["name"]} </li>];
+  }
+  return htmlFloorList;
+}
+
+function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor)
 {
   // Auxiliary function to return the appropriate polygon depending
   // on wether it is a room, a lift, a staircase or toilets
@@ -148,7 +158,7 @@ function newPolygon(element, positions, selectedRoom, callback)
   if (element["type"] === "S")
   {
     // In this case, the room is a staircase so we add a Stairs component
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
       <Tooltip>{element["id"]}</Tooltip>
       <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                   <li onClick={() => { console.log("escalier"); }}>
@@ -165,7 +175,7 @@ function newPolygon(element, positions, selectedRoom, callback)
   else if (element["type"] === "L")
   {
     // In this case the room is a lift so we add a Lift component
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
       <Tooltip>{element["id"]}</Tooltip>
       <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                 <li onClick={() => { console.log("ascenseur"); }}>
@@ -181,7 +191,7 @@ function newPolygon(element, positions, selectedRoom, callback)
   }
   else if (element["type"] === "T")
   {
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
       <Tooltip>{element["id"]}</Tooltip>
       <Toilet position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                 <li onClick={() => { console.log("toilettes"); }}>
@@ -198,13 +208,13 @@ function newPolygon(element, positions, selectedRoom, callback)
   else if (element["type"] === "R")
   {
     // In this case it is a regular room
-    return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callback(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callbackRoomSelected(element["id"])}}>
       <Tooltip>{element["id"]}</Tooltip>
     </Polygon>
   }
 }
 
-function list_polygons(request, center, callback, selectedRoom)
+function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor)
 {
   // Main function to calculate the list of polygons (React components)
   // Taking the request as parameter, the center of the points of the request
@@ -221,13 +231,13 @@ function list_polygons(request, center, callback, selectedRoom)
       // the "Polygon" react-leaflet component
       return [-(pt["y"] - center[1]) / 25, (pt["x"] - center[0]) / 25];
     });
-    const pol = newPolygon(element, positions, selectedRoom, callback);
+    const pol = newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor);
     polygons = [...polygons, pol];
   }
   return polygons;
 }
 
-function buildPols(request, callback, selectedRoom)
+function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor)
 {
   // This function just calls the list_polygons one with appropriate parameters (precalculate center)
   const minMaxXY = min_max(request);
@@ -236,11 +246,11 @@ function buildPols(request, callback, selectedRoom)
   const minY = minMaxXY[2];
   const maxY = minMaxXY[3];
   const center = [(maxX + minX) / 2, (maxY + minY) / 2];
-  const polygons = list_polygons(request, center, callback, selectedRoom);
+  const polygons = list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor);
   return polygons;
 }
 
-function Map({callbackRoomSelected, selectedRoom, floorID})
+function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
 {
   // When the user selects a room on the map, call callbackRoomSelected.
   // The room that is currently selected is selectedRoom. It is null if no room
@@ -264,7 +274,7 @@ function Map({callbackRoomSelected, selectedRoom, floorID})
     }, [request, callbackRoomSelected, selectedRoom]);
     const polygons = createPolygons(request, callbackRoomSelected, selectedRoom);
     */
-    const polygons = buildPols(request, callbackRoomSelected, selectedRoom);
+    const polygons = buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor);
     return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
       {polygons}
     </MapContainer>