Fix/roll (#39)

* roll locks to first

in case there are events with overlapping time, roll will play the one that started first

* sanitize data entry

fixes issue where input field would not return seconds if not modified

* update chakra

* fix time input in chrome

fix issue in chrome where value of input does not contain seconds

client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^1.6.10",
+    "@chakra-ui/react": "^1.7.1",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@testing-library/jest-dom": "^5.11.4",

client/src/common/input/EditableTimer.jsx

@@ -28,14 +28,17 @@ export default function EditableTimer(props) {
     // Check if there is anything there
     if (value === '') return false;
 
+    // ensure we have seconds
+    const val = value.split(':').length === 3 ? value : `${value}:00`;
+
     // Time now and time submitedVal
     const original = stringFromMillis(time + delay, true);
 
     // check if time is different from before
-    if (value === original) return false;
+    if (val === original) return false;
 
     // convert to millis object
-    const millis = timeStringToMillis(value);
+    const millis = timeStringToMillis(val);
 
     // validate with parent
     if (!validate(name, millis)) return false;
@@ -52,11 +55,16 @@ export default function EditableTimer(props) {
       onSubmit={(v) => validateValue(v)}
       onCancel={() => setValue(stringFromMillis(time + delay, true))}
       value={value}
-      placeholder='--:--:--'
       className={delay > 0 ? style.delayedEditable : style.editable}
     >
       <EditablePreview />
-      <EditableInput type='time' step='1' min='00:00:00' max='23:59:00' />
+      <EditableInput
+        type='time'
+        placeholder='--:--:--'
+        min='00:00:00'
+        max='23:59:59'
+        step='1'
+      />
     </Editable>
   );
 }

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",

server/src/classes/__tests__/classUtils.test.js

@@ -242,3 +242,143 @@ describe('test that roll loads selection in right order', () => {
     expect(state).toStrictEqual(expected);
   });
 });
+
+// test getSelectionByRoll()
+describe('test that roll behaviour with overlapping times', () => {
+  const eventlist = [
+    {
+      id: 1,
+      timeStart: 10,
+      timeEnd: 10,
+      isPublic: false,
+    },
+    {
+      id: 2,
+      timeStart: 10,
+      timeEnd: 20,
+      isPublic: true,
+    },
+    {
+      id: 3,
+      timeStart: 10,
+      timeEnd: 30,
+      isPublic: false,
+    },
+  ];
+
+  it('if timer is at 0', () => {
+    const now = 0;
+    const expected = {
+      nowIndex: null,
+      nowId: null,
+      publicIndex: null,
+      nextIndex: 0,
+      publicNextIndex: 1,
+      timers: null,
+      timeToNext: 10,
+    };
+
+    const state = getSelectionByRoll(eventlist, now);
+    expect(state).toStrictEqual(expected);
+  });
+
+  it('if timer is at 10', () => {
+    const now = 10;
+    const expected = {
+      nowIndex: 1,
+      nowId: 2,
+      publicIndex: 1,
+      nextIndex: 2,
+      publicNextIndex: null,
+      timers: {
+        _finishAt: 20,
+        _startedAt: 10,
+        current: 10,
+        duration: 10,
+      },
+      timeToNext: 0,
+    };
+
+    const state = getSelectionByRoll(eventlist, now);
+    expect(state).toStrictEqual(expected);
+  });
+
+  it('if timer is at 15', () => {
+    const now = 15;
+    const expected = {
+      nowIndex: 1,
+      nowId: 2,
+      publicIndex: 1,
+      nextIndex: 2,
+      publicNextIndex: null,
+      timers: {
+        _startedAt: 10,
+        _finishAt: 20,
+        current: 5,
+        duration: 10,
+      },
+      timeToNext: -5,
+    };
+
+    const state = getSelectionByRoll(eventlist, now);
+    expect(state).toStrictEqual(expected);
+  });
+
+  it('if timer is at 20', () => {
+    const now = 20;
+    const expected = {
+      nowIndex: 2,
+      nowId: 3,
+      publicIndex: 1,
+      nextIndex: null,
+      publicNextIndex: null,
+      timers: {
+        _startedAt: 10,
+        _finishAt: 30,
+        current: 10,
+        duration: 20,
+      },
+      timeToNext: null,
+    };
+
+    const state = getSelectionByRoll(eventlist, now);
+    expect(state).toStrictEqual(expected);
+  });
+
+  it('if timer is at 25', () => {
+    const now = 25;
+    const expected = {
+      nowIndex: 2,
+      nowId: 3,
+      publicIndex: 1,
+      nextIndex: null,
+      publicNextIndex: null,
+      timers: {
+        _startedAt: 10,
+        _finishAt: 30,
+        current: 5,
+        duration: 20,
+      },
+      timeToNext: null,
+    };
+
+    const state = getSelectionByRoll(eventlist, now);
+    expect(state).toStrictEqual(expected);
+  });
+
+  it('if timer is at 31', () => {
+    const now = 31;
+    const expected = {
+      nowIndex: null,
+      nowId: null,
+      publicIndex: null,
+      nextIndex: null,
+      publicNextIndex: null,
+      timers: null,
+      timeToNext: null,
+    };
+
+    const state = getSelectionByRoll(eventlist, now);
+    expect(state).toStrictEqual(expected);
+  });
+});

server/src/classes/classUtils.js

@@ -37,6 +37,9 @@ export const getSelectionByRoll = (arr, now) => {
   // Order events by startTime
   const orderedEvents = sortArrayByProperty(arr, 'timeStart');
 
+  // flags: select first event if several overlapping
+  let nowFound = false;
+
   // exit early if we are past the events
   const lastEventEnd = orderedEvents[orderedEvents.length - 1].timeEnd;
   if (now > lastEventEnd) {
@@ -57,7 +60,7 @@ export const getSelectionByRoll = (arr, now) => {
     const normalEnd =
       e.timeEnd < e.timeStart ? (e.timeEnd += this.DAYMS) : e.timeEnd;
 
-    if (normalEnd < now) {
+    if (normalEnd <= now) {
       // event ran already
 
       // public event might not be the one running
@@ -65,7 +68,7 @@ export const getSelectionByRoll = (arr, now) => {
         publicTime = normalEnd;
         publicIndex = arr.findIndex((a) => a.id === e.id);
       }
-    } else if (normalEnd >= now && now >= e.timeStart) {
+    } else if (normalEnd > now && now >= e.timeStart && !nowFound) {
       // event is running
 
       // it could also be public
@@ -84,6 +87,7 @@ export const getSelectionByRoll = (arr, now) => {
         duration: normalEnd - e.timeStart,
         current: normalEnd - now,
       };
+      nowFound = true;
     } else if (normalEnd > now) {
       // event will run
 
@@ -93,18 +97,14 @@ export const getSelectionByRoll = (arr, now) => {
       // look for next events
       // check how far the start is from now
       const wait = e.timeStart - now;
-      if (wait > 0) {
-        if (nextIndex === null || wait < timeToNext) {
-          timeToNext = wait;
-          nextIndex = arr.findIndex((a) => a.id === e.id);
-        }
-        if (
-          (publicNextIndex === null || wait < publicTimeToNext) &&
-          e.isPublic
-        ) {
-          publicTimeToNext = wait;
-          publicNextIndex = arr.findIndex((a) => a.id === e.id);
-        }
+
+      if (nextIndex === null || wait < timeToNext) {
+        timeToNext = wait;
+        nextIndex = arr.findIndex((a) => a.id === e.id);
+      }
+      if ((publicNextIndex === null || wait < publicTimeToNext) && e.isPublic) {
+        publicTimeToNext = wait;
+        publicNextIndex = arr.findIndex((a) => a.id === e.id);
       }
     }
   }