Mysaa/Encartes-web
1
0
Fork 0
mirror of https://gitlab.aliens-lyon.fr/encartes/web-interface.git synced 2026-03-18 07:01:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriel Dehame 2023-02-21 20:31:45 +01:00
parent f9415554c7
commit 6e60344eeb
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -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 />

32
src/Map.js
View File

@ -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>