105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<div class="py-4 flex flex-col lg:flex-row items-center lg:items-start">
|
|
<article
|
|
class="mb-4 flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<header class="p-4 rounded-t-md">
|
|
<h1>
|
|
{{ film.title + " (" + film.release_date + ")" }}
|
|
</h1>
|
|
<h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
|
|
</header>
|
|
|
|
<section class="px-4 infos">
|
|
<p>{{ film.description }}</p>
|
|
<p
|
|
class="film-score font-bold text-lg"
|
|
:class="{
|
|
'text-green-600': film.rt_score >= 75,
|
|
'text-orange-600': film.rt_score >= 50 && film.rt_score < 75,
|
|
'text-yellow-600': film.rt_score >= 25 && film.rt_score < 50,
|
|
'text-red-600': film.rt_score >= 0 && film.rt_score < 25
|
|
}"
|
|
>
|
|
{{ film.rt_score + "%" }}
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
<aside class="w-full lg:ml-4">
|
|
<section
|
|
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<h3 class="font-medium text-lg">People</h3>
|
|
<div>{{ film.people }}</div>
|
|
</section>
|
|
|
|
<section
|
|
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<h3 class="font-medium text-lg">Vehicles</h3>
|
|
<div>{{ film.vehicles }}</div>
|
|
</section>
|
|
|
|
<section
|
|
class="p-4 mb-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<h3 class="font-medium text-lg">Locations</h3>
|
|
<div>{{ film.locations }}</div>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
name: "Film",
|
|
head() {
|
|
return {
|
|
titleTemplate: `%s - ${this.film.title}`
|
|
};
|
|
},
|
|
validate({ params }) {
|
|
const uuid = new RegExp(
|
|
/^[0-9A-Za-z]{8}-[0-9A-Za-z]{4}-4[0-9A-Za-z]{3}-[89ABab][0-9A-Za-z]{3}-[0-9A-Za-z]{12}$/
|
|
);
|
|
return uuid.test(params.id);
|
|
},
|
|
async asyncData({ params, store }) {
|
|
if (!store.state.films.film.id !== params.id)
|
|
await store.dispatch("films/getFilm", params.id);
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
film: "films/film"
|
|
})
|
|
},
|
|
async mounted() {
|
|
await this.$store.dispatch("films/getPeople");
|
|
await this.$store.dispatch("films/getVehicles");
|
|
await this.$store.dispatch("films/getLocations");
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="css">
|
|
article header {
|
|
background-color: #85ffbd;
|
|
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
|
|
}
|
|
|
|
.film-score::before {
|
|
content: "";
|
|
background: url(~assets/svg/rotten-tomatoes.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: inline-block;
|
|
vertical-align: sub;
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|