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

Code format

Browse Source
This commit is contained in:
Adrien Vannson 2023-03-06 10:41:54 +01:00
parent f25591f632
commit 6bef1fa4c7
No known key found for this signature in database
GPG Key ID: FE2E66FD978C1A55
1 changed files with 93 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
src/Map.js
View File

@ -12,65 +12,71 @@ import toilet from "./toilet.png"
import { useMapEvent, useMap } from 'react-leaflet/hooks'; import { useMapEvent, useMap } from 'react-leaflet/hooks';
import API_URL from './config'; import API_URL from './config';
function Stairs({position, size, body}) function Stairs({ position, size, body }) {
{
// React class (in function form) to represent stairs, takes the position where to put the stairs logo // React class (in function form) to represent stairs, takes the position where to put the stairs logo
// 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 }));
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>
} }
function Lift({position, size, body}) function Lift({ position, size, body }) {
{
// React class (in function form) to represent lifts, takes the position where to put the lift logo // React class (in function form) to represent lifts, takes the position where to put the lift logo
// 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 }));
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>
} }
function Toilet({position, size}) function Toilet({ position, size }) {
{
// React class (in function form) to represent lifts, takes the position where to put the lift logo // React class (in function form) to represent lifts, takes the position where to put the lift logo
// 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 }));
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', () => {
return <Marker position={position} icon={markerIcon}/> 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} />
} }
function polygonCenter(polygon) function polygonCenter(polygon) {
{
// Function to calculate the central point of a given polygon // Function to calculate the central point of a given polygon
let minX = -1; let minX = -1;
let minY = -1; let minY = -1;
let maxX = -1; let maxX = -1;
let maxY = -1; let maxY = -1;
// We get the extremal coordinates // We get the extremal coordinates
for (const ind in polygon) for (const ind in polygon) {
{
const pt = polygon[ind]; const pt = polygon[ind];
if (minX === -1 || minX > pt[0]) if (minX === -1 || minX > pt[0]) {
{
minX = pt[0]; minX = pt[0];
} }
if (minY === -1 || minY > pt[1]) if (minY === -1 || minY > pt[1]) {
{
minY = pt[1]; minY = pt[1];
} }
if (maxY === -1 || maxY < pt[1]) if (maxY === -1 || maxY < pt[1]) {
{
maxY = pt[1]; maxY = pt[1];
} }
if (maxX === -1 || maxX < pt[0]) if (maxX === -1 || maxX < pt[0]) {
{
maxX = pt[0]; maxX = pt[0];
} }
} }
@ -78,8 +84,7 @@ function polygonCenter(polygon)
return [(minX + maxX) / 2, (maxY + minY) / 2]; return [(minX + maxX) / 2, (maxY + minY) / 2];
} }
function logoSize(polygon) function logoSize(polygon) {
{
// function to calculate the size of a logo to display // function to calculate the size of a logo to display
// on a room which edges are in polygon // on a room which edges are in polygon
let minX = -1; let minX = -1;
@ -88,67 +93,54 @@ function logoSize(polygon)
let maxY = -1; let maxY = -1;
// We first calculate the maximal coordinates to then output // We first calculate the maximal coordinates to then output
// 75% the size of the room // 75% the size of the room
for (const ind in polygon) for (const ind in polygon) {
{
const pt = polygon[ind]; const pt = polygon[ind];
if (minX === -1 || minX > pt[0]) if (minX === -1 || minX > pt[0]) {
{
minX = pt[0]; minX = pt[0];
} }
if (minY === -1 || minY > pt[1]) if (minY === -1 || minY > pt[1]) {
{
minY = pt[1]; minY = pt[1];
} }
if (maxY === -1 || maxY < pt[1]) if (maxY === -1 || maxY < pt[1]) {
{
maxY = pt[1]; maxY = pt[1];
} }
if (maxX === -1 || maxX < pt[0]) if (maxX === -1 || maxX < pt[0]) {
{
maxX = pt[0]; maxX = pt[0];
} }
} }
// For some unknown reason we have to multiply by 10 otherwise // For some unknown reason we have to multiply by 10 otherwise
// it's almost invisible // it's almost invisible
const x = 30*(maxX - minX)/4; const x = 30 * (maxX - minX) / 4;
const y = 30*(maxY - minY)/4; const y = 30 * (maxY - minY) / 4;
// We return a square size to make it better looking so we // We return a square size to make it better looking so we
// take the minimal size of border // take the minimal size of border
if (x < y) if (x < y) {
{ return [x, x];
return [x,x];
} }
return [y,y]; return [y, y];
} }
function min_max(request) function min_max(request) {
{
// Function to calculate the minimal and maximal coordinates of all the points in a request // Function to calculate the minimal and maximal coordinates of all the points in a request
// (it being a list of polygons, a polygon being a list of points, a point being a list of 2 coordinates) // (it being a list of polygons, a polygon being a list of points, a point being a list of 2 coordinates)
let minX = -1; let minX = -1;
let minY = -1; let minY = -1;
let maxX = -1; let maxX = -1;
let maxY = -1; let maxY = -1;
for (const ind in request) for (const ind in request) {
{
const element = request[ind]; const element = request[ind];
for (const index in element["surface"]) for (const index in element["surface"]) {
{
const pt = element["surface"][index]; const pt = element["surface"][index];
if (minX === -1 || minX > pt["x"]) if (minX === -1 || minX > pt["x"]) {
{
minX = pt["x"]; minX = pt["x"];
} }
if (minY === -1 || minY > pt["y"]) if (minY === -1 || minY > pt["y"]) {
{
minY = pt["y"]; minY = pt["y"];
} }
if (maxY === -1 || maxY < pt["y"]) if (maxY === -1 || maxY < pt["y"]) {
{
maxY = pt["y"]; maxY = pt["y"];
} }
if (maxX === -1 || maxX < pt["x"]) if (maxX === -1 || maxX < pt["x"]) {
{
maxX = pt["x"]; maxX = pt["x"];
} }
} }
@ -156,38 +148,36 @@ function min_max(request)
return [minX, maxX, minY, maxY]; return [minX, maxX, minY, maxY];
} }
function floorList(connectedFloors, callbackChangeFloor) 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/Stairs component // Auxiliary function used when creating a Lift/Stairs component
let htmlFloorList = []; let htmlFloorList = [];
for (const floor in connectedFloors) for (const floor in connectedFloors) {
{ htmlFloorList = [
htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]);}}> ...htmlFloorList,
{connectedFloors[floor]["name"]} <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]); }}>
</li>]; {connectedFloors[floor]["name"]}
</li>
];
} }
return htmlFloorList; return htmlFloorList;
} }
function roomNameList(nameList) function roomNameList(nameList) {
{
// Returns under html format a list of room names // Returns under html format a list of room names
// (without bullet points) listed in nameList // (without bullet points) listed in nameList
// Auxiliary function used when creating a Room component // Auxiliary function used when creating a Room component
let htmlNameList = []; let htmlNameList = [];
for (const ind in nameList) for (const ind in nameList) {
{
htmlNameList = [...htmlNameList, <div key={ind}> htmlNameList = [...htmlNameList, <div key={ind}>
{nameList[ind]} {nameList[ind]}
</div>]; </div>];
} }
return htmlNameList; 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
// on wether it is a room (R), a lift (L), a staircase (S), toilets (T) or corridor (C) // on wether it is a room (R), a lift (L), a staircase (S), toilets (T) or corridor (C)
// For all except corridors we put a Tooltip with the name of the room // For all except corridors we put a Tooltip with the name of the room
@ -195,64 +185,56 @@ 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';
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>{roomNameList(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>
} }
/> />
</Polygon> </Polygon>
} }
else if (element["type"] === "L") else if (element["type"] === "L") {
{
// 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>{roomNameList(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>
} }
/> />
</Polygon> </Polygon>
} }
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>{roomNameList(element["names"])}</Tooltip> <Tooltip>{roomNameList(element["names"])}</Tooltip>
<Toilet position={polygonCenter(positions)} size={logoSize(positions)}/> <Toilet position={polygonCenter(positions)} size={logoSize(positions)} />
</Polygon> </Polygon>
} }
else if (element["type"] === "R") else if (element["type"] === "R") {
{
// 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>{roomNameList(element["names"])}</Tooltip> <Tooltip>{roomNameList(element["names"])}</Tooltip>
</Polygon> </Polygon>
} }
else if (element["type"] === "C") else if (element["type"] === "C") {
{
// In this case it is a corridor // In this case it is a corridor
return <Polygon positions={positions} key={element["id"] + color} color={"peru"}/> return <Polygon positions={positions} key={element["id"] + color} color={"peru"} />
} }
} }
function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) {
{
// Main function to calculate the list of polygons (React components) // Main function to calculate the list of polygons (React components)
// Taking the request as parameter, the center of the points of the request // Taking the request as parameter, the center of the points of the request
// and a callback (callback) to interact with the global web interface // and a callback (callback) to interact with the global web interface
// when a room is clicked (allowing the display of room informations) // when a room is clicked (allowing the display of room informations)
let polygons = []; let polygons = [];
for (const ind in request) for (const ind in request) {
{
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.
// 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
@ -264,8 +246,7 @@ function list_polygons(request, center, callbackRoomSelected, selectedRoom, call
return polygons; return polygons;
} }
function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor) function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor) {
{
// This function just calls the list_polygons one with appropriate parameters (precalculate center) // This function just calls the list_polygons one with appropriate parameters (precalculate center)
const minMaxXY = min_max(request); const minMaxXY = min_max(request);
const minX = minMaxXY[0]; const minX = minMaxXY[0];
@ -277,8 +258,7 @@ function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFl
return polygons; return polygons;
} }
function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor}) function Map({ callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor }) {
{
// When the user selects a room on the map, call callbackRoomSelected. // 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 // The room that is currently selected is selectedRoom. It is null if no room
// is selected // is selected
@ -286,12 +266,11 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
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 // We use the useEffect hook to fetch the data to build the Map
useEffect(() => useEffect(() => {
{ fetch(API_URL + "get_floor/" + floorID)
fetch(API_URL + "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]); }, [floorID]);
// We distinguish wether to print an error, a loading message // We distinguish wether to print an error, a loading message
// or the map if we got the answer // or the map if we got the answer
@ -299,20 +278,17 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
const corner2 = L.latLng(50, 100); const corner2 = L.latLng(50, 100);
const bounds = L.latLngBounds(corner1, corner2); const bounds = L.latLngBounds(corner1, corner2);
if (error != null) if (error != null) {
{
return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}> return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}>
<Popup position={[0,0]}>{error}</Popup> <Popup position={[0, 0]}>{error}</Popup>
</MapContainer>; </MapContainer>;
} }
else if (loading) else if (loading) {
{
return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}> return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}>
<Popup position={[0,0]}>Loading map</Popup> <Popup position={[0, 0]}>Loading map</Popup>
</MapContainer>; </MapContainer>;
} }
else else {
{
const request = floor["places"]; const request = floor["places"];
/*const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => { /*const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
return buildPols(request, callbackRoomSelected, selectedRoom); return buildPols(request, callbackRoomSelected, selectedRoom);