feat: change default review scores to 0 and improve textarea styling

components/ReviewSlider.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-const { category, id } = defineProps(['category', 'id'])
+const { category, id, value } = defineProps(['category', 'id', 'value'])
 </script>
 
 <template>
     <div class="px-6">
         <h2>{{ category }}</h2>
-        <input :id="`slider-${id}`" type="range" min="1" max="100" value="0" class="w-full"/>
+        <input :id="`slider-${id}`" type="range" min="1" max="100" :value="value" class="w-full"/>
         <div class="flex justify-between">
             <p>0</p>
             <p class="sliderSeparator">|</p>

middleware/auth.ts

@@ -0,0 +1,14 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  // Skip middleware if on server-side
+  // This is important because localStorage is only available client-side
+  if (process.server) return
+  
+  // Check if user is logged in
+  const user = localStorage.getItem('user')
+  
+  // If not logged in and trying to access a protected route
+  if (!user) {
+    // Redirect to login page
+    return navigateTo('/login')
+  }
+})

package.json

@@ -14,10 +14,10 @@
     "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
-    "@tailwindcss/vite": "^4.1.5",
+    "@tailwindcss/vite": "^4.1.6",
-    "eslint": "^9.0.0",
+    "eslint": "^9.26.0",
-    "nuxt": "^3.17.1",
+    "nuxt": "^3.17.3",
-    "tailwindcss": "^4.1.5",
+    "tailwindcss": "^4.1.6",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },
@@ -31,6 +31,7 @@
     ],
     "onlyBuiltDependencies": [
       "@parcel/watcher",
+      "@tailwindcss/oxide",
       "esbuild",
       "sharp",
       "unrs-resolver"

pages/review/[id].vue

@@ -1,71 +1,158 @@
 <script setup lang="ts">
-const { id } = useRoute().params
+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
-    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
+    lyrics_original: string
+    lyrics_translation_fi?: string
+    tags: string[]
 }
 
-const { data: artist } = await useFetch<Artist>(`/api/artist?id=${id}`)
+interface User {
-
+    id: number
-if (!artist.value) {
+    [key: string]: any
-    throw createError({
-        statusCode: 404,
-        statusMessage: 'Artist not found'
-    })
 }
 
+// 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)
 
-// State for toggling lyrics visibility
+// Form state with default values
+const song = ref(0)
+const show = ref(0)
+const costume = ref(0)
+const textReview = ref('')
+const isSubmitting = ref(false)
+
+// UI state
 const showOriginalLyrics = ref(false)
-const toggleOriginalLyrics = () => {
+const showTranslationLyrics = ref(false)
+
+// Toggle functions for lyrics display
+function toggleOriginalLyrics() {
   showOriginalLyrics.value = !showOriginalLyrics.value
 }
 
-const showTranslationLyrics = ref(false)
+function toggleTranslationLyrics() {
-const toggleTranslationLyrics = () => {
   showTranslationLyrics.value = !showTranslationLyrics.value
 }
 
-const submitReview = () => {
+// Load user data from localStorage
-    // Get slider values
+function loadUserData(): User | null {
-    const songEl = document.getElementById('slider-song') as HTMLInputElement
+  if (!process.client) return null
-    const showEl = document.getElementById('slider-show') as HTMLInputElement
-    const costumeEl = document.getElementById('slider-costume') as HTMLInputElement
   
-    const songRating = songEl?.value || '0'
+  const userData = localStorage.getItem('user')
-    const showRating = showEl?.value || '0'
+  return userData ? JSON.parse(userData) : null
-    const costumeRating = costumeEl?.value || '0'
+}
 
-    // Create review object
+// Fetch artist data
-    const review = {
+async function fetchArtist() {
-        artistId: id,
+  try {
-        ratings: {
+    const response = await fetch(`${apiBase}/songs/${id}`)
-            song: parseInt(songRating),
+    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`)
-            show: parseInt(showRating),
+    
-            costume: parseInt(costumeRating)
+    artist.value = await response.json()
-        },
+  } catch (error) {
-        timestamp: new Date().toISOString()
+    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 || 0
+      show.value = reviewData.score_show || 0
+      costume.value = reviewData.score_costume || 0
+      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
   }
   
-    console.log('Submitting review:', review)
+  isSubmitting.value = true
   
-    // TODO: Send review to API
+  const payload: Review = {
-    // await useFetch('/api/reviews', {
+    song_id: Number(id),
-    //   method: 'POST',
+    user_id: user.value.id,
-    //   body: review
+    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>
@@ -102,14 +189,33 @@ const submitReview = () => {
         <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">
+        <form @submit.prevent="submitReview" class="space-y-4 flex flex-col gap-4">
-            <ReviewSlider id="song" category="Kappale"/>
+            <div class="flex flex-col gap-2">
-            <ReviewSlider id="show" category="Lava show"/>
+                <label for="slider-song">Kappale</label>
-            <ReviewSlider id="costume" category="Asuste"/>
+                <input id="slider-song" type="range" min="1" max="100" v-model="song"/>
-            <label for="text_review">Arvostelu</label>
+                <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>
-            <textarea id="text_review" placeholder="Arvostelu" class="textfield" />
+            </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" rows="6" v-model="textReview"/>
+            </div>
+            
             <button type="submit" class="btn-primary">Arvostele</button>
         </form>
+        <NuxtLink class="btn-primary" to="/">Palaa etusivulle</NuxtLink>
       </div>
       <div v-else>
         <h1>Artist not found</h1>
@@ -135,10 +241,10 @@ const submitReview = () => {
 .textfield {
     border: none;
     border-bottom: 1px solid #ccc;
-    max-width: 80%;
+    width: 100%; /* Changed from max-width: 80% to width: 100% */
     padding: 6px;
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 6px;
-    
+    resize: none;
 }
 </style>