You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.8 KiB
65 lines
1.8 KiB
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import Summary from './components/summary.vue'
|
|
import ShowCategory from './components/show_category.vue'
|
|
import Songs from './components/songs.vue'
|
|
import Timer from './components/timer.vue'
|
|
import Status from './components/status.vue'
|
|
|
|
const currentWorkingCategory = ref(null)
|
|
const summaryRef = ref(null)
|
|
const statusRef = ref(null)
|
|
const showCategoryRef = ref(null)
|
|
const instruments = ref([])
|
|
const categories = ref([])
|
|
|
|
const updateCurrentWorkingCategoryID = (category) =>{
|
|
currentWorkingCategory.value = category
|
|
}
|
|
|
|
const refreshPage = (session) => {
|
|
summaryRef.value.loadData()
|
|
statusRef.value.loadData()
|
|
showCategoryRef.value.loadCategory(session.practice_category_id)
|
|
}
|
|
|
|
const loadData = async () => {
|
|
let response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'instruments')
|
|
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>
|
|
|
|
<template>
|
|
<main>
|
|
<section id="timer">
|
|
<Status ref="statusRef"/>
|
|
<!--
|
|
<Timer
|
|
@loggedTime="refreshPage"
|
|
:categories="categories"
|
|
:instruments="instruments"
|
|
: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"
|
|
:currentWorkingCategory="currentWorkingCategory"/>
|
|
</section>
|
|
<section id="songs">
|
|
<Songs/>
|
|
</section>
|
|
</main>
|
|
</template>
|