Merge pull request #60 from UTSC-CSCC01-Software-Engineering-I/updates

Updates

Author: Adrit-3001

frontend/src/components/MapComponent.jsx

@@ -191,34 +191,58 @@ export default function MapComponent() {
             const t = item.temp || item.Result;
             const name = item.siteName || item.Label || `User Point ${i + 1}`;
 
-            // Get current unit and format temperature
+            // determine age (fallback to createdAt for user‐points)
+            const rawTime = item.timestamp || item.createdAt || item.created_at;
+            const ts = new Date(rawTime).getTime();
+            const isStale = !isNaN(ts) && (Date.now() - ts) > 2 * 24 * 60 * 60 * 1000; // older than 2 days
+
             const currentUnit = UnitManager.getUnit();
             const formattedTemp = formatTemperature(t, currentUnit);
-            const tempColor = getAccessibleTemperatureColor(t, 'C'); // Use accessible color function
+            const tempColor = getAccessibleTemperatureColor(t, 'C');
             const tempCategory = getTemperatureCategory(t);
-            const tempSymbol = getTemperatureSymbol(t);
 
-            console.log(`Plotting [${i}]: ${name} @ ${lat},${lon} = ${formattedTemp}`);
+            // outline for stale, grey text for stale
+            const outlineStyle = isStale ? 'border: 2px solid grey;' : '';
+            const valueColor   = isStale ? 'color: grey;' : '';
+
+            // determine stale styling
+            const bgColor = isStale ? '#ffffff20' : tempColor;
+            const staleFilter = isStale
+              ? 'backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);'
+              : '';
 
             const icon = L.divIcon({
               className: 'custom-temp-marker',
               html: `
                 <div 
-                  class="temp-label accessible-marker" 
-                  style="background-color: ${tempColor};"
+                  class="temp-label accessible-marker${isStale ? ' stale' : ''}"
+                  style="
+                    background-color: ${bgColor};
+                    ${outlineStyle}
+                    ${staleFilter}
+                  "
                   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(' ', '-')}"
+                  aria-label="Water temperature ${formattedTemp} at ${name}. ${isStale ? 'Data older than 2 days.' : `Category: ${tempCategory}. Press Enter or Space to view details.`}"
+                  data-temp-category="${tempCategory.toLowerCase().replace(/ /g,'-')}"
                 >
-                  <span class="temp-value">${formattedTemp}</span>
+                  <span class="temp-value" style="${valueColor}">${formattedTemp}</span>
                 </div>
               `,
-              iconSize: [50, 40], // Slightly larger for better touch targets
+              iconSize: [50, 40],
               iconAnchor: [25, 20],
             });
 
-            const marker = L.marker([lat, lon], { icon }).addTo(map);
+            const marker = L.marker([lat, lon], { icon }).addTo(mapInstanceRef.current);
+
+            // bump this marker to the top on hover
+            marker.on('mouseover', () => {
+              marker.setZIndexOffset(1000);
+            });
+            // reset when mouse leaves
+            marker.on('mouseout', () => {
+              marker.setZIndexOffset(0);
+            });
 
             // Add function to announce to screen readers (this was missing)
             function announceToScreenReader(message) {
@@ -240,24 +264,17 @@ export default function MapComponent() {
 
             // 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);
-              }
+              // add prefix for grey (stale) points
+              const labelPrefix = isStale ? '<strong>OLD:</strong> ' : '';
 
               const historicalData = await fetchHistoricalData(name);
+              const popupOffset = [17, -32];
 
-              // add once at top of click‐handler so you can reuse
-              const popupOffset = [17, -32]; // x=0 (center), y=−45px (above marker)
-
+              // no historical data
               if (historicalData.length === 0) {
                 marker.bindPopup(`
                   <div role="dialog" aria-labelledby="popup-title-${i}">
-                    <h3 id="popup-title-${i}">${name}</h3>
+                    <h3 id="popup-title-${i}">${labelPrefix}${name}</h3>
                     <p>No historical data available</p>
                     <p>Current temperature: ${formattedTemp} (${tempCategory})</p>
                   </div>

frontend/src/styles/MapView.css

@@ -280,3 +280,8 @@
     max-height: 60vh !important;
   }
 }
+
+/* at the end of the file, override any data-temp-category borders on stale points */
+.temp-label.stale {
+  border-left: none !important;
+}