From 5cc071a5bde8e73fd6c78a0cafccdf794eb075de Mon Sep 17 00:00:00 2001 From: = Date: Tue, 26 Jan 2021 15:18:32 +0000 Subject: [PATCH 01/12] pause button added --- .idea/.gitignore | 3 ++ .idea/misc.xml | 6 +++ .idea/modules.xml | 8 ++++ .idea/vcs.xml | 6 +++ .project | 11 +++++ programming-timer.iml | 9 ++++ public/pause.svg | 17 ++++++++ src/timer/TimerSVG.svelte | 89 ++++++++++++++++++++++++--------------- 8 files changed, 114 insertions(+), 35 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .project create mode 100644 programming-timer.iml create mode 100644 public/pause.svg diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..26d3352 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..cefb937 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..1a32a9c --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.project b/.project new file mode 100644 index 0000000..00913cc --- /dev/null +++ b/.project @@ -0,0 +1,11 @@ + + + programming-timer + + + + + + + + diff --git a/programming-timer.iml b/programming-timer.iml new file mode 100644 index 0000000..48426fc --- /dev/null +++ b/programming-timer.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/public/pause.svg b/public/pause.svg new file mode 100644 index 0000000..1e66693 --- /dev/null +++ b/public/pause.svg @@ -0,0 +1,17 @@ + + + + +Created by potrace 1.16, written by Peter Selinger 2001-2019 + + + + + + + diff --git a/src/timer/TimerSVG.svelte b/src/timer/TimerSVG.svelte index f84aedd..8eb998a 100644 --- a/src/timer/TimerSVG.svelte +++ b/src/timer/TimerSVG.svelte @@ -1,6 +1,6 @@ + + + viewBox="-210 0 700 270"> > - + + + class="timer-text"> {displayTime} + + - - From e2b986be8d7303c7120e25baad660a73cecc47c8 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 3 Feb 2021 14:52:39 +0000 Subject: [PATCH 02/12] pause functionality added --- programming-timer.iml | 9 ---- public/pause.svg | 19 +------- src/timer/Timer.svelte | 92 ++++++++++++++++++++++++++++++++++---- src/timer/TimerSVG.svelte | 69 ++++++++++++---------------- src/utils/handleSession.js | 10 +++++ 5 files changed, 124 insertions(+), 75 deletions(-) delete mode 100644 programming-timer.iml diff --git a/programming-timer.iml b/programming-timer.iml deleted file mode 100644 index 48426fc..0000000 --- a/programming-timer.iml +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/public/pause.svg b/public/pause.svg index 1e66693..38302a0 100644 --- a/public/pause.svg +++ b/public/pause.svg @@ -1,17 +1,2 @@ - - - - -Created by potrace 1.16, written by Peter Selinger 2001-2019 - - - - - - - + + diff --git a/src/timer/Timer.svelte b/src/timer/Timer.svelte index d1cf945..1630c32 100644 --- a/src/timer/Timer.svelte +++ b/src/timer/Timer.svelte @@ -15,7 +15,7 @@ initWebsocket, closeWs, }from '../utils/websocket.js'; - import { updateSession } from '../utils/handleSession.js'; + import { updateSession, pauseSession } from '../utils/handleSession.js'; import TimerSVG from './TimerSVG.svelte'; const MAX_DURATION_LIMIT = minsToMillis(120); @@ -34,6 +34,7 @@ let intervals = [ ]; let displayTime = 'Start the timer'; let updatedDuration; + let pause = false; /** * Process received WebSocket messages @@ -73,6 +74,7 @@ calculateRemainingTime(sessionData); } else { startTimer(sessionData.Duration); + console.log(sessionData) try { await navigator.clipboard.writeText( `https://pairprogrammingtimer.com/${sessionData.SessionID}`); @@ -91,9 +93,17 @@ * @param {object} existingSessionData */ function calculateRemainingTime(existingSessionData) { + if (existingSessionData.PauseTime !== 0){ + console.log("calculating pause timer") + const endTime = existingSessionData.EndTime; + const pauseTime = existingSessionData.PauseTime; + const remainingTimeMillis = endTime - pauseTime; + displayRemainingTime(remainingTimeMillis) + } else { const endTime = existingSessionData.EndTime; const remainingTimeMillis = endTime - Date.now(); displayRemainingTime(remainingTimeMillis); + } } /** @@ -113,14 +123,69 @@ display(remainingTime); } + // let pauseInterval; + + /** + * Handle pause button, starts a new pause timer for duration of pause + * + * + * + */ + // function handlePause(){ + // pause = !pause; + // //starts a new timer when pause is pressed + // if (pause){ + // //communicate to server that session is paused + + + // console.log(pause) + // console.log("before pause ", sessionData.EndTime) + // const beginningTime = Date.now() + // pauseInterval = setInterval(() => { + // const currentTime = Date.now(); + // let pauseTimer = currentTime - beginningTime; + // sessionData.EndTime += pauseTimer; + // }, TIMER_REFRESH_RATE_MS); + // //add pauseTimer to the session duration + // } else { + // console.log("play pressed", sessionData.EndTime) + // clearInterval(pauseInterval) + // //communicate to server that session has resumed + + + // // let remainingTimeMillis = (sessionData.EndTime - Date.now()) + // // display(remainingTimeMillis) + // return + // } + // } + + function handlePause() { + clearTimer(); + const pauseMoment = Date.now() + const remainingMillis = sessionData.EndTime - pauseMoment; + pauseSession(sessionData.SessionID, pauseMoment) + // updatedDuration = displayTime; + setInterval(() => { + sessionData.StartTime = Date.now() + remainingMillis; + }, 30); + displayTime = displayTime.toString(); + // need remaining millis seconds and an interval to keep track of it assign it to StartTime + console.log('pausing'); + } + /** * Continously refresh the timer display - * for the duration of the timer + * for the duration of the timer, unless timer is paused * * @param {number} remainingTimeMillis */ function display(remainingTimeMillis) { - if (isNaN(remainingTimeMillis)) { + if (pause){ + displayTime = "Paused" + return + } + else + if (isNaN(remainingTimeMillis)){ return displayTime = remainingTimeMillis; } else { const currentInterval = setInterval(() => { @@ -142,7 +207,10 @@ if (remainingTimeMillis <= TIMES_UP_LIMIT_MS) { clearTimer(); timesUp(); - } else { + } else if (pause){ + return displayTime="Paused" + } + else { displayTime = millisToMinutesAndSeconds(remainingTimeMillis); return remainingTimeMillis; } @@ -201,10 +269,12 @@ startTimestamp={sessionData.StartTime} displayTime={displayTime} degrees={360 / sessionData.Duration} + bind:pause /> -{#if showReset} +
+ {#if showReset} updateSession(sessionData)}> reset the timer -
+ {:else} + {/if} + + data-testid='svg-element-parent' + version='1.1' + xmlns='http://www.w3.org/2000/svg' + width='100%' + viewBox='-210 0 700 270'> > + data-testid='svg-text' + x='140' + y='138' + text-anchor='middle' + class='timer-text'> {displayTime} - - - + \ No newline at end of file diff --git a/src/utils/handleSession.js b/src/utils/handleSession.js index c9d5fe6..491ec98 100644 --- a/src/utils/handleSession.js +++ b/src/utils/handleSession.js @@ -29,3 +29,13 @@ export async function newSession(duration) { }); return await response.json(); } + +export async function pauseSession(sessionID, pauseTime){ + await fetch(`${process.env.ADDR}/session/pause`, { + method: 'POST', + body: JSON.stringify( { + sessionId: sessionID, + pauseTime: pauseTime, + }), + }); +} From 2c4cf1458177f0592cbc77a750c3bef4038b7ada Mon Sep 17 00:00:00 2001 From: = Date: Wed, 3 Feb 2021 14:55:32 +0000 Subject: [PATCH 03/12] pause functionality added --- src/timer/Timer.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/timer/Timer.svelte b/src/timer/Timer.svelte index 1630c32..70df43f 100644 --- a/src/timer/Timer.svelte +++ b/src/timer/Timer.svelte @@ -1,3 +1,5 @@ +#prettier-ignore + diff --git a/src/timer/TimerSVG.svelte b/src/timer/TimerSVG.svelte index 6bd3f79..0dff306 100644 --- a/src/timer/TimerSVG.svelte +++ b/src/timer/TimerSVG.svelte @@ -6,9 +6,21 @@ export let startTimestamp; export let displayTime; export let degrees = 360 / duration; + export let pause; + + let intervalId; let elapsedMillis = 0; let draw = null; + // if paused need to clear the intervals and draw the + $: if (!pause) { + intervalId = drawTimeElapsed() + } + + $: if (pause) { + clearInterval(intervalId) + } + onDestroy(() => { clearInterval(intervalId); }); @@ -46,14 +58,18 @@ return coord; }; - const intervalId = setInterval(() => { - elapsedMillis = Date.now() - startTimestamp; - if (elapsedMillis <= duration) { - draw = drawCoord(elapsedMillis * degrees); - } else { - draw = drawCoord(359.99); - } - }, 30); + const drawTimeElapsed = () => ( + setInterval(() => { + elapsedMillis = Date.now() - startTimestamp; + if (elapsedMillis <= duration) { + draw = drawCoord(elapsedMillis * degrees); + } else { + draw = drawCoord(359.99); + } + }, 30)) + + + //intervalId = drawTimeElapsed()