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.
70 lines
1.6 KiB
70 lines
1.6 KiB
<script setup>
|
|
import { formatSeconds } from '../libs/time.js'
|
|
import CategoryChooser from './category_chooser.vue'
|
|
import { onMounted, ref, watch, defineProps } from 'vue'
|
|
import {
|
|
description,
|
|
currentWorkingCategory,
|
|
currentWorkingInstrument
|
|
} from '../libs/state.js'
|
|
|
|
const categorySessions = ref([])
|
|
|
|
const copy = (event) => {
|
|
description.value = event.target.innerText
|
|
}
|
|
|
|
onMounted(()=>{
|
|
loadCategory()
|
|
window.addEventListener('keydown', (event)=>{
|
|
if(event.ctrlKey === true){
|
|
if(event.key === 'l') {
|
|
description.value = categorySessions.value[0].description
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
const loadCategory = async () => {
|
|
const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+currentWorkingCategory.value.id)
|
|
categorySessions.value = await response.json()
|
|
}
|
|
|
|
watch(currentWorkingCategory, loadCategory)
|
|
defineExpose({loadCategory})
|
|
</script>
|
|
|
|
<template>
|
|
<h2>Show Category</h2>
|
|
<CategoryChooser />
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>description</th>
|
|
<th>duration</th>
|
|
<th>songs</th>
|
|
<th>comments</th>
|
|
<th>created at</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="session in categorySessions">
|
|
<td @click="copy">{{session.description}}</td>
|
|
<td>{{formatSeconds(session.seconds)}}</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="song in session.songs">
|
|
<a v-bind:href="'#/songs/' + song.id">
|
|
{{song.title}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
<td>{{session.comments}}</td>
|
|
<td>{{new Date(session.created_at).toLocaleString("en-US")}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|