Merge pull request #40 from concord-consortium/186719430-highlight-st…

…ation-selection 186719430 highlight station selection
concord-consortium · Jan 30, 2024 · 3720609 · 3720609
2 parents d8ab2ba + 2b5a3e7
commit 3720609
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/location-picker.scss b/src/components/location-picker.scss
@@ -93,6 +93,9 @@
             color: $teal-dark-75;
             min-width: 120px;
           }
+          &.station-candidate {
+            background-color: #ddeff1;
+          }
           &.selected-station {
             background-color: $teal-medium;
           }

diff --git a/src/components/location-picker.tsx b/src/components/location-picker.tsx
@@ -22,6 +22,7 @@ export const LocationPicker = () => {
   const [stationPossibilities, setStationPossibilities] = useState<IStation[]>([]);
   const [showStationSelectionList, setShowStationSelectionList] = useState(false);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [hoveredStationIndex, setStationHoveredIndex] = useState<number | null>(null);
   const [arrowedIndex, setArrowedIndex] = useState<number>(-1);
   const [distanceWidth, setDistanceWidth] = useState<number>(0);
   const locationDivRef = useRef<HTMLDivElement>(null);
@@ -150,7 +151,7 @@ export const LocationPicker = () => {
       draft.weatherStation = station;
     });
     setShowStationSelectionList(false);
-    setHoveredIndex(null);
+    setStationHoveredIndex(null);
     setArrowedIndex(-1);
   };
 
@@ -195,6 +196,10 @@ export const LocationPicker = () => {
     setHoveredIndex(index);
   };
 
+  const handleStationHover = (index: number | null) => {
+    setStationHoveredIndex(index);
+  };
+
   const handleLocationInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     const target = e.target;
     if (target.value !== "") {
@@ -314,8 +319,9 @@ export const LocationPicker = () => {
                   const stationDistanceText = units === "standard" ? convertDistanceToStandard(station.distance) : station.distance;
                   return (
                     <li key={`${station}-${idx}`} data-ix={`${idx}`} value={station.station.ICAO}
-                        className={classnames("station-selection", {"selected-station": station.station.name === state.weatherStation?.name})}
-                        onMouseOver={()=>handleLocationHover(idx)} onClick={(e)=>handleStationSelection(e)} onKeyDown={(e)=>handleStationSelectionKeyDown(e,idx)}>
+                        className={classnames("station-selection", {"station-candidate": hoveredStationIndex === idx},
+                                    {"selected-station": (station.station.name === state.weatherStation?.name && hoveredStationIndex === null)})}
+                        onMouseOver={()=>handleStationHover(idx)} onClick={(e)=>handleStationSelection(e)} onKeyDown={(e)=>handleStationSelectionKeyDown(e,idx)}>
                       <span className="station-distance" ref={idx === 0 ? firstStationListedRef : null} style={{width: distanceWidth}}>
                         {stationDistanceText.toFixed(1)} {unitDistanceText} {idx === 0 && `from ${state.location?.name}`}
                       </span>