Merge pull request #19 from concord-consortium/188059329-lat-long-ent…

…ry-fields

Add Lat/Long buttons and input fields

src/components/square-button.scss

@@ -0,0 +1,12 @@
+.square-button {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #177991;
+  border-radius: 3px;
+  border: 1px solid #177991;
+  background-color: white;
+  cursor: pointer;
+}

src/components/square-button.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import "./square-button.scss";
+
+interface ISquareButtonProps {
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+export const SquareButton = (props: ISquareButtonProps) => {
+  const { children, onClick } = props;
+  return (
+    <button onClick={onClick} className="square-button">
+      { children }
+    </button>
+  );
+}

src/grasp-seasons/components/seasons.scss

@@ -143,6 +143,27 @@ body {
   .long-lat-sliders {
     margin-top: 26px;
     width: 220px;
+
+    .slider-container {
+      margin-bottom: 30px;
+
+      .top-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 17px;
+
+        input {
+          border-radius: 3px;
+          border: solid 1px rgba(23, 121, 145, 0.75);
+          background-color: #fff;
+          width: 37px;
+          height: 24px;
+          padding: 3px 10px;
+        }
+      }
+    }
+
   }
 
   .btn {

src/grasp-seasons/components/seasons.tsx

@@ -6,11 +6,14 @@ import MyLocations from "./my-locations";
 import getURLParam from "../utils/utils";
 import OrbitViewComp from "./orbit-view-comp";
 import RaysViewComp from "./rays-view-comp";
+import { SquareButton } from "../../components/square-button";
 import t, { Language } from "../translation/translate";
 import { ISimState } from "../types";
 import { useAnimation } from "../hooks/use-animation";
 import { ILocation } from "../../types";
 
+import ForwardBackIcon from "../../assets/images/forward-back-icon.svg";
+
 import "./seasons.scss";
 
 const ANIM_SPEED = 0.02;
@@ -44,7 +47,9 @@ function capitalize(string: string) {
 }
 
 function formatLatLongNumber(value: number) {
-  return value.toFixed(5);
+  // This function ensures that the number is formatted up to 5 decimal points and removes any trailing zeros and
+  // the decimal point if not necessary.
+  return value.toFixed(2).replace(/\.?0+$/, "");
 }
 
 interface IProps {
@@ -142,24 +147,6 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
     return `${getMonth(date)} ${date.getDate()}`;
   };
 
-  const getFormattedLat = () => {
-    let dir = "";
-    const lat = simState.lat;
-    if (lat > 0) dir = t("~DIR_NORTH", simLang);
-    else if (lat < 0) dir = t("~DIR_SOUTH", simLang);
-    const _latitude = Math.abs(lat).toFixed(2);
-    return `${_latitude}°${dir}`;
-  };
-
-  const getFormattedLong = () => {
-    let dir = "";
-    const lng = simState.long;
-    if (lng > 0) dir = t("~DIR_EAST", simLang);
-    else if (lng < 0) dir = t("~DIR_WEST", simLang);
-    const long = Math.abs(lng).toFixed(2);
-    return `${long}°${dir}`;
-  };
-
   // Event handlers
   const handleSimStateChange = (newState: Partial<ISimState>) => {
     setSimState(prevState => ({ ...prevState, ...newState }));
@@ -189,12 +176,34 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
     setLocationSearch("");
   };
 
+  const handleLatInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setLatitude(event.target.value);
+    setLocationSearch("");
+  }
+
+  const handleLatIncrement = (increment: number) => () => {
+    setSimState(prevState => ({ ...prevState, lat: prevState.lat + increment }));
+    setLatitude(formatLatLongNumber(simState.lat + increment));
+    setLocationSearch("");
+  }
+
   const handleLongSliderChange = (event: any, ui: any) => {
     setSimState(prevState => ({ ...prevState, long: ui.value }));
     setLongitude(formatLatLongNumber(ui.value));
     setLocationSearch("");
   };
 
+  const handleLongInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setLongitude(event.target.value);
+    setLocationSearch("");
+  }
+
+  const handleLongIncrement = (increment: number) => () => {
+    setSimState(prevState => ({ ...prevState, long: prevState.long + increment }));
+    setLongitude(formatLatLongNumber(simState.long + increment));
+    setLocationSearch("");
+  }
+
   const handleTiltSliderChange = (event: any, ui: any) => {
     setSimState(prevState => ({ ...prevState, cameraTiltAngle: ui.value }));
   };
@@ -297,7 +306,13 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
           onLocationChange={handleMyLocationChange}
         />
         <div className="long-lat-sliders">
-          <label>{ t("~LATITUDE", simLang) }: { getFormattedLat() }</label>
+          <div className="slider-container">
+            <div className="top-row">
+              <SquareButton onClick={handleLatIncrement(-5)}><ForwardBackIcon /></SquareButton>
+              <label>{ t("~LATITUDE", simLang) }</label>
+              <input type="text" value={latitude} onChange={handleLatInputChange} />
+              <SquareButton onClick={handleLatIncrement(5)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+            </div>
           <Slider
             value={simState.lat}
             min={-90}
@@ -307,16 +322,24 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             log={log}
             logId="Latitude"
           />
-          <label>{ t("~LONGITUDE", simLang) }: { getFormattedLong() }</label>
-          <Slider
-            value={simState.long}
-            min={-180}
-            max={180}
-            step={1}
-            slide={handleLongSliderChange}
-            log={log}
-            logId="Longitude"
-          />
+          </div>
+          <div className="slider-container">
+            <div className="top-row">
+              <SquareButton onClick={handleLongIncrement(-5)}><ForwardBackIcon /></SquareButton>
+              <label>{ t("~LONGITUDE", simLang) }</label>
+              <input type="text" value={longitude} onChange={handleLongInputChange} />
+              <SquareButton onClick={handleLongIncrement(5)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+            </div>
+            <Slider
+              value={simState.long}
+              min={-180}
+              max={180}
+              step={1}
+              slide={handleLongSliderChange}
+              log={log}
+              logId="Longitude"
+            />
+          </div>
         </div>
       </div>
     </div>