From 79a1f6aaf0b3997d49d647beed9c4c6e85ccd78b Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Wed, 28 Aug 2024 18:39:23 +0200
Subject: [PATCH] App gets instruments via AJAX and sends to component chooser

---
 src/App.vue                         | 14 ++++++++++----
 src/components/category_chooser.vue | 26 ++++++++++----------------
 src/components/show_category.vue    |  5 +++--
 src/components/timer.vue            | 15 ++++++++++++++-
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ab99c77..1c8b488 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-	import { ref } from 'vue'
+	import { onMounted, ref } from 'vue'
 
 	import Summary from './components/summary.vue'
 	import ShowCategory from './components/show_category.vue'
@@ -11,6 +11,7 @@
 	const summaryRef = ref(null)
 	const statusRef = ref(null)
 	const showCategoryRef = ref(null)
+	const instruments = ref([])
 
 	const updateCurrentWorkingCategoryID = (id) =>{
 		currentWorkingCategoryID.value = id
@@ -21,20 +22,25 @@
 		statusRef.value.loadData()
 		showCategoryRef.value.loadCategory(session.practice_category_id)
 	}
-	
+
+	const loadData = async () => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'instruments')
+		instruments.value = await response.json()
+	}
+	onMounted(loadData)
 </script>
 
 <template>
 	<main>
 		<section id="timer">
 			<Status ref="statusRef"/>
-			<Timer @loggedTime="refreshPage" :currentWorkingCategoryID="currentWorkingCategoryID"/>
+			<Timer @loggedTime="refreshPage" :instruments="instruments" :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="summary">
 			<Summary ref="summaryRef" @update="updateCurrentWorkingCategoryID"/>
 		</section>
 		<section id="category">
-			<ShowCategory ref="showCategoryRef" :currentWorkingCategoryID="currentWorkingCategoryID"/>
+			<ShowCategory :instruments="instruments" ref="showCategoryRef" :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="songs">
 			<Songs/>
diff --git a/src/components/category_chooser.vue b/src/components/category_chooser.vue
index 1a6ce80..c0444d0 100644
--- a/src/components/category_chooser.vue
+++ b/src/components/category_chooser.vue
@@ -1,15 +1,10 @@
 <script setup>
-	import { onMounted, ref, watch, } from 'vue'
+	import { onMounted, ref, watch, toRefs } from 'vue'
 	const emit = defineEmits(['update'])
-	const props = defineProps(['categories', 'currentWorkingCategoryID'])
-	const instruments = ref([])
-	const currentWorkingCategoryID = ref(props.currentWorkingCategoryID)
+	const props = defineProps(['instruments', 'categories', 'currentWorkingCategoryID'])
+	const { currentWorkingCategoryID } = toRefs(props);
 	const chosenInstrument = ref('clarinet')
-	for(let category of props.categories){
-		if(!instruments.value.includes(category.instrument)){
-			instruments.value.push(category.instrument)
-		}
-	}
+	
 	const handleSelection = (event)=>{
 		emit('update', event.target.value)
 	}
@@ -21,22 +16,21 @@
 </script>
 <template>
 	<select v-model="chosenInstrument">
-		<option v-for="instrument in instruments" v-bind:value="instrument">
-			{{instrument}}
+		<option v-for="instrument in props.instruments" v-bind:value="instrument.name">
+			{{instrument.name}}
 		</option>
 	</select>
 	<select
 		@change="handleSelection"
-		v-for="instrument in instruments"
-		:key="instrument"
+		v-for="instrument in props.instruments"
 		v-model="props.currentWorkingCategoryID"
-		v-show="instrument == chosenInstrument">
+		v-show="instrument.name == chosenInstrument">
 			<option
 				v-bind:value="category.id"
 				v-for="category in props.categories"
 				:key="category.id"
-				v-show="category.instrument == instrument"
-				:selected="category.instrument == instrument">
+				v-show="category.instrument == instrument.name"
+				:selected="category.instrument == instrument.name">
 					{{category.category}}
 		</option>
 	</select>
diff --git a/src/components/show_category.vue b/src/components/show_category.vue
index 727c8e7..c2e4bfb 100644
--- a/src/components/show_category.vue
+++ b/src/components/show_category.vue
@@ -2,7 +2,7 @@
 	import CategoryChooser from './category_chooser.vue'
 	import { onMounted, ref, watch, defineProps, toRefs} from 'vue'
 
-	const props = defineProps(['currentWorkingCategoryID'])
+	const props = defineProps(['instruments', 'currentWorkingCategoryID'])
 
 	const categories = ref([])
 	const categorySessions = ref([])
@@ -41,7 +41,8 @@
 	<CategoryChooser
 		@update="loadCategory" 
 		v-if="categories.length > 0" 
-		:currentWorkingCategoryID="props.currentWorkingCategoryID" 
+		:currentWorkingCategoryID="props.currentWorkingCategoryID"
+		:instruments="props.instruments"
 		:categories="categories" />
 	<table>
 		<thead>
diff --git a/src/components/timer.vue b/src/components/timer.vue
index 3b64a97..40d41c4 100644
--- a/src/components/timer.vue
+++ b/src/components/timer.vue
@@ -1,9 +1,10 @@
 <script lang="ts">
 	import axios from 'axios';
+	import CategoryChooser from './category_chooser.vue'
 	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
 
 	export default {
-		props: ['currentWorkingCategoryID'],
+		props: ['currentWorkingCategoryID', 'instruments'],
 		data() {
 			return {
 				categories:[],
@@ -25,6 +26,9 @@
 			}
 		},
 		emits: ['loggedTime'],
+		components: {
+			CategoryChooser
+		},
 		methods: {
 			formatSeconds,
 			submit(event){
@@ -142,6 +146,9 @@
 					event.returnValue = "Clear or save your time"
 					return false
 				}
+			},
+			handleCategoryChange(newValue){
+				this.practice_category_id = newValue
 			}
 		},
 		mounted() {
@@ -182,6 +189,12 @@
 		<input @change="updateSavedPreviousSeconds" v-model="totalSeconds" type="number"/>
 
 		<label>Practice Category</label>
+		<CategoryChooser
+			@update="handleCategoryChange"
+			v-if="categories.length > 0" 
+			:currentWorkingCategoryID="practice_category_id"
+			:instruments="instruments"
+			:categories="categories" />
 		<select v-model="practice_category_id">
 			<option v-for="category in categories" v-bind:value="category.id">
 				{{category.instrument}}