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

Added styles to the selects and loading state

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-29 21:43:08 -03:00
parent 94d90764b6
commit 731d47d8fe
8 changed files with 103 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/css_styles/styles.css
View File

@@ -569,6 +569,33 @@
color: #ffffff;
}
.clockify-tasks-display {
width: 20vw;
position: absolute;
top: 60vh;
left: 2.5vw;
}
.clockify-tasks-display.loading-container {
width: 20vw;
height: auto;
}
.clockify-tasks-display.disabled {
user-select: none;
cursor: initial;
pointer-events: none;
opacity: 30%;
}
.clockify-tasks-display .workspace-selector, .clockify-tasks-display .project-selector {
width: 15vw;
height: 3vw;
}
.clockify-tasks-display .workspace-selector.disabled, .clockify-tasks-display .project-selector.disabled {
user-select: none;
cursor: initial;
pointer-events: none;
opacity: 30%;
}
html, body {
margin: 0;
padding: 0;

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

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss"],"names":[],"mappings":"AACA;EACI,kBCsCS;EDpCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAOZ;EACI;;;ACpDJ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFuBO;;AEpBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFOG;EENH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFHG;EEKH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFlBO;EEmBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHuBO;EGtBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHVL;EGWK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH7CE;;;AGsDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN0BU;;AMxBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPED;EODC,kBPGF;;;AQ3Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRwBD;EQtBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRSM;;AQLd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;AClEpB;EAEI;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA,kBT6BS;ES5BT;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EAEA,kBTKS;;ASFb;EACI;;;ACzCJ;EACI;EAEA;;AAEA;EVJJ;EACA;EAQA;EACA;EACA;EUHQ;EACA;;AAIR;EACI;;AAEA;EAAI;;AAKJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA,kBVOE;;AULF;EV1BR;EACA;EACA;EAXA;EACA;EUuCY,OVFD;EUIC;;AAIR;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;EACA,kBV1CC;EU4CD;EACA;EAEA;EAEA;;AAKI;EVtFhB;EACA;EACA;EAXA;EACA;;AUmGgB;EACI;;AAIR;EACI;EACA;EAEA;EAEA;EACA;EAEA;;;AAOpB;EACI;EACA;EAEA;EACA;EACA;;;AClIJ;EAEI;EACA;EAEA;EAEA;EAEA,kBXgCW;EW9BX;EACA;EACA;EAEA;;AAEA;EXdA;EACA;EWgBI;EACA;EAEA;;;AAIR;EACI;EACA;EAEA;EAEA;EAEA,kBXMW;EWJX;EACA;EACA;EAEA;;AAEA;EXxCA;EACA;EW0CI;EAEA;EAEA;;;AXcR;EACI;EACA;;;AAGJ;EACI;EACA,kBAlCe","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"}

32
public/sass_styles/_clockify-tasks-display.scss Normal file
View File

@@ -0,0 +1,32 @@
.clockify-tasks-display {
width: 20vw;
position: absolute;
top: 60vh;
left: 2.5vw;
&.loading-container {
width: 20vw;
height: auto;
}
&.disabled {
user-select: none;
cursor: initial;
pointer-events: none;
opacity: 30%;
}
.workspace-selector, .project-selector {
width: 15vw;
height: 3vw;
&.disabled {
user-select: none;
cursor: initial;
pointer-events: none;
opacity: 30%;
}
}
}

1
public/sass_styles/styles.scss
View File

@@ -61,6 +61,7 @@ $lightest-color-dark: #EEEEEE;
@import 'dark-mode_toogle-switch';
@import 'account';
@import 'goToAccount';
@import 'clockify-tasks-display';
html, body {
margin: 0;

5
src/App.js
View File

@@ -22,6 +22,8 @@ import ClockifyTasksDisplay from './components/ClockifyTasksDisplay';
function App() {
const [timerOn, setTimerOn] = useState(false)
const [signIn, setSignIn] = useState('')
const auth = getAuth()
@@ -59,9 +61,12 @@ function App() {
/>
<MainPomodoro
signIn={signIn}
timerOn={timerOn}
setTimerOn={setTimerOn}
/>
<ClockifyTasksDisplay
signIn={signIn}
timerOn={timerOn}
/>
<GoDownArrow />
<AboutThis />

37
src/components/ClockifyTasksDisplay.jsx
View File

@@ -3,7 +3,7 @@ import React, {useState} from 'react'
import { firebase } from './Firebase/firebase';
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
import loadingGif from './img/loading.gif'
const ClockifyTasksDisplay = (props) => {
@@ -18,6 +18,11 @@ const ClockifyTasksDisplay = (props) => {
const [projects, setProjects] = useState([])
const [projectsDone, setProjectsDone] = useState(false)
const [workspaceID, setWorspaceID] = useState(0)
const [projectID, setProjectID] = useState(0)
const [loading, setLoading] = useState(true)
const getApiKey = async () => {
try {
@@ -85,6 +90,7 @@ const ClockifyTasksDisplay = (props) => {
await setWorkspaces(workspacesCopy)
setWorkspacesReady(true)
setLoading(false)
}
console.log(workspaces)
@@ -127,8 +133,6 @@ const ClockifyTasksDisplay = (props) => {
const data = await response.json()
console.log(data)
setProjectsDone(true)
return await data
@@ -139,6 +143,16 @@ const ClockifyTasksDisplay = (props) => {
const defineProjects = async (e) => {
if (e === 0) {
setProjectsDone(false)
setProjects([])
} else {
setProjectsDone(true)
}
setWorspaceID(e)
const data = await makeRequestProjects(e)
await setProjects(data)
@@ -151,11 +165,18 @@ const ClockifyTasksDisplay = (props) => {
}
if (loading) {
return (
<div className="clockify-tasks-display loading-container">
<img src={loadingGif} alt=""/>
</div>
)
}
return (
<div>
<select onChange={(e) => {defineProjects(e.target.value)}}>
<div className={props.timerOn ? 'clockify-tasks-display disabled' : 'clockify-tasks-display'}>
<select onChange={(e) => {defineProjects(e.target.value)}} className='workspace-selector'>
<option value="0">Select a Workspace</option>
{
workspacesReady ?
@@ -165,9 +186,9 @@ const ClockifyTasksDisplay = (props) => {
: null
}
</select>
<select>
<select className={workspaceID !== 0 ? 'project-selector' : 'project-selector disabled'}>
{
projectsDone ?
projectsDone && projects !== undefined ?
projects.map( (project) => {
if (!project.archived){
@@ -175,7 +196,7 @@ const ClockifyTasksDisplay = (props) => {
}
})
:null
: null
}
</select>
</div>

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

@@ -2,8 +2,8 @@ import React, {useState} from 'react'
const MainPomodoroTimer = (props) => {
const [minutes, setMinutes] = useState('25')
const [seconds, setSeconds] = useState('0')
const [minutes, setMinutes] = useState(25)
const [seconds, setSeconds] = useState(0)
const [breakTime, setBreakTime] = useState(undefined)
const [weAreInBreakTime, setWeAreInBreakTime] = useState(false)
@@ -144,12 +144,12 @@ const MainPomodoroTimer = (props) => {
if (seconds === 0) {
setSeconds(59)
setMinutes((minutes - 1))
setMinutes(minutes - 1)
}
else {
setSeconds((seconds - 1))
setSeconds(seconds - 1)
}
}, (1000 / velocity))

9
src/components/MainPomodoro.jsx
View File

@@ -11,7 +11,6 @@ const MainPomodoro = (props) => {
const [style, setStyle] = useState('Regular')
const [displayHidden, setDisplayHidden] = useState(true)
const [timerOn, setTimerOn] = useState(false)
const [pomodoros, setPomodoros] = useState(0)
const [rests, setRests] = useState(0)
@@ -31,8 +30,8 @@ const MainPomodoro = (props) => {
style={style}
timerOn={timerOn}
setTimerOn={setTimerOn}
timerOn={props.timerOn}
setTimerOn={props.setTimerOn}
pomodoros={pomodoros}
setPomodoros={setPomodoros}
@@ -54,8 +53,8 @@ const MainPomodoro = (props) => {
</h3>
</div>
<button class="start-pomodoro" onClick={() => setTimerOn(!timerOn)}>{
timerOn ? 'STOP' : 'START'
<button class="start-pomodoro" onClick={() => props.setTimerOn(!props.timerOn)}>{
props.timerOn ? 'STOP' : 'START'
}</button>
</div>