From d9935f7e1f83f5bc134511c3ec777621325610dd Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Wed, 14 Aug 2024 00:43:51 +0200
Subject: [PATCH] click categories to set timer and show category
 currentWorkingCategory

---
 src/App.vue                      | 20 +++++++++++++++++---
 src/components/show_category.vue | 14 ++++++++++++--
 src/components/summary.vue       |  3 ++-
 src/components/timer.vue         |  8 +++++++-
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index df3fa02..9661b03 100644
--- a/src/App.vue
+++ b/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/>
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index d4643c3..59389a6 100644
--- a/src/components/show_category.vue
+++ b/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}}
diff --git a/src/components/summary.vue b/src/components/summary.vue
index 3eb7243..b8f3f49 100644
--- a/src/components/summary.vue
+++ b/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>
diff --git a/src/components/timer.vue b/src/components/timer.vue
index 6cd5000..5b4d091 100644
--- a/src/components/timer.vue
+++ b/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>