mirror of https://github.com/franjsco/tomadoro
Edit app (remove timer)
This commit is contained in:
parent
00409ac11a
commit
05d157c32e
|
@ -50,3 +50,10 @@ a:hover {
|
||||||
text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
|
text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.timer {
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
|
||||||
|
color: white;
|
||||||
|
}
|
170
src/App.js
170
src/App.js
|
@ -1,24 +1,172 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Timer from './components/Timer';
|
import { Container, Row, Col } from 'reactstrap';
|
||||||
|
import Logo from './components/Logo';
|
||||||
|
import Box from './components/Box';
|
||||||
|
import Notification from './components/Notification';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
render() {
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.appName = 'tomadoro';
|
||||||
|
this.pomodoroSeconds = 1500;
|
||||||
|
this.breakSeconds = 300;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
startClickNotification: false, // TODO: refactoring identificativo
|
||||||
|
seconds: 0,
|
||||||
|
started: false,
|
||||||
|
break: false,
|
||||||
|
sendNotification: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// binding
|
||||||
|
this.startTimer = this.startTimer.bind(this);
|
||||||
|
this.stopTimer = this.stopTimer.bind(this);
|
||||||
|
this.resetTimer = this.resetTimer.bind(this);
|
||||||
|
this.terminatedTimer = this.terminatedTimer.bind(this);
|
||||||
|
this.pomodoroMode = this.pomodoroMode.bind(this);
|
||||||
|
this.breakMode = this.breakMode.bind(this);
|
||||||
|
this.switchMode = this.switchMode.bind(this);
|
||||||
|
this.formatMinute = this.formatMinute.bind(this);
|
||||||
|
this.handleNotification = this.handleNotification.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.pomodoroMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
formatMinute(s) {
|
||||||
|
return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
|
||||||
|
}
|
||||||
|
|
||||||
|
tick() {
|
||||||
|
this.setState(state => ({
|
||||||
|
seconds: state.seconds -1
|
||||||
|
}));
|
||||||
|
|
||||||
|
document.title = `(${this.formatMinute(this.state.seconds)}) ${this.appName}`;
|
||||||
|
|
||||||
|
if (this.state.seconds === 0) {
|
||||||
|
this.stopTimer();
|
||||||
|
this.terminatedTimer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
startTimer() {
|
||||||
|
this.setState({
|
||||||
|
started: true,
|
||||||
|
startClickNotification: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.interval = setInterval(() => this.tick(), 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
stopTimer() {
|
||||||
|
this.setState({
|
||||||
|
started: false
|
||||||
|
});
|
||||||
|
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetTimer() {
|
||||||
|
if(this.state.break) {
|
||||||
|
this.breakMode();
|
||||||
|
} else {
|
||||||
|
this.pomodoroMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.title = this.appName;
|
||||||
|
}
|
||||||
|
|
||||||
|
terminatedTimer() {
|
||||||
|
this.setState({
|
||||||
|
sendNotification: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.switchMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
pomodoroMode() {
|
||||||
|
this.setState({
|
||||||
|
seconds: this.pomodoroSeconds,
|
||||||
|
break: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
breakMode() {
|
||||||
|
this.setState({
|
||||||
|
seconds: this.breakSeconds,
|
||||||
|
break: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
switchMode() { // TODO: refactoring naming
|
||||||
|
if(this.state.break && !this.state.started) {
|
||||||
|
this.pomodoroMode();
|
||||||
|
} else if(!this.state.break && !this.state.started) {
|
||||||
|
this.breakMode();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNotification(flag) {
|
||||||
|
this.setState({
|
||||||
|
sendNotification: flag
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<div
|
<div className="App-header">
|
||||||
className="App-header"
|
|
||||||
>
|
|
||||||
tomadoro
|
tomadoro
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<Container>
|
||||||
<Timer />
|
<Row>
|
||||||
</div>
|
<Col>
|
||||||
|
<Logo
|
||||||
|
isStarted={this.state.started}
|
||||||
|
switchMode={this.switchMode}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
<div
|
<Row>
|
||||||
className="footer"
|
<Col>
|
||||||
>
|
<p className="timer">
|
||||||
|
{this.formatMinute(this.state.seconds)}
|
||||||
|
</p>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col
|
||||||
|
sm={{size: 10, offset: 1}}
|
||||||
|
md={{size: 8, offset: 2}}
|
||||||
|
lg={{ size: 6, offset: 3 }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
startTimer={this.startTimer}
|
||||||
|
stopTimer={this.stopTimer}
|
||||||
|
isStarted={this.state.started}
|
||||||
|
resetTimer={this.resetTimer}
|
||||||
|
seconds={this.state.seconds}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
{ // notification
|
||||||
|
this.state.startClickNotification ? (
|
||||||
|
<Notification
|
||||||
|
send={this.state.sendNotification}
|
||||||
|
handleNotification={this.handleNotification} />)
|
||||||
|
: ''}
|
||||||
|
|
||||||
|
<div className="footer">
|
||||||
<p>
|
<p>
|
||||||
<a href="https://github.com/frab1t/tomadoro">tomadoro</a>{` `}
|
<a href="https://github.com/frab1t/tomadoro">tomadoro</a>{` `}
|
||||||
by <a href="https://twitter.com/frab1t">@frab1t</a> (Francesco Esposito)
|
by <a href="https://twitter.com/frab1t">@frab1t</a> (Francesco Esposito)
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
.timer {
|
|
||||||
font-size: 100px;
|
|
||||||
font-weight: normal;
|
|
||||||
text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
|
|
||||||
color: white;
|
|
||||||
}
|
|
|
@ -1,159 +0,0 @@
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { Container, Row, Col } from 'reactstrap';
|
|
||||||
import Notification from './Notification';
|
|
||||||
import Box from './Box';
|
|
||||||
import Logo from './Logo';
|
|
||||||
import './Timer.css';
|
|
||||||
|
|
||||||
class Timer extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.appName = 'tomadoro';
|
|
||||||
this.state = {
|
|
||||||
seconds: 0,
|
|
||||||
started: false,
|
|
||||||
break: false,
|
|
||||||
sendNotification: false
|
|
||||||
};
|
|
||||||
|
|
||||||
this.handleNotification = this.handleNotification.bind(this);
|
|
||||||
this.startTimer = this.startTimer.bind(this);
|
|
||||||
this.stopTimer = this.stopTimer.bind(this);
|
|
||||||
this.resetTimer = this.resetTimer.bind(this);
|
|
||||||
this.finishedTimer = this.finishedTimer.bind(this);
|
|
||||||
this.switchMode = this.switchMode.bind(this);
|
|
||||||
this.pomodoroMode = this.pomodoroMode.bind(this);
|
|
||||||
this.breakMode = this.breakMode.bind(this);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
this.pomodoroMode();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
handleNotification(flag) {
|
|
||||||
this.setState({
|
|
||||||
sendNotification: flag
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
formatMinute(s) {
|
|
||||||
return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
|
|
||||||
}
|
|
||||||
|
|
||||||
tick() {
|
|
||||||
this.setState(state => ({
|
|
||||||
seconds: state.seconds - 1
|
|
||||||
}));
|
|
||||||
|
|
||||||
document.title=`(${this.formatMinute(this.state.seconds)}) ${this.appName}`;
|
|
||||||
|
|
||||||
if (this.state.seconds === 0) {
|
|
||||||
this.stopTimer();
|
|
||||||
this.finishedTimer();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
startTimer() {
|
|
||||||
this.setState({
|
|
||||||
started: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this.interval = setInterval(() => this.tick(), 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
stopTimer() {
|
|
||||||
this.setState({
|
|
||||||
started: false
|
|
||||||
});
|
|
||||||
|
|
||||||
clearInterval(this.interval);
|
|
||||||
}
|
|
||||||
|
|
||||||
resetTimer() {
|
|
||||||
if(this.state.break) {
|
|
||||||
this.breakMode();
|
|
||||||
} else {
|
|
||||||
this.pomodoroMode();
|
|
||||||
}
|
|
||||||
|
|
||||||
document.title = this.appName;
|
|
||||||
}
|
|
||||||
|
|
||||||
finishedTimer() {
|
|
||||||
this.setState({
|
|
||||||
sendNotification: true,
|
|
||||||
});
|
|
||||||
this.switchMode();
|
|
||||||
}
|
|
||||||
|
|
||||||
switchMode() {
|
|
||||||
if(this.state.break && !this.state.started) {
|
|
||||||
this.pomodoroMode();
|
|
||||||
} else if(!this.state.break && !this.state.started) {
|
|
||||||
this.breakMode();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
pomodoroMode() {
|
|
||||||
const pomodoroSeconds = 1500;
|
|
||||||
this.setState({
|
|
||||||
seconds: pomodoroSeconds,
|
|
||||||
break: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
breakMode() {
|
|
||||||
const breakSeconds = 300
|
|
||||||
this.setState({
|
|
||||||
seconds: breakSeconds,
|
|
||||||
break: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<Container>
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<Logo
|
|
||||||
isStarted={this.state.started}
|
|
||||||
switchMode={this.switchMode}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col>
|
|
||||||
<p
|
|
||||||
className="timer"
|
|
||||||
>
|
|
||||||
{this.formatMinute(this.state.seconds)}
|
|
||||||
</p>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Row>
|
|
||||||
<Col sm={{size: 10, offset: 1}} md={{size: 8, offset: 2}} lg={{ size: 6, offset: 3 }}>
|
|
||||||
<Box
|
|
||||||
startTimer={this.startTimer}
|
|
||||||
stopTimer={this.stopTimer}
|
|
||||||
isStarted={this.state.started}
|
|
||||||
resetTimer={this.resetTimer}
|
|
||||||
seconds={this.state.seconds}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Container>
|
|
||||||
|
|
||||||
<Notification
|
|
||||||
send={this.state.sendNotification}
|
|
||||||
handleNotification={this.handleNotification}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Timer;
|
|
Loading…
Reference in New Issue