Skip to content
Snippets Groups Projects
Commit 1ffcfad2 authored by Pascalou's avatar Pascalou
Browse files

fait un peu bo les pages compte film personne accueil

parent 757ae1ed
No related branches found
No related tags found
No related merge requests found
...@@ -5,7 +5,6 @@ const props = defineProps(['person']); ...@@ -5,7 +5,6 @@ const props = defineProps(['person']);
<template> <template>
<router-link :to="{ name: 'person', params: { id: person.nconst } }" class="person"> <router-link :to="{ name: 'person', params: { id: person.nconst } }" class="person">
<img :src="person" :alt="person.title" />
<h3>{{ person.prenom + ' ' + person.nom.toUpperCase() }}</h3> <h3>{{ person.prenom + ' ' + person.nom.toUpperCase() }}</h3>
<h4>{{ person.birthYear }} {{ person.deathYear }}</h4> <h4>{{ person.birthYear }} {{ person.deathYear }}</h4>
<h4>{{ person.roles }}</h4> <h4>{{ person.roles }}</h4>
......
...@@ -35,10 +35,16 @@ const films = [ ...@@ -35,10 +35,16 @@ const films = [
<template> <template>
<Header> <Header>
</Header> </Header>
<h1>Recherchez votre film</h1> <div>
<SearchBar></SearchBar> <h1>Recherchez votre film</h1>
<FilmRow :films="films"></FilmRow> <SearchBar></SearchBar>
<FilmRow :films="films"></FilmRow>
</div>
</template> </template>
<style scoped> <style scoped>
div {
margin: 20px;
padding: 5px;
}
</style> </style>
...@@ -32,7 +32,7 @@ function getUserInfo() { ...@@ -32,7 +32,7 @@ function getUserInfo() {
async function fetchSeenMovies() { async function fetchSeenMovies() {
try { try {
const response = await fetch('http://localhost:3000/user/seenMovies', { credentials: 'include' }); const response = await fetch('http://localhost:3000/user/seenMovies', { credentials: 'include' });
...@@ -62,23 +62,30 @@ onMounted(() => { ...@@ -62,23 +62,30 @@ onMounted(() => {
<Header> <Header>
</Header> </Header>
<div class="container">
<div> <div class="infoUtilisateur">
<h1>Mes informations</h1> <h1>Mes informations</h1>
<p>Nom : {{ lastname }}</p> <p>Nom : {{ lastname }}</p>
<p>Prénom : {{ firstname }}</p> <p>Prénom : {{ firstname }}</p>
<p>Date de naissance : {{ new Date(birthdate).toLocaleDateString() }}</p> <p>Date de naissance : {{ new Date(birthdate).toLocaleDateString() }}</p>
<br> <br>
<button>Changer de nom d'utilisateur</button> <button>Changer de nom d'utilisateur</button>
<button>Changer de mot de passe</button> <button>Changer de mot de passe</button>
</div>
<h1>Films préférés :</h1>
<FilmRow :films="mesFilmsVus"></FilmRow>
</div> </div>
<h1>Films préférés :</h1>
<FilmRow :films="mesFilmsVus"></FilmRow>
</template> </template>
<style scoped> <style scoped>
div { div.container {
margin: 50px; margin: 20px;
padding: 5px;
}
div.infoUtilisateur {
margin: 10px;
padding: 20px; padding: 20px;
border: 1px solid #e6007e; border: 1px solid #e6007e;
border-radius: 25px; border-radius: 25px;
......
...@@ -3,7 +3,7 @@ import StarRating from 'vue-star-rating'; ...@@ -3,7 +3,7 @@ import StarRating from 'vue-star-rating';
import Header from '@/components/Header.vue'; import Header from '@/components/Header.vue';
import CastRow from '@/components/CastRow.vue'; import CastRow from '@/components/CastRow.vue';
import { ref, onMounted, watch } from 'vue'; import { ref, onMounted, watch } from 'vue';
import {useRoute} from 'vue-router'; import { useRoute } from 'vue-router';
import router from '@/router/index.js' import router from '@/router/index.js'
const route = useRoute(); const route = useRoute();
...@@ -15,9 +15,9 @@ let annee = ref(''); ...@@ -15,9 +15,9 @@ let annee = ref('');
let duree = ref(''); let duree = ref('');
let note = ref(''); let note = ref('');
let nbNotes = ref(''); let nbNotes = ref('');
let rating = ref(); let rating = ref();
async function getRateUser(){ async function getRateUser() {
const params = new URLSearchParams({ id: route.params.id }); const params = new URLSearchParams({ id: route.params.id });
try { try {
const response = await fetch(`http://localhost:3000/movies/getMovieNote?${params.toString()}`, { credentials: 'include' }); const response = await fetch(`http://localhost:3000/movies/getMovieNote?${params.toString()}`, { credentials: 'include' });
...@@ -39,13 +39,13 @@ async function getRateUser(){ ...@@ -39,13 +39,13 @@ async function getRateUser(){
} }
watch(rating,async (rating) => { watch(rating, async (rating) => {
console.log(rating); console.log(rating);
const params = new URLSearchParams({ id: route.params.id, note : rating }); const params = new URLSearchParams({ id: route.params.id, note: rating });
try { try {
const response = await fetch(`http://localhost:3000/movies/addmovienote?${params.toString()}`, { credentials: 'include' }); const response = await fetch(`http://localhost:3000/movies/addmovienote?${params.toString()}`, { credentials: 'include' });
if (! response.ok) { if (!response.ok) {
const errorData = await response.json(); const errorData = await response.json();
console.error('Error:', response.status, errorData); console.error('Error:', response.status, errorData);
router.push('/connexion'); router.push('/connexion');
...@@ -115,17 +115,46 @@ async function getCast() { ...@@ -115,17 +115,46 @@ async function getCast() {
<template> <template>
<Header> <Header>
</Header> </Header>
<div class="tout">
<div class="container">
<div class="infoFilm">
<h1> {{ frTitle || originalTitle }}</h1>
<h2>Date de sortie : {{ annee }}</h2>
<h2>Durée : {{ duree }} minutes</h2>
<h2>Note : {{ note }}</h2>
<h2>Votre note :</h2>
<div class="etoile">
<star-rating v-model:rating="rating" />
</div>
</div>
</div>
<h2>Distribution : </h2>
<CastRow :cast="cast"></CastRow>
</div>
</template>
<h1> {{ frTitle || originalTitle }}</h1> <style scoped>
<h2>Date de sortie : {{ annee }}</h2> div.tout {
<h2>Durée : {{ duree }} minutes</h2> margin: 20px;
<h2>Note : {{ note }}</h2> padding: 10px;
<h2>Votre note :</h2> }
<star-rating v-model:rating="rating"/> div.container {
<h2>Distribution : </h2> display: flex;
<CastRow :cast="cast"></CastRow> justify-content: center;
}
</template> div.infoFilm {
margin: 10px;
padding: 20px;
border: 1px solid #e6007e;
border-radius: 25px;
text-align: center;
}
<style scoped></style> div.etoile {
\ No newline at end of file display: flex;
align-items: center;
justify-content: center;
}
</style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import Header from '@/components/Header.vue' import Header from '@/components/Header.vue'
import FilmRow from '@/components/FilmRow.vue' import FilmRow from '@/components/FilmRow.vue'
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import {useRoute} from 'vue-router'; import { useRoute } from 'vue-router';
const route = useRoute(); const route = useRoute();
...@@ -71,13 +71,37 @@ async function getMovieByPerson() { ...@@ -71,13 +71,37 @@ async function getMovieByPerson() {
<template> <template>
<Header> <Header>
</Header> </Header>
<div class="tout">
<h1> {{ prenom }} {{ nom.toUpperCase() }}</h1> <div class="container">
<h2>Date de naissance : {{ birthYear }}</h2> <div class="infoPersonne">
<h2 v-if="deathYear">Date de décès : {{ deathYear }} </h2> <h1> {{ prenom }} {{ nom.toUpperCase() }}</h1>
<h2>Profession : {{ profession }}</h2> <h2>Date de naissance : {{ birthYear }}</h2>
<h2>Film avec {{ prenom }} {{ nom.toUpperCase() }} :</h2> <h2 v-if="deathYear">Date de décès : {{ deathYear }} </h2>
<FilmRow :films="movies"></FilmRow> <h2>Profession : {{ profession }}</h2>
</div>
</div>
<h2>Film avec {{ prenom }} {{ nom.toUpperCase() }} :</h2>
<FilmRow :films="movies"></FilmRow>
</div>
</template> </template>
<style scoped></style> <style scoped>
\ No newline at end of file div.tout {
margin: 20px;
padding: 10px;
}
div.container {
display: flex;
justify-content: center;
}
div.infoPersonne {
margin: 10px;
padding: 20px;
border: 1px solid #e6007e;
border-radius: 25px;
text-align: center;
}
</style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment