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.
56 lines
1.1 KiB
56 lines
1.1 KiB
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { copiedSongs } from '../libs/state.js'
|
|
|
|
const songs = ref([])
|
|
|
|
onMounted(async ()=>{
|
|
const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs')
|
|
songs.value = await response.json()
|
|
})
|
|
const copy = (title) => {
|
|
navigator.clipboard.writeText(title);
|
|
}
|
|
const paste = (song) => {
|
|
if(copiedSongs.value.findIndex(copiedSong=>copiedSong.id === song.id) === -1){
|
|
copiedSongs.value.push(song)
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<h2>Songs</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>id</th>
|
|
<th>title</th>
|
|
<th>notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="song in songs">
|
|
<td>{{song.id}}</td>
|
|
<td>
|
|
<a v-bind:name="'/songs/' + song.id">
|
|
{{song.title}}
|
|
</a>
|
|
<br/>
|
|
<button @click="copy(song.title)">Copy</button>
|
|
<button @click="paste(song)">Paste</button>
|
|
</td>
|
|
<td>{{song.notes}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
button {
|
|
padding: 1em 2em;
|
|
margin: 1em;
|
|
}
|
|
td:nth-child(2){
|
|
text-align:center;
|
|
}
|
|
</style>
|