cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 12:53:32 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: unify progress bar logic

Browse Source
This commit is contained in:
Carlos Valente
2024-08-09 19:59:15 +02:00
committed by Carlos Valente
parent c3fb3061f6
commit 347f333b3e
9 changed files with 49 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx
+5 -6
View File
@@ -1,12 +1,12 @@
import { MaybeNumber } from 'ontime-types';
import { clamp } from '../../utils/math';
import { getProgress } from '../../utils/getProgress';
import './MultiPartProgressBar.scss';
interface MultiPartProgressBar {
now: MaybeNumber;
complete: number;
complete: MaybeNumber;
normalColor: string;
warning?: MaybeNumber;
warningColor: string;
@@ -31,10 +31,9 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
className = '',
} = props;
const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;
const percentRemaining = 100 - getProgress(now, complete);
const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
return (
<div
apps/client/src/common/components/progress-bar/ProgressBar.tsx
+8 -7
View File
@@ -1,22 +1,23 @@
import { clamp } from '../../utils/math';
import { MaybeNumber } from 'ontime-types';
import { getProgress } from '../../utils/getProgress';
import './ProgressBar.scss';
interface ProgressBarProps {
now?: number;
complete?: number;
current: MaybeNumber;
duration: MaybeNumber;
hidden?: boolean;
className?: string;
}
export default function ProgressBar(props: ProgressBarProps) {
const { now = 0, complete = 100, hidden, className = '' } = props;
const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
const { current, duration, hidden, className = '' } = props;
const progress = getProgress(current, duration);
return (
<div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
<div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
<div className='progress-bar__indicator' style={{ width: `${progress}%` }} />
</div>
);
}