Start, duration, gaps, estimatedEnd

src/helpers/DateTime.ts

@@ -1,4 +1,6 @@
 import { ITimeRangeModel } from '../models/TaskModel';
+import { format } from 'date-fns';
+import { mapPrevCurrent } from './MapPrevCurrent';
 
 function timePad(time: number): string {
   return String(time).padStart(2, '0');
@@ -42,3 +44,34 @@ export function calcDuration(taskTime: ITimeRangeModel[]): number {
     return prev + timeRange.end.getTime() - timeRange.start.getTime();
   }, 0);
 }
+
+export function calcDurationGaps(taskTime: ITimeRangeModel[]): number {
+  let result = 0;
+  mapPrevCurrent(taskTime, (prev, cur) => {
+    if (prev?.end) {
+      result += cur.start.getTime() - prev.end.getTime();
+    }
+  });
+  return result;
+}
+
+const TIME_FORMAT = 'HH:mm';
+const NO_TIME = '--:--';
+
+export function getTime(date: Date | undefined) {
+  if (!date) {
+    return NO_TIME;
+  }
+  return format(date, TIME_FORMAT);
+}
+
+const EIGHT_HOURS = 8 * 60 * 60 * 1000;
+
+export function estimateWorkingTimeEnd(
+  startDate: Date | undefined,
+  restTimeMs: number
+): Date | undefined {
+  return startDate
+    ? new Date(startDate.getTime() + restTimeMs + EIGHT_HOURS)
+    : undefined;
+}

src/hooks/TaskHooks.ts

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isBefore } from 'date-fns';
 
-import { calcDuration, msToTime } from '../helpers/DateTime';
+import { calcDuration, calcDurationGaps, msToTime } from '../helpers/DateTime';
 import TaskModel, { ITimeRangeModel } from '../models/TaskModel';
 import TaskTimeItemModel from '../models/TaskTimeItemModel';
 
@@ -31,25 +32,33 @@ export function useTaskDuration(model: TaskModel | undefined) {
   return duration;
 }
 
-export function useTimeItemsDuration(
-  taskTime: TaskTimeItemModel[],
-  showSeconds: boolean = false
-) {
-  const [duration, setDuration] = useState<string>('');
+export function useTimeItemsDuration(taskTime: TaskTimeItemModel[]) {
+  const [durationMs, setDurationMs] = useState<number>(0);
+  const [gapsMs, setGapsMs] = useState<number>(0);
   const intervalRef = useRef<NodeJS.Timeout>();
 
   const calcTaskDuration = useCallback(
-    () => msToTime(calcDuration(taskTime.map((t) => t.time)), showSeconds),
-    [showSeconds, taskTime]
+    () => calcDuration(taskTime.map((t) => t.time)),
+    [taskTime]
+  );
+
+  const calcTaskGapsDuration = useCallback(
+    () => calcDurationGaps(taskTime.map((t) => t.time)),
+    [taskTime]
   );
 
+  const setTimes = useCallback(() => {
+    setDurationMs(calcTaskDuration());
+    setGapsMs(calcTaskGapsDuration());
+  }, [calcTaskDuration, calcTaskGapsDuration]);
+
   useEffect(() => {
-    setDuration(calcTaskDuration());
+    setTimes();
 
     const haveActiveTime = taskTime.some((t) => !t.time.end);
     if (haveActiveTime) {
       intervalRef.current = setInterval(() => {
-        setDuration(calcTaskDuration());
+        setTimes();
       }, 1000);
     }
 
@@ -58,9 +67,12 @@ export function useTimeItemsDuration(
         clearInterval(intervalRef.current);
       }
     };
-  }, [calcTaskDuration, taskTime]);
+  }, [setTimes, taskTime]);
 
-  return duration;
+  return {
+    durationMs,
+    gapsMs,
+  };
 }
 
 export function useTimeRangeDuration(timeRange: ITimeRangeModel | undefined) {
@@ -93,3 +105,17 @@ export function useTimeRangeDuration(timeRange: ITimeRangeModel | undefined) {
 
   return duration;
 }
+
+export function useStartWorkingTime(
+  timeItems: TaskTimeItemModel[]
+): Date | undefined {
+  return useMemo(() => {
+    let minTime: Date | undefined;
+    timeItems.forEach((time) => {
+      if (!minTime || isBefore(time.time.start, minTime)) {
+        minTime = time.time.start;
+      }
+    });
+    return minTime;
+  }, [timeItems]);
+}

src/screens/hours/components/TotalHours/TotalHours.tsx

@@ -1,14 +1,33 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import { Space } from 'antd';
 
 import * as TaskHooks from '../../../../hooks/TaskHooks';
 import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
+import {
+  estimateWorkingTimeEnd,
+  getTime,
+  msToTime,
+} from '../../../../helpers/DateTime';
 
 interface TotalHoursProps {
   timeItems: TaskTimeItemModel[];
 }
 
 export default observer(function TotalHours({ timeItems }: TotalHoursProps) {
-  const duration = TaskHooks.useTimeItemsDuration(timeItems);
-  return <div>{duration}</div>;
+  const { durationMs, gapsMs } = TaskHooks.useTimeItemsDuration(timeItems);
+  const startWorkingTime = TaskHooks.useStartWorkingTime(timeItems);
+  const estimatedWorkingTimeEnd = estimateWorkingTimeEnd(
+    startWorkingTime,
+    gapsMs
+  );
+
+  return (
+    <Space>
+      <span>{getTime(startWorkingTime)}</span>
+      <span>{msToTime(durationMs, false)}</span>
+      <span>{msToTime(gapsMs, false)}</span>
+      <span>{getTime(estimatedWorkingTimeEnd)}</span>
+    </Space>
+  );
 });