105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<main class="section">
|
|
<div class="title is-2">
|
|
<div class="tag is-large">
|
|
{{ film.isConfirmed ? "Publié" : "Brouillon" }}
|
|
</div>
|
|
<h1 class="mx-5">
|
|
<time v-if="film.projectionDate" :datetime="film.projectionDate"
|
|
>{{ new Date(film.projectionDate).toLocaleString() }}
|
|
</time>
|
|
<template v-else>À planifier</template>
|
|
-
|
|
{{ film.title }}
|
|
<span class="has-text-grey-lighter">#{{ film.id }}</span>
|
|
</h1>
|
|
<nuxt-link :to="`/admin/${id}/edition`" class="button">
|
|
<span>Éditer</span>
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="field is-grouped is-grouped-multiline">
|
|
<div v-for="(tag, index) of tags" :key="index" class="control">
|
|
<div class="tags has-addons are-medium">
|
|
<span v-if="tag.label" class="tag">{{ tag.label }}</span>
|
|
<span class="tag is-info">{{ tag.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<h2 class="title is-3">Synopsis</h2>
|
|
{{ film.synopsis }}
|
|
</div>
|
|
<div class="column">
|
|
<h2 class="title is-3">Acteurs</h2>
|
|
<ul>
|
|
<li v-for="(actor, index) of film.actors" :key="index">
|
|
{{ actor }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<iframe
|
|
v-if="film.trailerLink"
|
|
:src="film.trailerLink"
|
|
width="560"
|
|
height="315"
|
|
frameborder="0"
|
|
allowfullscreen="allowfullscreen"
|
|
/>
|
|
<template v-else>Bande annonce non renseignée</template>
|
|
</div>
|
|
<div class="column">
|
|
<img
|
|
class="alignnone wp-image-1873 size-medium"
|
|
:src="film.posterLink"
|
|
alt="affiche du film"
|
|
width="300"
|
|
height="300"
|
|
/>
|
|
</div>
|
|
<div class="column">
|
|
<img
|
|
class="alignnone wp-image-1873 size-medium"
|
|
:src="film.bannerLink"
|
|
alt="bannière du film"
|
|
width="300"
|
|
height="300"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Film } from "~/composables/types"
|
|
|
|
definePageMeta({ layout: "admin" })
|
|
const route = useRoute()
|
|
const id = route.params.id
|
|
|
|
const film = reactive<Film>({})
|
|
|
|
Object.assign(film, (await apiGet(`admin/films/${id}/`)).data.value)
|
|
useHead({ title: `Consultation de ${film.title}` })
|
|
|
|
const tags = computed(() => {
|
|
const base = [
|
|
{ label: "Durée", value: film.duration },
|
|
{ label: "Pays d'origine", value: film.originCountry },
|
|
{ label: "Année de sortie", value: film.releaseYear },
|
|
{ value: film.isInColor ? "Couleur" : "Noir et blanc" },
|
|
{ label: "Format", value: film.movieFormat },
|
|
{ value: film.languageSubtitles },
|
|
]
|
|
return base.filter((tag) => tag.value)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.title
|
|
display: flex
|
|
align-items: center
|
|
</style>
|