Merge pull request #20 from concord-consortium/188059193-day-slider-b…

…uttons-2

Add day/month inc/dec buttons

src/components/App.tsx

@@ -11,7 +11,7 @@ import { Header } from "./header";
 import "../assets/scss/App.scss";
 
 export const App: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"location" | "simulation">("simulation");
+  const [activeTab, setActiveTab] = useState<"location" | "simulation">("location");
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [dayOfYear, setDayOfYear] = useState<string>("280");

src/grasp-seasons/components/seasons.scss

@@ -125,9 +125,20 @@ body {
     height: 20px;
   }
 
-  .day {
-    margin-top: 20px;
-    margin-bottom: 12px;
+  .day-row {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 290px;
+
+    .day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 130px;
+    }
   }
 
   .day-slider {

src/grasp-seasons/components/seasons.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, ChangeEvent, useCallback } from "react";
 import Slider from "./slider/slider";
-import { getSolarNoonIntensity, isValidLatitude, isValidLongitude } from "../../utils/daylight-utils";
+import { changeMonthOfDayOfYear, getSolarNoonIntensity, isValidLatitude, isValidLongitude } from "../../utils/daylight-utils";
 import InfiniteDaySlider from "./slider/infinite-day-slider";
 import MyLocations from "./my-locations";
 import getURLParam from "../utils/utils";
@@ -13,6 +13,7 @@ import { useAnimation } from "../hooks/use-animation";
 import { ILocation } from "../../types";
 
 import ForwardBackIcon from "../../assets/images/forward-back-icon.svg";
+import ForwardBackJumpIcon from "../../assets/images/forward-back-jump-icon.svg";
 
 import "./seasons.scss";
 
@@ -165,6 +166,21 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
     setSimState(prevState => ({ ...prevState, day: ui.value }));
   };
 
+  const handleDayIncrement = (increment: number) => () => {
+    setSimState(prevState => {
+      // Make sure day is within [0, 364] range
+      const day = (prevState.day + increment + 365) % 365;
+      return { ...prevState, day };
+    });
+  };
+
+  const handleMonthIncrement = (monthIncrement: number) => () => {
+    setSimState(prevState => {
+      const day = changeMonthOfDayOfYear(prevState.day, monthIncrement);
+      return { ...prevState, day };
+    });
+  };
+
   const handleSimCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSimState(prevState => ({ ...prevState, [event.target.name as any as keyof ISimState]: event.target.checked }));
     logCheckboxChange(event);
@@ -274,9 +290,15 @@ const Seasons: React.FC<IProps> = ({ lang = "en_us", initialState = {}, log = (a
             </div>
           </div>
         </div>
-        <div className="day">
-          <label>{ t("~DAY", simLang) }:</label>
-          { getFormattedDay() }
+        <div className="day-row">
+          <SquareButton onClick={handleMonthIncrement(-1)}><ForwardBackJumpIcon /></SquareButton>
+          <SquareButton onClick={handleDayIncrement(-1)}><ForwardBackIcon /></SquareButton>
+          <div className="day">
+            <label>{ t("~DAY", simLang) }:</label>
+            { getFormattedDay() }
+          </div>
+          <SquareButton onClick={handleDayIncrement(1)}><ForwardBackIcon style={{transform: "rotate(180deg"}} /></SquareButton>
+          <SquareButton onClick={handleMonthIncrement(1)}><ForwardBackJumpIcon style={{transform: "rotate(180deg"}} /></SquareButton>
         </div>
         <div className="day-slider">
           <InfiniteDaySlider

src/utils/daylight-utils.ts

@@ -134,3 +134,32 @@ export function isValidLatitude(latitude: string): boolean {
   const parsed = Number(latitude);
   return !isNaN(parsed) && parsed >= -90 && parsed <= 90;
 }
+
+export function changeMonthOfDayOfYear(dayOfYearIndex: number, monthsToAdd: number): number {
+  if (dayOfYearIndex < 0 || dayOfYearIndex >= 365) {
+      throw new Error("dayOfYearIndex must be between 0 and 364");
+  }
+
+  // Days in each month for a leap year
+  const daysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+  // Calculate the current month and the day of the month
+  let accumulatedDays = 0;
+  let currentMonth = 0;
+  for (currentMonth = 0; currentMonth < daysInMonth.length; currentMonth++) {
+      if (dayOfYearIndex < accumulatedDays + daysInMonth[currentMonth]) {
+          break;
+      }
+      accumulatedDays += daysInMonth[currentMonth];
+  }
+
+  const dayOfMonth = dayOfYearIndex - accumulatedDays;
+  let newMonth = (currentMonth + monthsToAdd + 12) % 12;
+
+  let newDayOfYearIndex = dayOfMonth;
+  for (let i = 0; i < newMonth; i++) {
+      newDayOfYearIndex += daysInMonth[i];
+  }
+
+  return newDayOfYearIndex % 365;
+}