mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-20 22:49:18 +00:00
refactor: unify progress bar logic
This commit is contained in:
committed by
Carlos Valente
parent
c3fb3061f6
commit
347f333b3e
@@ -1,29 +1,12 @@
|
||||
import { MaybeNumber } from 'ontime-types';
|
||||
|
||||
import { useTimer } from '../../../../common/hooks/useSocket';
|
||||
import { clamp } from '../../../../common/utils/math';
|
||||
import { getProgress } from '../../../../common/utils/getProgress';
|
||||
|
||||
import style from './EventBlockProgressBar.module.scss';
|
||||
|
||||
export function getPercentComplete(remaining: MaybeNumber, total: MaybeNumber): number {
|
||||
if (remaining === null || total === null) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (remaining <= 0) {
|
||||
return 100;
|
||||
}
|
||||
|
||||
if (remaining === total) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return clamp(100 - (remaining * 100) / total, 0, 100);
|
||||
}
|
||||
|
||||
export default function EventBlockProgressBar() {
|
||||
const timer = useTimer();
|
||||
|
||||
const progress = `${getPercentComplete(timer.current, timer.duration)}%`;
|
||||
return <div className={style.progressBar} style={{ width: progress }} />;
|
||||
const progress = getProgress(timer.current, timer.duration);
|
||||
|
||||
return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
|
||||
}
|
||||
|
||||
-27
@@ -1,27 +0,0 @@
|
||||
import { dayInMs } from 'ontime-utils';
|
||||
|
||||
import { getPercentComplete } from '../EventBlockProgressBar';
|
||||
|
||||
describe('getPercentComplete()', () => {
|
||||
describe('calculates progress in normal cases', () => {
|
||||
const testScenarios = [
|
||||
{ current: 0, duration: 0, expect: 100 },
|
||||
{ current: 0, duration: 100, expect: 100 },
|
||||
{ current: 0, duration: dayInMs, expect: 100 },
|
||||
{ current: 10, duration: 100, expect: 90 },
|
||||
{ current: 50, duration: 100, expect: 50 },
|
||||
{ current: 100, duration: 100, expect: 0 },
|
||||
];
|
||||
|
||||
testScenarios.forEach((testCase) => {
|
||||
it(`handles ${testCase.current} / ${testCase.duration}`, () => {
|
||||
const progress = getPercentComplete(testCase.current, testCase.duration);
|
||||
expect(progress).toBe(testCase.expect);
|
||||
});
|
||||
});
|
||||
});
|
||||
it('is 0 if we dont have a current or duration', () => {
|
||||
const progress = getPercentComplete(null, null);
|
||||
expect(progress).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user