70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<section class="py-4">
|
|
<h1>
|
|
{{ film.title + " (" + film.release_date + ")" }}
|
|
</h1>
|
|
<h2 class="text-gray-700 mt-0">{{ "by " + film.director }}</h2>
|
|
<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 class="people">
|
|
<h3>People</h3>
|
|
<div>{{ film.people }}</div>
|
|
</section>
|
|
|
|
<section class="vehicles">
|
|
<h3>Vehicles</h3>
|
|
<div>{{ film.vehicles }}</div>
|
|
</section>
|
|
|
|
<section class="locations">
|
|
<h3>Locations</h3>
|
|
<div>{{ film.locations }}</div>
|
|
</section>
|
|
</section>
|
|
</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></style>
|