sheptikhinv/timers
1
0
Fork 0
mirror of https://github.com/sheptikhinv/timers.git synced 2026-02-07 07:41:36 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add opportunity to see how much time till shift ends

Browse source
This commit is contained in:
Вячеслав 2025-07-13 18:31:21 +05:00
parent 54cb4607c5
commit 359e3c7483
4 changed files with 77 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/pages/Timers/Timers.tsx
View file

@ -1,14 +1,14 @@
import {useEffect, useState} from 'react';
import Timer from '../../components/Timer/Timer';
import styles from './Timers.module.css';
import {formatFullTime} from "../../helpers/DateFunctions.ts";
import {formatFullTime, getClosestTime, timeTillDate} from "../../helpers/DateFunctions.ts";
import ReleaseList from "../../components/ReleaseList/ReleaseList.tsx";
import Button from "../../components/Button/Button.tsx";
const Timers = () => {
const [time, setTime] = useState(new Date());
const [isReleasesListOpen, setIsReleasesListOpen] = useState(false);
const [isReverseTime, setIsReverseTime] = useState(false);
useEffect(() => {
const intervalId = setInterval(() => {
@ -16,27 +16,45 @@ const Timers = () => {
}, 500);
return () => clearInterval(intervalId);
}, [])
}, []);
const handleToggleTime = () => {
setIsReverseTime((prev) => !prev);
};
const targetTime = getClosestTime(22, 0);
const displayTime = isReverseTime ? timeTillDate(targetTime) : formatFullTime(time);
return (
<>
<div className={styles.content}>
<header className={styles.header}>
<a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>MetaTimer</a>
<a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a>
<Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
<a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>
MetaTimer
</a>
<a
className={`${styles.header_text} ${styles.title} ${styles.header_item}`}
onClick={handleToggleTime}
style={{ cursor: 'pointer' }}
>
{displayTime}
</a>
<Button
className={styles.header_item}
label={"?"}
onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}
/>
</header>
<div className={styles.timers_container}>
<Timer id={"timer_1"}/>
<Timer id={"timer_2"}/>
<Timer id={"timer_3"}/>
<Timer id={"timer_4"}/>
<Timer id={"timer_1"} />
<Timer id={"timer_2"} />
<Timer id={"timer_3"} />
<Timer id={"timer_4"} />
</div>
</div>
<ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
</>
)
}
);
};
export default Timers;