V2 beta3 (#338)

* chore: upgrade local build documentation

* style: keep scrolling event in screen

* feat: delay is time entry

* refactor: remove unused

* refactor: remove unused

* refactor: batch store updates

* refactor: virtually remove cap on events

* refactor: style and behaviour tweaks to event block

* style: tweaks on schedules

* chore: remove sentry from server

* style: reorder menu

* chore: update docs

apps/client/src/common/utils/__tests__/dateConfig.test.js

@@ -2,9 +2,9 @@ import {
   forgivingStringToMillis,
   formatDisplay,
   isTimeString,
+  millisToDelayString,
   millisToMinutes,
   millisToSeconds,
-  timeStringToMillis,
 } from '../dateConfig';
 
 describe('test string from formatDisplay function', () => {
@@ -170,88 +170,6 @@ describe('test millisToMinutes function', () => {
   });
 });
 
-describe('test timeStringToMillis function', () => {
-  it('test with null', () => {
-    const t = { val: null, result: 0 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 00:00:00', () => {
-    const t = { val: '00:00:00', result: 0 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with -00:00:00', () => {
-    const t = { val: '-00:00:00', result: 0 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 00:00:01', () => {
-    const t = { val: '00:00:01', result: 1000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with -00:00:01', () => {
-    const t = { val: '-00:00:01', result: 1000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 01:00:01', () => {
-    const t = { val: '01:00:01', result: 3601000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 24:00:01', () => {
-    const t = { val: '24:00:01', result: 86401000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 00:00:5', () => {
-    const t = { val: '00:00:5', result: 5000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 00:1:00', () => {
-    const t = { val: '00:1:00', result: 60000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 1:00:00', () => {
-    const t = { val: '1:00:00', result: 3600000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 1', () => {
-    const t = { val: '1', result: 1000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 120', () => {
-    const t = { val: '120', result: 120000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 56', () => {
-    const t = { val: '56', result: 56000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 2:3', () => {
-    const t = { val: '2:3', result: 123000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 02:3', () => {
-    const t = { val: '02:3', result: 123000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-
-  it('test with 2:03', () => {
-    const t = { val: '2:03', result: 123000 };
-    expect(timeStringToMillis(t.val)).toBe(t.result);
-  });
-});
-
 describe('test isTimeString() function', () => {
   it('it validates time strings', () => {
     const ts = ['2', '2:10', '2:10:22'];
@@ -450,3 +368,59 @@ describe('test forgivingStringToMillis()', () => {
     });
   });
 });
+
+describe('millisToDelayString()', () => {
+  it('returns null for null values', () => {
+    expect(millisToDelayString(null)).toBeNull();
+  });
+  it('returns null 0', () => {
+    expect(millisToDelayString(0)).toBeNull();
+  });
+  describe('converts values in seconds', () => {
+    it(`shows a simple string with value in seconds`, () => {
+      expect(millisToDelayString(10000)).toBe('+10sec');
+    });
+    it(`... and its negative counterpart`, () => {
+      expect(millisToDelayString(-10000)).toBe('-10sec');
+    });
+
+    const underAMinute = [1, 500, 1000, 6000, 55000, 59999];
+    underAMinute.forEach((value) => {
+      it(`handles ${value}`, () => {
+        expect(millisToDelayString(value)?.endsWith('sec')).toBe(true);
+      });
+    });
+    expect(millisToDelayString(null)).toBeNull();
+  });
+
+  describe('converts values in minutes', () => {
+    it(`shows a simple string with value in minutes`, () => {
+      expect(millisToDelayString(720000)).toBe('+12min');
+    });
+    it(`... and its negative counterpart`, () => {
+      expect(millisToDelayString(-720000)).toBe('-12min');
+    });
+    it(`shows a simple string with value in minutes and seconds`, () => {
+      expect(millisToDelayString(630000)).toBe('+00:10:30');
+    });
+    it(`... and its negative counterpart`, () => {
+      expect(millisToDelayString(-630000)).toBe('-00:10:30');
+    });
+
+    const underAnHour = [60000, 360000, 720000];
+    underAnHour.forEach((value) => {
+      it(`handles ${value}`, () => {
+        expect(millisToDelayString(value)?.endsWith('min')).toBe(true);
+      });
+    });
+  });
+
+  describe('converts values with full time string', () => {
+    it(`positive added time`, () => {
+      expect(millisToDelayString(45015000)).toBe('+12:30:15');
+    });
+    it(`negative added time`, () => {
+      expect(millisToDelayString(-45015000)).toBe('-12:30:15');
+    });
+  });
+});

apps/client/src/common/utils/dateConfig.ts

@@ -1,3 +1,5 @@
+import { formatFromMillis } from 'ontime-utils';
+
 import { mth, mtm, mts } from './timeConstants';
 
 export const timeFormat = 'HH:mm';
@@ -47,20 +49,6 @@ export const millisToMinutes = (millis: number): number => {
   return millis < 0 ? Math.ceil(millis / mtm) : Math.floor(millis / mtm);
 };
 
-/**
- * @description Converts timestring to milliseconds
- * @param {string} string - time string "23:00:12"
- * @returns {number} Amount in milliseconds
- */
-export const timeStringToMillis = (string: string): number => {
-  if (typeof string !== 'string') return 0;
-  const time = string.split(':');
-  if (time.length === 1) return Math.abs(time[0] * mts);
-  if (time.length === 2) return Math.abs(time[0]) * mtm + time[1] * mts;
-  if (time.length === 3) return Math.abs(time[0]) * mth + time[1] * mtm + time[2] * mts;
-  return 0;
-};
-
 /**
  * @description Validates a time string
  * @param {string} string - time string "23:00:12"
@@ -150,3 +138,20 @@ export const forgivingStringToMillis = (value: string, fillLeft = true): number
 
   return millis;
 };
+
+export function millisToDelayString(millis: number | null): undefined | string | null {
+  if (millis == null || millis === 0) {
+    return null;
+  }
+
+  const isNegative = millis < 0;
+  const absMillis = Math.abs(millis);
+
+  if (absMillis < mtm) {
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')}sec`;
+  } else if (absMillis < mth && absMillis % mtm === 0) {
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')}min`;
+  } else {
+    return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
+  }
+}

apps/client/src/common/utils/time.ts

@@ -1,6 +1,5 @@
-import { DateTime } from 'luxon';
 import { Settings } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { formatFromMillis, millisToString } from 'ontime-utils';
 
 import { APP_SETTINGS } from '../api/apiConstants';
 import { ontimeQueryClient } from '../queryClient';
@@ -39,7 +38,6 @@ type FormatOptions = {
 };
 
 /**
- /**
  * @description utility function to format a date in 12 or 24 hour format
  * @param {number | null} milliseconds
  * @param {object} [options]
@@ -54,7 +52,5 @@ export const formatTime = (milliseconds: number | null, options: FormatOptions,
   }
   const timeFormat = resolver();
   const { showSeconds = false, format: formatString = 'hh:mm a' } = options || {};
-  return timeFormat === '12'
-    ? DateTime.fromMillis(milliseconds).toUTC().toFormat(formatString)
-    : millisToString(milliseconds, showSeconds);
+  return timeFormat === '12' ? formatFromMillis(milliseconds, formatString) : millisToString(milliseconds, showSeconds);
 };