From ac7eeb21ad442a045aafa2cc42ee3df9c784ca42 Mon Sep 17 00:00:00 2001
From: Gabriel Dehame <gabrieldehame@gmail.com>
Date: Sun, 5 Mar 2023 19:29:19 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20de=20l'affichage=20des=20no?=
 =?UTF-8?q?ms=20de=20salles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Map.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index 4e912ca..477a564 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -160,7 +160,7 @@ function floorList(connectedFloors, callbackChangeFloor)
 {
   // Returns under html format a list of floors connected
   // listed in connectedFloors
-  // Auxiliary function used when creating a Lift/Strairs component
+  // Auxiliary function used when creating a Lift/Stairs component
   let htmlFloorList = [];
   for (const floor in connectedFloors)
   {
@@ -171,6 +171,21 @@ function floorList(connectedFloors, callbackChangeFloor)
   return htmlFloorList;
 }
 
+function roomNameList(nameList)
+{
+  // Returns under html format a list of room names
+  // (without bullet points) listed in nameList
+  // Auxiliary function used when creating a Room component
+  let htmlNameList = [];
+  for (const ind in nameList)
+  {
+    htmlNameList = [...htmlNameList, <div key={ind}>
+                                        {nameList[ind]}
+                                       </div>];
+  }
+  return htmlNameList;
+}
+
 function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor)
 {
   // Auxiliary function to return the appropriate polygon depending
@@ -180,12 +195,11 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   // and for S or L, we add a Popup with the list of connected floors and possibility to load the
   // map of a connected floor
   const color = selectedRoom === element["id"] ? 'red' : 'grey';
-  console.log(element);
   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: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["names"]}</Tooltip>
+      <Tooltip>{roomNameList(element["names"])}</Tooltip>
       <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                                                     {floorList(element["connectedFloors"], callbackChangeFloor)}
                                                                                    </Popup>
@@ -197,7 +211,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   {
     // 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: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["names"]}</Tooltip>
+      <Tooltip>{roomNameList(element["names"])}</Tooltip>
       <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                                                   {floorList(element["connectedFloors"], callbackChangeFloor)}
                                                                                  </Popup>
@@ -208,7 +222,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   else if (element["type"] === "T")
   {
     return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["names"]}</Tooltip>
+      <Tooltip>{roomNameList(element["names"])}</Tooltip>
       <Toilet position={polygonCenter(positions)} size={logoSize(positions)}/>
     </Polygon>
   }
@@ -216,7 +230,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   {
     // In this case it is a regular room
     return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["names"]}</Tooltip>
+      <Tooltip>{roomNameList(element["names"])}</Tooltip>
     </Polygon>
   }
   else if (element["type"] === "C")