PageFilm.vue

<script setup>
import Header from '@/components/Header.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('');


async function getUserInfo() {

    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(() => {
    getUserInfo();
});

</script>

<template>
    <Header>
    </Header>

    <h1> {{ frTitle }}</h1>
    <h2>Date de sortie : {{ annee }}</h2>
    <h2>Durée : {{ duree }} minutes</h2>
    <h2>Note : {{ note }}</h2>
</template>

<style scoped></style>