Dka34/enhanced locations

frontend/package.json

@@ -20,6 +20,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-router-hash-link": "^2.4.9",
+    "@vis.gl/react-google-maps": "^1.4.0",
     "addresser": "^1.1.20",
     "axios": "^1.7.7",
     "classnames": "^2.5.1",

frontend/src/components/Locations/LocationDialog.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  Paper,
+  IconButton,
+  Button,
+  Typography,
+  Chip,
+  Box,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
+import { LocationFormModal } from './LocationFormModal';
+import styles from './locations.module.css';
+
+interface Location {
+  id: number;
+  name: string;
+  address: string;
+  info: string;
+  tag: string;
+  lat: number;
+  lng: number;
+}
+
+interface LocationDialogProps {
+  location: Location | null;
+  onClose: () => void;
+  onSave: (location: Location) => void;
+}
+
+const LocationDialog: React.FC<LocationDialogProps> = ({
+  location,
+  onClose,
+  onSave,
+}) => {
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [currentLocation, setCurrentLocation] = useState<Location | null>(null);
+
+  // Update currentLocation when location prop changes
+  useEffect(() => {
+    setCurrentLocation(location);
+  }, [location]);
+
+  if (!location || !currentLocation) return null;
+
+  const handleEditSubmit = (updatedLocation: Location) => {
+    onSave(updatedLocation);
+    setCurrentLocation(updatedLocation);
+    setIsEditMode(false);
+  };
+
+  return (
+    <>
+      <Modal
+        open={!!location}
+        onClose={onClose}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1300,
+        }}
+      >
+        <Paper
+          sx={{
+            position: 'relative',
+            width: '100%',
+            maxWidth: 600,
+            maxHeight: '90vh',
+            overflow: 'auto',
+            p: 3,
+            m: 2,
+          }}
+          onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside
+        >
+          <IconButton
+            onClick={onClose}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+
+          <Box sx={{ mb: 3, pr: 4 }}>
+            <Typography variant="h5" component="h2">
+              {currentLocation.name}
+            </Typography>
+            <Chip label={currentLocation.tag} size="small" sx={{ mt: 1 }} />
+          </Box>
+
+          <div className={styles.dialogContent}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+              Address
+            </Typography>
+            <Typography sx={{ mb: 2 }}>{currentLocation.address}</Typography>
+
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+              Information
+            </Typography>
+            <Typography>{currentLocation.info}</Typography>
+          </div>
+
+          <Box sx={{ mt: 3, textAlign: 'right' }}>
+            <Button
+              startIcon={<EditIcon />}
+              onClick={() => setIsEditMode(true)}
+              variant="outlined"
+              sx={{ mr: 1 }}
+            >
+              Edit
+            </Button>
+            <Button onClick={onClose}>Close</Button>
+          </Box>
+        </Paper>
+      </Modal>
+
+      <LocationFormModal
+        open={isEditMode}
+        onClose={() => setIsEditMode(false)}
+        onSubmit={handleEditSubmit}
+        initialData={currentLocation}
+        mode="edit"
+      />
+    </>
+  );
+};
+
+export default LocationDialog;

frontend/src/components/Locations/LocationFormModal.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+} from '@mui/material';
+import { PlacesSearch } from './PlacesSearch';
+
+const CAMPUS_OPTIONS = [
+  'North Campus',
+  'West Campus',
+  'Central Campus',
+  'South Campus',
+  'Commons',
+  'Other',
+] as const;
+
+interface Location {
+  id: number;
+  name: string;
+  address: string;
+  info: string;
+  tag: string;
+  lat: number;
+  lng: number;
+}
+
+interface LocationFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (location: Location) => void;
+  initialData?: Location; // For edit mode
+  mode: 'add' | 'edit';
+}
+
+export const LocationFormModal = ({
+  open,
+  onClose,
+  onSubmit,
+  initialData,
+  mode,
+}: LocationFormModalProps) => {
+  const [formData, setFormData] = useState<Location>({
+    id: initialData?.id ?? 0,
+    name: '',
+    address: '',
+    info: '',
+    tag: 'Other',
+    lat: 0,
+    lng: 0,
+  });
+
+  useEffect(() => {
+    if (open && initialData && mode === 'edit') {
+      setFormData(initialData);
+    } else if (!open) {
+      setFormData({
+        id: 0,
+        name: '',
+        address: '',
+        info: '',
+        tag: 'Other',
+        lat: 0,
+        lng: 0,
+      });
+    }
+  }, [open, initialData, mode]);
+
+  const handleAddressSelect = (address: string, lat: number, lng: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      address,
+      lat,
+      lng,
+    }));
+  };
+
+  const handleSubmit = () => {
+    onSubmit(formData);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        {mode === 'add' ? 'Add New Location' : 'Edit Location'}
+      </DialogTitle>
+      <DialogContent>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
+            marginTop: '1rem',
+          }}
+        >
+          <TextField
+            label="Location Name"
+            fullWidth
+            value={formData.name}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
+          />
+
+          {mode === 'add' ? (
+            <div>
+              <label
+                style={{
+                  display: 'block',
+                  marginBottom: '0.5rem',
+                  color: 'rgba(0, 0, 0, 0.6)',
+                }}
+              >
+                Address
+              </label>
+              <PlacesSearch onAddressSelect={handleAddressSelect} />
+            </div>
+          ) : (
+            <TextField
+              label="Address"
+              fullWidth
+              value={formData.address}
+              disabled
+              helperText="Address cannot be edited"
+            />
+          )}
+
+          <TextField
+            label="Description"
+            fullWidth
+            multiline
+            rows={3}
+            value={formData.info}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, info: e.target.value }))
+            }
+          />
+
+          <FormControl fullWidth>
+            <InputLabel>Campus</InputLabel>
+            <Select
+              value={formData.tag}
+              label="Campus"
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, tag: e.target.value }))
+              }
+            >
+              {CAMPUS_OPTIONS.map((campus) => (
+                <MenuItem key={campus} value={campus}>
+                  {campus}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          onClick={handleSubmit}
+          variant="contained"
+          color="primary"
+          disabled={
+            !formData.name ||
+            !formData.info ||
+            (mode === 'add' &&
+              (!formData.address || !formData.lat || !formData.lng))
+          }
+        >
+          {mode === 'add' ? 'Add Location' : 'Save Changes'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};