click categories to set timer and show category currentWorkingCategory

src/App.vue

@@ -5,18 +5,32 @@
 	import Songs from './components/songs.vue'
 	import Timer from './components/timer.vue'
 </script>
+<script lang="ts">
+	export default {
+		data() {
+			return {
+				currentWorkingCategoryID:1
+			}
+		},
+		methods: {
+			setWorkingCategory(category){
+				this.currentWorkingCategoryID = category.category_id
+			}
+		}
+	}
+</script>
 
 <template>
 	<main>
 		<section id="timer">
 			<MinsLeftToPracticeToday/>
-			<Timer/>
+			<Timer :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="summary">
-			<Summary/>
+			<Summary :setWorkingCategory="setWorkingCategory"/>
 		</section>
 		<section id="category">
-			<ShowCategory/>
+			<ShowCategory :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="songs">
 			<Songs/>

src/components/show_category.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import axios from 'axios';
 	export default {
+		props: ['currentWorkingCategoryID'],
 		data() {
 			return {
 				categories:[],
-				categorySessions:[]
+				categorySessions:[],
 			}
 		},
 		methods: {
@@ -18,16 +19,25 @@
 			}
 		},
 		mounted() {
+			this.practice_category_id = this.currentWorkingCategoryID
 			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
 				this.categories = response.data
 			})
+		},
+		watch: {
+			currentWorkingCategoryID(newValue){
+				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+newValue).then((response)=>{
+					this.categorySessions = response.data;
+				})
+				this.practice_category_id = newValue
+			}
 		}
 	}
 </script>
 
 <template>
 	<h2>Show Category</h2>
-	<select @change="change">
+	<select @change="change" v-model="practice_category_id">
 		<option v-for="category in categories" v-bind:value="category.id">
 			{{category.id}}.
 			{{category.instrument}}

src/components/summary.vue

@@ -2,6 +2,7 @@
 	import axios from 'axios';
 
 	export default {
+		props: ['setWorkingCategory'],
 		data() {
 			return {
 				categories:[]
@@ -35,7 +36,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr v-for="category in categories">
+			<tr v-for="category in categories" @click="setWorkingCategory(category)">
 				<td>{{category.category_id}}</td>
 				<td>{{category.category}}</td>
 				<td>{{category.chunks_practiced}}</td>

src/components/timer.vue

@@ -24,6 +24,7 @@
 	}
 
 	export default {
+		props: ['currentWorkingCategoryID'],
 		data() {
 			return {
 				categories:[],
@@ -32,7 +33,6 @@
 				savedPreviousSeconds:0,
 				totalSeconds:0,
 				description:'',
-				practice_category_id:0,
 				comments:'',
 				manualHours:0,
 				manualMinutes:0,
@@ -158,12 +158,18 @@
 			}
 		},
 		mounted() {
+			this.practice_category_id = this.currentWorkingCategoryID
 			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
 				this.categories = response.data
 			})
 			this.totalSeconds = parseInt(window.localStorage.getItem('lastTotalSeconds'))
 			this.savedPreviousSeconds = this.totalSeconds
 			window.onbeforeunload = this.confirmClose
+		},
+		watch: {
+			currentWorkingCategoryID(newValue){
+				this.practice_category_id = newValue
+			}
 		}
 	}
 </script>