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:35:56 +05:00
parent 7119916b89
commit 15db906f33
1 changed files with 30 additions and 12 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 {useEffect, useState} from 'react';
import Timer from '../../components/Timer/Timer'; import Timer from '../../components/Timer/Timer';
import styles from './Timers.module.css'; 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 ReleaseList from "../../components/ReleaseList/ReleaseList.tsx";
import Button from "../../components/Button/Button.tsx"; import Button from "../../components/Button/Button.tsx";
const Timers = () => { const Timers = () => {
const [time, setTime] = useState(new Date()); const [time, setTime] = useState(new Date());
const [isReleasesListOpen, setIsReleasesListOpen] = useState(false); const [isReleasesListOpen, setIsReleasesListOpen] = useState(false);
const [isReverseTime, setIsReverseTime] = useState(false);
useEffect(() => { useEffect(() => {
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
@ -16,27 +16,45 @@ const Timers = () => {
}, 500); }, 500);
return () => clearInterval(intervalId); return () => clearInterval(intervalId);
}, []) }, []);
const handleToggleTime = () => {
setIsReverseTime((prev) => !prev);
};
const targetTime = getClosestTime(22, 0);
const displayTime = isReverseTime ? timeTillDate(targetTime) : formatFullTime(time);
return ( return (
<> <>
<div className={styles.content}> <div className={styles.content}>
<header className={styles.header}> <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}`}>
<a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a> MetaTimer
<Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/> </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> </header>
<div className={styles.timers_container}> <div className={styles.timers_container}>
<Timer id={"timer_1"}/> <Timer id={"timer_1"} />
<Timer id={"timer_2"}/> <Timer id={"timer_2"} />
<Timer id={"timer_3"}/> <Timer id={"timer_3"} />
<Timer id={"timer_4"}/> <Timer id={"timer_4"} />
</div> </div>
</div> </div>
<ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} /> <ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
</> </>
) );
} };
export default Timers; export default Timers;