130 lines
3.6 KiB
Vue
130 lines
3.6 KiB
Vue
<template>
|
|
<div
|
|
class="py-4 flex flex-col lg:flex-row items-center lg:items-start justify-center"
|
|
>
|
|
<article
|
|
class="mb-4 inline-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="lg:inline-flex lg:ml-4">
|
|
<section
|
|
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<h3 class="font-medium text-lg mb-4">People</h3>
|
|
<ul v-if="people.length">
|
|
<li :key="person.id" v-for="person in people">
|
|
<Person :person="person" />
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section
|
|
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<h3 class="font-medium text-lg mb-4">Vehicles</h3>
|
|
<ul v-if="vehicles.length">
|
|
<li :key="vehicle.id" v-for="vehicle in vehicles">
|
|
<Vehicle :vehicle="vehicle" />
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section
|
|
class="p-4 lg:mr-4 bg-gray-100 rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl"
|
|
>
|
|
<h3 class="font-medium text-lg">Locations</h3>
|
|
<ul v-if="locations.length">
|
|
<li :key="location.id" v-for="location in locations">
|
|
<Location :location="location" />
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
name: "Film",
|
|
components: {
|
|
Person: () => import("@/components/Person"),
|
|
Vehicle: () => import("@/components/Vehicle"),
|
|
Location: () => import("@/components/Location")
|
|
},
|
|
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: {
|
|
people() {
|
|
return this.$store.getters["people/getPeopleByFilmId"](this.film.id);
|
|
},
|
|
vehicles() {
|
|
return this.$store.getters["vehicles/getVehiclesByFilmId"](this.film.id);
|
|
},
|
|
locations() {
|
|
return this.$store.getters["locations/getLocationsByFilmId"](
|
|
this.film.id
|
|
);
|
|
},
|
|
...mapGetters({
|
|
film: "films/film"
|
|
})
|
|
}
|
|
};
|
|
</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>
|