amélioration de l'affichage des noms de salles

This commit is contained in:
Gabriel Dehame 2023-03-05 19:29:19 +01:00
parent 3319d8d04d
commit ac7eeb21ad

View File

@ -160,7 +160,7 @@ function floorList(connectedFloors, callbackChangeFloor)
{ {
// Returns under html format a list of floors connected // Returns under html format a list of floors connected
// listed in connectedFloors // listed in connectedFloors
// Auxiliary function used when creating a Lift/Strairs component // Auxiliary function used when creating a Lift/Stairs component
let htmlFloorList = []; let htmlFloorList = [];
for (const floor in connectedFloors) for (const floor in connectedFloors)
{ {
@ -171,6 +171,21 @@ function floorList(connectedFloors, callbackChangeFloor)
return htmlFloorList; 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) function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor)
{ {
// Auxiliary function to return the appropriate polygon depending // 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 // 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 // map of a connected floor
const color = selectedRoom === element["id"] ? 'red' : 'grey'; const color = selectedRoom === element["id"] ? 'red' : 'grey';
console.log(element);
if (element["type"] === "S") if (element["type"] === "S")
{ {
// In this case, the room is a staircase so we add a Stairs component // 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"])}}> 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> <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
{floorList(element["connectedFloors"], callbackChangeFloor)} {floorList(element["connectedFloors"], callbackChangeFloor)}
</Popup> </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 // 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"])}}> 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> <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
{floorList(element["connectedFloors"], callbackChangeFloor)} {floorList(element["connectedFloors"], callbackChangeFloor)}
</Popup> </Popup>
@ -208,7 +222,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
else if (element["type"] === "T") else if (element["type"] === "T")
{ {
return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}> 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)}/> <Toilet position={polygonCenter(positions)} size={logoSize(positions)}/>
</Polygon> </Polygon>
} }
@ -216,7 +230,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
{ {
// In this case it is a regular room // In this case it is a regular room
return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callbackRoomSelected(element["id"])}}> 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> </Polygon>
} }
else if (element["type"] === "C") else if (element["type"] === "C")