mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 21:24:11 +00:00
feat: negative timers
This commit is contained in:
@@ -2,7 +2,7 @@ import { memo, useEffect, useState } from 'react';
|
||||
import { formatDisplay } from '../../dateConfig';
|
||||
import styles from './Countdown.module.css';
|
||||
|
||||
const Countdown = ({ time, small, hideZeroHours }) => {
|
||||
const Countdown = ({ time, small, negative, hideZeroHours }) => {
|
||||
const [clock, setClock] = useState(time);
|
||||
let display = '-- : -- : --';
|
||||
|
||||
@@ -12,10 +12,13 @@ const Countdown = ({ time, small, hideZeroHours }) => {
|
||||
|
||||
// prepare display string
|
||||
if (clock != null && !isNaN(clock))
|
||||
display = formatDisplay(clock, hideZeroHours);
|
||||
|
||||
display = formatDisplay(Math.abs(clock), hideZeroHours);
|
||||
const colour = negative ? '#ff7597' : '#fffffa';
|
||||
return (
|
||||
<div className={small ? styles.countdownClockSmall : styles.countdownClock}>
|
||||
<div
|
||||
className={small ? styles.countdownClockSmall : styles.countdownClock}
|
||||
style={{ color: colour }}
|
||||
>
|
||||
{display}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,9 +4,8 @@ import styles from './MyProgressBar.module.css';
|
||||
export default function MyProgressBar(props) {
|
||||
const { now, complete, showElapsed } = props;
|
||||
const percentComplete = showElapsed
|
||||
? clamp((100 - (now * 100) / complete + 2), 0, 100)
|
||||
: clamp((now * 100) / complete - 2, 0, 100)
|
||||
|
||||
? clamp((100 - (now * 100) / complete), 0, 100)
|
||||
: clamp((now * 100) / complete, 0, 100)
|
||||
|
||||
return (
|
||||
<div className={styles.progress}>
|
||||
|
||||
Reference in New Issue
Block a user