144 lines
4.1 KiB
Vue
144 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
const { id } = useRoute().params
|
|
|
|
interface Artist {
|
|
id: number
|
|
year: number
|
|
country_fi: string
|
|
artist: string
|
|
title: string
|
|
running_order: number
|
|
lyrics_original: string
|
|
lyrics_translation_fi: string
|
|
tags: string[]
|
|
img: string
|
|
flag: string
|
|
}
|
|
|
|
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 = () => {
|
|
showOriginalLyrics.value = !showOriginalLyrics.value
|
|
}
|
|
|
|
const showTranslationLyrics = ref(false)
|
|
const toggleTranslationLyrics = () => {
|
|
showTranslationLyrics.value = !showTranslationLyrics.value
|
|
}
|
|
|
|
const submitReview = () => {
|
|
// Get slider values
|
|
const songEl = document.getElementById('slider-song') as HTMLInputElement
|
|
const showEl = document.getElementById('slider-show') as HTMLInputElement
|
|
const costumeEl = document.getElementById('slider-costume') as HTMLInputElement
|
|
|
|
const songRating = songEl?.value || '0'
|
|
const showRating = showEl?.value || '0'
|
|
const costumeRating = costumeEl?.value || '0'
|
|
|
|
// Create review object
|
|
const review = {
|
|
artistId: id,
|
|
ratings: {
|
|
song: parseInt(songRating),
|
|
show: parseInt(showRating),
|
|
costume: parseInt(costumeRating)
|
|
},
|
|
timestamp: new Date().toISOString()
|
|
}
|
|
|
|
console.log('Submitting review:', review)
|
|
|
|
// TODO: Send review to API
|
|
// await useFetch('/api/reviews', {
|
|
// method: 'POST',
|
|
// body: review
|
|
// })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="artist" class="space-y-4">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-center">{{ artist.artist }}</h1>
|
|
<p class="text-center italic">{{ artist.title }}</p>
|
|
</div>
|
|
<img class="w-1/2 mx-auto" :src="artist.img" alt="">
|
|
<div>
|
|
<h2
|
|
@click="toggleOriginalLyrics"
|
|
class="cursor-pointer hover:text-blue-600 flex items-center"
|
|
>
|
|
Sanat
|
|
<span class="ml-2 text-sm">
|
|
{{ showOriginalLyrics ? '▼' : '►' }}
|
|
</span>
|
|
</h2>
|
|
<pre v-show="showOriginalLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_original }}</pre>
|
|
</div>
|
|
<div v-if="artist.lyrics_translation_fi">
|
|
<h2
|
|
@click="toggleTranslationLyrics"
|
|
class="cursor-pointer hover:text-blue-600 flex items-center"
|
|
>
|
|
Käännös
|
|
<span class="ml-2 text-sm">
|
|
{{ showTranslationLyrics ? '▼' : '►' }}
|
|
</span>
|
|
</h2>
|
|
<pre v-show="showTranslationLyrics" class="lyricsFont transition-all duration-300">{{ artist.lyrics_translation_fi }}</pre>
|
|
</div>
|
|
<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">
|
|
<ReviewSlider id="song" category="Kappale"/>
|
|
<ReviewSlider id="show" category="Lava show"/>
|
|
<ReviewSlider id="costume" category="Asuste"/>
|
|
<label for="text_review">Arvostelu</label>
|
|
<textarea id="text_review" placeholder="Arvostelu" class="textfield" />
|
|
<button type="submit" class="btn-primary">Arvostele</button>
|
|
</form>
|
|
</div>
|
|
<div v-else>
|
|
<h1>Artist not found</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
background-color: #ccc;
|
|
margin: 2px;
|
|
border-radius: 6px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.lyricsFont {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.textfield {
|
|
border: none;
|
|
border-bottom: 1px solid #ccc;
|
|
max-width: 80%;
|
|
padding: 6px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
|
|
}
|
|
</style> |