248 lines
7.5 KiB
Vue
248 lines
7.5 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: 'auth'
|
|
})
|
|
|
|
interface Review {
|
|
song_id: number
|
|
user_id: number
|
|
score_song: number
|
|
score_show: number
|
|
score_costume: number
|
|
text_review?: string
|
|
created_at?: string
|
|
updated_at?: string
|
|
}
|
|
|
|
interface Artist {
|
|
id: number
|
|
artist: string
|
|
title: string
|
|
img: string
|
|
lyrics_original: string
|
|
lyrics_translation_fi?: string
|
|
tags: string[]
|
|
}
|
|
|
|
interface User {
|
|
id: number
|
|
[key: string]: any
|
|
}
|
|
|
|
// Config and route setup
|
|
const config = useRuntimeConfig()
|
|
const apiBase = config.public.apiBase
|
|
const route = useRoute()
|
|
const { id } = route.params
|
|
|
|
// Reactive state
|
|
const artist = ref<Artist | null>(null)
|
|
const user = ref<User | null>(null)
|
|
const review = ref<Review | null>(null)
|
|
|
|
// Form state with default values
|
|
const song = ref(50)
|
|
const show = ref(50)
|
|
const costume = ref(50)
|
|
const textReview = ref('')
|
|
const isSubmitting = ref(false)
|
|
|
|
// UI state
|
|
const showOriginalLyrics = ref(false)
|
|
const showTranslationLyrics = ref(false)
|
|
|
|
// Toggle functions for lyrics display
|
|
function toggleOriginalLyrics() {
|
|
showOriginalLyrics.value = !showOriginalLyrics.value
|
|
}
|
|
|
|
function toggleTranslationLyrics() {
|
|
showTranslationLyrics.value = !showTranslationLyrics.value
|
|
}
|
|
|
|
// Load user data from localStorage
|
|
function loadUserData(): User | null {
|
|
if (!process.client) return null
|
|
|
|
const userData = localStorage.getItem('user')
|
|
return userData ? JSON.parse(userData) : null
|
|
}
|
|
|
|
// Fetch artist data
|
|
async function fetchArtist() {
|
|
try {
|
|
const response = await fetch(`${apiBase}/songs/${id}`)
|
|
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
|
|
|
|
artist.value = await response.json()
|
|
} catch (error) {
|
|
console.error('Error fetching artist data:', error)
|
|
}
|
|
}
|
|
|
|
// Fetch user's existing review for this song
|
|
async function fetchUserReview(userId: number) {
|
|
try {
|
|
const response = await fetch(`${apiBase}/reviews/?song_id=${id}&user_id=${userId}`)
|
|
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
|
|
|
|
const reviewData = await response.json()
|
|
review.value = reviewData
|
|
|
|
// Pre-fill form with existing review data
|
|
if (reviewData) {
|
|
song.value = reviewData.score_song || 50
|
|
show.value = reviewData.score_show || 50
|
|
costume.value = reviewData.score_costume || 50
|
|
textReview.value = reviewData.text_review || ''
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching review data:', error)
|
|
}
|
|
}
|
|
|
|
// Submit review to the API
|
|
async function submitReview() {
|
|
if (!user.value?.id) {
|
|
console.error('User not authenticated')
|
|
return
|
|
}
|
|
|
|
isSubmitting.value = true
|
|
|
|
const payload: Review = {
|
|
song_id: Number(id),
|
|
user_id: user.value.id,
|
|
score_song: song.value,
|
|
score_show: show.value,
|
|
score_costume: costume.value,
|
|
text_review: textReview.value
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${apiBase}/reviews/`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(payload),
|
|
})
|
|
|
|
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
|
|
|
|
console.log('Review submitted successfully')
|
|
// You could add a success notification or redirect here
|
|
} catch (error) {
|
|
console.error('Error submitting review:', error)
|
|
// You could add an error notification here
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
// Initialize data on component mount
|
|
onMounted(async () => {
|
|
// Get user from localStorage
|
|
user.value = loadUserData()
|
|
|
|
// Fetch artist data
|
|
await fetchArtist()
|
|
|
|
// If user is logged in, fetch their review for this song
|
|
if (user.value?.id) {
|
|
await fetchUserReview(user.value.id)
|
|
}
|
|
})
|
|
</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" class="space-y-4 flex flex-col gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<label for="slider-song">Kappale</label>
|
|
<input id="slider-song" type="range" min="1" max="100" v-model="song"/>
|
|
<div class="flex justify-between"><p>0</p><p class="sliderSeparator">|</p><p>25</p><p class="sliderSeparator">|</p><p>50</p><p class="sliderSeparator">|</p><p>75</p><p class="sliderSeparator">|</p><p>100</p></div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label for="slider-show">Lava show</label>
|
|
<input id="slider-show" type="range" min="1" max="100" v-model="show"/>
|
|
<div class="flex justify-between"><p>0</p><p class="sliderSeparator">|</p><p>25</p><p class="sliderSeparator">|</p><p>50</p><p class="sliderSeparator">|</p><p>75</p><p class="sliderSeparator">|</p><p>100</p></div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label for="slider-costume">Asuste</label>
|
|
<input id="slider-costume" type="range" min="1" max="100" v-model="costume"/>
|
|
<div class="flex justify-between"><p>0</p><p class="sliderSeparator">|</p><p>25</p><p class="sliderSeparator">|</p><p>50</p><p class="sliderSeparator">|</p><p>75</p><p class="sliderSeparator">|</p><p>100</p></div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label for="text_review">Arvostelu (vaihtoehtoinen)</label>
|
|
<textarea id="text_review" placeholder="Arvostelu" class="textfield" v-model="textReview"/>
|
|
</div>
|
|
|
|
<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;
|
|
width: 100%; /* Changed from max-width: 80% to width: 100% */
|
|
padding: 6px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
}
|
|
</style> |