mirror of
https://github.com/franjsco/tomadoro
synced 2025-01-18 08:25:14 +01:00
Edit app (remove timer)
This commit is contained in:
Francesco Esposito
parent
00409ac11a
commit
05d157c32e
@ -50,3 +50,10 @@ a:hover {
|
||||
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 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';
|
||||
|
||||
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 (
|
||||
<div className="App">
|
||||
<div
|
||||
className="App-header"
|
||||
>
|
||||
<div className="App-header">
|
||||
tomadoro
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Timer />
|
||||
</div>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<Logo
|
||||
isStarted={this.state.started}
|
||||
switchMode={this.switchMode}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<div
|
||||
className="footer"
|
||||
>
|
||||
<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
|
||||
this.state.startClickNotification ? (
|
||||
<Notification
|
||||
send={this.state.sendNotification}
|
||||
handleNotification={this.handleNotification} />)
|
||||
: ''}
|
||||
|
||||
<div className="footer">
|
||||
<p>
|
||||
<a href="https://github.com/frab1t/tomadoro">tomadoro</a>{` `}
|
||||
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
Block a user