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

debug de la gestion des connexions

Browse Source
This commit is contained in:
Gabriel Dehame 2023-02-23 19:14:35 +01:00
parent 2f0645708b
commit 7b010f2c4c
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -42,8 +42,8 @@ function ChangeFloor({ currentFloor, callbackFloorChanged }) {
fullWidth fullWidth
> >
<MenuItem value={1}>Monod - Premier étage</MenuItem> <MenuItem value={1}>Monod - Premier étage</MenuItem>
<MenuItem value={2}>Monod - Troisième étage</MenuItem> <MenuItem value={6}>Monod - Troisième étage</MenuItem>
<MenuItem value={3}>Monod - Quatrième étage</MenuItem> <MenuItem value={7}>Monod - Quatrième étage</MenuItem>
</Select> </Select>
</div> </div>
</> </>

18
src/Map.js
View File

@ -140,10 +140,14 @@ function min_max(request)
function floorList(connectedFloors, callbackChangeFloor) function floorList(connectedFloors, callbackChangeFloor)
{ {
// Returns under html format a list of floors connected
// listed in connectedFloors
let htmlFloorList = []; let htmlFloorList = [];
for (const floor in connectedFloors) for (const floor in connectedFloors)
{ {
htmlFloorList = [...htmlFloorList, <li onClick={() => {callbackChangeFloor(floor["id"]);}}> {floor["name"]} </li>]; htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]);}}>
{connectedFloors[floor]}
</li>];
} }
return htmlFloorList; return htmlFloorList;
} }
@ -159,7 +163,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
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["id"]}</Tooltip> <Tooltip>{element["id"]}</Tooltip>
<Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup> <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
{floorList(element["connexions"], callbackChangeFloor)} {floorList(element["connectedFloors"], callbackChangeFloor)}
</Popup> </Popup>
} }
/> />
@ -171,7 +175,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
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["id"]}</Tooltip> <Tooltip>{element["id"]}</Tooltip>
<Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup> <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
{floorList(element["connexions"], callbackChangeFloor)} {floorList(element["connectedFloors"], callbackChangeFloor)}
</Popup> </Popup>
} }
/> />
@ -205,7 +209,8 @@ function list_polygons(request, center, callbackRoomSelected, selectedRoom, call
const element = request[ind]; const element = request[ind];
// element can be a room, a lift, a staircase or toilets // element can be a room, a lift, a staircase or toilets
const positions = (element["surface"]).map((pt) => { const positions = (element["surface"]).map((pt) => {
// This function rotates and recenters de the map (should not be necessary once the real data are gathered) // This function rotates and recenters de the map (should not be necessary once the real data are gathered and
// only works for third floor)
// It also changes the objects into lists of two coordinates to make it accepted by the "positions" attribute of // It also changes the objects into lists of two coordinates to make it accepted by the "positions" attribute of
// the "Polygon" react-leaflet component // the "Polygon" react-leaflet component
return [-(pt["y"] - center[1]) / 25, (pt["x"] - center[0]) / 25]; return [-(pt["y"] - center[1]) / 25, (pt["x"] - center[0]) / 25];
@ -237,13 +242,16 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [floor, setFloor] = useState(null); const [floor, setFloor] = useState(null);
const [error, setError] = useState(null); const [error, setError] = useState(null);
// We use the useEffect hook to fetch the data to build the Map
useEffect(() => useEffect(() =>
{ {
fetch("https://encartes.aliens-lyon.fr/api/map/get_floor/"+floorID) fetch("https://encartes.aliens-lyon.fr/api/map/get_floor/"+floorID)
.then(response => response.json()) .then(response => response.json())
.then(data => {setLoading(false); setFloor(data)}) .then(data => {setLoading(false); setFloor(data)})
.catch((error) => {setError("API unreachable");}); .catch((error) => {setError("API unreachable");});
}, []); }, [floorID]);
// We distinguish wether to print an error, a loading message
// or the map if we got the answer
if (error != null) if (error != null)
{ {
return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}> return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>