mirror of
https://gitlab.aliens-lyon.fr/encartes/web-interface.git
synced 2026-03-17 22:51:04 +01:00
Code format
This commit is contained in:
Adrien Vannson
parent
f25591f632
commit
6bef1fa4c7
186
src/Map.js
186
src/Map.js
@ -12,65 +12,71 @@ import toilet from "./toilet.png"
|
||||
import { useMapEvent, useMap } from 'react-leaflet/hooks';
|
||||
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
|
||||
// and the body of the popup of the stairs (list of floors accessible from that staircase)
|
||||
const map = useMap();
|
||||
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}>
|
||||
{body}
|
||||
</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
|
||||
// and the body of the popup of the lift (list of floors accessible from that lift)
|
||||
const map = useMap();
|
||||
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}>
|
||||
{body}
|
||||
</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
|
||||
// and the body of the popup of the lift (list of floors accessible from that lift)
|
||||
const map = useMap();
|
||||
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)]}))});
|
||||
return <Marker position={position} icon={markerIcon}/>
|
||||
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} />
|
||||
}
|
||||
|
||||
function polygonCenter(polygon)
|
||||
{
|
||||
function polygonCenter(polygon) {
|
||||
// Function to calculate the central point of a given polygon
|
||||
let minX = -1;
|
||||
let minY = -1;
|
||||
let maxX = -1;
|
||||
let maxY = -1;
|
||||
// We get the extremal coordinates
|
||||
for (const ind in polygon)
|
||||
{
|
||||
for (const ind in polygon) {
|
||||
const pt = polygon[ind];
|
||||
if (minX === -1 || minX > pt[0])
|
||||
{
|
||||
if (minX === -1 || minX > pt[0]) {
|
||||
minX = pt[0];
|
||||
}
|
||||
if (minY === -1 || minY > pt[1])
|
||||
{
|
||||
if (minY === -1 || minY > pt[1]) {
|
||||
minY = pt[1];
|
||||
}
|
||||
if (maxY === -1 || maxY < pt[1])
|
||||
{
|
||||
if (maxY === -1 || maxY < pt[1]) {
|
||||
maxY = pt[1];
|
||||
}
|
||||
if (maxX === -1 || maxX < pt[0])
|
||||
{
|
||||
if (maxX === -1 || maxX < pt[0]) {
|
||||
maxX = pt[0];
|
||||
}
|
||||
}
|
||||
@ -78,8 +84,7 @@ function polygonCenter(polygon)
|
||||
return [(minX + maxX) / 2, (maxY + minY) / 2];
|
||||
}
|
||||
|
||||
function logoSize(polygon)
|
||||
{
|
||||
function logoSize(polygon) {
|
||||
// function to calculate the size of a logo to display
|
||||
// on a room which edges are in polygon
|
||||
let minX = -1;
|
||||
@ -88,67 +93,54 @@ function logoSize(polygon)
|
||||
let maxY = -1;
|
||||
// We first calculate the maximal coordinates to then output
|
||||
// 75% the size of the room
|
||||
for (const ind in polygon)
|
||||
{
|
||||
for (const ind in polygon) {
|
||||
const pt = polygon[ind];
|
||||
if (minX === -1 || minX > pt[0])
|
||||
{
|
||||
if (minX === -1 || minX > pt[0]) {
|
||||
minX = pt[0];
|
||||
}
|
||||
if (minY === -1 || minY > pt[1])
|
||||
{
|
||||
if (minY === -1 || minY > pt[1]) {
|
||||
minY = pt[1];
|
||||
}
|
||||
if (maxY === -1 || maxY < pt[1])
|
||||
{
|
||||
if (maxY === -1 || maxY < pt[1]) {
|
||||
maxY = pt[1];
|
||||
}
|
||||
if (maxX === -1 || maxX < pt[0])
|
||||
{
|
||||
if (maxX === -1 || maxX < pt[0]) {
|
||||
maxX = pt[0];
|
||||
}
|
||||
}
|
||||
// For some unknown reason we have to multiply by 10 otherwise
|
||||
// it's almost invisible
|
||||
const x = 30*(maxX - minX)/4;
|
||||
const y = 30*(maxY - minY)/4;
|
||||
const x = 30 * (maxX - minX) / 4;
|
||||
const y = 30 * (maxY - minY) / 4;
|
||||
// We return a square size to make it better looking so we
|
||||
// take the minimal size of border
|
||||
if (x < y)
|
||||
{
|
||||
return [x,x];
|
||||
if (x < y) {
|
||||
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
|
||||
// (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 minY = -1;
|
||||
let maxX = -1;
|
||||
let maxY = -1;
|
||||
for (const ind in request)
|
||||
{
|
||||
for (const ind in request) {
|
||||
const element = request[ind];
|
||||
for (const index in element["surface"])
|
||||
{
|
||||
for (const index in element["surface"]) {
|
||||
const pt = element["surface"][index];
|
||||
if (minX === -1 || minX > pt["x"])
|
||||
{
|
||||
if (minX === -1 || minX > pt["x"]) {
|
||||
minX = pt["x"];
|
||||
}
|
||||
if (minY === -1 || minY > pt["y"])
|
||||
{
|
||||
if (minY === -1 || minY > pt["y"]) {
|
||||
minY = pt["y"];
|
||||
}
|
||||
if (maxY === -1 || maxY < pt["y"])
|
||||
{
|
||||
if (maxY === -1 || maxY < pt["y"]) {
|
||||
maxY = pt["y"];
|
||||
}
|
||||
if (maxX === -1 || maxX < pt["x"])
|
||||
{
|
||||
if (maxX === -1 || maxX < pt["x"]) {
|
||||
maxX = pt["x"];
|
||||
}
|
||||
}
|
||||
@ -156,29 +148,28 @@ function min_max(request)
|
||||
return [minX, maxX, minY, maxY];
|
||||
}
|
||||
|
||||
function floorList(connectedFloors, callbackChangeFloor)
|
||||
{
|
||||
function floorList(connectedFloors, callbackChangeFloor) {
|
||||
// Returns under html format a list of floors connected
|
||||
// listed in connectedFloors
|
||||
// Auxiliary function used when creating a Lift/Stairs component
|
||||
let htmlFloorList = [];
|
||||
for (const floor in connectedFloors)
|
||||
{
|
||||
htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]);}}>
|
||||
for (const floor in connectedFloors) {
|
||||
htmlFloorList = [
|
||||
...htmlFloorList,
|
||||
<li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]); }}>
|
||||
{connectedFloors[floor]["name"]}
|
||||
</li>];
|
||||
</li>
|
||||
];
|
||||
}
|
||||
return htmlFloorList;
|
||||
}
|
||||
|
||||
function roomNameList(nameList)
|
||||
{
|
||||
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)
|
||||
{
|
||||
for (const ind in nameList) {
|
||||
htmlNameList = [...htmlNameList, <div key={ind}>
|
||||
{nameList[ind]}
|
||||
</div>];
|
||||
@ -186,8 +177,7 @@ function roomNameList(nameList)
|
||||
return htmlNameList;
|
||||
}
|
||||
|
||||
function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor)
|
||||
{
|
||||
function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor) {
|
||||
// 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)
|
||||
// For all except corridors we put a Tooltip with the name of the room
|
||||
@ -195,10 +185,9 @@ 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
|
||||
// map of a connected floor
|
||||
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
|
||||
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>
|
||||
<Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
|
||||
{floorList(element["connectedFloors"], callbackChangeFloor)}
|
||||
@ -207,10 +196,9 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
|
||||
/>
|
||||
</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
|
||||
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>
|
||||
<Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
|
||||
{floorList(element["connectedFloors"], callbackChangeFloor)}
|
||||
@ -219,40 +207,34 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
|
||||
/>
|
||||
</Polygon>
|
||||
}
|
||||
else if (element["type"] === "T")
|
||||
{
|
||||
return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
|
||||
else if (element["type"] === "T") {
|
||||
return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
|
||||
<Tooltip>{roomNameList(element["names"])}</Tooltip>
|
||||
<Toilet position={polygonCenter(positions)} size={logoSize(positions)}/>
|
||||
<Toilet position={polygonCenter(positions)} size={logoSize(positions)} />
|
||||
</Polygon>
|
||||
}
|
||||
else if (element["type"] === "R")
|
||||
{
|
||||
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: () => callbackRoomSelected(element["id"])}}>
|
||||
return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
|
||||
<Tooltip>{roomNameList(element["names"])}</Tooltip>
|
||||
</Polygon>
|
||||
}
|
||||
else if (element["type"] === "C")
|
||||
{
|
||||
else if (element["type"] === "C") {
|
||||
// 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)
|
||||
// Taking the request as parameter, the center of the points of the request
|
||||
// and a callback (callback) to interact with the global web interface
|
||||
// when a room is clicked (allowing the display of room informations)
|
||||
let polygons = [];
|
||||
for (const ind in request)
|
||||
{
|
||||
for (const ind in request) {
|
||||
const element = request[ind];
|
||||
// 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.
|
||||
// It also changes the objects into lists of two coordinates to make it accepted by the "positions" attribute of
|
||||
// the "Polygon" react-leaflet component
|
||||
@ -264,8 +246,7 @@ function list_polygons(request, center, callbackRoomSelected, selectedRoom, call
|
||||
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)
|
||||
const minMaxXY = min_max(request);
|
||||
const minX = minMaxXY[0];
|
||||
@ -277,8 +258,7 @@ function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFl
|
||||
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.
|
||||
// The room that is currently selected is selectedRoom. It is null if no room
|
||||
// is selected
|
||||
@ -286,12 +266,11 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
|
||||
const [floor, setFloor] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
// We use the useEffect hook to fetch the data to build the Map
|
||||
useEffect(() =>
|
||||
{
|
||||
fetch(API_URL + "get_floor/"+floorID)
|
||||
useEffect(() => {
|
||||
fetch(API_URL + "get_floor/" + floorID)
|
||||
.then(response => response.json())
|
||||
.then(data => {setLoading(false); setFloor(data)})
|
||||
.catch((error) => {setError("API unreachable");});
|
||||
.then(data => { setLoading(false); setFloor(data) })
|
||||
.catch((error) => { setError("API unreachable"); });
|
||||
}, [floorID]);
|
||||
// We distinguish wether to print an error, a loading message
|
||||
// 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 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}>
|
||||
<Popup position={[0,0]}>{error}</Popup>
|
||||
<Popup position={[0, 0]}>{error}</Popup>
|
||||
</MapContainer>;
|
||||
}
|
||||
else if (loading)
|
||||
{
|
||||
else if (loading) {
|
||||
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>;
|
||||
}
|
||||
else
|
||||
{
|
||||
else {
|
||||
const request = floor["places"];
|
||||
/*const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
|
||||
return buildPols(request, callbackRoomSelected, selectedRoom);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user