Skip to content
Snippets Groups Projects

Movie page

Merged Bilel El Yaagoubi requested to merge movie-page into master

Files

<template>
<div class="parent">
<h1>{{ movieTitle }}</h1>
<h4>{{ movieVoteAverage }}</h4>
<h4>{{ genreArray }}</h4>
<h4>{{ movieOverview }} {{ movieOverview }} {{ movieOverview }}</h4>
<div class="child">
<h1>{{ movieTitle }}</h1>
<div class="mark">
<h2>{{ movieVoteAverage * 0.5 }}</h2>
</div>
</div>
<h4>Genres : {{ genreArray.join(", ") }}</h4>
<h4>{{ movieOverview }}</h4>
<div class="like_button" v-on:click="handleLike">
<h2>{{ liking }}</h2>
</div>
</div>
</template>
@@ -15,9 +22,12 @@ export default {
data: function () {
return {
genreArray: [],
liking: "Unlike",
userId: "toto",
};
},
props: {
movieId: Number,
movieTitle: String,
movieDate: String,
movieGenres: Array,
@@ -27,12 +37,9 @@ export default {
methods: {
developGenre: async function (genreId) {
try {
console.log("g");
const response = await axios
.get(backendURL + "/genres/genre/id/" + genreId)
.then();
console.log("oi");
console.log(response.data);
return response.data;
} catch (error) {
console.log(error);
@@ -40,10 +47,6 @@ export default {
},
developGenres: function (genreIdArray) {
try {
var res = [];
console.log("f");
console.log(genreIdArray);
// console.log([12, 16].map(this.developGenre));
const genreArray = genreIdArray.map(this.developGenre);
return Promise.all(genreArray);
} catch (error) {
@@ -51,15 +54,20 @@ export default {
console.log(error);
}
},
handleLike: async function () {
console.log("clic");
await axios.put(backendURL + "/users/like/", {
userId: this.userId,
movieId: this.movieId,
});
},
},
created() {
console.log("a");
console.log();
console.log("b");
this.genreArray = this.developGenres([12, 16]).then((results) => {
this.developGenres(this.movieGenres).then((results) => {
this.genreArray = results;
});
this.userId = this.$route.query.uid;
console.log(this.userId);
},
};
</script>
@@ -70,4 +78,29 @@ export default {
flex-direction: column;
height: 100%;
}
.child {
display: flex;
justify-content: flex-start;
}
.mark {
text-align: center;
vertical-align: center;
width: 10%;
height: auto;
background-color: #912f56;
border-radius: 25%;
margin-left: auto;
}
.like_button {
text-align: center;
vertical-align: center;
background-color: #912f56;
border-radius: 2%;
width: 90%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
cursor: pointer;
}
</style>
Loading