Display rest time

Author: Yadro

src/helpers/DateTime.ts

@@ -14,6 +14,8 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   if (!s) {
     return '0s';
   }
+  const sign = s < 0 ? '-' : '';
+  s = Math.abs(s);
   const ms = s % 1000;
   s = (s - ms) / 1000;
   const secs = s % 60;
@@ -30,7 +32,7 @@ export function msToTime(s: number, showSeconds: boolean = true) {
   if (hrs === 0 && mins === 0) {
     return onlySecs(secs);
   }
-  return `${timePad(hrs)}:${timePad(mins)}`;
+  return `${sign}${timePad(hrs)}:${timePad(mins)}`;
 }
 
 export function calcDuration(taskTime: ITimeRangeModel[]): number {
@@ -65,7 +67,7 @@ export function getTime(date: Date | undefined) {
   return format(date, TIME_FORMAT);
 }
 
-const EIGHT_HOURS = 8 * 60 * 60 * 1000;
+export const EIGHT_HOURS = 8 * 60 * 60 * 1000;
 
 export function estimateWorkingTimeEnd(
   startDate: Date | undefined,

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

@@ -5,6 +5,7 @@ import { Space } from 'antd';
 import * as TaskHooks from '../../../../hooks/TaskHooks';
 import TaskTimeItemModel from '../../../../models/TaskTimeItemModel';
 import {
+  EIGHT_HOURS,
   estimateWorkingTimeEnd,
   getTime,
   msToTime,
@@ -20,14 +21,13 @@ const TotalHours = observer((props: TotalHoursProps) => {
   const { timeItems } = props;
   const classes = useStyle();
 
-  console.log();
-
   const { durationMs, gapsMs } = TaskHooks.useTimeItemsDuration(timeItems);
   const startWorkingTime = TaskHooks.useStartWorkingTime(timeItems);
   const estimatedWorkingTimeEnd = estimateWorkingTimeEnd(
     startWorkingTime,
     gapsMs
   );
+  const restHoursMs = EIGHT_HOURS - durationMs;
 
   if (!timeItems.length) {
     return null;
@@ -48,6 +48,7 @@ const TotalHours = observer((props: TotalHoursProps) => {
         <span className={clsx('mi mi-notifications', classes.icon)} />
         <span>{getTime(estimatedWorkingTimeEnd)}</span>
       </div>
+      <span>{msToTime(restHoursMs, false)}</span>
     </Space>
   );
 });