franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Minor fixes

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-02 18:54:55 -03:00
parent e4f3bccd8c
commit 8a7b4ec1d2
16 changed files with 348 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -24,5 +24,4 @@ yarn-error.log*
# firebase
/src/components/Firebase
/src/components/Clockify
src/components/Firebase

22
public/css_styles/styles.css
View File

@@ -44,6 +44,11 @@
background-color: #ffe83d;
color: #000000;
}
.header-main-page .konami-code {
font-family: "Raleway", sans-serif;
font-weight: 700;
color: #4c8ad5;
}
@media (max-width: 991.98px) {
.header-main-page {
@@ -70,7 +75,7 @@
align-items: center;
justify-content: space-between;
padding: 0px 5vw;
height: 7vh;
height: 8vh;
}
.banner-login p {
margin: 0;
@@ -85,7 +90,7 @@
background: none;
border: none;
width: 8vw;
font-size: 2.6vh;
font-size: 12pt;
font-weight: bold;
color: #ffffff;
height: 6vh;
@@ -191,6 +196,9 @@
}
@media (max-width: 576px) {
.main-pomodoro {
height: auto;
}
.main-pomodoro .timer {
font-size: 80pt;
}
@@ -335,7 +343,7 @@
color: #4c8ad5;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox_control {
border: 3px solid #3e70ae;
border: 3px solid #eff3f8;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control {
background-color: #4c8ad5;
@@ -672,6 +680,14 @@ html, body {
.dark-mode {
position: initial;
}
.dark-mode label {
width: 50px;
height: 20px;
}
.dark-mode label::after {
width: 15px;
height: 15px;
}
}
@media (max-width: 576px) {
.dark-mode {

2
public/css_styles/styles.css.map
View File

File diff suppressed because one or more lines are too long

4
public/sass_styles/_banner-login.scss
View File

@@ -10,7 +10,7 @@
padding: 0px 5vw;
height: 7vh;
height: 8vh;
p {
@@ -27,7 +27,7 @@
button {
@include normalizeButton();
font-size: 2.6vh;
font-size: 12pt;
font-weight: bold;
color: #ffffff;

10
public/sass_styles/_dark-mode_toogle-switch.scss
View File

@@ -49,7 +49,15 @@
.dark-mode {
position: initial;
label {
width: 50px;
height: 20px;
}
label::after {
width: 15px;
height: 15px;
}
}
}

6
public/sass_styles/_header.scss
View File

@@ -53,6 +53,12 @@
}
}
}
.konami-code {
@include titleFont();
color: $lightest-color-dark;
}
}

2
public/sass_styles/_mainPomodoro.scss
View File

@@ -69,6 +69,8 @@
@media (max-width: 576px) {
.main-pomodoro {
height: auto;
.timer {
font-size: 80pt;

2
public/sass_styles/styles.scss
View File

@@ -49,7 +49,7 @@ $second-color-dark: #3A4750;
$light-color-dark: #D72323;
$light-color-dark-darker: #7c1414;
$lightest-color-dark: #4c8ad5;
$lightest-color-dark-darker: #3e70ae;
$lightest-color-dark-darker: #eff3f8;
@import 'header';
@import 'banner-login';

9
src/App.js
View File

@@ -3,6 +3,8 @@ import {firebase} from './components/Firebase/firebase'
import {getAuth, onAuthStateChanged} from 'firebase/auth'
import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
import detectKeys from './components/Misc/detectKeys';
import AboutThis from "./components/AboutThis";
import BannerLogin from "./components/BannerLogin";
import GoDownArrow from "./components/GoDownArrow";
@@ -37,6 +39,8 @@ function App() {
const [darkMode, setDarkmode] = useState(false)
const [KonamiCodeActive, setKonamiCodeActive] = useState(false)
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
@@ -69,6 +73,8 @@ function App() {
darkMode={darkMode}
setDarkmode={setDarkmode}
KonamiCodeActive= {KonamiCodeActive}
/>
<Switch>
@@ -129,6 +135,9 @@ function App() {
setProjectID={setProjectID}
darkMode={darkMode}
setKonamiCodeActive = {setKonamiCodeActive}
KonamiCodeActive= {KonamiCodeActive}
/>
<GoDownArrow

1
src/components/ClockifyTasksDisplay.jsx
View File

@@ -5,6 +5,7 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
import loadingGifLightTheme from './img/loading-light-theme.png'
import loadingGifDarkTheme from './img/loading-dark-theme.png'
import detectKeys from './Misc/detectKeys';
const ClockifyTasksDisplay = (props) => {

3
src/components/Header.jsx
View File

@@ -18,6 +18,9 @@ const Header = (props) => {
signIn={props.signIn}
darkMode={props.darkMode}
/>
<div className="konami-code">
{props.KonamiCodeActive ? 'Konami Code ON' : null}
</div>
</header>
)
}

2
src/components/Identify.jsx
View File

@@ -171,7 +171,7 @@ const Identify = (props) => {
if (action === 'clss') {
signOutFromApp()
props.history.push('/')
return
}
onAuthStateChanged(auth, (user) => {

47
src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx
View File

@@ -3,6 +3,7 @@ import React, {useState} from 'react'
import uploadToClockifyTimer from '../Clockify/uploadToClockifyTimer'
import getAndFormatCurrentTime from '../Clockify/getAndFormatCurrentTime'
import randomText from '../Misc/randomText'
import detectKeys from '../Misc/detectKeys'
import bell_x2 from '../sounds/bell-x2.mp3'
import bell_x3 from '../sounds/bell-x3.mp3'
@@ -19,11 +20,15 @@ const MainPomodoroTimer = (props) => {
const [timerActivity, setTimerActivity] = useState(false)
const [actualStyle, setActualStyle] = useState('Regular')
const [actualStyle, setActualStyle] = useState('')
const [alreadyCountingStart, setAlreadyCountingStart] = useState(false) /* TOO MUCH FUCKING STATES https://pbs.twimg.com/media/EoM2rXuW8AMRxZh?format=png&name=large*/
const [alreadyCountingEnd, setAlreadyCountingEnd] = useState(false)
const [controlKonamiCode, setControlKonamiCode] = useState(true)
const [velocity, setVelocity] = useState(1)
const setTimeStyle = () => {
if (props.style === 'Can I play, Daddy?') {
@@ -141,14 +146,44 @@ const MainPomodoroTimer = (props) => {
}
React.useEffect (() => {
if (actualStyle !== props.style) {
setTimeStyle()
}
if (controlKonamiCode) {
detectKeys(props.setKonamiCodeActive)
setControlKonamiCode(false)
}
})
const startTimer = (velocity = 1) => {
const startTimer = () => {
document.title = minutes + ':' + seconds
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
setVelocity(2)
console.log(document.visibilityState)
}
if (document.visibilityState === 'visible') {
setVelocity(1)
console.log(document.visibilityState)
}
});
return setTimeout(() => {
if (seconds === 0) {
@@ -238,7 +273,7 @@ const MainPomodoroTimer = (props) => {
getFavicon().href = './img/working favicon.ico'
if (!alreadyCountingStart) {
const time = getAndFormatCurrentTime()
const time = getAndFormatCurrentTime(props.KonamiCodeActive)
props.setStartTime(time)
setAlreadyCountingStart(true)
@@ -278,7 +313,7 @@ const MainPomodoroTimer = (props) => {
}
if (!alreadyCountingEnd) {
const time = getAndFormatCurrentTime()
const time = getAndFormatCurrentTime(props.KonamiCodeActive)
props.setEndTime(time)
setAlreadyCountingEnd(true)
@@ -292,7 +327,7 @@ const MainPomodoroTimer = (props) => {
if (minutes >= 0 || seconds > 0) {
idTimeOut = startTimer()
idTimeOut = startTimer()
}
}
@@ -350,7 +385,7 @@ const MainPomodoroTimer = (props) => {
setRestCounter((restCounter + 1))
if (!alreadyCountingEnd) {
const time = getAndFormatCurrentTime()
const time = getAndFormatCurrentTime(props.KonamiCodeActive)
props.setEndTime(time)
setAlreadyCountingEnd(true)

166
src/components/Main Pomodoro Childrens/timer.js Normal file
View File

@@ -0,0 +1,166 @@
import React from 'react'
const timer = (props, setTimerActivity, weAreInBreakTime, getFavicon, alreadyCountingStart, getAndFormatCurrentTime, setAlreadyCountingStart, minutes, seconds, playAudio, restCounter, setPomodoroCounter, setRestCounter, setBreak, setWeAreInBreakTime, randomText, alreadyCountingEnd, setAlreadyCountingEnd, idTimeOut, startTimer, setTimeStyle, timerActivity) => {
if (props.timerOn) {
setTimerActivity(true)
if (!weAreInBreakTime) {
getFavicon().href = './img/working favicon.ico'
if (!alreadyCountingStart) {
const time = getAndFormatCurrentTime()
props.setStartTime(time)
setAlreadyCountingStart(true)
document.title = randomText('work')
}
if (minutes === 0 && seconds === 0) {
setTimerActivity(false)
playAudio('work')
if (restCounter !== 3){
setTimeout( () => {
setPomodoroCounter('Pomodoros')
setRestCounter((restCounter + 1))
setBreak(1, 0)
setWeAreInBreakTime(true)
}, 1000)
}
if (restCounter === 3) {
setTimeout( () => {
setPomodoroCounter('Pomodoros')
setRestCounter((restCounter + 1))
setBreak(0, 1)
setWeAreInBreakTime(true)
}, 1000)
}
if (!alreadyCountingEnd) {
const time = getAndFormatCurrentTime()
props.setEndTime(time)
setAlreadyCountingEnd(true)
props.setLetsUpload(true)
document.title = randomText('rest')
}
}
if (minutes >= 0 || seconds > 0) {
idTimeOut = startTimer()
}
}
if(weAreInBreakTime) {
getFavicon().href = './img/rest favicon.ico'
if (minutes === 0 && seconds === 0) {
setTimerActivity(false)
playAudio('rest')
setTimeout( () => {
if (restCounter === 4) {
setPomodoroCounter('Long Rest')
setRestCounter(0)
} else {
setPomodoroCounter('Rest')
}
setWeAreInBreakTime(false)
props.setTimerOn(false)
setTimeStyle()
}, 1000)
}
if (minutes >= 0 || seconds > 0) {
idTimeOut = startTimer()
}
}
return () => {
clearInterval(idTimeOut)
}
}
if (!props.timerOn) {
document.title = 'Clockify Pomodoro Timer'
getFavicon().href = './img/favicon.ico'
if ( timerActivity === true) {
if (!weAreInBreakTime) {
if (minutes <= ( setTimeStyle().minutes / 2) ) {
setPomodoroCounter('Pomodoros')
setRestCounter((restCounter + 1))
if (!alreadyCountingEnd) {
const time = getAndFormatCurrentTime()
props.setEndTime(time)
setAlreadyCountingEnd(true)
props.setLetsUpload(true)
}
}
}
if (weAreInBreakTime) {
if (restCounter === 4) {
setPomodoroCounter('Long Rest')
setRestCounter(0)
} else {
setPomodoroCounter('Rest')
}
setWeAreInBreakTime(false)
}
setTimerActivity(false)
setTimeStyle()
}
setAlreadyCountingStart(false)
setAlreadyCountingEnd(false)
}
}
export default timer

4
src/components/MainPomodoro.jsx
View File

@@ -85,6 +85,10 @@ const MainPomodoro = (props) => {
setEndTime={setEndTime}
setLetsUpload={setLetsUpload}
setKonamiCodeActive={props.setKonamiCodeActive}
KonamiCodeActive= {props.KonamiCodeActive}
/>

82
src/components/Misc/detectKeys.js Normal file
View File

@@ -0,0 +1,82 @@
import React from 'react'
const detectKeys = (setKonamiCodeActive) => {
let secuencie = []
window.addEventListener('keydown', (event) => {
console.log(event.key)
let k = event.key
secuencie.push(k)
if (
secuencie[0] === 'ArrowUp' &&
secuencie[1] === 'ArrowUp' &&
secuencie[2] === 'ArrowDown' &&
secuencie[3] === 'ArrowDown' &&
secuencie[4] === 'ArrowLeft' &&
secuencie[5] === 'ArrowRight' &&
secuencie[6] === 'ArrowLeft' &&
secuencie[7] === 'ArrowRight' &&
(secuencie[8] === 'b' || secuencie[8] === 'B') &&
(secuencie[9] === 'a' || secuencie[9] === 'A') &&
secuencie[10] === 'Enter'
) {
console.log('TODO BIEN')
secuencie = []
setKonamiCodeActive(true)
return true
}
if (secuencie.length >= 12) {
secuencie = []
}
switch (k) {
case 'ArrowUp':
break;
case 'ArrowDown':
break;
case 'ArrowRight':
break;
case 'ArrowLeft':
break;
case 'b':
break;
case 'B':
break;
case 'a':
break;
case 'A':
break;
case 'Enter':
break;
default:
secuencie = []
break;
}
console.log(secuencie)
})
}
export default detectKeys