mirror of https://github.com/franjsco/tomadoro
Compare commits
10 Commits
Author | SHA1 | Date |
---|---|---|
Francesco Esposito | 6428397c3f | |
Francesco Esposito | 986bfa52ac | |
Francesco Esposito | 0ef15bec40 | |
Francesco Esposito | 3adce6e457 | |
Francesco Esposito | 096560c3d9 | |
Francesco Esposito | 1585c44d3e | |
Francesco Esposito | 108a909c0b | |
Francesco Esposito | e963eb2d29 | |
Francesco Esposito | 807240b5df | |
Francesco Esposito | 3ff0ddf16f |
70
README.md
70
README.md
|
@ -1,19 +1,61 @@
|
|||
# tomadoro 🍅
|
||||
A timer based on the Pomodoro Technique
|
||||
<h1 align="center">Welcome to tomadoro 🍅</h1>
|
||||
<p>
|
||||
<img alt="Version" src="https://img.shields.io/badge/version-1.7.0-blue.svg?cacheSeconds=2592000" />
|
||||
<a href="https://github.com/franjsco/tomadoro/graphs/commit-activity" target="_blank">
|
||||
<img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
|
||||
</a>
|
||||
<a href="https://github.com/franjsco/tomadoro/blob/master/LICENSE" target="_blank">
|
||||
<img alt="License: GPL--3.0--or--later" src="https://img.shields.io/github/license/franjsco/tomadoro" />
|
||||
</a>
|
||||
<a href="https://twitter.com/franjsco" target="_blank">
|
||||
<img alt="Twitter: franjsco" src="https://img.shields.io/twitter/follow/franjsco.svg?style=social" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
![tomadoro screenshot](screenshot.png)
|
||||
> A timer based on the Pomodoro Technique
|
||||
|
||||
Technologies:
|
||||
* HTML5 and CSS
|
||||
* JavaScript
|
||||
* React.js
|
||||
* Bootstrap (reactstrap)
|
||||
### ✨ [Demo](https://franjsco.github.io/tomadoro/)
|
||||
|
||||
## Demo
|
||||
Try tomadoro: https://frsposito.github.io/tomadoro/
|
||||
![tomadoro screenshot](screenshot.jpg)
|
||||
|
||||
## License
|
||||
GPLv3
|
||||
## Install
|
||||
|
||||
---
|
||||
Made with ❤️ by Francesco Esposito ([@frsposito](https://github.com/frsposito))
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
**Development**
|
||||
```sh
|
||||
npm run start
|
||||
```
|
||||
|
||||
**Production**
|
||||
```sh
|
||||
npm run build
|
||||
npm install -g serve
|
||||
serve -s build
|
||||
```
|
||||
Other Solutions: [here](https://create-react-app.dev/docs/deployment/)
|
||||
|
||||
## Author
|
||||
|
||||
👤 **franjsco (Francesco Esposito)**
|
||||
|
||||
* Website: https://franjsco.github.io/
|
||||
* Twitter: [@franjsco](https://twitter.com/franjsco)
|
||||
* Github: [@franjsco](https://github.com/franjsco)
|
||||
|
||||
## Show your support
|
||||
|
||||
Give a ⭐️ if this project helped you!
|
||||
|
||||
## 📝 License
|
||||
Copyright © 2020 [franjsco (Francesco Esposito)](https://github.com/franjsco).<br />
|
||||
This project is [GPL--3.0--or--later](https://github.com/franjsco/tomadoro/blob/master/LICENSE) licensed.
|
||||
|
||||
Photo by Zoltan Tasi on Unsplash
|
||||
|
||||
***
|
||||
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
|
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
|
@ -1,17 +1,18 @@
|
|||
{
|
||||
"name": "tomadoro",
|
||||
"description": "tomadoro",
|
||||
"version": "1.4.1",
|
||||
"version": "1.7.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"npm": "6.4.1",
|
||||
"node": "10.15.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.3.1",
|
||||
"react": "^16.11.0",
|
||||
"react-dom": "^16.11.0",
|
||||
"react-scripts": "^3.2.0",
|
||||
"bootstrap": "^4.4.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "^3.4.1",
|
||||
"react-web-notification": "^0.5.0",
|
||||
"reactstrap": "^7.1.0"
|
||||
},
|
||||
|
@ -23,7 +24,7 @@
|
|||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build"
|
||||
},
|
||||
"homepage": "http://frsposito.github.io/tomadoro",
|
||||
"homepage": "http://franjsco.github.io/tomadoro",
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
|
@ -35,11 +36,11 @@
|
|||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/frsposito/tomadoro.git"
|
||||
"url": "git+https://github.com/franjsco/tomadoro.git"
|
||||
},
|
||||
"author": "frsposito",
|
||||
"author": "franjsco",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"devDependencies": {
|
||||
"gh-pages": "^2.1.1"
|
||||
"gh-pages": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 324 KiB |
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
Before Width: | Height: | Size: 114 KiB |
59
src/App.css
59
src/App.css
|
@ -1,59 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
|
||||
|
||||
body {
|
||||
background-color: #f04d3b; /* e74c3c */
|
||||
user-select: none;
|
||||
font-family: 'Fredoka One', cursive;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
color: #131313;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #c94233; /*c0392b*/
|
||||
display: flex;
|
||||
min-height: 5vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(25px + 2vmin);
|
||||
color: white;
|
||||
text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190);
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f1fb61;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #fddec0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin-top: 15px;
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
180
src/App.js
180
src/App.js
|
@ -1,180 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
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 {
|
||||
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">
|
||||
tomadoro
|
||||
</div>
|
||||
|
||||
<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
|
||||
this.state.startClickNotification ? (
|
||||
<Notification
|
||||
send={this.state.sendNotification}
|
||||
handleNotification={this.handleNotification} />)
|
||||
: ''}
|
||||
|
||||
<div className="footer">
|
||||
<p>
|
||||
<a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `}
|
||||
by <a href="https://github.com/frsposito">@frsposito</a> (Francesco Esposito)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
Binary file not shown.
After Width: | Height: | Size: 879 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
@ -1,26 +0,0 @@
|
|||
.button {
|
||||
font-size: 16px;
|
||||
font-weight: lighter;
|
||||
height: 50px;
|
||||
border-radius: 40px;
|
||||
width: 100%;
|
||||
margin: 5px 0px 5px 0px;
|
||||
transition: all .2s ease-in-out;
|
||||
box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
transform: scale(1.01);
|
||||
box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
|
||||
}
|
|
@ -1,58 +1,73 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Button, Row, Col } from 'reactstrap';
|
||||
import './Box.css';
|
||||
import React from 'react';
|
||||
import { Button, Row, Col, Card, CardBody } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class Box extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
const box = props => {
|
||||
const buttonStyle = {
|
||||
fontSize: '20px',
|
||||
height: '54px',
|
||||
borderRadius: '24px',
|
||||
width: '100%',
|
||||
margin: '4px 0px 4px 0px'
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="box">
|
||||
<Row>
|
||||
const boxStyle = {
|
||||
padding: '2px',
|
||||
borderRadius: '14px',
|
||||
background: 'rgb(0,0,0, 0.4)'
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Card style={boxStyle}>
|
||||
<CardBody>
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<Button
|
||||
className="button"
|
||||
style={buttonStyle}
|
||||
block
|
||||
size="lg"
|
||||
color="success"
|
||||
onClick={this.props.startTimer}
|
||||
disabled={this.props.isStarted || this.props.seconds===0}
|
||||
>
|
||||
START
|
||||
onClick={props.startButton}
|
||||
disabled={props.isStarted || props.seconds===0}>
|
||||
Start
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs="6">
|
||||
<Button
|
||||
className="button"
|
||||
style={buttonStyle}
|
||||
color="danger"
|
||||
size="lg"
|
||||
onClick={this.props.stopTimer}
|
||||
disabled={!this.props.isStarted}
|
||||
>
|
||||
STOP
|
||||
onClick={props.stopButton}
|
||||
disabled={!props.isStarted}>
|
||||
Stop
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs="6">
|
||||
<Button
|
||||
className="button"
|
||||
style={buttonStyle}
|
||||
color="secondary"
|
||||
size="lg"
|
||||
onClick={this.props.resetTimer}
|
||||
disabled={this.props.isStarted}
|
||||
>
|
||||
RESET
|
||||
onClick={props.resetButton}
|
||||
disabled={props.isStarted}>
|
||||
Reset
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Box;
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
box.propTypes = {
|
||||
startButton: PropTypes.func.isRequired,
|
||||
stopButton: PropTypes.func.isRequired,
|
||||
resetButton: PropTypes.func.isRequired,
|
||||
isStarted: PropTypes.bool.isRequired,
|
||||
seconds: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
export default box;
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react';
|
||||
|
||||
const footer = () => {
|
||||
const style = {
|
||||
marginTop: '2px'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
<p>
|
||||
<a href="https://github.com/franjsco/tomadoro">tomadoro</a>{` `}
|
||||
by <a href="https://github.com/franjsco">Francesco Esposito</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default footer;
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
|
||||
const headbar = () => {
|
||||
const style = {
|
||||
display: 'flex',
|
||||
minHeight: '4vh',
|
||||
flexDirection: 'column',
|
||||
textAlign: 'left',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '44px',
|
||||
color: 'white',
|
||||
textShadow: '0 2px 2px #1f1f1f',
|
||||
marginBottom: '2px'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style}>
|
||||
tomadoro
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default headbar;
|
|
@ -1,13 +1,13 @@
|
|||
.App-logo {
|
||||
height: 130px;
|
||||
filter: drop-shadow(0 0 0.30rem #f8ff9c);
|
||||
height: 140px;
|
||||
filter: drop-shadow(0 0 0.58rem #1f1f1f);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.App-logo:hover { transform: scale(1.2); }
|
||||
.App-logo:hover { transform: scale(1.1); }
|
||||
|
||||
.App-logo-rotation {
|
||||
animation: App-logo-spin infinite 5s linear;
|
||||
|
|
|
@ -1,25 +1,26 @@
|
|||
import React, { Component } from 'react';
|
||||
import logoSVG from '../logo.svg';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import logoSVG from '../assets/logo.svg';
|
||||
import './Logo.css';
|
||||
|
||||
class Logo extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.defaultClassName = 'App-logo-rotation';
|
||||
}
|
||||
const logo = props => {
|
||||
const logoRotationClass = 'App-logo-rotation';
|
||||
|
||||
render() {
|
||||
return (
|
||||
<img
|
||||
className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
|
||||
return (
|
||||
<img
|
||||
className={`App-logo ${props.isStarted ? logoRotationClass: ''}`}
|
||||
src={logoSVG}
|
||||
alt="Tomato"
|
||||
title="Click on the tomato to change modes"
|
||||
onClick={this.props.switchMode}
|
||||
onClick={props.click}
|
||||
></img>
|
||||
)
|
||||
}
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default Logo;
|
||||
logo.propTypes = {
|
||||
isStarted: PropTypes.bool.isRequired,
|
||||
click: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default logo;
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { formatMinute } from '../utils';
|
||||
|
||||
const timer = props => {
|
||||
const style = {
|
||||
fontSize: "120px",
|
||||
fontWeight: "normal",
|
||||
textShadow: "0 2px 2px #1f1f1f"
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={style} >
|
||||
{ formatMinute(props.seconds) }
|
||||
</div>
|
||||
)
|
||||
;
|
||||
};
|
||||
|
||||
timer.propTypes = {
|
||||
seconds: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
|
||||
export default timer;
|
|
@ -0,0 +1,24 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
|
||||
|
||||
body {
|
||||
background-image: url('../assets/bg.jpg');
|
||||
background-position: 'center';
|
||||
background-size: cover;
|
||||
background-color: #2e2e2e;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
font-family: 'Fredoka One', cursive;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #d45a45;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #f6f6f3;
|
||||
}
|
|
@ -0,0 +1,152 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
|
||||
import Notification from './Notification';
|
||||
import Headbar from '../components/Headbar';
|
||||
import Timer from '../components/Timer';
|
||||
import Logo from '../components/Logo';
|
||||
import Box from '../components/Box';
|
||||
import Footer from '../components/Footer';
|
||||
import { formatMinute } from '../utils';
|
||||
|
||||
import './App.css';
|
||||
|
||||
class App extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.APP_NAME = 'tomadoro';
|
||||
this.POMODORO_SECONDS = 1500;
|
||||
this.BREAK_SECONDS = 300;
|
||||
|
||||
this.state = {
|
||||
seconds: this.POMODORO_SECONDS,
|
||||
started: false,
|
||||
break: false,
|
||||
activePopupNotification: false,
|
||||
sendNotificationFlag: false
|
||||
};
|
||||
}
|
||||
|
||||
tick = () => {
|
||||
this.setState(state => ({ seconds: state.seconds - 1}));
|
||||
|
||||
document.title = `(${formatMinute(this.state.seconds)}) ${this.APP_NAME}`;
|
||||
|
||||
if (this.state.seconds === 0) {
|
||||
this.stopTimer();
|
||||
this.finishedTimer();
|
||||
}
|
||||
};
|
||||
|
||||
startTimer = () => {
|
||||
this.setState({ started: true, activePopupNotification: 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.APP_NAME;
|
||||
}
|
||||
|
||||
finishedTimer = () => {
|
||||
this.setState({
|
||||
sendNotificationFlag: true
|
||||
});
|
||||
|
||||
this.changeMode();
|
||||
}
|
||||
|
||||
changeMode = () => {
|
||||
if (this.state.break && !this.state.started) {
|
||||
this.pomodoroMode();
|
||||
} else if (!this.state.break && !this.state.started) {
|
||||
this.breakMode();
|
||||
}
|
||||
}
|
||||
|
||||
pomodoroMode = () => {
|
||||
this.setState({
|
||||
seconds: this.POMODORO_SECONDS,
|
||||
break: false
|
||||
});
|
||||
}
|
||||
|
||||
breakMode = () => {
|
||||
this.setState({
|
||||
seconds: this.BREAK_SECONDS,
|
||||
break: true
|
||||
});
|
||||
}
|
||||
|
||||
handleNotification = flag => {
|
||||
this.setState({
|
||||
sendNotificationFlag: flag
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let notification = null;
|
||||
|
||||
if (this.state.activePopupNotification) {
|
||||
notification = (
|
||||
<Notification
|
||||
send={this.state.sendNotificationFlag}
|
||||
handleNotification={this.handleNotification} />
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{notification}
|
||||
<Headbar />
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
<Logo
|
||||
isStarted={this.state.started}
|
||||
click={this.changeMode} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Timer seconds={this.state.seconds} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col
|
||||
sm={{ size: 10, offset: 1 }}
|
||||
md={{ size: 8, offset: 2 }}
|
||||
lg={{ size: 6, offset: 3 }} >
|
||||
<Box
|
||||
startButton={this.startTimer}
|
||||
stopButton={this.stopTimer}
|
||||
resetButton={this.resetTimer}
|
||||
isStarted={this.state.started}
|
||||
seconds={this.state.seconds} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<Footer />
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import WebNotification from 'react-web-notification';
|
||||
import sound from '../sound.mp3';
|
||||
import sound from '../assets/sound.mp3';
|
||||
|
||||
class Notification extends Component {
|
||||
constructor(props) {
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import App from './App';
|
||||
import App from './containers/App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
export const formatMinute = s => {
|
||||
return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
|
||||
};
|
Loading…
Reference in New Issue