diff --git a/recommender-front/src/components/buttons/LocateButton.jsx b/recommender-front/src/components/buttons/LocateButton.jsx index 117cf6d2..22295ad3 100644 --- a/recommender-front/src/components/buttons/LocateButton.jsx +++ b/recommender-front/src/components/buttons/LocateButton.jsx @@ -4,8 +4,8 @@ import MyLocationIcon from '@mui/icons-material/MyLocation'; import { useMap } from 'react-leaflet'; function LocateButton({ handleSetOrigin }) { - const staticLat = 60.198805; - const staticLon = 24.935671; + const staticLat = 60.204178; + const staticLon = 24.961690; const [locating, setLocating] = useState(false); const buttonStyle = { @@ -20,29 +20,12 @@ function LocateButton({ handleSetOrigin }) { const map = useMap(); - const success = (position) => { - console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`); - map.flyTo([position.coords.latitude, position.coords.longitude], map.getZoom()); - handleSetOrigin(position.coords.latitude, position.coords.longitude); - setLocating(false); - }; - - const error = () => { - console.log('Unable to retrieve your location'); - map.flyTo([staticLat, staticLon], map.getZoom()); - handleSetOrigin(staticLat, staticLon); - setLocating(false); - }; - const handleClick = () => { if (!locating) { setLocating(true); - - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(success, error); - } else { - console.log('Geolocation not supported'); - } + map.flyTo([staticLat, staticLon], map.getZoom()); + handleSetOrigin(staticLat, staticLon); + setLocating(false); } }; diff --git a/recommender-front/src/components/selector/MedicalSelector.jsx b/recommender-front/src/components/selector/MedicalSelector.jsx new file mode 100644 index 00000000..7fc29782 --- /dev/null +++ b/recommender-front/src/components/selector/MedicalSelector.jsx @@ -0,0 +1,102 @@ +import React, { useState } from 'react'; +import Checkbox from '@mui/material/Checkbox'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import IconButton from '@mui/material/IconButton'; +import MenuIcon from '@mui/icons-material/Menu'; +import CloseIcon from '@mui/icons-material/Close'; +import Typography from '@mui/material/Typography'; +import '../../assets/style.css'; + +function MedicalSelector({ selectedCategories, onCategoryChange }) { + const allCategories = ['Sport halls', 'Open air pools and beaches', 'Athletic fields and venues', 'Neighbourhood sports areas', 'Fitness training parks']; + + const isAllChecked = selectedCategories.includes('All'); + + const handleAllCheckboxChange = () => { + onCategoryChange(isAllChecked ? [] : ['All']); + }; + + const handleCategoryCheckboxChange = (category) => { + if (selectedCategories.includes(category)) { + onCategoryChange(selectedCategories.filter((item) => item !== category)); + } else { + onCategoryChange([...selectedCategories.filter((item) => item !== 'All'), category]); + } + }; + + const [anchorEl, setAnchorEl] = useState(null); + + const handleMenuClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + }; + + return ( +
+ + + + Categories + + + + + + + )} + label="All" + /> + + {allCategories.map((category) => ( + + handleCategoryCheckboxChange(category)} + name={`${category}Checkbox`} + color="primary" + /> + )} + label={category} + /> + + ))} + +
+ ); +} + +export default MedicalSelector;