Add song data fetching
This commit is contained in:
+17
-8
@@ -4,12 +4,12 @@ const { id } = useRoute().params
|
||||
interface Artist {
|
||||
id: number
|
||||
year: number
|
||||
country: string
|
||||
country_fi: string
|
||||
artist: string
|
||||
title: string
|
||||
runningOrder: number
|
||||
lyricsOriginal: string
|
||||
lyricsTranslationFI: string
|
||||
running_order: number
|
||||
lyrics_original: string
|
||||
lyrics_translation_fi: string
|
||||
tags: string[]
|
||||
img: string
|
||||
flag: string
|
||||
@@ -17,6 +17,15 @@ interface Artist {
|
||||
|
||||
const { data: artist } = await useFetch<Artist>(`/api/artist?id=${id}`)
|
||||
|
||||
if (!artist.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'Artist not found'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// State for toggling lyrics visibility
|
||||
const showOriginalLyrics = ref(false)
|
||||
const toggleOriginalLyrics = () => {
|
||||
@@ -76,9 +85,9 @@ const submitReview = () => {
|
||||
{{ showOriginalLyrics ? '▼' : '►' }}
|
||||
</span>
|
||||
</h2>
|
||||
<pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyricsOriginal }}</pre>
|
||||
<pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_original }}</pre>
|
||||
</div>
|
||||
<div v-if="artist.lyricsTranslationFI">
|
||||
<div v-if="artist.lyrics_translation_fi">
|
||||
<h2
|
||||
@click="toggleTranslationLyrics"
|
||||
class="cursor-pointer hover:text-blue-600 flex items-center"
|
||||
@@ -88,9 +97,9 @@ const submitReview = () => {
|
||||
{{ showTranslationLyrics ? '▼' : '►' }}
|
||||
</span>
|
||||
</h2>
|
||||
<pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyricsTranslationFI }}</pre>
|
||||
<pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_translation_fi }}</pre>
|
||||
</div>
|
||||
<ul>
|
||||
<ul class="flex flex-wrap justify-center list-none gap-2 p-0 m-0">
|
||||
<li class="tag" v-for="tag in artist.tags" :key="tag">{{ tag }}</li>
|
||||
</ul>
|
||||
<form @submit.prevent="submitReview">
|
||||
|
||||
Reference in New Issue
Block a user