Merge pull request #49 from UTSC-CSCC01-Software-Engineering-I/fix/bugs_features

Fix/bugs features

Author: Adrit-3001

backend/src/models/UserPoint.js

@@ -19,7 +19,8 @@ function LogoBlock() {
   const [filteredList, setFilteredList] = useState([]);
   const [sortOrder, setSortOrder] = useState(null);
   const [showSortMenu, setShowSortMenu] = useState(false);
-  const [unit, setUnit] = useState(window.temperatureUnit || 'C');
+  // Fix: Initialize with 'C' and update in useEffect
+  const [unit, setUnit] = useState('C');
   const [showFilterModal, setShowFilterModal] = useState(false);
   const [tempFilter, setTempFilter] = useState({ min: '', max: '' });
 
@@ -152,15 +153,27 @@ const resetTempFilter = () => {
     setShowSuggestions(false);
   };
 
+  // Update the useEffect that handles unit changes
   useEffect(() => {
     const handleUnitChange = () => {
-      setUnit(window.temperatureUnit || 'C');
+      // Check if window exists before accessing it
+      if (typeof window !== 'undefined') {
+        setUnit(window.temperatureUnit || 'C');
+      }
     };
-    window.addEventListener('unitchange', handleUnitChange);
-    // initialize on mount
+    
+    // Initialize on mount
     handleUnitChange();
+    
+    // Add event listener
+    if (typeof window !== 'undefined') {
+      window.addEventListener('unitchange', handleUnitChange);
+    }
+    
     return () => {
-      window.removeEventListener('unitchange', handleUnitChange);
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('unitchange', handleUnitChange);
+      }
     };
   }, []);
 
@@ -435,7 +448,8 @@ const resetTempFilter = () => {
               lineHeight: 1.4,
               transition: 'color 0.3s ease'
             }}>
-              {item.siteName}
+              {/* Display "User Point" for user-generated points, otherwise use siteName */}
+              {item.isUserPoint ? 'User Point' : (item.siteName || 'User Point')}
             </h2>
             <p style={{
               fontSize: '0.75rem',
@@ -445,14 +459,25 @@ const resetTempFilter = () => {
                 : 'rgba(0,0,0,0.6)'
             }}>
               { item.timestamp
-                ? new Date(
-                    // drop the "Z" so this is parsed as local midnight
-                    item.timestamp.replace(' ', 'T')
-                  ).toLocaleDateString('en-US', {
-                    day:   'numeric',
-                    month: 'short',
-                    year:  'numeric'
-                  })
+                ? (() => {
+                    // Handle different timestamp formats
+                    let date;
+                    if (item.isUserPoint) {
+                      // For user points, timestamp is from updatedAt (ISO string)
+                      date = new Date(item.timestamp);
+                    } else {
+                      // For official data, timestamp might be in different format
+                      date = new Date(item.timestamp.replace(' ', 'T'));
+                    }
+                    
+                    return date.toLocaleDateString('en-US', {
+                      day: 'numeric',
+                      month: 'short',
+                      year: 'numeric',
+                      hour: item.isUserPoint ? '2-digit' : undefined,
+                      minute: item.isUserPoint ? '2-digit' : undefined
+                    });
+                  })()
                 : '—' }
             </p>
           </div>

frontend/src/components/HUDleftPoints.jsx

@@ -80,6 +80,42 @@ export default function MapComponent() {
     return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
   }
 
+  // Add this function for better contrast calculation
+  function getAccessibleTemperatureColor(temp, unit = 'C', mode = 'light') {
+    const tempC = unit === 'F' ? (temp - 32) * 5 / 9 : parseFloat(temp);
+
+    const min = 0;
+    const max = 30;
+    const ratio = Math.min(1, Math.max(0, (tempC - min) / (max - min)));
+
+    const hue = 270 - ratio * 270; // purple → red  
+    const saturation = 90; // Slightly reduced for better readability
+    
+    // Ensure sufficient contrast for WCAG AA compliance
+    const lightness = mode === 'dark' ? 45 : 35; // Darker colors for better contrast
+    const alpha = 0.9; // Higher opacity for better visibility
+
+    return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+  }
+
+  // Add this function to get temperature category for screen readers
+  function getTemperatureCategory(tempC) {
+    if (tempC < 5) return 'Very Cold';
+    if (tempC < 15) return 'Cold';
+    if (tempC < 20) return 'Cool';
+    if (tempC < 25) return 'Warm';
+    return 'Hot';
+  }
+
+  // Add this function to get temperature icon/symbol
+  function getTemperatureSymbol(tempC) {
+    if (tempC < 5) return '🧊'; // ice
+    if (tempC < 15) return '❄️'; // snowflake
+    if (tempC < 20) return '🌊'; // wave
+    if (tempC < 25) return '🏊'; // swimmer
+    return '🔥'; // fire
+  }
+
   useEffect(() => {
     if (typeof window !== 'undefined') {
       window.loadedAPI = loading;
@@ -127,6 +163,7 @@ export default function MapComponent() {
         const map = L.map(mapRef.current, {
           center: [43.647216678117736, -79.36719310664458],
           zoom: 12,
+          zoomControl: false,
           layers: [isDarkTheme ? darkLayer : lightLayer]
         });
 
@@ -150,6 +187,7 @@ export default function MapComponent() {
         // Store the cleanup function for later use
         map._themeCleanup = removeThemeListener;
 
+        // Update the addMarkers function
         function addMarkers(items) {
           items.forEach((item, i) => {
             const lon = item.lng || item.lon || item.Longitude;
@@ -160,24 +198,71 @@ export default function MapComponent() {
             // Get current unit and format temperature
             const currentUnit = UnitManager.getUnit();
             const formattedTemp = formatTemperature(t, currentUnit);
-            const tempColor = getTemperatureColor(t, 'C'); // Always calculate color from Celsius
+            const tempColor = getAccessibleTemperatureColor(t, 'C'); // Use accessible color function
+            const tempCategory = getTemperatureCategory(t);
+            const tempSymbol = getTemperatureSymbol(t);
 
             console.log(`Plotting [${i}]: ${name} @ ${lat},${lon} = ${formattedTemp}`);
 
             const icon = L.divIcon({
               className: 'custom-temp-marker',
-              html: `<div class="temp-label" style="background-color: ${tempColor};">${formattedTemp}</div>`,
-              iconSize: [40, 40],
-              iconAnchor: [20, 20],
+              html: `
+                <div 
+                  class="temp-label accessible-marker" 
+                  style="background-color: ${tempColor};"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Water temperature ${formattedTemp} at ${name}. Category: ${tempCategory}. Press Enter or Space to view details."
+                  data-temp-category="${tempCategory.toLowerCase().replace(' ', '-')}"
+                >
+                  <span class="temp-value">${formattedTemp}</span>
+                </div>
+              `,
+              iconSize: [50, 40], // Slightly larger for better touch targets
+              iconAnchor: [25, 20],
             });
 
             const marker = L.marker([lat, lon], { icon }).addTo(map);
 
+            // Add function to announce to screen readers (this was missing)
+            function announceToScreenReader(message) {
+              const announcement = document.createElement('div');
+              announcement.setAttribute('aria-live', 'polite');
+              announcement.setAttribute('aria-atomic', 'true');
+              announcement.className = 'sr-only';
+              announcement.textContent = message;
+              
+              document.body.appendChild(announcement);
+              
+              // Remove after announcement
+              setTimeout(() => {
+                if (document.body.contains(announcement)) {
+                  document.body.removeChild(announcement);
+                }
+              }, 1000);
+            }
+
+            // Add click handler FIRST (this is the main functionality)
             marker.on('click', async () => {
+              console.log('Marker clicked:', name); // Debug log
+              
+              // Announce to screen readers
+              try {
+                announceToScreenReader(`Viewing details for ${name} with water temperature ${formattedTemp}`);
+              } catch (e) {
+                console.log('Screen reader announcement failed:', e);
+              }
+
               const historicalData = await fetchHistoricalData(name);
 
               if (historicalData.length === 0) {
-                marker.bindPopup(`<strong>${name}</strong><br/>No historical data available`).openPopup();
+                marker.bindPopup(`
+                  <div role="dialog" aria-labelledby="popup-title-${i}">
+                    <h3 id="popup-title-${i}">${name}</h3>
+                    <p>No historical data available</p>
+                    <p>Current temperature: ${formattedTemp} (${tempCategory})</p>
+                  </div>
+                `).openPopup();
                 return;
               }
 
@@ -375,6 +460,37 @@ export default function MapComponent() {
               }, 100);
             });
 
+            // Add keyboard accessibility AFTER the click handler
+            marker.on('add', () => {
+              // Small delay to ensure DOM is ready
+              setTimeout(() => {
+                const markerElement = marker.getElement();
+                if (markerElement) {
+                  const tempLabel = markerElement.querySelector('.temp-label');
+                  if (tempLabel) {
+                    // Add keyboard event listeners
+                    tempLabel.addEventListener('keydown', (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        console.log('Keyboard trigger for:', name); // Debug log
+                        marker.fire('click'); // This should trigger the click handler
+                      }
+                    });
+
+                    // Add focus styling
+                    tempLabel.addEventListener('focus', () => {
+                      tempLabel.style.outline = '3px solid #0066cc';
+                      tempLabel.style.outlineOffset = '2px';
+                    });
+
+                    tempLabel.addEventListener('blur', () => {
+                      tempLabel.style.outline = 'none';
+                    });
+                  }
+                }
+              }, 100);
+            });
+
             markersRef.current.push({ marker, tempC: t, name, lat, lon });
           });
         }

frontend/src/components/MapComponent.jsx

@@ -39,6 +39,7 @@
 
   /* 🟢 Thin black outline around text */
   text-shadow: 0 0 2px black;
+  /* -webkit-text-stroke: 0.5px black; */
 }
   /* Gradient Legend (temperature scale) */
   .legend {
@@ -79,4 +80,91 @@
     justify-content: space-between;
     height: 200px; /* match bar height */
   }
-  
+/* Add these accessible styles */
+.accessible-marker {
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.25rem !important;
+  min-height: 44px !important; /* WCAG minimum touch target */
+  min-width: 44px !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+}
+
+.accessible-marker:hover,
+.accessible-marker:focus {
+  transform: scale(1.1) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+  outline: 3px solid #0066cc !important;
+  outline-offset: 2px !important;
+}
+
+.accessible-marker:focus-visible {
+  outline: 3px solid #0066cc !important;
+  outline-offset: 2px !important;
+}
+
+.temp-symbol {
+  font-size: 1rem !important;
+  margin-right: 0.2rem !important;
+}
+
+.temp-value {
+  font-weight: bold !important;
+  font-size: 1rem !important;
+}
+
+/* Screen reader only content */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .temp-label {
+    border: 2px solid currentColor !important;
+    background-color: ButtonFace !important;
+    color: ButtonText !important;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .accessible-marker {
+    transition: none !important;
+  }
+  
+  .accessible-marker:hover,
+  .accessible-marker:focus {
+    transform: none !important;
+  }
+}
+
+/* Temperature category styles for additional visual context */
+.temp-label[data-temp-category="very-cold"] {
+  border-left: 4px solid #0066cc !important;
+}
+
+.temp-label[data-temp-category="cold"] {
+  border-left: 4px solid #4d79a6 !important;
+}
+
+.temp-label[data-temp-category="cool"] {
+  border-left: 4px solid #7ea6d1 !important;
+}
+
+.temp-label[data-temp-category="warm"] {
+  border-left: 4px solid #ff9500 !important;
+}
+
+.temp-label[data-temp-category="hot"] {
+  border-left: 4px solid #ff3b30 !important;
+}