Added labels

Author: Yadro

src/components/ProgressBar/ProgressBar.tsx

@@ -2,18 +2,22 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { observer } from 'mobx-react';
 import { Slider } from 'antd';
 import { isSameDay } from 'date-fns';
+import { createUseStyles } from 'react-jss';
 
 import rootStore from '../../modules/RootStore';
 import { useInterval } from '../../hooks/UseInterval';
 import { getStartWorkingTime, getTimeItems } from '../../helpers/TaskHelper';
 import TaskTimeService from '../../services/TaskTimeService';
+import { toTimeFormat } from '../../helpers/DateTime';
 
 const { tasksStore, settingsStore } = rootStore;
 
 function ProgressBar() {
   const { settings } = settingsStore;
   const workingHoursMs = settings.numberOfWorkingHours;
 
+  const style = useStyle();
+
   const [dayUpdateEveryDay, setDayUpdateEveryDay] = useState(new Date());
   const [timer, setTimer] = useState(new Date());
 
@@ -26,7 +30,7 @@ function ProgressBar() {
   }, [dayUpdateEveryDay]);
 
   useInterval(shouldDayUpdate);
-
+  1 + 1;
   const tasks = useMemo(() => tasksStore.getTasksByDate(dayUpdateEveryDay), [
     tasksStore.tasks,
     dayUpdateEveryDay,
@@ -45,7 +49,7 @@ function ProgressBar() {
     timeItems,
   ]);
 
-  const progress = useMemo(
+  const { estimatedWorkingTimeEnd, progress } = useMemo(
     () =>
       TaskTimeService.getDayProgress(
         timeRangeItems,
@@ -55,9 +59,25 @@ function ProgressBar() {
     [timer, timeRangeItems, workingTimeStart, workingHoursMs]
   );
 
-  console.log(progress);
+  const marks = useMemo(
+    () => ({
+      0: toTimeFormat(workingTimeStart),
+      100: toTimeFormat(estimatedWorkingTimeEnd),
+    }),
+    [timer, workingTimeStart, estimatedWorkingTimeEnd]
+  );
 
-  return <Slider value={progress} />;
+  return <Slider marks={marks} value={progress} className={style.slider} />;
 }
 
+const useStyle = createUseStyles({
+  slider: {
+    '& .ant-slider-mark': {
+      '& .ant-slider-mark-text': {
+        color: 'white',
+      },
+    },
+  },
+});
+
 export default observer(ProgressBar);

src/services/TaskTimeService.ts

@@ -5,14 +5,26 @@ import {
 } from '../helpers/DateTime';
 import { ITimeRangeModel } from '../modules/tasks/models/TaskModel';
 
+export type DayProgress = {
+  progress: number;
+  durationMs: number;
+  restMs: number;
+  estimatedWorkingTimeEnd: Date | undefined;
+};
+
 const TaskTimeService = {
   getDayProgress(
     timeItems: ITimeRangeModel[],
     workingTimeStart: Date | undefined,
     workingHoursMs: number
-  ) {
+  ): DayProgress {
     if (!workingTimeStart) {
-      return 0;
+      return {
+        progress: 0,
+        durationMs: 0,
+        restMs: 0,
+        estimatedWorkingTimeEnd: undefined,
+      };
     }
 
     const durationMs = calcDuration(timeItems);
@@ -23,13 +35,19 @@ const TaskTimeService = {
       workingHoursMs
     );
 
+    let progress = 0;
     if (estimatedWorkingTimeEnd) {
       const durationWorkDayMs =
         estimatedWorkingTimeEnd.getTime() - workingTimeStart.getTime() || 1;
-      return (durationMs * 100) / durationWorkDayMs;
+      progress = (durationMs * 100) / durationWorkDayMs;
     }
 
-    return 0;
+    return {
+      progress,
+      durationMs,
+      restMs,
+      estimatedWorkingTimeEnd,
+    };
   },
 };