PageFilm.vue

<script setup>
import StarRating from 'vue-star-rating';
import Header from '@/components/Header.vue';
import CastRow from '@/components/CastRow.vue';
import { ref, onMounted } from 'vue';
import {useRoute} from 'vue-router';

const route = useRoute();


let originalTitle = ref('');
let frTitle = ref('');
let annee = ref('');
let duree = ref('');
let note = ref('');
let nbNotes = ref('');
let rating = ref(0); 

async function getRateUser(){
    const params = new URLSearchParams({ id: route.params.id });
    try {
        const response = await fetch(`http://localhost:3000/movies/getMovieNote?${params.toString()}`, { credentials: 'include' });

        if (response.ok) {
            const data = await response.json();

            if (data) {
                console.log(data[0].note);
                rating.value = data[0].note;
            }
        } else {
            const errorData = await response.json();
            console.error('Error:', response.status, errorData);
        }
    } catch (error) {
        console.error('Error during API call:', error);
    }
}


async function getFilmInfo() {

    try {
        const response = await fetch('http://localhost:3000/movies/' + route.params.id, { credentials: 'include' });

        if (response.ok) {
            const data = await response.json();

            if (data) {
                originalTitle.value = data.primaryTitle;
                frTitle.value = data.titleFR;
                annee.value = data.startYear;
                duree.value = data.runtimeMinutes;
                note.value = data.averageRating;
                nbNotes.value = data.numVotes;
            }
        } else {
            const errorData = await response.json();
            console.error('Error:', response.status, errorData);
        }
    } catch (error) {
        console.error('Error during API call:', error);
    }
}

onMounted(() => {
    getFilmInfo();
    getCast();
    getRateUser();
    console.log(rating.value);
});
let cast = ref([])

async function getCast() {

    try {
        const response = await fetch('http://localhost:3000/movies/cast/' + route.params.id, { credentials: 'include' });

        if (response.ok) {
            const data = await response.json();

            if (data) {
                console.log(data);
                cast.value = data;
            }
        } else {
            const errorData = await response.json();
            console.error('Error:', response.status, errorData);
        }
    } catch (error) {
        console.error('Error during API call:', error);
    }
}

</script>

<template>
    <Header>
    </Header>

    <h1> {{ frTitle || originalTitle }}</h1>
    <h2>Date de sortie : {{ annee }}</h2>
    <h2>Durée : {{ duree }} minutes</h2>
    <h2>Note : {{ note }}</h2>
    <h2>Votre note :</h2>
    <star-rating  v-model:rating="rating"/>
    <h2>Distribution : </h2>
    <CastRow :cast="cast"></CastRow>


</template>

<style scoped></style>