Revert "supporting user location"

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);
     }
   };
 

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 (
+    <div className="preference-selector-container">
+      <IconButton
+        data-testid="menu-button"
+        aria-controls="category-menu"
+        aria-haspopup="true"
+        onClick={handleMenuClick}
+        color="primary"
+        size="small"
+      >
+        <MenuIcon />
+      </IconButton>
+      <Typography variant="h6">Categories</Typography>
+      <Menu
+        id="category-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+      >
+        <IconButton
+          aria-label="Close"
+          aria-controls="category-menu"
+          aria-haspopup="true"
+          style={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}
+          onClick={handleMenuClose}
+        >
+          <CloseIcon />
+        </IconButton>
+        <MenuItem>
+          <FormControlLabel
+            control={(
+              <Checkbox
+                checked={isAllChecked}
+                onChange={handleAllCheckboxChange}
+                name="allCheckbox"
+                className="icon-button-selector"
+                color="primary"
+              />
+            )}
+            label="All"
+          />
+        </MenuItem>
+        {allCategories.map((category) => (
+          <MenuItem key={category}>
+            <FormControlLabel
+              control={(
+                <Checkbox
+                  checked={selectedCategories.includes(category)}
+                  onChange={() => handleCategoryCheckboxChange(category)}
+                  name={`${category}Checkbox`}
+                  color="primary"
+                />
+              )}
+              label={category}
+            />
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export default MedicalSelector;