Slow Zones Update (#737)

* First Commit

* Comments

common/state/utils/dateStoreUtils.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import type { OverviewDatePresetKey } from '../../constants/dates';
-import { SMALL_DATE_FORMAT, RANGE_PRESETS } from '../../constants/dates';
+import { TODAY_STRING, SMALL_DATE_FORMAT, RANGE_PRESETS } from '../../constants/dates';
 import type { DateStoreSection } from '../../constants/pages';
 import type { QueryParams } from '../../types/router';
 import { getDateParams } from '../../utils/router';
@@ -39,17 +39,24 @@ export const getSelectedDates = (dateConfig: {
   view?: OverviewDatePresetKey;
 }) => {
   const { startDate, endDate, view } = dateConfig;
-  const startDateDayjs = startDate ? dayjs(startDate) : undefined;
-  const endDateDayjs = endDate ? dayjs(endDate) : undefined;
   const viewInput = view ? RANGE_PRESETS[view]?.input : undefined;
   if (viewInput)
     return `${dayjs(viewInput.startDate).format(SMALL_DATE_FORMAT)} - ${dayjs(
       viewInput.endDate
     ).format(SMALL_DATE_FORMAT)}`;
-  if (startDateDayjs && endDateDayjs)
-    return `${startDateDayjs.format(SMALL_DATE_FORMAT)} - ${endDateDayjs.format(
-      SMALL_DATE_FORMAT
-    )}`;
-  if (startDateDayjs) return startDateDayjs.format(SMALL_DATE_FORMAT);
+  if (startDate && endDate) {
+    return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+  }
+
+  if (startDate) return formatDate(startDate);
+
   return undefined;
 };
+
+const formatDate = (date: string) => {
+  return dayjs(date).format(SMALL_DATE_FORMAT);
+};
+
+export const formatDateTodayCheck = (date: string) => {
+  return date === TODAY_STRING ? 'Today' : formatDate(date);
+};

modules/slowzones/SlowZonesDetails.tsx

@@ -21,6 +21,7 @@ import { SlowZonesSegmentsWrapper } from './SlowZonesSegmentsWrapper';
 import { TotalSlowTimeWrapper } from './TotalSlowTimeWrapper';
 import { SlowZonesMap } from './map';
 import { DirectionObject } from './constants/constants';
+import { SlowZonesWidgetTitle } from './SlowZonesWidgetTitle';
 dayjs.extend(utc);
 
 export function SlowZonesDetails() {
@@ -72,7 +73,7 @@ export function SlowZonesDetails() {
           </div>
         </WidgetDiv>
         <WidgetDiv>
-          <WidgetTitle title="Line map" />
+          <SlowZonesWidgetTitle />
           <div className="relative flex flex-col">
             {allSlow.data && speedRestrictions.data && canShowSlowZonesMap ? (
               <SlowZonesMap

modules/slowzones/SlowZonesWidgetTitle.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import type { Line } from '../../common/types/lines';
+import { useBreakpoint } from '../../common/hooks/useBreakpoint';
+import { useDelimitatedRoute } from '../../common/utils/router';
+import { formatDateTodayCheck } from '../../common/state/utils/dateStoreUtils';
+
+interface SlowZonesWidgetTitle {
+  line?: Line;
+}
+
+export const SlowZonesWidgetTitle: React.FC<SlowZonesWidgetTitle> = () => {
+  const isMobile = !useBreakpoint('md');
+  const { query } = useDelimitatedRoute();
+  const date = query.endDate ? formatDateTodayCheck(query.endDate) : undefined;
+
+  return (
+    <div className="flex w-full flex-col items-baseline justify-between gap-x-4 gap-y-1 pb-1 text-base md:flex-row md:text-xl">
+      <div className="flex w-full flex-col md:w-auto ">
+        <div className="flex w-full flex-row items-baseline justify-between">
+          <h2
+            className={classNames(
+              'font-semibold',
+              'whitespace-nowrap leading-tight text-stone-800'
+            )}
+          >
+            Line map
+          </h2>
+          {isMobile && <Date date={date} />}
+        </div>
+      </div>
+      <div className="flex w-full flex-shrink flex-col overflow-hidden md:items-end">
+        {!isMobile && <Date date={date} />}
+      </div>
+    </div>
+  );
+};
+
+const Date = ({ date }: { date?: string }) => {
+  return <p className="rounded-md bg-stone-500 px-3 py-1 text-xs italic text-stone-100">{date}</p>;
+};

modules/slowzones/map/SlowZonesMap.tsx

@@ -8,6 +8,7 @@ import type { SlowZonesLineName } from '../types';
 
 import type { SegmentLabel } from '../../../common/components/maps/LineMap';
 import { getSlowZoneOpacity } from '../../../common/utils/slowZoneUtils';
+import { useDelimitatedRoute } from '../../../common/utils/router';
 import { segmentSlowZones } from './segment';
 import { SlowSegmentLabel } from './SlowSegmentLabel';
 import { SlowZonesTooltip } from './SlowZonesTooltip';
@@ -69,16 +70,19 @@ export const SlowZonesMap: React.FC<SlowZonesMapProps> = ({
     return createDefaultDiagramForLine(lineName, { pxPerStation: 15 });
   }, [lineName]);
 
+  const { query } = useDelimitatedRoute();
+  const { endDate } = query;
+
   const { segments } = useMemo(
     () =>
       segmentSlowZones({
         slowZones,
         speedRestrictions,
         lineName: line.short,
-        date: new Date(),
+        date: endDate ? new Date(endDate) : new Date(),
         diagram,
       }),
-    [slowZones, speedRestrictions, line, diagram]
+    [slowZones, speedRestrictions, line, diagram, endDate]
   );
 
   const getSegmentsForSlowZones = ({ isHorizontal }: { isHorizontal: boolean }) => {