category chooser mostly working

src/App.vue

@@ -7,15 +7,15 @@
 	import Timer from './components/timer.vue'
 	import Status from './components/status.vue'
 	
-	const currentWorkingCategoryID = ref(1)
+	const currentWorkingCategory = ref(null)
 	const summaryRef = ref(null)
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
 	const instruments = ref([])
 	const categories = ref([])
 
-	const updateCurrentWorkingCategoryID = (id) =>{
-		currentWorkingCategoryID.value = id
+	const updateCurrentWorkingCategoryID = (category) =>{
+		currentWorkingCategory.value = category
 	}
 
 	const refreshPage = (session) => {
@@ -29,6 +29,7 @@
 		instruments.value = await response.json()
 		response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories')
 		categories.value = await response.json()
+		currentWorkingCategory.value = categories.value[0]
 	}
 	onMounted(loadData)
 </script>
@@ -37,21 +38,24 @@
 	<main>
 		<section id="timer">
 			<Status ref="statusRef"/>
+			<!--
 			<Timer 
 				@loggedTime="refreshPage"
 				:categories="categories"
 				:instruments="instruments"
-				:currentWorkingCategoryID="currentWorkingCategoryID"/>
+				:currentWorkingCategory="currentWorkingCategory"/>
+			-->
 		</section>
 		<section id="summary">
 			<Summary ref="summaryRef" @update="updateCurrentWorkingCategoryID"/>
 		</section>
 		<section id="category">
 			<ShowCategory
+				v-if="categories.length > 0"
 				:instruments="instruments"
 				:categories="categories"
 				ref="showCategoryRef"
-				:currentWorkingCategoryID="currentWorkingCategoryID"/>
+				:currentWorkingCategory="currentWorkingCategory"/>
 		</section>
 		<section id="songs">
 			<Songs/>

src/components/category_chooser.vue

@@ -1,21 +1,31 @@
 <script setup>
 	import { onMounted, ref, watch, toRefs } from 'vue'
 	const emit = defineEmits(['update'])
-	const props = defineProps(['instruments', 'categories', 'currentWorkingCategoryID'])
-	const { currentWorkingCategoryID } = toRefs(props);
-	const chosenInstrument = ref('clarinet')
+	const props = defineProps(['instruments', 'categories', 'currentWorkingCategory'])
 	
 	const handleSelection = (event)=>{
 		emit('update', event.target.value)
 	}
-	
-	watch(() => props.currentWorkingCategoryID, (newValue)=>{
-		const newCategory = props.categories.find(category => category.id == newValue)
-		chosenInstrument.value = newCategory.instrument
-	})
+	/*watch(() => props.currentWorkingCategory, (newValue)=>{*/
+		/*const newCategory = props.categories.find(category => category.id == newValue)*/
+		/*chosenInstrument.value = newCategory.instrument*/
+	/*})*/
 </script>
 <template>
-	<select v-model="chosenInstrument">
+	<select v-model="currentWorkingCategory.instrument">
+		<option v-for="instrument in props.instruments">
+			{{instrument.name}}
+		</option>
+	</select>
+	<select @change="handleSelection" v-model="currentWorkingCategory.id">
+			<option v-show="category.instrument === currentWorkingCategory.instrument"
+				v-bind:value="category.id"
+				v-for="category in props.categories">
+					{{category.category}}
+		</option>
+	</select>
+	<!--
+	<select v-model="currentWorkingCategory.instrument">
 		<option v-for="instrument in props.instruments" v-bind:value="instrument.name">
 			{{instrument.name}}
 		</option>
@@ -23,7 +33,7 @@
 	<select
 		@change="handleSelection"
 		v-for="instrument in props.instruments"
-		v-model="props.currentWorkingCategoryID"
+		v-model="props.currentWorkingCategory"
 		v-show="instrument.name == chosenInstrument">
 			<option
 				v-bind:value="category.id"
@@ -34,4 +44,5 @@
 					{{category.category}}
 		</option>
 	</select>
+	-->
 </template>

src/components/show_category.vue

@@ -2,12 +2,11 @@
 	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
 
-	const props = defineProps(['categories', 'instruments', 'currentWorkingCategoryID'])
+	const props = defineProps(['categories', 'instruments', 'currentWorkingCategory'])
 
 	const categorySessions = ref([])
-	const practiceCategoryId = ref(0)
 
-	const { currentWorkingCategoryID } = toRefs(props);
+	/*const { currentWorkingCategory } = toRefs(props);*/
 
 	const change = async (event) => {
 		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value)
@@ -18,18 +17,16 @@
 		navigator.clipboard.writeText(event.target.innerText)
 	}
 
-	const loadCategory = async (newValue) => {
-		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+newValue)
+	const loadCategory = async (chosenCategoryID) => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+chosenCategoryID)
 		categorySessions.value = await response.json()
-		practiceCategoryId.value = newValue
 	}
 
 	onMounted(async () => {
-		practiceCategoryId.value = currentWorkingCategoryID
-		loadCategory(currentWorkingCategoryID.value)
+		loadCategory(props.currentWorkingCategory.id)
 	})
 
-	watch(currentWorkingCategoryID, loadCategory)
+	/*watch(currentWorkingCategory, loadCategory)*/
 	defineExpose({loadCategory})
 </script>
 
@@ -37,10 +34,9 @@
 	<h2>Show Category</h2>
 	<CategoryChooser
 		@update="loadCategory" 
-		v-if="categories.length > 0" 
-		:currentWorkingCategoryID="props.currentWorkingCategoryID"
+		:currentWorkingCategory="props.currentWorkingCategory"
 		:instruments="props.instruments"
-		:categories="categories" />
+		:categories="props.categories" />
 	<table>
 		<thead>
 			<tr>