81 lines
2.1 KiB
Vue
81 lines
2.1 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>
|
|
{{ vehicle.name + " (" + vehicle.vehicle_class + ")" }}
|
|
</h1>
|
|
<h2 class="text-gray-700 mt-0" v-if="pilot">
|
|
piloted by
|
|
<nuxt-link
|
|
:to="`/people/${pilot.id}`"
|
|
class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
|
|
>
|
|
{{ pilot.name }}
|
|
</nuxt-link>
|
|
</h2>
|
|
</header>
|
|
|
|
<section class="px-4 pb-4 infos">
|
|
<p>{{ vehicle.description }}</p>
|
|
|
|
<h3>
|
|
Appears in
|
|
</h3>
|
|
<nuxt-link
|
|
v-if="film"
|
|
:to="`/films/${film.id}`"
|
|
class="inline-block rounded text-md font-semibold bg-gray-400 py-2 px-4 border-b-4 border-gray-500"
|
|
>
|
|
{{ film.title }}
|
|
</nuxt-link>
|
|
</section>
|
|
</article>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
name: "Vehicle",
|
|
head() {
|
|
return {
|
|
titleTemplate: `%s - ${this.vehicle.name}`
|
|
};
|
|
},
|
|
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.vehicles.vehicle.id !== params.id)
|
|
await store.dispatch("vehicles/getVehicle", params.id);
|
|
},
|
|
computed: {
|
|
pilot: function() {
|
|
return this.$store.getters["vehicles/getPilot"];
|
|
},
|
|
film: function() {
|
|
return this.$store.getters["vehicles/getFilm"];
|
|
},
|
|
...mapGetters({
|
|
vehicle: "vehicles/vehicle"
|
|
})
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
article header {
|
|
background-color: #85ffbd;
|
|
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
|
|
}
|
|
</style>
|