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

add ids to timers

Browse source
This commit is contained in:
Вячеслав 2025-06-14 18:47:43 +05:00
parent 8e8e07e2f5
commit bd5b71f3fb
2 changed files with 23 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/Timer/Timer.tsx
View file

@ -3,14 +3,18 @@ import TimeManager from '../../helpers/TimeManager';
import Button from '../Button/Button'; import Button from '../Button/Button';
import styles from './Timer.module.css' import styles from './Timer.module.css'
import {formatTime} from '../../helpers/Formatters'; import {formatTime} from '../../helpers/Formatters';
import LocalStorageManager from "../../helpers/LocalStorageManager.ts";
const Timer = () => { interface TimerProps {
id: string
}
const Timer = (props: TimerProps) => {
const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0)) const [timeManager, recreateTimeManager] = useState(() => new TimeManager(0))
const [remainingTime, setRemainingTime] = useState({minutes: 0, seconds: 0}); const [remainingTime, setRemainingTime] = useState({minutes: 0, seconds: 0});
const [startDate, setStartDate] = useState('00:00'); const [startDate, setStartDate] = useState('00:00');
const [endDate, setEndDate] = useState('00:00'); const [endDate, setEndDate] = useState('00:00');
const localStorageManager = new LocalStorageManager<TimeManager>();
useEffect(() => { useEffect(() => {
timeManager.start() timeManager.start()
@ -22,8 +26,7 @@ const Timer = () => {
if (startString === endString) { if (startString === endString) {
setStartDate('00:00'); setStartDate('00:00');
setEndDate('00:00'); setEndDate('00:00');
} } else {
else {
setStartDate(startString); setStartDate(startString);
setEndDate(endString); setEndDate(endString);
} }
@ -38,7 +41,11 @@ const Timer = () => {
const handlePause = () => timeManager.togglePause(); const handlePause = () => timeManager.togglePause();
const handleAdd = () => timeManager.addTime(1); const handleAdd = () => timeManager.addTime(1);
const handleSubstract = () => timeManager.subtractTime(1); const handleSubstract = () => timeManager.subtractTime(1);
const handleRecreation = (minutes: number) => recreateTimeManager(new TimeManager(minutes)) const handleRecreation = (minutes: number) => {
const newTimeManager = new TimeManager(minutes)
recreateTimeManager(newTimeManager);
localStorageManager.setItem(props.id, newTimeManager);
}
return ( return (
<div className={styles.timer_container}> <div className={styles.timer_container}>
@ -50,7 +57,8 @@ const Timer = () => {
<Button label='X' onClick={() => handleRecreation(-1)}/> <Button label='X' onClick={() => handleRecreation(-1)}/>
</div> </div>
<div className={styles.clock}> <div className={styles.clock}>
<a onClick={handlePause} className={styles.clock_text}>{remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds}</a> <a onClick={handlePause}
className={styles.clock_text}>{remainingTime.minutes}:{remainingTime.seconds < 10 ? '0' : ''}{remainingTime.seconds}</a>
</div> </div>
<div className={styles.dates_container}> <div className={styles.dates_container}>
<div className={styles.dates_item}> <div className={styles.dates_item}>

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

@ -22,10 +22,10 @@ const Timers = () => {
<a className={`${styles.header_text} ${styles.title}`}>{formatFullTime(time)}</a> <a className={`${styles.header_text} ${styles.title}`}>{formatFullTime(time)}</a>
</header> </header>
<div className={styles.timers_container}> <div className={styles.timers_container}>
<Timer/> <Timer id={"timer_1"}/>
<Timer/> <Timer id={"timer_2"}/>
<Timer/> <Timer id={"timer_3"}/>
<Timer/> <Timer id={"timer_4"}/>
</div> </div>
</div> </div>
) )