mirror of
https://github.com/franjsco/tomadoro
synced 2025-01-18 16:29:47 +01:00
refactoring Timer
This commit is contained in:
parent
c2e41bdd44
commit
04839fd549
@ -1,29 +1,27 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Button, Container, Row, Col } from 'reactstrap';
|
import { Button, Container, Row, Col } from 'reactstrap';
|
||||||
|
import Notification from 'react-web-notification';
|
||||||
import './Timer.css';
|
import './Timer.css';
|
||||||
import logo from '../logo.svg';
|
import logo from '../logo.svg';
|
||||||
import Notification from 'react-web-notification';
|
|
||||||
import sound from '../sound.mp3';
|
import sound from '../sound.mp3';
|
||||||
|
|
||||||
|
|
||||||
class Timer extends Component {
|
class Timer extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.defaultSeconds = 1500;
|
this.seconds = 1500;
|
||||||
this.defaultLogoSpin = 'App-logo-rotation';
|
this.logoSpingCSS = 'App-logo-rotation';
|
||||||
this.state = {
|
this.state = {
|
||||||
seconds: this.defaultSeconds,
|
seconds: this.seconds,
|
||||||
started: false,
|
started: false,
|
||||||
logoSpin: '',
|
logoSpin: '',
|
||||||
ignore: true,
|
ignore: true,
|
||||||
title: ''
|
title: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
// binding
|
|
||||||
this.startTimer = this.startTimer.bind(this);
|
this.startTimer = this.startTimer.bind(this);
|
||||||
this.stopTimer = this.stopTimer.bind(this);
|
this.stopTimer = this.stopTimer.bind(this);
|
||||||
this.resetTimer = this.resetTimer.bind(this);
|
this.resetTimer = this.resetTimer.bind(this);
|
||||||
|
|
||||||
this.handlePermissionGranted = this.handlePermissionGranted.bind(this);
|
this.handlePermissionGranted = this.handlePermissionGranted.bind(this);
|
||||||
this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
|
this.handlePermissionDenied = this.handlePermissionDenied.bind(this);
|
||||||
this.handleNotSupported = this.handleNotSupported.bind(this);
|
this.handleNotSupported = this.handleNotSupported.bind(this);
|
||||||
@ -36,7 +34,7 @@ class Timer extends Component {
|
|||||||
return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s;
|
return ( s - ( s%=60 )) / 60 + ( 9 < s ?':':':0') +s;
|
||||||
}
|
}
|
||||||
|
|
||||||
// handleNotification
|
|
||||||
handlePermissionGranted() {
|
handlePermissionGranted() {
|
||||||
this.setState({
|
this.setState({
|
||||||
ignore: false
|
ignore: false
|
||||||
@ -59,10 +57,6 @@ class Timer extends Component {
|
|||||||
console.log(e, 'Notification error tag:' + tag);
|
console.log(e, 'Notification error tag:' + tag);
|
||||||
}
|
}
|
||||||
|
|
||||||
playSound(){
|
|
||||||
document.getElementById('sound').play();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleNotificationOnShow() {
|
handleNotificationOnShow() {
|
||||||
this.playSound();
|
this.playSound();
|
||||||
}
|
}
|
||||||
@ -89,6 +83,11 @@ class Timer extends Component {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
playSound(){
|
||||||
|
document.getElementById('sound').play();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
tick() {
|
tick() {
|
||||||
this.setState(state => ({
|
this.setState(state => ({
|
||||||
seconds: state.seconds -1
|
seconds: state.seconds -1
|
||||||
@ -104,7 +103,7 @@ class Timer extends Component {
|
|||||||
startTimer() {
|
startTimer() {
|
||||||
this.setState({
|
this.setState({
|
||||||
started: true,
|
started: true,
|
||||||
logoSpin: this.defaultLogoSpin
|
logoSpin: this.logoSpingCSS
|
||||||
});
|
});
|
||||||
this.interval = setInterval(() => this.tick(), 1000);
|
this.interval = setInterval(() => this.tick(), 1000);
|
||||||
}
|
}
|
||||||
@ -119,79 +118,84 @@ class Timer extends Component {
|
|||||||
|
|
||||||
resetTimer() {
|
resetTimer() {
|
||||||
this.stopTimer();
|
this.stopTimer();
|
||||||
this.setState({ seconds: this.defaultSeconds});
|
this.setState({ seconds: this.seconds});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Container>
|
<Container>
|
||||||
<Row>
|
<Row>
|
||||||
<Col>
|
<Col>
|
||||||
<img
|
<img
|
||||||
className={`App-logo ${this.state.logoSpin}`}
|
className={`App-logo ${this.state.logoSpin}`}
|
||||||
src={logo}
|
src={logo}
|
||||||
alt="Tomato"
|
alt="Tomato"
|
||||||
>
|
></img>
|
||||||
</img>
|
</Col>
|
||||||
</Col>
|
</Row>
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<p
|
|
||||||
className="timer"
|
|
||||||
>
|
|
||||||
{this.formatMinute(this.state.seconds)}
|
|
||||||
</p>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<div className="buttons-box">
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<Button
|
|
||||||
className="buttons"
|
|
||||||
block
|
|
||||||
size="lg"
|
|
||||||
color="success"
|
|
||||||
onClick={this.startTimer}
|
|
||||||
disabled={this.state.started}
|
|
||||||
>
|
|
||||||
START
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row
|
|
||||||
className="top-margin"
|
|
||||||
>
|
|
||||||
<Col>
|
|
||||||
<Button
|
|
||||||
className="buttons"
|
|
||||||
block
|
|
||||||
color="danger"
|
|
||||||
size="lg"
|
|
||||||
onClick={this.stopTimer}
|
|
||||||
disabled={!this.state.started}
|
|
||||||
>
|
|
||||||
STOP
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
<Col>
|
<Row>
|
||||||
<Button
|
<Col>
|
||||||
className="buttons"
|
<p
|
||||||
block
|
className="timer"
|
||||||
color="secondary"
|
>
|
||||||
size="lg"
|
{this.formatMinute(this.state.seconds)}
|
||||||
onClick={this.resetTimer}
|
</p>
|
||||||
disabled={this.state.started || this.state.seconds === this.defaultSeconds}
|
</Col>
|
||||||
>
|
</Row>
|
||||||
RESET
|
|
||||||
</Button>
|
<div className="buttons-box">
|
||||||
</Col>
|
<Row>
|
||||||
</Row>
|
<Col>
|
||||||
|
<Button
|
||||||
</div>
|
className="buttons"
|
||||||
|
block
|
||||||
|
size="lg"
|
||||||
|
color="success"
|
||||||
|
onClick={this.startTimer}
|
||||||
|
disabled={this.state.started}
|
||||||
|
>
|
||||||
|
START
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row
|
||||||
|
className="top-margin"
|
||||||
|
>
|
||||||
|
<Col>
|
||||||
|
<Button
|
||||||
|
className="buttons"
|
||||||
|
block
|
||||||
|
color="danger"
|
||||||
|
size="lg"
|
||||||
|
onClick={this.stopTimer}
|
||||||
|
disabled={!this.state.started}
|
||||||
|
>
|
||||||
|
STOP
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col>
|
||||||
|
<Button
|
||||||
|
className="buttons"
|
||||||
|
block
|
||||||
|
color="secondary"
|
||||||
|
size="lg"
|
||||||
|
onClick={this.resetTimer}
|
||||||
|
disabled={this.state.started || this.state.seconds === this.seconds}
|
||||||
|
>
|
||||||
|
RESET
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
<Row>
|
||||||
|
</Row>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
||||||
<Notification
|
<Notification
|
||||||
ignore={this.state.ignore}
|
ignore={this.state.ignore}
|
||||||
onPermissionGranted = {this.handlePermissionGranted}
|
onPermissionGranted = {this.handlePermissionGranted}
|
||||||
@ -209,6 +213,7 @@ class Timer extends Component {
|
|||||||
<source src={sound} type='audio/mpeg' />
|
<source src={sound} type='audio/mpeg' />
|
||||||
<embed hidden src={sound} />
|
<embed hidden src={sound} />
|
||||||
</audio>
|
</audio>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user