106 lines
2.6 KiB
Plaintext
106 lines
2.6 KiB
Plaintext
<movie-page>
|
|
<div class="movie-page-container">
|
|
|
|
<div>
|
|
<h1 style="font-weight: bold;">{props.movie.title}</h1>
|
|
<img src="https://image.tmdb.org/t/p/w500/{props.movie.poster_path}"><img>
|
|
</div>
|
|
|
|
<div class="right-part">
|
|
<ul>
|
|
<li class="genre" each={genre in state.movie_genres}>{genre}</li>
|
|
</ul>
|
|
|
|
<br>
|
|
|
|
<p >{props.movie.release_date}</p>
|
|
|
|
<br>
|
|
|
|
<ul>
|
|
<li class="language" each={language in props.movie.spoken_languages}>{(language.iso_639_1).toUpperCase()}</li>
|
|
</ul>
|
|
|
|
<br>
|
|
|
|
<p class="overview">{props.movie.overview}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
onBeforeMount(props, state) {
|
|
this.state = {
|
|
movie_genres: this.getGenresFromIds(),
|
|
}
|
|
},
|
|
|
|
getGenresFromIds() {
|
|
let ret = []
|
|
let genres = []
|
|
genres = JSON.parse(localStorage.getItem("genres")).genres;
|
|
|
|
for(let i = 0; i<genres.length; i++)
|
|
{
|
|
for(let j = 0; j< this.props.movie.genres.length; j++) {
|
|
if(genres[i].id == this.props.movie.genres[j].id) {
|
|
ret.push(genres[i].name)
|
|
}
|
|
}
|
|
}
|
|
console.log(ret)
|
|
return ret
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.movie-page-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.movie-page-container div {
|
|
margin: 20px;
|
|
}
|
|
|
|
.right-part {
|
|
padding-top: 3%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0px;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.genre {
|
|
font-weight: bold;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.language {
|
|
margin-right: 14px;
|
|
text-align: center;
|
|
list-style: none;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
color: #50713e;
|
|
background-color: #daf1e0;
|
|
}
|
|
|
|
.overview {
|
|
word-wrap: break-word;
|
|
width: 400px;
|
|
}
|
|
</style>
|
|
</movie-page> |