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

Reparation des connexions (qui causait un crash quand on cliquait sur ascneseur/escalier) et ajout du tracage des couloirs

Browse Source
This commit is contained in:
Gabriel Dehame 2023-02-28 18:26:04 +01:00
parent 45181ad049
commit b06eec2c37
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/Map.js
View File

@ -2,9 +2,7 @@ import { MapContainer } from 'react-leaflet/MapContainer';
import { Marker } from 'react-leaflet/Marker'; import { Marker } from 'react-leaflet/Marker';
import { Popup } from 'react-leaflet/Popup'; import { Popup } from 'react-leaflet/Popup';
import { Polygon } from 'react-leaflet/Polygon'; import { Polygon } from 'react-leaflet/Polygon';
import { LayersControl } from 'react-leaflet/LayersControl' import { Tooltip } from 'react-leaflet/Tooltip';
import { LayerGroup } from 'react-leaflet/LayerGroup'
import { Tooltip } from 'react-leaflet/Tooltip'
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import React from 'react'; import React from 'react';
import L from 'leaflet'; import L from 'leaflet';
@ -19,7 +17,7 @@ function Stairs({position, size, body})
// and the body of the popup of the stairs (list of floors accessible from that staircase) // and the body of the popup of the stairs (list of floors accessible from that staircase)
const map = useMap(); const map = useMap();
const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: size })); const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: size }));
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))}); useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
return <Marker position={position} icon={markerIcon}> return <Marker position={position} icon={markerIcon}>
{body} {body}
</Marker> </Marker>
@ -31,7 +29,7 @@ function Lift({position, size, body})
// and the body of the popup of the lift (list of floors accessible from that lift) // and the body of the popup of the lift (list of floors accessible from that lift)
const map = useMap(); const map = useMap();
const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: size })); const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: size }));
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))}); useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
return <Marker position={position} icon={markerIcon}> return <Marker position={position} icon={markerIcon}>
{body} {body}
</Marker> </Marker>
@ -43,7 +41,7 @@ function Toilet({position, size})
// and the body of the popup of the lift (list of floors accessible from that lift) // and the body of the popup of the lift (list of floors accessible from that lift)
const map = useMap(); const map = useMap();
const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: toilet, iconSize: size })); const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: toilet, iconSize: size }));
const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))}); useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
return <Marker position={position} icon={markerIcon}/> return <Marker position={position} icon={markerIcon}/>
} }
@ -145,8 +143,8 @@ function floorList(connectedFloors, callbackChangeFloor)
let htmlFloorList = []; let htmlFloorList = [];
for (const floor in connectedFloors) for (const floor in connectedFloors)
{ {
htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]);}}> htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]);}}>
{connectedFloors[floor]} {connectedFloors[floor]["name"]}
</li>]; </li>];
} }
return htmlFloorList; return htmlFloorList;
@ -195,6 +193,13 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
<Tooltip>{element["id"]}</Tooltip> <Tooltip>{element["id"]}</Tooltip>
</Polygon> </Polygon>
} }
else if (element["type"] === "C")
{
// In this case it is a corridor
return <Polygon positions={positions} key={element["id"] + color} color={"peru"} eventHandlers={{click: () => callbackRoomSelected(element["id"])}}>
<Tooltip>{element["id"]}</Tooltip>
</Polygon>
}
} }
function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor)