87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column">
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">Date de projection</label>
|
||
|
|
<div class="control">
|
||
|
|
<input class="input" type="datetime-local" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">Titre</label>
|
||
|
|
<div class="control">
|
||
|
|
<input v-model="title" class="input" type="text" @change="findFilm" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">Réalisateur</label>
|
||
|
|
<div class="control">
|
||
|
|
<input v-model="director" class="input" type="text" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label class="label">Durée</label>
|
||
|
|
<div class="control">
|
||
|
|
<input class="input" type="number" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column">
|
||
|
|
<!-- doc : https://bluefantail.github.io/bulma-list/ -->
|
||
|
|
<div class="list has-visible-pointer-controls">
|
||
|
|
<div
|
||
|
|
v-for="(foundFilm, index) of foundFilms?.results"
|
||
|
|
:key="foundFilm.id"
|
||
|
|
class="list-item"
|
||
|
|
>
|
||
|
|
<div class="list-item-image">
|
||
|
|
<figure class="image is-64x64">
|
||
|
|
<img :src="image(index)" />
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<div class="list-item-content">
|
||
|
|
<div class="list-item-title">{{ foundFilm.title }}</div>
|
||
|
|
<div class="list-item-description">
|
||
|
|
{{ foundFilm.release_date }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="list-item-controls">
|
||
|
|
<div class="buttons is-right">
|
||
|
|
<button class="button">Préremplir</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
definePageMeta({
|
||
|
|
layout: "admin",
|
||
|
|
})
|
||
|
|
|
||
|
|
const foundFilms = ref()
|
||
|
|
const title = ref<string>()
|
||
|
|
|
||
|
|
const { data: films } = await useFetch("http://localhost:8000/api/films/", {
|
||
|
|
params: { test: 2 },
|
||
|
|
})
|
||
|
|
|
||
|
|
// https://developers.themoviedb.org/3/getting-started/images
|
||
|
|
const image = computed(() => (index: number) => {
|
||
|
|
return `https://image.tmdb.org/t/p/w500${foundFilms.value?.results[index].poster_path}`
|
||
|
|
})
|
||
|
|
|
||
|
|
async function findFilm() {
|
||
|
|
foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
|
||
|
|
params: {
|
||
|
|
api_key: "INSERT API KEY HERE",
|
||
|
|
language: "fr-FR",
|
||
|
|
query: title.value,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|