From b06eec2c37a6e8e6118d80fb9e3d3d4f18240385 Mon Sep 17 00:00:00 2001
From: Gabriel Dehame <gabrieldehame@gmail.com>
Date: Tue, 28 Feb 2023 18:26:04 +0100
Subject: [PATCH] Reparation des connexions (qui causait un crash quand on
 cliquait sur ascneseur/escalier) et ajout du tracage des couloirs

---
 src/Map.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index 45b3da5..00f400a 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -2,9 +2,7 @@ import { MapContainer } from 'react-leaflet/MapContainer';
 import { Marker } from 'react-leaflet/Marker';
 import { Popup } from 'react-leaflet/Popup';
 import { Polygon } from 'react-leaflet/Polygon';
-import { LayersControl } from 'react-leaflet/LayersControl'
-import { LayerGroup } from 'react-leaflet/LayerGroup'
-import { Tooltip } from 'react-leaflet/Tooltip'
+import { Tooltip } from 'react-leaflet/Tooltip';
 import { useState, useEffect } from "react";
 import React from 'react';
 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)
   const map = useMap();
   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}>
     {body}
   </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)
   const map = useMap();
   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}>
     {body}
   </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)
   const map = useMap();
   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}/>
 }
 
@@ -145,8 +143,8 @@ function floorList(connectedFloors, callbackChangeFloor)
   let htmlFloorList = [];
   for (const floor in connectedFloors)
   {
-    htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]);}}>
-                                        {connectedFloors[floor]}
+    htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]);}}>
+                                        {connectedFloors[floor]["name"]}
                                        </li>];
   }
   return htmlFloorList;
@@ -195,6 +193,13 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
       <Tooltip>{element["id"]}</Tooltip>
     </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)