From ade7fa9612aefbe1594503db96ab4d0fc0f560fb Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Tue, 28 Mar 2023 17:54:53 -0400
Subject: [PATCH] display time as it changes. allow multiple timer starts and
 keep track of accumulated seconds

---
 src/components/timer.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/timer.vue b/src/components/timer.vue
index 20e6014..e8c2be2 100644
--- a/src/components/timer.vue
+++ b/src/components/timer.vue
@@ -11,7 +11,8 @@
 				categories:[],
 				running: false,
 				startTime:0,
-				savedPreviousSeconds:0
+				savedPreviousSeconds:0,
+				totalSeconds:0
 			}
 		},
 		methods: {
@@ -25,13 +26,18 @@
 			start(event){
 				this.startTime = Date.now();
 				this.running = true;
+				this.intervalID = setInterval(()=>{
+					this.totalSeconds = getAccumulatedSeconds(Date.now(), this.startTime) + this.savedPreviousSeconds;
+				}, 1000);
 			},
 			stop(event){
 				this.running = false;
 				this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
+				clearInterval(this.intervalID);
 			},
 			reset(event){
 				this.savedPreviousSeconds = 0;
+				this.totalSeconds = 0;
 			}
 		},
 		mounted() {
@@ -47,13 +53,13 @@
 		<summary><h2>Timer</h2></summary>
 		<button :disabled="running" @click="start">Start Timer</button>
 		<button :disabled="!running" @click="stop">Stop Timer</button>
-		<button :disabled="running || savedPreviousSeconds === 0" @click="reset">Reset</button>
+		<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
 		<form @submit="submit">
 			<label>Description</label>
 			<input v-model="description" type="text"/>
 
 			<label>Seconds</label>
-			<input v-model="savedPreviousSeconds" type="number"/>
+			<input v-model="totalSeconds" type="number"/>
 
 			<label>Comments</label>
 			<textarea v-model="comments"/>