reset button

src/components/2

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import axios from 'axios';
+
+	const getAccumulatedSeconds = (newerTime, olderTime) => {
+		return Math.floor((newerTime-olderTime)/1000);
+	}
+
+	export default {
+		data() {
+			return {
+				categories:[],
+				running: false,
+				startTime:0,
+				savedPreviousSeconds:0
+			}
+		},
+		methods: {
+			submit(event){
+				event.preventDefault();
+				console.log(this.description);
+				console.log(this.seconds);
+				console.log(this.comments);
+				console.log(this.practice_category_id);
+			},
+			start(event){
+				this.startTime = Date.now();
+				this.running = true;
+			},
+			stop(event){
+				this.running = false;
+				this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
+			},
+			reset(event){
+				this.savedPreviousSeconds = 0;
+			}
+		},
+		mounted() {
+			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
+				this.categories = response.data
+			})
+		}
+	}
+</script>
+
+<template>
+	<details>
+		<summary><h2>Timer</h2></summary>
+		<button :disabled="running" @click="start">Start Timer</button>
+		<button :disabled="!running" @click="stop">Stop Timer</button>
+		<button :disabled="running" @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"/>
+
+			<label>Comments</label>
+			<textarea v-model="comments"/>
+
+			<label>Practice Category</label>
+			<select v-model="practice_category_id">
+				<option v-for="category in categories" v-bind:value="category.id">
+					{{category.id}}.
+					{{category.instrument}}
+					:
+					{{category.category}}
+				</option>
+			</select>
+
+			<input type="Submit"/>
+		</form>
+	</details>
+</template>
+
+<style scoped>
+label, [type="submit"] {
+	display:block;
+}
+</style>

src/components/timer.vue

@@ -29,6 +29,9 @@
 			stop(event){
 				this.running = false;
 				this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
+			},
+			reset(event){
+				this.savedPreviousSeconds = 0;
 			}
 		},
 		mounted() {
@@ -44,6 +47,7 @@
 		<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>
 		<form @submit="submit">
 			<label>Description</label>
 			<input v-model="description" type="text"/>